Refactor web-test-runner configuration to use ES module syntax, enhance timeout settings, and integrate visual regression plugin. Update GitHub Actions workflow to use specific versions for actions and streamline dependency installation, improving CI performance and compatibility.

Author: alexpmule

.github/workflows/deployment.yml

@@ -17,51 +17,41 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        os: [ubuntu-22.04]
+        os: [ubuntu-20.04]
     runs-on: ${{ matrix.os }}
     steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v1
         with:
           node-version: 18
-          cache: 'npm'
+      - uses: microsoft/playwright-github-action@v1
+      - uses: actions/cache@v3
+        with:
+          path: ~/.npm
+          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-node-
       - name: Install dependencies
-        run: |
-          npm install -g [email protected]
-          if [ ! -f "package-lock.json" ]; then
-            npm install
-          else
-            npm ci
-          fi
-      - name: Generate AMF models
-        run: npm run prepare
-      - name: Install Playwright browsers
-        run: |
-          npx playwright install --with-deps chromium firefox webkit
+        run: npm ci
       - name: Run tests
         run: npm test
   test_win:
     name: "Windows"
     runs-on: windows-latest
     steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v1
         with:
           node-version: 18
-          cache: 'npm'
+      - uses: microsoft/playwright-github-action@v1
+      - uses: actions/cache@v3
+        with:
+          path: ~/.npm
+          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-node-
       - name: Install dependencies
-        run: |
-          npm install -g [email protected]
-          if (!(Test-Path "package-lock.json")) {
-            npm install
-          } else {
-            npm ci
-          }
-      - name: Generate AMF models
-        run: npm run prepare
-      - name: Install Playwright browsers
-        run: |
-          npx playwright install --with-deps chromium firefox webkit
+        run: npm ci
       - name: Run tests
         run: npm test
   tag:
@@ -73,22 +63,20 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
-        uses: actions/checkout@v4
+        uses: actions/checkout@v2
         with:
           fetch-depth: 0
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v2
         with:
-          node-version: '18'
+          node-version: '16.x'
           registry-url: 'https://registry.npmjs.org'
-          cache: 'npm'
-      - name: Install dependencies
-        run: |
-          npm install -g [email protected]
-          if [ ! -f "package-lock.json" ]; then
-            npm install
-          else
-            npm ci
-          fi
+      - uses: actions/cache@v3
+        with:
+          path: ~/.npm
+          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-node-
+      - run: npm install
       - name: Read version from package.json
         uses: culshaw/read-package-node-version-actions@v1
         id: package-node-version

web-test-runner.config.cjs

@@ -1,50 +1,40 @@
-const { playwrightLauncher } = require('@web/test-runner-playwright');
+import { visualRegressionPlugin } from '@web/test-runner-visual-regression/plugin'
 
-module.exports = {
+export default {
   files: 'test/**/*.test.js',
   nodeResolve: true,
-  coverage: true,
-  browsers: [
-    playwrightLauncher({ product: 'chromium' }),
-    playwrightLauncher({ product: 'firefox' }),
-    playwrightLauncher({ product: 'webkit' })
+  middleware: [
+    function rewriteBase(context, next) {
+      if (context.url.indexOf('/base') === 0) {
+        context.url = context.url.replace('/base', '')
+      }
+      return next()
+    },
   ],
+  coverageConfig: {
+    include: ['src/**.js'],
+  },
   testFramework: {
     config: {
-      timeout: '60000',
+      timeout: 800000,
     },
   },
-  browserStartTimeout: 60000,
-  testsStartTimeout: 60000,
-  testsFinishTimeout: 60000,
-  coverageConfig: {
-    include: ['src/**/*.js'],
-    exclude: ['test/**/*.js', 'demo/**/*.js'],
-    threshold: {
-      statements: 80,
-      branches: 80,
-      functions: 80,
-      lines: 80
-    }
-  },
-  middleware: [
-    function rewriteBase(context, next) {
-      if (context.url.startsWith('/base/')) {
-        context.url = context.url.replace('/base/', '/');
-      }
-      return next();
-    }
+  browserStartTimeout: 20000,
+  testsStartTimeout: 20000,
+  testsFinishTimeout: 800000,
+  plugins: [
+    visualRegressionPlugin({
+      update: process.argv.includes('--update-visual-baseline'),
+      diffOptions: {
+        threshold: 1,
+      },
+    }),
   ],
-  testRunnerHtml: testFramework => `
-    <html>
-      <head>
-        <script>
-          window.process = { env: { NODE_ENV: "development" } };
-        </script>
-      </head>
-      <body>
-        <script type="module" src="${testFramework}"></script>
-      </body>
-    </html>
-  `
-}; 
+  testRunnerHtml: (testFramework) =>
+    `<html>
+  <body>
+    <script src="./demo/vendor.js"></script>
+    <script type="module" src="${testFramework}"></script>
+  </body>
+  </html>`,
+}