Introduce Playwright Component Testing (#857)

I introduced Playwright Component Testing as replacement for Jest and RTL.

Those tests must be run within `playwright` docker container with pre-installed
browsers to ensure uniform testing environment. `.env.playwright` is created
using `postinstall` script to follow zero-config setup. `.env.playwright` can
be used to tween parameters for local development if needed.

Currently, only tests for `Alert` and `Button` components are migrated to
Playwright CT as this commit is supposed to be proof-of-concept. Rest should
be migrated in later pull request.

All visual tests use prop tests concept we already have for Jest to simplify
testing and to make it DRY. `mixPropTests()` is introduced to mix those
to create combinations to be tested.

Author: bedrich-schindler

.env.playwright.dist

@@ -0,0 +1,9 @@
+###########################
+# Playwright configuration #
+###########################
+
+# Number of workers to use to run Playwright tests
+PW_WORKERS=1
+
+# Port used by Playwright Component Testing to serve the test files
+PW_CT_PORT=3100

.github/workflows/release-management.yml

@@ -24,12 +24,18 @@ jobs:
       - name: Install
         run: npm ci
 
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
+
       - name: Lint
         run: npm run lint
 
       - name: Test
         run: npm test
 
+      - name: Test Playwright
+        run: npm run test:playwright-ct:all
+
       - name: Build
         run: npm run build
 

.github/workflows/test.yml

@@ -25,8 +25,22 @@ jobs:
       - name: Install
         run: npm ci
 
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
+
       - name: Test and generate code coverage info
         run: npm test
 
+      - name: Test Playwright and generate test report
+        run: npm run test:playwright-ct:all
+
       - name: Upload code coverage info to Coveralls
         uses: coverallsapp/github-action@v2
+
+      - name: Upload Playwright test report
+        uses: actions/upload-artifact@v4
+        if: ${{ !cancelled() }}
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30

.gitignore

@@ -6,3 +6,8 @@
 .env
 statistics.html
 !.gitkeep
+
+# Playwright
+.env.playwright
+/playwright-report/
+/tests/playwright/.temp/

CONTRIBUTING.md

@@ -70,6 +70,23 @@ docker compose run --rm node_shell
     docker compose run --rm mkdocs_build_site
     ```
 
+#### Playwright
+
+You need to run npm commands such as `test:playwright-ct:all` and
+`test:playwright-ct:all-with-update` within `playwright` docker container.
+
+To log into the container, run:
+
+```bash
+docker compose run --rm playwright
+```
+
+and then run the commands within the `playwright` container:
+
+```bash
+npm run test:playwright-ct:all
+```
+
 ## Git Workflow
 
 In order for the automation to work in the best possible way (we use GitHub
@@ -156,13 +173,13 @@ To keep React UI consistent and predictable the following guidelines should be o
 1. If component accepts the `children` prop it should be either required or the element
    should return `null` when no children are provided.
 2. When forwarding HTML attributes to the component the following rules should
-    be observed:
+   be observed:
     1. If the component internally instantiates one or more interactive
-        (clickable/editable) elements, the attributes should be forwarded to
+       (clickable/editable) elements, the attributes should be forwarded to
        all of them.
     2. If the component does not internally instantiate an interactive
-        (clickable/editable) element, the attributes should be forwarded to the
-        root element of the component.
+       (clickable/editable) element, the attributes should be forwarded to the
+       root element of the component.
 
 ## Documenting
 

docker-compose.yml

@@ -24,6 +24,13 @@ services:
     extends: node
     entrypoint: bash
 
+  # For running Playwright tests
+  playwright:
+    build: docker/playwright
+    user: ${COMPOSE_UID-1000}:${COMPOSE_GID-1000}
+    volumes:
+      - .:/workspace:z
+
   # Build services
   mkdocs_build_site:
     extends: mkdocs

docker/playwright/Dockerfile

@@ -0,0 +1,3 @@
+FROM        mcr.microsoft.com/playwright:v1.50.1
+RUN         mkdir /workspace
+WORKDIR     /workspace

jest.config.js

@@ -14,6 +14,9 @@ module.exports = {
     '<rootDir>/tests/jest/setupTestingLibrary.js',
   ],
   testEnvironment: 'jsdom',
+  testMatch: [
+    '**/*.test.{js,jsx}',
+  ],
   transformIgnorePatterns: [
     'node_modules/(?!(@react-ui-org))',
   ],