chore: use fuselageSnap in docker action with zenika/alpine-chrome:with-node image

.github/actions/test/Dockerfile

@@ -0,0 +1,9 @@
+FROM zenika/alpine-chrome:with-node
+
+USER root
+
+COPY entrypoint.sh /entrypoint.sh
+
+ENV CHROME_PATH=/usr/bin/chromium-browser
+
+ENTRYPOINT ["/entrypoint.sh"]

.github/actions/test/action.yml

@@ -9,16 +9,15 @@ inputs:
   react_uri:
     required: true
     default: ./storybook-static
-outputs:
-  fuselage:
-    description: A regex of fuselage components
-  fuselage-toastbar:
-    description: A regex of fuselage-toastbar components
-  layout:
-    description: A regex of layout components
-  onboarding-ui:
-    description: A regex of onboarding-ui components
-
+# outputs:
+# fuselage:
+#   description: A regex of fuselage components
+# fuselage-toastbar:
+#   description: A regex of fuselage-toastbar components
+# layout:
+#   description: A regex of layout components
+# onboarding-ui:
+#   description: A regex of onboarding-ui components
 runs:
-  using: 'node20'
-  main: dist/index.js
+  using: 'docker'
+  image: 'Dockerfile'

.github/actions/test/entrypoint.sh

@@ -0,0 +1,24 @@
+#!/bin/sh -ex
+
+# for pkg in packages/*/package.json; do
+#   cd "$(dirname $pkg)"
+#   mv package.json package.json-old
+#   cat package.json-old | sed s/\.docker/.app/ > package.json
+#   cd -
+# done
+# cd 
+# yarn run loki:test-ci --concurrency=1
+
+# for pkg in packages/*/package.json; do
+#   cd "$(dirname $pkg)"
+#   mv package.json-old package.json
+#   cd -
+# done
+
+cd packages/fuselage
+mv package.json package.json-old
+cat package.json-old | sed s/\.docker/.app/ > package.json
+
+yarn loki:test-ci
+
+mv package.json-old package.json

.github/workflows/ci-pr.yml

@@ -85,76 +85,77 @@ jobs:
           path: .turbo
           key: turbo-${{ runner.os }}-${{ github.job }}
           restore-keys: |
-            turbo-${{ runner.os }}-  
-      - name: Build private action
-        run: yarn build
-        working-directory: ./.github/actions/test
-      - id: thruster_action
-        uses: ./.github/actions/test
-      - name: visual test for fuselage
-        if: always()
-        run: |
-          if [ "${{steps.thruster_action.outputs.fuselage }}" = "skip" ]; then 
-            echo "skipping visual test for fuselage"
-          elif [ "${{steps.thruster_action.outputs.fuselage }}" = "full test" ]; then 
-            yarn loki:test-ci
-          else
-            yarn loki test --chromeFlags='--headless --no-sandbox --disable-gpu --disable-features=VizDisplayCompositor' --requireReference --verboseRenderer --reactUri file:./storybook-static --storiesFilter="${{steps.thruster_action.outputs.fuselage }}"
-          fi
-        working-directory: packages/fuselage
-      - name: visual test for fuselage-toastbar
-        if: always()
-        run: |
-          if [ "${{steps.thruster_action.outputs.fuselage-toastbar }}" = "skip" ]; then 
-            echo "skipping visual test for fuselage-toastbar "
-          elif [ "${{steps.thruster_action.outputs.fuselage-toastbar }}" = "full test" ]; then 
-            yarn loki:test-ci
-          else
-            yarn loki test --chromeFlags='--headless --no-sandbox --disable-gpu --disable-features=VizDisplayCompositor' --requireReference --verboseRenderer --reactUri file:./storybook-static --storiesFilter="${{steps.thruster_action.outputs.fuselage-toastbar }}"
-          fi
-        working-directory: packages/fuselage-toastbar
-      - name: visual test for layout
-        if: always()
-        run: |
-          if [ "${{steps.thruster_action.outputs.layout }}" = "skip" ]; then 
-            echo "skipping visual tests fro layout "
-          elif [ "${{steps.thruster_action.outputs.layout }}" = "full test" ]; then 
-            yarn loki:test-ci
-          else
-            yarn loki test --chromeFlags='--headless --no-sandbox --disable-gpu --disable-features=VizDisplayCompositor' --requireReference --verboseRenderer --reactUri file:./storybook-static --storiesFilter="${{steps.thruster_action.outputs.layout }}"
-          fi
-        working-directory: packages/layout
-      - name: visual test for onboarding-ui
-        if: always()
-        run: |
-          if [ "${{steps.thruster_action.outputs.onboarding-ui }}" = "skip" ]; then 
-            echo "skipping visual test for onboarding-ui "
-          elif [ "${{steps.thruster_action.outputs.onboarding-ui }}" = "full test" ]; then 
-            yarn loki:test-ci
-          else
-            yarn loki test --chromeFlags='--headless --no-sandbox --disable-gpu --disable-features=VizDisplayCompositor' --requireReference --verboseRenderer --reactUri file:./storybook-static --storiesFilter="${{steps.thruster_action.outputs.onboarding-ui }}"
-          fi
-        working-directory: packages/onboarding-ui
-      - name: upload loki images
-        if: always()
-        uses: actions/upload-artifact@v4
-        with:
-          name: loki-${{ github.event.number }}
-          path: |
-            packages/fuselage/.loki/current
-            packages/fuselage/.loki/difference
-            packages/fuselage/.loki/reference
-            packages/fuselage-toastbar/.loki/current
-            packages/fuselage-toastbar/.loki/difference
-            packages/fuselage-toastbar/.loki/reference
-            packages/onboarding-ui/.loki/current
-            packages/onboarding-ui/.loki/difference
-            packages/onboarding-ui/.loki/reference
-            packages/layout/.loki/current
-            packages/layout/.loki/difference
-            packages/layout/.loki/reference
-      - name: download .loki
-        if: always()
-        uses: actions/download-artifact@v4
-        with:
-          name: loki-${{ github.event.number }}
+            turbo-${{ runner.os }}- 
+      - uses: ./.github/actions/test 
+      # - name: Build private action
+      #   run: yarn build
+      #   working-directory: ./.github/actions/test
+      # - id: thruster_action
+      #   uses: ./.github/actions/test
+      # - name: visual test for fuselage
+      #   if: always()
+      #   run: |
+      #     if [ "${{steps.thruster_action.outputs.fuselage }}" = "skip" ]; then 
+      #       echo "skipping visual test for fuselage"
+      #     elif [ "${{steps.thruster_action.outputs.fuselage }}" = "full test" ]; then 
+      #       yarn loki:test-ci
+      #     else
+      #       yarn loki test --chromeFlags='--headless --no-sandbox --disable-gpu --disable-features=VizDisplayCompositor' --requireReference --verboseRenderer --reactUri file:./storybook-static --storiesFilter="${{steps.thruster_action.outputs.fuselage }}"
+      #     fi
+      #   working-directory: packages/fuselage
+      # - name: visual test for fuselage-toastbar
+      #   if: always()
+      #   run: |
+      #     if [ "${{steps.thruster_action.outputs.fuselage-toastbar }}" = "skip" ]; then 
+      #       echo "skipping visual test for fuselage-toastbar "
+      #     elif [ "${{steps.thruster_action.outputs.fuselage-toastbar }}" = "full test" ]; then 
+      #       yarn loki:test-ci
+      #     else
+      #       yarn loki test --chromeFlags='--headless --no-sandbox --disable-gpu --disable-features=VizDisplayCompositor' --requireReference --verboseRenderer --reactUri file:./storybook-static --storiesFilter="${{steps.thruster_action.outputs.fuselage-toastbar }}"
+      #     fi
+      #   working-directory: packages/fuselage-toastbar
+      # - name: visual test for layout
+      #   if: always()
+      #   run: |
+      #     if [ "${{steps.thruster_action.outputs.layout }}" = "skip" ]; then 
+      #       echo "skipping visual tests fro layout "
+      #     elif [ "${{steps.thruster_action.outputs.layout }}" = "full test" ]; then 
+      #       yarn loki:test-ci
+      #     else
+      #       yarn loki test --chromeFlags='--headless --no-sandbox --disable-gpu --disable-features=VizDisplayCompositor' --requireReference --verboseRenderer --reactUri file:./storybook-static --storiesFilter="${{steps.thruster_action.outputs.layout }}"
+      #     fi
+      #   working-directory: packages/layout
+      # - name: visual test for onboarding-ui
+      #   if: always()
+      #   run: |
+      #     if [ "${{steps.thruster_action.outputs.onboarding-ui }}" = "skip" ]; then 
+      #       echo "skipping visual test for onboarding-ui "
+      #     elif [ "${{steps.thruster_action.outputs.onboarding-ui }}" = "full test" ]; then 
+      #       yarn loki:test-ci
+      #     else
+      #       yarn loki test --chromeFlags='--headless --no-sandbox --disable-gpu --disable-features=VizDisplayCompositor' --requireReference --verboseRenderer --reactUri file:./storybook-static --storiesFilter="${{steps.thruster_action.outputs.onboarding-ui }}"
+      #     fi
+      #   working-directory: packages/onboarding-ui
+      # - name: upload loki images
+      #   if: always()
+      #   uses: actions/upload-artifact@v4
+      #   with:
+      #     name: loki-${{ github.event.number }}
+      #     path: |
+      #       packages/fuselage/.loki/current
+      #       packages/fuselage/.loki/difference
+      #       packages/fuselage/.loki/reference
+      #       packages/fuselage-toastbar/.loki/current
+      #       packages/fuselage-toastbar/.loki/difference
+      #       packages/fuselage-toastbar/.loki/reference
+      #       packages/onboarding-ui/.loki/current
+      #       packages/onboarding-ui/.loki/difference
+      #       packages/onboarding-ui/.loki/reference
+      #       packages/layout/.loki/current
+      #       packages/layout/.loki/difference
+      #       packages/layout/.loki/reference
+      # - name: download .loki
+      #   if: always()
+      #   uses: actions/download-artifact@v4
+      #   with:
+      #     name: loki-${{ github.event.number }}

.yarn/patches/@loki-target-chrome-app-npm-0.35.0-b92d860c00.patch

@@ -0,0 +1,14 @@
+diff --git a/src/create-chrome-app-target.js b/src/create-chrome-app-target.js
+index d87adea85023016f43bf5055906d50b2b97deaf4..bd6512d59f039e8689920d66f744c5e68d86f984 100644
+--- a/src/create-chrome-app-target.js
++++ b/src/create-chrome-app-target.js
+@@ -56,8 +56,7 @@ function createChromeAppTarget({
+
+   async function start(options = {}) {
+     if (useStaticServer && isLocalFile) {
+-      staticServer = createStaticServer(staticServerPath);
+-      staticServer.listen(staticServerPort);
++      staticServer = createStaticServer(staticServerPath).listen(staticServerPort);
+       debug(`Starting static file server at ${chromeUrl}`);
+     }
+     const launchOptions = Object.assign(

package.json

@@ -66,6 +66,7 @@
   "resolutions": {
     "@loki/browser@npm:^0.35.0": "patch:@loki/browser@npm%3A0.35.0#~/.yarn/patches/@loki-browser-npm-0.35.0-56c1d62186.patch",
     "@loki/target-chrome-docker@npm:^0.35.0": "patch:@loki/target-chrome-docker@npm%3A0.35.0#~/.yarn/patches/@loki-target-chrome-docker-npm-0.35.0-e5bcaa6a12.patch",
-    "@loki/core@npm:^0.35.0": "patch:@loki/core@npm%3A0.35.0#~/.yarn/patches/@loki-core-npm-0.35.0-2f7ae66155.patch"
+    "@loki/core@npm:^0.35.0": "patch:@loki/core@npm%3A0.35.0#~/.yarn/patches/@loki-core-npm-0.35.0-2f7ae66155.patch",
+    "@loki/target-chrome-app@npm:^0.35.0": "patch:@loki/target-chrome-app@npm%3A0.35.0#~/.yarn/patches/@loki-target-chrome-app-npm-0.35.0-b92d860c00.patch"
   }
 }

packages/fuselage-toastbar/package.json

@@ -44,7 +44,7 @@
     "resolve": "resolve-loki",
     ".:update-storybook:build-storybook": "run-s build-storybook",
     ".:update-storybook:purge-refs": "rimraf .loki/reference",
-    ".:update-storybook:loki-update": "loki update --chromeFlags='--headless --no-sandbox --disable-gpu --disable-features=VizDisplayCompositor' --verboseRenderer --requireReference --reactUri file:./storybook-static",
+    ".:update-storybook:loki-update": "loki update --chromeDockerImage=chinello/alpine-chrome:93 --chromeFlags='--headless --no-sandbox --disable-gpu --disable-features=VizDisplayCompositor' --verboseRenderer --requireReference --reactUri file:./storybook-static",
     "prettier-format": "prettier 'src/**/*.{ts,tsx,js,jsx}' --write",
     "loki:test-ci": "loki test --chromeFlags='--headless --no-sandbox --disable-gpu --disable-features=VizDisplayCompositor' --requireReference --verboseRenderer --reactUri file:./storybook-static"
   },