test: Introduce visual regression tests using Playwright

.eslintignore

@@ -1,6 +1,10 @@
+playwright-ct.config.ts
+playwright/
+
 lint-staged.config.js
 jest.config.js
 babel.config.js
+
 coverage/
 dist/
 docs/

.eslintrc

@@ -42,6 +42,12 @@
                 "@typescript-eslint/no-unsafe-assignment": "off",
                 "@typescript-eslint/no-unsafe-return": "off"
             }
+        },
+        {
+            "files": ["*.spec.*"],
+            "rules": {
+                "jest/no-standalone-expect": "off"
+            }
         }
     ],
     "settings": {

.github/workflows/visual-regression-tests.yml

@@ -0,0 +1,18 @@
+name: Visual Regression Tests
+
+on: pull_request
+
+jobs:
+    visual-regression-tests:
+        runs-on: ubuntu-latest
+        steps:
+            - uses: actions/checkout@v2
+            - name: Setup Node.js
+              uses: actions/setup-node@v3
+              with:
+                  node-version: '16'
+                  cache: 'npm'
+            - name: Run Playwright inside Docker
+              uses: isbang/[email protected]
+              with:
+                  up-flags: '--exit-code-from playwright --abort-on-container-exit'

.gitignore

@@ -9,3 +9,9 @@ lib/
 /styles/
 coverage/
 .vscode/
+/test-results/
+/playwright-report/
+/playwright/.cache/
+!/playwright/__snapshots__/
+!/playwright/__snapshots__/**/*-linux.png
+*.tsbuildinfo

Dockerfile

@@ -0,0 +1,7 @@
+FROM node:16
+FROM mcr.microsoft.com/playwright:focal
+RUN apt-get update && apt-get -y install libnss3 libatk-bridge2.0-0 libdrm-dev libxkbcommon-dev libgbm-dev libasound-dev libatspi2.0-0 libxshmfence-dev
+
+WORKDIR /app
+COPY package.json .
+RUN npm install --quiet

docker-compose.yml

@@ -0,0 +1,8 @@
+version: "3.9"
+services:
+  playwright:
+    build: .
+    volumes:
+      - ./:/app:cached
+      - /app/node_modules
+    command: npx playwright test -c playwright-ct.config.ts

jest.config.js

@@ -1,13 +1,22 @@
 module.exports = {
     collectCoverageFrom: [
         'src/**/*.{ts,tsx,js,jsx}',
+        '!**/*.spec.{js,jsx,ts,tsx}',
         '!**/*.stories.{js,jsx,ts,tsx}',
         '!**/*storybook*.{js,jsx,ts,tsx}',
     ],
     setupFilesAfterEnv: ['./scripts/jestSetup.ts'],
     moduleNameMapper: {
         '\\.(css|less)$': '<rootDir>/src/__mocks__/styleMock.ts',
     },
+    /**
+     * Taken from the default documented value, and removed the part that matches files with
+     * ".spec.*", leaving just ".test.*". This is to preserve the ".spec.*" files for Playwright
+     * tests.
+     * @see https://jestjs.io/docs/configuration#testregex-string--arraystring
+     * @default "(/__tests__/.*|(\\.|/)(test|spec))\\.[jt]sx?$"
+     */
+    testRegex: '(/__tests__/.*|(\\.|/)test)\\.[jt]sx?$',
     testEnvironment: 'jsdom',
     watchPlugins: [
         require.resolve('jest-watch-typeahead/filename'),