Merge pull request #36 from privacybydesign/chore/fix-dependabot-client-vulns

Resolve all 30 Dependabot alerts (client): webpack 5 + jest 30 modernization

Author: rubenhensen

.github/workflows/delivery.yml

@@ -19,33 +19,76 @@ permissions:
   security-events: write
 
 jobs:
+  test:
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: client
+    steps:
+      - uses: actions/checkout@v6
+      - uses: actions/setup-node@v6
+        with:
+          node-version: lts/*
+          cache: npm
+          cache-dependency-path: client/package-lock.json
+      - run: npm ci
+      - run: npm test
+      - run: npm run build
+      - uses: actions/upload-artifact@v7
+        with:
+          name: client-dist
+          path: client/dist/
+          retention-days: 1
+
+  e2e:
+    needs: test
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: client
+    steps:
+      - uses: actions/checkout@v6
+      - uses: actions/setup-node@v6
+        with:
+          node-version: lts/*
+          cache: npm
+          cache-dependency-path: client/package-lock.json
+      - run: npm ci
+      - uses: actions/download-artifact@v8
+        with:
+          name: client-dist
+          path: client/dist/
+      - run: npx playwright install --with-deps chromium
+      - run: npm run test:e2e
+
   publish-docker-image:
+    needs: [e2e]
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v4
+        uses: actions/checkout@v6
 
       - name: Docker meta
         id: meta
-        uses: docker/metadata-action@v5
+        uses: docker/metadata-action@v6
         with:
           images: ghcr.io/${{ github.repository }}
           tags: |
             type=semver,pattern={{major}}.{{minor}}.{{patch}}
             type=raw,value=edge
 
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
+        uses: docker/setup-buildx-action@v4
 
       - name: Login to GitHub Container Registry
-        uses: docker/login-action@v3
+        uses: docker/login-action@v4
         with:
           registry: ghcr.io
           username: ${{ github.actor }}
           password: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Build container and export to local Docker
-        uses: docker/build-push-action@v5
+        uses: docker/build-push-action@v7
         with:
           context: .
           file: Dockerfile.prod
@@ -65,13 +108,13 @@ jobs:
           output-format: sarif
 
       - name: Upload Anchore scan SARIF report
-        uses: github/codeql-action/upload-sarif@7211b7c8077ea37d8641b6271f6a365a22a5fbfa # v4.36.0
+        uses: github/codeql-action/upload-sarif@8aad20d150bbac5944a9f9d289da16a4b0d87c1e # v4.36.2
         if: ${{ !cancelled() }}
         with:
           sarif_file: ${{ steps.scan.outputs.sarif }}
 
       - name: Push image to GitHub Container Registry
-        uses: docker/build-push-action@v5
+        uses: docker/build-push-action@v7
         if: ${{ github.event_name != 'schedule' }}
         with:
           file: Dockerfile.prod

client/.stylelintrc

@@ -1,25 +1,33 @@
-module.exports = {
-    babelrc: false,
-    presets: [
-        [
-            '@babel/preset-env',
-            {
-                useBuiltIns: 'usage',
-                corejs: 3,
-                modules: false
-            }
+module.exports = api => {
+    // Jest needs CommonJS modules; webpack builds keep ES modules for tree-shaking.
+    const isTest = api.env('test');
+
+    return {
+        babelrc: false,
+        // Detect CJS files (no import/export) as scripts so useBuiltIns:'usage' adds
+        // require() polyfills instead of import statements. Without this, babel injects
+        // ESM import polyfills into already-compiled CJS packages (@amsterdam, @privacybydesign),
+        // causing webpack 5 to treat them as ES modules where `exports` is undefined.
+        sourceType: 'unambiguous',
+        presets: [
+            [
+                '@babel/preset-env',
+                {
+                    useBuiltIns: 'usage',
+                    corejs: 3,
+                    modules: isTest ? 'commonjs' : false
+                }
+            ],
+            '@babel/preset-typescript',
+            '@babel/preset-react'
         ],
-        '@babel/preset-typescript',
-        '@babel/preset-react'
-    ],
-    plugins: [
-        '@babel/plugin-transform-runtime',
-        '@babel/plugin-transform-modules-commonjs',
-        '@babel/proposal-class-properties',
-        '@babel/proposal-object-rest-spread',
-        '@babel/plugin-proposal-optional-chaining',
-        '@babel/plugin-transform-reserved-words',
-        'babel-plugin-styled-components',
-        'react-hot-loader/babel'
-    ]
+        plugins: [
+            '@babel/plugin-transform-runtime',
+            '@babel/plugin-proposal-class-properties',
+            '@babel/plugin-proposal-object-rest-spread',
+            '@babel/plugin-proposal-optional-chaining',
+            '@babel/plugin-transform-reserved-words',
+            ['babel-plugin-styled-components', { pure: true }]
+        ]
+    };
 };

client/babel.config.js

@@ -0,0 +1,12 @@
+import { test, expect } from '@playwright/test';
+
+test('homepage loads without JS errors', async ({ page }) => {
+    const errors: string[] = [];
+    page.on('pageerror', err => errors.push(err.message));
+
+    await page.goto('/');
+    await page.waitForLoadState('networkidle');
+
+    expect(errors, errors.join('\n')).toHaveLength(0);
+    await expect(page.locator('h1').first()).toBeVisible();
+});

client/e2e/smoke.spec.ts

@@ -1,20 +1,23 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-const { pathsToModuleNameMapper } = require('ts-jest/utils');
-const { compilerOptions } = require('./tsconfig.json');
-
 module.exports = {
     collectCoverageFrom: ['src/**/*.{js,ts,tsx}'],
     coverageDirectory: '<rootDir>/coverage',
+    testEnvironment: 'jsdom',
     moduleNameMapper: {
         '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
             '<rootDir>/src/test/fileMock.ts',
         '\\.(css)$': '<rootDir>/src/test/styleMock.ts',
-        ...pathsToModuleNameMapper(compilerOptions.paths, { prefix: '<rootDir>/src/' })
+        '@privacybydesign/yivi-css': '<rootDir>/src/test/styleMock.ts',
+        '^@config/(.*)$': '<rootDir>/src/config/$1',
+        '^@app/(.*)$': '<rootDir>/src/app/$1',
+        '^@components/(.*)$': '<rootDir>/src/components/$1',
+        '^@pages/(.*)$': '<rootDir>/src/pages/$1',
+        '^@hooks/(.*)$': '<rootDir>/src/hooks/$1',
+        '^@services/(.*)$': '<rootDir>/src/services/$1',
+        '^@test/(.*)$': '<rootDir>/src/test/$1'
     },
     setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
-    testRegex: '.spec.(js|ts|tsx)$',
+    testRegex: 'src/.+\\.spec\\.(js|ts|tsx)$',
     transform: {
-        '^.+\\.(js|jsx|mjs)$': 'babel-jest',
-        '^.+\\.tsx?$': 'ts-jest'
+        '^.+\\.(js|jsx|mjs|ts|tsx)$': 'babel-jest'
     }
 };