chore(Icons): automatically update test snapshots on CI for convenience

.github/workflows/icons-lib.yml

@@ -21,7 +21,7 @@ jobs:
   process-icons:
     name: Fetch and Build Icons
 
-    runs-on: ubuntu-latest
+    runs-on: macos-15
 
     timeout-minutes: 60
 
@@ -48,67 +48,46 @@ jobs:
         if: steps.modules-cache.outputs.cache-hit != 'true'
         run: yarn install --immutable
 
+      - name: Use Playwright cache
+        uses: actions/cache@v4
+        id: playwright-cache
+        with:
+          path: |
+            ~/Library/Caches/ms-playwright
+            ~/.cache/ms-playwright
+            %USERPROFILE%\AppData\Local\ms-playwright
+          key: ${{ secrets.CACHE_VERSION }}-${{ runner.os }}-playwright-${{ hashFiles('**/yarn.lock') }}
+      - run: yarn workspace @dnb/eufemia playwright install --with-deps firefox
+        if: steps.playwright-cache.outputs.cache-hit != 'true'
+      - run: yarn workspace @dnb/eufemia playwright install-deps firefox
+        if: steps.playwright-cache.outputs.cache-hit == 'true'
+
       - name: Icons fetch and prebuild
         run: yarn workspace @dnb/eufemia prebuild:figma:ci
 
-      - name: Prebuild Library
-        run: yarn workspace @dnb/eufemia prebuild:ci
-
       - name: Test prebuild
-        run: yarn workspace @dnb/eufemia test:update
+        run: yarn workspace @dnb/eufemia test:update --timeout=30000
 
       - name: Build portal
         run: yarn workspace dnb-design-system-portal build:visual-test
 
-      - name: Store portal artifacts
-        uses: actions/upload-artifact@v4
-        with:
-          name: portal-build-artifact
-          path: ./packages/dnb-design-system-portal/public
-
-      - name: Commit icons
-        run: yarn workspace @dnb/eufemia postbuild:commit
-
-  visual-test:
-    needs: process-icons
-    name: Run visual e2e-test for icons
-
-    runs-on: macos-latest
-
-    timeout-minutes: 60
-
-    steps:
-      - name: Git checkout
-        uses: actions/checkout@v4
-        with:
-          persist-credentials: false
-
-      - name: Use Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version-file: 'package.json'
-
-      - name: Use yarn cache
-        uses: actions/cache@v4
-        id: yarn-cache
-        with:
-          path: ./.yarn/cache
-          key: ${{ secrets.CACHE_VERSION }}-${{ runner.os }}-deps-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: ${{ secrets.CACHE_VERSION }}-${{ runner.os }}-deps-
-
-      - name: Install dependencies
-        run: yarn install --immutable
+      - name: Run visual tests
+        run: yarn workspace dnb-design-system-portal test:screenshots:ci:update
 
-      - name: Re-store portal artifacts
-        uses: actions/download-artifact@v4.1.7
+      - uses: actions/upload-artifact@v4
+        if: failure()
         with:
-          name: portal-build-artifact
-          path: ./packages/dnb-design-system-portal/public
+          name: visual-test-artifact
+          path: |
+            ./packages/dnb-eufemia/src/**/*.snap-diff.png
+            ./packages/dnb-eufemia/jest-visual-diff-report/*
 
-      - name: Run visual tests
-        run: yarn workspace dnb-design-system-portal test:screenshots:ci
+      - name: Run visual tests info
+        if: failure()
+        run: echo '\n\n👉 Download the diff files as a ZIP file. \nIt is called "visual-test-artifact" and you find it in the test "Summary" under "Artifacts".\n\n\n'
 
-      - name: Commit updated snapshots
+      - name: Commit icons and updated snapshots
+        if: success()
         run: yarn workspace @dnb/eufemia postbuild:commit
 
       - name: Slack

.github/workflows/visual-regression.yml

@@ -37,6 +37,7 @@ env:
   ALGOLIA_SEARCH_KEY: ${{ secrets.ALGOLIA_SEARCH_KEY }}
   ALGOLIA_API_KEY: ${{ secrets.ALGOLIA_API_KEY }}
   RUN_POST_BUILD: ${{ startsWith(github.ref, 'refs/heads/main') || startsWith(github.ref, 'refs/heads/v') }}
+  RUN_VISUAL_TEST: ${{ !startsWith(github.ref, 'refs/heads/icon') }}
 
 jobs:
   visual-regression:
@@ -91,9 +92,11 @@ jobs:
         run: yarn workspace @dnb/eufemia postbuild:ci
 
       - name: Build portal
+        if: env.RUN_VISUAL_TEST == 'true'
         run: yarn workspace dnb-design-system-portal build:visual-test
 
       - name: Run visual tests
+        if: env.RUN_VISUAL_TEST == 'true'
         run: yarn workspace dnb-design-system-portal test:screenshots:ci
 
       - uses: actions/upload-artifact@v4

packages/dnb-design-system-portal/package.json

@@ -36,6 +36,7 @@
     "test:e2e:portal:watch": "playwright test --ui",
     "test:screenshots": "yarn workspace @dnb/eufemia test:screenshots",
     "test:screenshots:ci": "start-server-and-test serve http://localhost:8000 'yarn workspace @dnb/eufemia test:screenshots:ci'",
+    "test:screenshots:ci:update": "start-server-and-test serve http://localhost:8000 'yarn workspace @dnb/eufemia test:screenshots:ci:update'",
     "test:staged": "jest --bail --findRelatedTests ",
     "test:types": "tsc --noEmit",
     "test:types:watch": "tsc --noEmit --watch",

packages/dnb-eufemia/package.json

@@ -84,7 +84,7 @@
     "test:postbuild": "yarn jest ./postbuild.test.ts --ci --testPathIgnorePatterns=[]",
     "test:screenshots": "yarn jest --config=./jest.config.screenshots.js --maxWorkers=1 --detectOpenHandles --testPathPattern ",
     "test:screenshots:ci": "yarn jest --config=./jest.config.screenshots.js --ci --bail --maxWorkers=1",
-    "test:screenshots:ci:update": "yarn test:screenshots:ci --maxWorkers=1 --updateSnapshot",
+    "test:screenshots:ci:update": "yarn test:screenshots:ci --updateSnapshot",
     "test:screenshots:reset": "find . -name '*.snap.png' -type f|xargs rm -f && yarn test:screenshots",
     "test:screenshots:update": "yarn jest --config=./jest.config.screenshots.js --maxWorkers=1 --updateSnapshot --testPathPattern ",
     "test:screenshots:watch": "JEST_IMAGE_SNAPSHOT_TRACK_OBSOLETE=1 jest --config=./jest.config.screenshots.js --watchAll --detectOpenHandles --testPathPattern ",

packages/dnb-eufemia/scripts/prebuild/tasks/makeReleaseVersion.ts

@@ -15,6 +15,10 @@ import { log } from '../../lib'
 export async function makeReleaseVersion() {
   const branchName = getBranchName()
 
+  if (branchName.startsWith('icons/')) {
+    return // stop here
+  }
+
   let version = null
 
   if (releaseBranches.includes(branchName)) {

packages/dnb-eufemia/src/components/height-animation/__tests__/HeightAnimation.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { render } from '@testing-library/react'
+import { render, waitFor } from '@testing-library/react'
 import HeightAnimation from '../HeightAnimation'
 import HeightAnimationInstance from '../HeightAnimationInstance'
 import {
@@ -10,6 +10,7 @@ import {
   runAnimation,
   simulateAnimationEnd,
 } from './HeightAnimationUtils'
+import { wait } from '../../../core/jest/jestSetup'
 
 describe('HeightAnimation', () => {
   initializeTestSetup()
@@ -400,6 +401,9 @@ describe('stopOuterAnimations', () => {
     mockHeight(100, innerElement)
     mockHeight(200, innerElement)
 
+    // To ensure the "dnb-height-animation--stop" className is set after rerender
+    await wait(10)
+
     rerender(
       <HeightAnimation className="outer">
         <HeightAnimation className="inner">456</HeightAnimation>
@@ -412,9 +416,11 @@ describe('stopOuterAnimations', () => {
 
     runAnimation()
 
-    expect(
-      document.querySelector('.dnb-height-animation--stop')
-    ).not.toBeInTheDocument()
+    await waitFor(() => {
+      expect(
+        document.querySelector('.dnb-height-animation--stop')
+      ).not.toBeInTheDocument()
+    })
   })
 
   it('should not animate when outer height animation has --stop className', async () => {

packages/dnb-eufemia/src/components/height-animation/__tests__/HeightAnimationUtils.ts

@@ -43,6 +43,7 @@ export const mockHeight = (
   element.setAttribute('data-height', String(height))
 }
 
+// Will be overwritten when using "initializeTestSetup"
 export let nextAnimationFrame = () => null
 export const runAnimation = () => {
   nextAnimationFrame()

packages/dnb-eufemia/src/extensions/forms/Wizard/Container/__tests__/WizardContainer.test.tsx

@@ -268,16 +268,25 @@ describe('Wizard.Container', () => {
 
     await waitFor(() => {
       expect(output()).toHaveTextContent('Step 2')
+    })
+
+    await waitFor(() => {
       expect(screen.queryByRole('alert')).toBeInTheDocument()
     })
 
     await userEvent.type(document.querySelector('input'), 'foo')
+
+    await waitFor(() => {
+      expect(screen.queryByRole('alert')).toBeNull()
+    })
+
     await userEvent.click(nextButton())
 
     await waitFor(() => {
       expect(output()).toHaveTextContent('Step 3')
-      expect(screen.queryByRole('alert')).toBeNull()
     })
+
+    expect(screen.queryByRole('alert')).toBeNull()
   })
 
   it('should support navigating back and forth with async validators', async () => {
@@ -2069,6 +2078,7 @@ describe('Wizard.Container', () => {
         fooStep3: undefined,
       })
 
+      await wait(100)
       await userEvent.type(document.querySelector('input'), ' changed')
 
       expect(onChange).toHaveBeenCalledTimes(8)