feat: add e2e testing + e2e accessibility test (#7688)

* add accessibility workflow

* Update name

* fix function name

* add light mode/dark mode testing, clean up logging

* add some pages to show violations

* add spacing

* revert page changes

* feat: add e2e testing

* endline

* test css change that fails e2e test

* revert test css change

* test css change

* revert css change

* remove transformIgnorePatterns

Author: hbuchel

.github/workflows/build.yml

@@ -3,6 +3,8 @@ on:
   pull_request:
     branches: [main, next-release/main]
     types: [opened, synchronize]
+env:
+  BUILD_DIR: 'client/www/next-build'
 jobs:
   build:
     name: Build
@@ -17,8 +19,14 @@ jobs:
       - name: Install Dependencies
         run: yarn
       - name: Run tests
-        run: yarn prebuild && yarn test
+        run: yarn prebuild && yarn test:unit
       - name: Run Build
         run: yarn build
         env:
           NODE_OPTIONS: --max_old_space_size=4096
+      - name: Run site
+        run: | 
+          python -m http.server 3000 -d ${{ env.BUILD_DIR }} &
+          sleep 5
+      - name: Run E2E Tests
+        run: yarn test:e2e 

e2e/homepage.test.js

@@ -0,0 +1,23 @@
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const { AxePuppeteer } = require('@axe-core/puppeteer');
+
+const sleep = (ms) => new Promise((res) => setTimeout(res, ms));
+
+describe('home page', () => {
+  beforeAll(async () => {
+    await page.goto(`http://localhost:3000/`);
+    await page.waitForSelector('h1');
+  });
+
+  it('should display the home page with no accessibility violations', async () => {
+    const results = await new AxePuppeteer(page).analyze();
+    expect(results.violations).toHaveLength(0);
+  });
+
+  it('should display the home page with no accessibility violations in dark mode', async () => {
+    await page.click('button[title="Dark mode"]');
+    await sleep(300);
+    const results = await new AxePuppeteer(page).analyze();
+    expect(results.violations).toHaveLength(0);
+  });
+});

e2e/jest.e2e.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  rootDir: './',
+  preset: 'jest-puppeteer',
+  testMatch: ['<rootDir>/*.test.js']
+};

jest.config.js

@@ -1,27 +1,7 @@
 module.exports = {
-  preset: './preset.js',
   rootDir: './',
-  roots: ['<rootDir>/src', '<rootDir>/tasks'],
-  testEnvironment: 'jsdom',
-  transform: {
-    '^.+\\.(ts|tsx|js|mjs)$': [
-      'babel-jest',
-      {
-        presets: ['next/babel']
-      }
-    ]
-  },
-  testPathIgnorePatterns: ['capi', '.next', 'client'],
-  setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
-  moduleNameMapper: {
-    '\\.(css|less|scss)$': '<rootDir>/src/__mocks__/styleMock.js',
-    '@docsearch/css(.*)': '<rootDir>/src/__mocks__/styleMock.js',
-    '@/components/(.*)': '<rootDir>/src/components/$1',
-    '@/constants/(.*)': '<rootDir>/src/constants/$1',
-    '@/utils/(.*)': '<rootDir>/src/utils/$1',
-    '@/data/(.*)': '<rootDir>/src/data/$1',
-    '@/directory/(.*)': '<rootDir>/src/directory/$1',
-    '@/themes/(.*)': '<rootDir>/src/themes/$1'
-  },
-  transformIgnorePatterns: ['node_modules/(?!variables/.*)']
+  projects: [
+    '<rootDir>/jest.unit.config.js',
+    '<rootDir>/e2e/jest.e2e.config.js'
+  ]
 };

jest.unit.config.js

@@ -0,0 +1,26 @@
+module.exports = {
+  preset: './preset.js',
+  rootDir: './',
+  roots: ['<rootDir>/src', '<rootDir>/tasks'],
+  testEnvironment: 'jsdom',
+  transform: {
+    '^.+\\.(ts|tsx|js|mjs)$': [
+      'babel-jest',
+      {
+        presets: ['next/babel']
+      }
+    ]
+  },
+  testPathIgnorePatterns: ['capi', '.next', 'client'],
+  setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
+  moduleNameMapper: {
+    '\\.(css|less|scss)$': '<rootDir>/src/__mocks__/styleMock.js',
+    '@docsearch/css(.*)': '<rootDir>/src/__mocks__/styleMock.js',
+    '@/components/(.*)': '<rootDir>/src/components/$1',
+    '@/constants/(.*)': '<rootDir>/src/constants/$1',
+    '@/utils/(.*)': '<rootDir>/src/utils/$1',
+    '@/data/(.*)': '<rootDir>/src/data/$1',
+    '@/directory/(.*)': '<rootDir>/src/directory/$1',
+    '@/themes/(.*)': '<rootDir>/src/themes/$1'
+  }
+};

package.json

@@ -58,6 +58,7 @@
     "jest": "^29.7.0",
     "jest-cli": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
+    "jest-puppeteer": "^10.0.1",
     "json5": "^2.2.3",
     "lint-staged": "^14.0.0",
     "next-bundle-analyzer": "^0.6.7",
@@ -101,7 +102,8 @@
     "clean": "rm -rf node_modules yarn.lock",
     "countGen2": "node tasks/count-gen2pages.mjs",
     "refresh": "yarn clean && yarn",
-    "test": "jest --coverage",
+    "test:unit": "jest --projects jest.unit.config.js --coverage",
+    "test:e2e": "jest --projects e2e/jest.e2e.config.js",
     "dev": "yarn prebuild && next dev",
     "spellcheck": "cspell \"src/**/*.mdx\" --no-progress",
     "spellcheck-diff": "git diff --name-only --cached | awk \"/src.*\\.mdx/{print}\" | npx cspell --no-must-find-files --file-list stdin",