test: add visual regression testing based on playwright (#33)

.github/workflows/build.yml

@@ -1,6 +1,15 @@
 name: build
 
-on: [push, pull_request, workflow_dispatch]
+on:
+  push:
+    branches:
+      - 'main'
+      - 'release/*'
+  pull_request:
+    branches:
+      - '**'
+  workflow_dispatch:
+  workflow_call:
 
 concurrency:
   group: ci-${{ github.sha }}
@@ -26,3 +35,64 @@ jobs:
           key: build-${{ runner.os }}-${{ github.sha }}
           path: |
             dist
+            loader
+            www
+            icons
+
+  visual-test:
+    needs: [build]
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    container:
+      image: mcr.microsoft.com/playwright:v1.32.1-focal
+      env:
+        DEBIAN_FRONTEND: noninteractive
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Remove .npmrc
+        run: rm .npmrc
+
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          registry-url: 'https://registry.npmjs.org'
+          scope: '@siemens'
+
+      - name: configure yarnrc
+        run: |
+          echo 'yarn-offline-mirror ".yarn-cache/"' >> .yarnrc
+          echo 'yarn-offline-mirror-pruning true' >> .yarnrc
+
+      - uses: actions/cache@v2
+        id: cache
+        with:
+          path: ./node_modules
+          key: yarn-${{ runner.os }}-modules-${{ hashFiles('yarn.lock') }}
+
+      - name: install
+        if: steps.cache.outputs.cache-hit != 'true'
+        run: yarn install --frozen-lockfile --no-progress
+
+      - uses: actions/cache@v2
+        id: build
+        with:
+          key: build-${{ runner.os }}-${{ github.sha }}
+          path: |
+            dist
+            loader
+            www
+            icons
+
+      - name: Install Playwright Browsers
+        run: yarn playwright install chromium
+
+      - name: test
+        run: yarn test:e2e
+
+      - uses: actions/upload-artifact@v2
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 1

.gitignore

@@ -36,3 +36,6 @@ test-results
 playwright-report
 
 icons/
+/test-results/
+/playwright-report/
+/playwright/.cache/

.npmrc

@@ -1 +1,2 @@
-registry = "https://registry.npmjs.org"
+registry = "https://registry.npmjs.org"
+@siemens:registry=https://registry.npmjs.org

e2e/all-icon.e2e.ts

@@ -0,0 +1,61 @@
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { ConsoleMessage, expect, test } from '@playwright/test';
+import * as iconsFile from './../dist/sample.json';
+import * as icons from './../icons';
+
+import { reservedKeywords } from './../scripts/reserved-keywords';
+
+function toCamel(snakeCaseString: string): string {
+  const words = snakeCaseString.split('-');
+  const camelCaseString =
+    words[0] +
+    words
+      .slice(1)
+      .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+      .join('');
+  return camelCaseString;
+}
+
+iconsFile.icons
+  .map(iconName => {
+    if (reservedKeywords.has(iconName)) {
+      return {
+        iconName: iconName,
+        esImportName: `_${iconName}`,
+      };
+    }
+
+    return {
+      iconName: iconName,
+      esImportName: iconName,
+    };
+  })
+  .forEach(({ iconName, esImportName }) => {
+    test(`should show ${iconName}`, async ({ page }) => {
+      const dataUrlSvg = icons[toCamel(esImportName)];
+      await page.goto(`http://127.0.0.1:8080/e2e/icon-by-name.html?icon=${iconName}`);
+
+      await page.evaluate(
+        ([url]) => {
+          (window as any).__SVG_DATA__ = url;
+        },
+        [dataUrlSvg],
+      );
+
+      await page.waitForEvent('console', {
+        predicate: (message: ConsoleMessage) => {
+          return message.text() === 'icon-loaded-success';
+        },
+      });
+
+      expect(await page.locator('#mount').screenshot()).toMatchSnapshot();
+    });
+  });