test(data-hunter): add e2e

.gitignore

@@ -44,9 +44,13 @@ out
 .env*
 /**/*/.env*
 !**/.env*.example
+!**/*-e2e/.env.test
 
 # yarn
 .yarn
 
 # lint
 .eslintcache
+
+# test
+playwright-report

apps/forms-e2e/.env.test

@@ -0,0 +1,8 @@
+# These are the environment variables used in the test environment
+
+DATAJEGER_EMAIL_ADDRESS=datajegeren@test.no
+FDK_MAIL_SERVICE_ENDPOINT=/api/sendmail
+FDK_MAIL_SERVICE_API_KEY=testapikey
+FDK_BASE_URI=https://staging.fellesdatakatalog.digdir.no
+FDK_COMMUNITY_BASE_URI=https://community.staging.fellesdatakatalog.digdir.no
+FDK_REGISTRATION_BASE_URI=https://registrering.staging.fellesdatakatalog.digdir.no

apps/forms-e2e/.eslintrc.json

@@ -16,7 +16,9 @@
     },
     {
       "files": ["src/**/*.{ts,js,tsx,jsx}"],
-      "rules": {}
+      "rules": {
+        "playwright/expect-expect": "off"
+      }
     }
   ]
 }

apps/forms-e2e/playwright.config.ts

@@ -2,6 +2,8 @@ import { defineConfig, devices } from '@playwright/test';
 import { nxE2EPreset } from '@nx/playwright/preset';
 
 import { workspaceRoot } from '@nx/devkit';
+import path = require('path');
+import * as dotenv from 'dotenv';
 
 // For CI, you may want to set BASE_URL to the deployed application.
 const baseURL = process.env['BASE_URI'] || 'http://127.0.0.1:3000';
@@ -10,13 +12,14 @@ const baseURL = process.env['BASE_URI'] || 'http://127.0.0.1:3000';
  * Read environment variables from file.
  * https://github.com/motdotla/dotenv
  */
-// require('dotenv').config();
+dotenv.config({ path: path.resolve(__dirname, '.env.test') });
 
 /**
  * See https://playwright.dev/docs/test-configuration.
  */
 export default defineConfig({
   ...nxE2EPreset(__filename, { testDir: './src' }),
+  reporter: 'html',
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
     baseURL,

apps/forms-e2e/project.json

@@ -2,7 +2,8 @@
   "name": "forms-e2e",
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "sourceRoot": "apps/forms-e2e/src",
-  "implicitDependencies": ["forms"],
   "// targets": "to see all targets run: nx show project forms-e2e --web",
-  "targets": {}
+  "targets": {
+
+  }
 }

apps/forms-e2e/src/data-hunter/data/inputData.json

@@ -0,0 +1,9 @@
+{
+  "dataset": "John Wick's dataset",
+  "location": "Stockholm",
+  "efforts": "High",
+  "name": "John Wick",
+  "email": "johnwick@email.com",
+  "organizationNumber": "123456789",
+  "phoneNumber": "12345678"
+}

apps/forms-e2e/src/data-hunter/fixtures/basePage.ts

@@ -0,0 +1,14 @@
+import { test as base } from '@playwright/test';
+import FormPage from '../page-object-model/formPage';
+import { generateAccessibilityBuilder } from '../utils/helpers';
+
+export const test = base.extend({
+  dataHunterFormPage: async ({ page }, use) => {
+    const accessibilityBuilder = await generateAccessibilityBuilder(page);
+    const dataHunterFormPage = new FormPage(page, accessibilityBuilder);
+    await dataHunterFormPage.goto();
+    await use(dataHunterFormPage);
+  },
+});
+
+export { expect } from '@playwright/test';

apps/forms-e2e/src/data-hunter/page-object-model/formPage.ts

@@ -0,0 +1,64 @@
+import { Dictionary, getDictionary } from '@fdk-frontend/dictionaries';
+import { expect, Page } from '@playwright/test';
+import * as mockData from '../data/inputData.json';
+import type AxeBuilder from '@axe-core/playwright';
+
+export default class FormPage {
+  dataHunterPageUrl = '/forms/en/data-hunter';
+  page: Page;
+  dictionary: Dictionary;
+  accessibilityBuilder;
+
+  constructor(page: Page, accessibilityBuilder?: AxeBuilder) {
+    this.page = page;
+    getDictionary('en').then((dict) => (this.dictionary = dict));
+    this.accessibilityBuilder = accessibilityBuilder;
+  }
+
+  public async goto() {
+    await this.page.goto(this.dataHunterPageUrl);
+  }
+
+  public async checkAccessibility() {
+    if (!this.accessibilityBuilder) {
+      return;
+    }
+    const result = await this.accessibilityBuilder.analyze();
+    expect.soft(result.violations).toEqual([]);
+  }
+
+  // Locators
+  pageTitle = () => this.page.getByRole('heading', { name: this.dictionary.dataHunterForm.title });
+  pageDescription = () => this.page.getByText(this.dictionary.dataHunterForm.description);
+  datasetInput = () => this.page.getByLabel(this.dictionary.dataHunterForm.dataset.label);
+  locationInput = () => this.page.getByLabel(this.dictionary.dataHunterForm.location.label);
+  attemptsInput = () => this.page.getByLabel(this.dictionary.dataHunterForm.efforts.label);
+  nameInput = () => this.page.getByLabel(this.dictionary.name);
+  emailInput = () => this.page.getByLabel(this.dictionary.email);
+  organizationNumberInput = () => this.page.getByLabel(this.dictionary.organizationNumber);
+  phoneNumberInput = () => this.page.getByLabel(this.dictionary.phoneNumber);
+  submitButton = () => this.page.getByRole('button', { name: this.dictionary.submitRequest });
+
+  // Actions
+  public async checkPageTitleText() {
+    await expect(this.pageTitle()).toHaveText(this.dictionary.dataHunterForm.title);
+  }
+
+  public async checkPageDescriptionText() {
+    await expect(this.pageDescription()).toHaveText(this.dictionary.dataHunterForm.description);
+  }
+
+  public async fillForm() {
+    await this.datasetInput().fill(mockData.dataset);
+    await this.locationInput().fill(mockData.location);
+    await this.attemptsInput().fill(mockData.efforts);
+    await this.nameInput().fill(mockData.name);
+    await this.emailInput().fill(mockData.email);
+    await this.organizationNumberInput().fill(mockData.organizationNumber);
+    await this.phoneNumberInput().fill(mockData.phoneNumber);
+  }
+
+  public async submitForm() {
+    await this.submitButton().click();
+  }
+}

apps/forms-e2e/src/data-hunter/tests/formPage.spec.ts

@@ -0,0 +1,17 @@
+import { test } from '../fixtures/basePage';
+
+
+
+test('should not have any automatically detectable accessibility issues', async ({ dataHunterFormPage }) => {
+  await dataHunterFormPage.checkAccessibility();
+});
+
+test('check page text', async ({ dataHunterFormPage }) => {
+  await dataHunterFormPage.checkPageTitleText();
+  await dataHunterFormPage.checkPageDescriptionText();
+});
+
+test('fill form', async ({ dataHunterFormPage }) => {
+  await dataHunterFormPage.fillForm();
+  await dataHunterFormPage.submitForm();
+});

apps/forms-e2e/src/data-hunter/utils/helpers.ts

@@ -0,0 +1,13 @@
+import AxeBuilder from "@axe-core/playwright";
+import { Page } from "@playwright/test";
+
+export const generateAccessibilityBuilder = async (page: Page) =>
+  new AxeBuilder({ page }).withTags([
+    'wcag2a',
+    'wcag2aa',
+    'wcag2aaa',
+    'wcag21a',
+    'wcag21aa',
+    'wcag22aa',
+    'best-practice',
+  ]);

apps/forms-e2e/tsconfig.json

@@ -4,7 +4,8 @@
     "allowJs": true,
     "outDir": "../../dist/out-tsc",
     "module": "commonjs",
-    "sourceMap": false
+    "sourceMap": false,
+    "resolveJsonModule": true
   },
   "include": [
     "**/*.ts",

apps/forms/app/[lang]/data-hunter/components/data-hunter-form/data-hunter-form.module.css

@@ -16,6 +16,7 @@
 .button {
   margin-top: 3rem;
   align-self: flex-start;
+  background-color: #0057A3;
 }
 
 .orgNumberField {

libs/ui/src/lib/header/components/menu-language/index.tsx

@@ -27,7 +27,7 @@ const LanguageMenu = ({ triggerText, className }: Props) => {
   return (
     <DropdownMenu size='small'>
       <DropdownMenu.Trigger>
-        <GlobeIcon />
+        <GlobeIcon role={'presentation'} />
         {triggerText}
       </DropdownMenu.Trigger>
       <DropdownMenu.Content>

libs/ui/src/lib/header/components/menu-navigation/index.tsx

@@ -22,7 +22,7 @@ const NavigationMenu = ({ triggerText, links }: NavigationMenuProps) => (
   <DropdownMenu size='small'>
     <DropdownMenuTrigger>
       {triggerText}
-      <ChevronDownIcon />
+      <ChevronDownIcon role={'presentation'} />
     </DropdownMenuTrigger>
     <DropdownMenuContent>
       <DropdownMenuGroup>

libs/ui/src/lib/layout-root/index.tsx

@@ -22,7 +22,7 @@ const RootLayout = async ({ children, params }: RootLayoutProps) => {
     <html lang={params.lang}>
       <body>
         <Header dictionary={dictionary} />
-        {children}
+        <main>{children}</main>
         <Footer dictionary={dictionary} />
       </body>
     </html>

package.json

@@ -6,7 +6,7 @@
   "engines": {
     "node": ">=20.11.1"
   },
-  "packageManager": "yarn@4.1.1",
+  "packageManager": "yarn@4.2.2",
   "lint-staged": {
     "*.tsx": [
       "eslint --cache --fix",
@@ -40,6 +40,7 @@
     "postinstall": "husky install"
   },
   "dependencies": {
+    "@axe-core/playwright": "^4.9.0",
     "@digdir/designsystemet-css": "^0.4.0",
     "@digdir/designsystemet-react": "^0.57.0",
     "@digdir/designsystemet-theme": "^0.15.1",
@@ -63,7 +64,7 @@
     "@nx/playwright": "18.2.4",
     "@nx/react": "18.2.4",
     "@nx/workspace": "18.2.4",
-    "@playwright/test": "^1.43.0",
+    "@playwright/test": "^1.44.0",
     "@swc-node/register": "~1.9.0",
     "@swc/cli": "~0.3.12",
     "@swc/core": "~1.4.13",