feat(playwright): add Playwright critical path tests for event creation

Also:
- Remove use of broken & unused
  NEXT_PUBLIC_CMS_TERMS_OF_SERVICE_SLUG_(FI|EN|SV) environment variables
  - This was done because Playwright couldn't run successfully with the
    import.meta.env.NEXT_PUBLIC_CMS_TERMS_OF_SERVICE_SLUG_* for some
    reason
- Fix / normalize some Swedish translations
- Add data-testid-values to EventForm/CreateOccurrencePage/LocationForm
  parts for ease-of-use in Playwright tests
- Regenerate generated GraphQL types and fix their gql imports to work
  with Playwright
- Add mocks for Playwright tests, mostly copy-pasted from actual network
  traffic and manually modified for test purposes
- Remove running Playwright tests from Github actions, as now the tests
  require a secret and that can't be easily provided in that environment
  currently i.e. Playwright tests need to be moved to use City of
  Helsinki's Azure DevOps environment instead

refs PT-1920

Author: karisal-anders

.env.playwright.local.example

@@ -1 +1,7 @@
 VITE_APP_ORIGIN=http://localhost:3000
+VITE_APP_API_URI=http://localhost:8081/graphql
+BROWSER_TESTS_JWT_SIGN_SECRET=your-256-bit-secret
+BROWSER_TESTS_JWT_ISSUER=https://kultus-admin-ui.test.hel.ninja
+VITE_APP_OIDC_API_CLIENT_ID=kultus-api-dev
+VITE_APP_OIDC_CLIENT_ID=kultus-admin-ui-dev
+VITE_APP_OIDC_AUTHORITY=https://tunnistus.test.hel.ninja/auth/realms/helsinki-tunnistus

.github/workflows/playwright.yml

@@ -12,6 +12,7 @@ generates:
       - 'typescript-operations'
       - 'typescript-react-apollo'
     config:
+      gqlImport: graphql-tag#gql
       withHooks: true
       withComponent: false
   src/generated/graphql-cms.tsx:
@@ -22,5 +23,6 @@ generates:
       - 'typescript-operations'
       - 'typescript-react-apollo'
     config:
+      gqlImport: graphql-tag#gql
       withHooks: true
       withComponent: false

codegen.yml

@@ -163,6 +163,21 @@ export default [
     },
   },
 
+  // Overrides for Playwright related typescript files
+  {
+    files: ['src/playwright/**/*.ts', 'src/playwright/**/*.tsx'],
+    rules: {
+      '@typescript-eslint/no-unused-vars': [
+        'error',
+        {
+          // Ignore mock arguments, e.g. mocksForSearchPage in Playwright tests.
+          // This way mock fixtures can be used without having to always disable the rule.
+          argsIgnorePattern: '^(mock|mocks|mocking|mocked)[A-Z].*$',
+        },
+      ],
+    },
+  },
+
   // Overrides for test files
   {
     files: ['**/*.test.js', '**/*.test.ts', '**/*.test.jsx', '**/*.test.tsx'],

eslint.config.mjs

@@ -44,7 +44,11 @@
         "To fix https://github.com/City-of-Helsinki/palvelutarjotin-admin/security/dependabot/125",
         "NOTE: This can be removed if hds-react starts to depend on >=v1 cookie"
       ]
-    }
+    },
+    "Why is playwright version 1.52.0 || ^1.54.0?": [
+      "Playwright 1.53.0 has a regression that causes tests to fail",
+      "See https://github.com/microsoft/playwright/issues/36307"
+    ]
   },
   "resolutions": {
     "@testing-library/dom": "^10.4.0",
@@ -60,7 +64,7 @@
     "@date-fns/tz": "^1.2.0",
     "@datepicker-react/hooks": "^2.8.4",
     "@faker-js/faker": "^9.7.0",
-    "@playwright/test": "^1.52.0",
+    "@playwright/test": "1.52.0 || ^1.54.0",
     "@sentry/browser": "^9.15.0",
     "@stylistic/eslint-plugin": "^4.2.0",
     "@testing-library/jest-dom": "^6.6.3",
@@ -73,6 +77,7 @@
     "@types/draftjs-to-html": "^0.8.4",
     "@types/file-saver": "^2.0.7",
     "@types/html-to-draftjs": "^1.5.0",
+    "@types/jsonwebtoken": "^9.0.9",
     "@types/lodash": "^4.17.16",
     "@types/node": "^20.17.43",
     "@types/pretty": "^2.0.3",
@@ -119,10 +124,10 @@
     "i18next-intervalplural-postprocessor": "^3.0.0",
     "ics": "^3.8.1",
     "jsdom": "^26.1.0",
+    "jsonwebtoken": "^9.0.2",
     "msw": "^2.7.6",
     "oidc-client": "^1.11.5",
     "path": "^0.12.7",
-    "playwright": "^1.52.0",
     "react": "^18.3.1",
     "react-content-loader": "^7.0.2",
     "react-dom": "^18.3.1",
@@ -165,8 +170,10 @@
     "typecheck": "tsc --project ./tsconfig.json --noEmit",
     "codegen": "cross-env DOTENV_CONFIG_PATH=\"./.env.development.local\" graphql-codegen -r dotenv/config --config codegen.yml",
     "codegen:browser": "playwright codegen",
-    "test:browser": "playwright test",
-    "test:browser:ci": "yarn test:browser"
+    "test:browser:install": "playwright install",
+    "test:browser": "playwright test --ui",
+    "test:browser:ci": "playwright test",
+    "test:browser:report": "playwright show-report report/html"
   },
   "browserslist": {
     "production": [
@@ -192,6 +199,7 @@
     "doctoc": "^2.2.1",
     "husky": "^9.1.7",
     "lint-staged": "^15.5.2",
+    "playwright": "1.52.0 || ^1.54.0",
     "postcss-scss": "^4.0.9",
     "prettier": "^3.5.3",
     "pretty": "^2.0.0"
@@ -203,4 +211,4 @@
       "yarn test:staged"
     ]
   }
-}
+}

package.json

@@ -22,27 +22,62 @@ const useDevServer = webServerType == 'development';
 
 // See https://playwright.dev/docs/test-configuration.
 export default defineConfig({
+  // https://playwright.dev/docs/api/class-testconfig#test-config-output-dir
+  // The output directory for files created during test execution.
+  outputDir: './report/test-results',
+
+  // https://playwright.dev/docs/api/class-testconfig#test-config-test-dir
+  // Directory that will be recursively scanned for test files.
   testDir: './src/playwright/tests',
+
   // Run tests in files in parallel
   fullyParallel: true,
+
   // Fail the build on CI if you accidentally left test.only in the source code.
   forbidOnly: !!process.env.CI,
+
   // Retry on CI only
   retries: process.env.CI ? 3 : 0,
+
   // Opt out of parallel tests on CI.
   workers: process.env.CI ? 1 : undefined,
+
   // Reporter to use. See https://playwright.dev/docs/test-reporters
-  reporter: 'html',
+  reporter: [
+    // For CI pipeline:
+    ['junit', { outputFile: 'report/playwright-junit-results.xml' }],
+    // For local development:
+    [
+      'html',
+      {
+        open: process.env.CI ? 'never' : 'on-failure',
+        outputFolder: 'report/html',
+      },
+    ],
+  ],
+
   // Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions.
   use: {
     // Base URL to use in actions like `await page.goto('/')`.
     baseURL: process.env.VITE_APP_ORIGIN,
+
     // Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer
     trace: 'on-first-retry',
 
+    // Use Finnish locale and timezone by default.
     locale: 'fi-FI',
     timezoneId: 'Europe/Helsinki',
+
+    // Use no cookies by defaults.
     storageState: { cookies: [], origins: [] },
+
+    screenshot: {
+      fullPage: true,
+      mode: 'only-on-failure',
+    },
+
+    // https://playwright.dev/docs/videos
+    video: 'on-first-retry',
   },
 
   // Test with the following browsers:
@@ -56,6 +91,6 @@ export default defineConfig({
   webServer: {
     command: useDevServer ? 'yarn dev' : 'yarn serve',
     url: process.env.VITE_APP_ORIGIN,
-    reuseExistingServer: !process.env.CI,
+    reuseExistingServer: true,
   },
 });

playwright.config.ts

@@ -32,17 +32,13 @@ export const PRIVACY_POLICY_LINKS = {
   fi: 'https://hkih.production.geniem.io/uploads/sites/5/2022/11/739f5edc-rekisteriseloste-kultus.fi_.pdf',
   en: 'https://hkih.production.geniem.io/uploads/sites/5/2022/11/bf2f8d34-rekisteriseloste-kultus.fi_en.pdf',
   sv: 'https://hkih.production.geniem.io/uploads/sites/5/2022/11/0d425f44-rekisteriseloste-kultus.fi_sv.pdf',
-};
+} as const;
 
 export const TERMS_OF_SERVICE_SLUGS = {
-  fi: import.meta.env.NEXT_PUBLIC_CMS_TERMS_OF_SERVICE_SLUG_FI ?? 'kayttoehdot',
-  en:
-    import.meta.env.NEXT_PUBLIC_CMS_TERMS_OF_SERVICE_SLUG_EN ??
-    'terms-of-service',
-  sv:
-    import.meta.env.NEXT_PUBLIC_CMS_TERMS_OF_SERVICE_SLUG_SV ??
-    'anvandarvillkor',
-};
+  fi: 'kayttoehdot',
+  en: 'terms-of-service',
+  sv: 'anvandarvillkor',
+} as const;
 
 export const createEmptyLocalizedObject = (): LocalisedObject => ({
   [SUPPORT_LANGUAGES.FI]: '',

src/constants.ts

@@ -83,7 +83,7 @@ class AppConfig {
     return getEnvAsUrl('VITE_APP_ORIGIN').origin;
   }
 
-  static get kukkuuApiGraphqlEndpoint() {
+  static get kultusApiGraphqlEndpoint() {
     return getEnvOrError(import.meta.env.VITE_APP_API_URI, 'VITE_APP_API_URI');
   }
 

src/domain/app/AppConfig.ts

@@ -30,7 +30,7 @@ let apolloClient: ApolloClient<NormalizedCacheObject> | undefined;
  */
 function createApolloClient(): ApolloClient<NormalizedCacheObject> {
   const httpLink = createUploadLink({
-    uri: AppConfig.kukkuuApiGraphqlEndpoint,
+    uri: AppConfig.kultusApiGraphqlEndpoint,
     fetch,
   });
 

src/domain/app/apollo/apolloClient.ts

@@ -416,7 +416,7 @@
       "descriptionAddImage": "Lägg till en bild för evenemanget. Du behöver också namnet på fotografen och en publiceringslicens. Maximal storlek 2 megabyte. Rekommenderad bildstorlek är 1200 x 800 px.",
       "imageAltTextHelp": "Beskrivning av innehållet i bilden. Lägg till licensinformation också.",
       "labelDescription": "Beskrivning (SV)",
-      "labelMandatoryAdditionalInformation": "De som anmäler sig måste ange tilläggsinformation.",
+      "labelMandatoryAdditionalInformation": "De som anmäler sig måste ange tilläggsinformation",
       "guidanceTextMandatoryAdditionalInformation": "Ifall du vill ha tilläggsinformation om gruppen i samband med bokningen meddela om detta i beskrivningen av evenemanget",
       "labelEnrolmentEndDays": "Anmälan stänger X dagar före evenemangstiden",
       "labelEnrolmentStartDate": "Registrering börjar",
@@ -459,7 +459,7 @@
     "offers": {
       "title": "Evenemangets prissättning",
       "labelIsFree": "Evenemanget är gratis",
-      "labelPrice": "Pris €",
+      "labelPrice": "Pris, €",
       "labelPriceDescription": "Tilläggsinformation (SV)",
       "placeholderPriceDescription": "pris per barn/grupp,\nhur man betala (faktura eller bankkort),\navbokningspolicy"
     },
@@ -520,7 +520,7 @@
     "buttonLoadMore": "Visa mer",
     "buttonNewEvent": "Lägg till ett nytt evenemang",
     "eventCard": {
-      "ariaLabelOpenOccurrences": "Gå till evenemangstid  av {{eventName}}",
+      "ariaLabelOpenOccurrences": "Gå till evenemangstid av {{eventName}}",
       "textEnrolments": "{{count}} registrerad",
       "textEnrolments_other": "{{count}} registrerade",
       "textExternalEnrolments": "Anmälan på en annan webbplats",
@@ -855,7 +855,7 @@
     "age34": "3-4 åringar",
     "other": "Annan grupp"
   },
-  "Evenemangsplats": {
+  "venue": {
     "venueDataFields": {
       "helperLocationDescription": "Ytterligare information för att underlätta besöket",
       "labelHasClothingStorage": "Förvaring av ytterkläder",