ci: fix visual and a11y test

.github/workflows/a11y_tests.yml

@@ -8,15 +8,12 @@ on:
       - 'packages/dialtone-vue2'
       - 'packages/dialtone-vue3'
 
-env:
-  HUSKY: 0
-
 concurrency:
   group: ${{ github.workflow }}-${{ github.ref }}
   cancel-in-progress: true
 
 jobs:
-  a11y_tests:
+  dialtone-vue-2:
     runs-on: ubuntu-latest
     steps:
       - name: Check out branch
@@ -53,10 +50,55 @@ jobs:
         run: pnpm install --frozen-lockfile
 
       - name: Build Dialtone library and documentation site
-        run: pnpm nx run --verbose dialtone-vue3-documentation:build
+        run: pnpm nx run --verbose dialtone-vue2:build-docs
 
       - name: Start storybook and run a11y tests
         run: |
           pnpm dlx concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \
+            "pnpm dlx http-server packages/dialtone-vue2/storybook-static --port 9010 --silent" \
+            "pnpm dlx wait-on tcp:9010 && pnpm nx run --verbose dialtone-vue2:test:a11y"
+
+  dialtone-vue-3:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out branch
+        uses: actions/checkout@v4
+        with:
+          ref: "refs/pull/${{ github.event.pull_request.number }}/merge"
+
+        # This hangs on node 18 for some reason.
+      - name: Use Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 20
+
+      - name: Use pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: 8
+          run_install: false
+
+      - name: Get pnpm store directory
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+      - name: Setup pnpm cache
+        uses: actions/cache@v3
+        with:
+          path: ${{ env.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Build Dialtone library and documentation site
+        run: pnpm nx run --verbose dialtone-vue3:build-docs
+
+      - name: Start storybook and run a11y tests
+        run: |
+          pnpm dlx concurrently -k -s first -n "SB,TEST" -c "green,yellow" \
             "pnpm dlx http-server packages/dialtone-vue3/storybook-static --port 9010 --silent" \
-            "pnpm dlx wait-on tcp:9010 && pnpm nx run --verbose dialtone-vue3-documentation:test:a11y"
+            "pnpm dlx wait-on tcp:9010 && pnpm nx run --verbose dialtone-vue3:test:a11y"

.github/workflows/visual_tests.yml

@@ -6,12 +6,17 @@ on:
   pull_request:
     types: [ labeled, synchronize, opened ]
 
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
 jobs:
   filter-actions:
     runs-on: ubuntu-latest
     permissions:
       pull-requests: read
     outputs:
+      dialtone-vue-2: ${{ steps.filter.outputs.dialtone-vue-2 }}
       dialtone-vue-3: ${{ steps.filter.outputs.dialtone-vue-3 }}
     steps:
       - name: Checkout
@@ -22,30 +27,75 @@ jobs:
         id: filter
         with:
           filters: |
+            dialtone-vue-2:
+              - 'packages/dialtone/**'
+              - 'packages/dialtone-icons/**'
+              - 'packages/dialtone-tokens/**'
+              - 'packages/dialtone-vue2/**'
             dialtone-vue-3:
               - 'packages/dialtone/**'
               - 'packages/dialtone-icons/**'
               - 'packages/dialtone-tokens/**'
               - 'packages/dialtone-vue3/**'
 
-  prompt_for_label:
+  prompt-for-label:
     needs: filter-actions
-    if: (needs.filter-actions.outputs.dialtone-vue-3 == 'true' && (github.event_name == 'pull_request' && !contains(github.event.pull_request.labels.*.name, 'no-visual-test') && !contains(github.event.pull_request.labels.*.name, 'visual-test-ready')))
+    if: ((needs.filter-actions.outputs.dialtone-vue-2 == 'true' || needs.filter-actions.outputs.dialtone-vue-3 == 'true') && (github.event_name == 'pull_request' && !contains(github.event.pull_request.labels.*.name, 'no-visual-test') && !contains(github.event.pull_request.labels.*.name, 'visual-test-ready')))
     runs-on: ubuntu-latest
     steps:
       - uses: actions/github-script@v6
         with:
           script: |
             throw "Please add either the visual-test-ready or no-visual-test label to this PR depending on whether you want to run visual tests or not. It is recommended to run visual tests if your PR changes any UI.";
 
-  test:
+  dialtone-vue-2:
     needs: filter-actions
-    if: (needs.filter-actions.outputs.dialtone-vue-3 == 'true' && (contains(github.event.pull_request.labels.*.name, 'visual-test-ready') || github.event_name == 'push'))
+    if: (needs.filter-actions.outputs.dialtone-vue-2 == 'true' && (contains(github.event.pull_request.labels.*.name, 'visual-test-ready') || github.event_name == 'push'))
+
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out branch
+        uses: actions/checkout@v4
+
+      - name: Use Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 20
 
-    concurrency:
-      group: ${{ github.workflow }}-${{ github.ref }}
-      cancel-in-progress: true
+      - name: Use pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: 8
+          run_install: false
 
+      - name: Get pnpm store directory
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+      - name: Setup pnpm cache
+        uses: actions/cache@v3
+        with:
+          path: ${{ env.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Build Dialtone-vue 2 library and documentation site
+        run: pnpm nx run --verbose dialtone-vue2:build-docs
+
+      - name: Run Dialtone-vue 2 Visual Tests
+        env:
+          PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}
+          PERCY_TARGET_BRANCH: ${{ github.base_ref }}
+        run: pnpm nx run --verbose dialtone-vue2:test:visual
+
+  dialtone-vue-3:
+    needs: filter-actions
+    if: (needs.filter-actions.outputs.dialtone-vue-3 == 'true' && (contains(github.event.pull_request.labels.*.name, 'visual-test-ready') || github.event_name == 'push'))
     runs-on: ubuntu-latest
     steps:
       - name: Check out branch
@@ -78,11 +128,11 @@ jobs:
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
 
-      - name: Build Dialtone library and documentation site
-        run: pnpm nx run --verbose dialtone-vue3-documentation:build
+      - name: Build Dialtone-vue 3 library and documentation site
+        run: pnpm nx run --verbose dialtone-vue3:build-docs
 
-      - name: Run Visual Tests
+      - name: Run Dialtone-vue 3 Visual Tests
         env:
           PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}
           PERCY_TARGET_BRANCH: ${{ github.base_ref }}
-        run: pnpm nx run --verbose dialtone-vue3-documentation:test:visual
+        run: pnpm nx run --verbose dialtone-vue3:test:visual

packages/dialtone-vue2/package.json

@@ -17,11 +17,11 @@
     "prepublishOnly": "pnpm run build",
     "pretest": "pnpm run clean",
     "start": "pnpm run storybook",
-    "storybook": "STORYBOOK_ENV=development storybook dev -p 9010",
+    "storybook": "STORYBOOK_ENV=development storybook dev -p ${PORT:-9010}",
     "storybook:clean": "rm -rf ./storybook-static",
     "storybook:build": "pnpm run storybook:clean && pnpm run build:documentation:functions && STORYBOOK_ENV=production pnpm exec storybook build",
     "storybook:build:docs-only": "pnpm run storybook:build --docs",
-    "test:a11y": "pnpm exec test-storybook --url http://localhost:9010/",
+    "test:a11y": "pnpm exec test-storybook --url http://localhost:${PORT:-9010}/",
     "test:visual": "pnpm exec percy storybook --disable-cache --config ./percy.config.cjs --verbose ./storybook-static",
     "test": "pnpm exec vitest run --test-timeout=10000",
     "test:one": "pnpm exec vitest related --run",

packages/dialtone-vue2/project.json

@@ -20,7 +20,7 @@
       "executor": "nx:run-script",
       "dependsOn": [
         {
-          "projects": [ "dialtone-icons" ],
+          "projects": [ "dialtone", "dialtone-icons" ],
           "target": "build",
           "params": "ignore"
         }

packages/dialtone-vue3/package.json

@@ -17,11 +17,11 @@
     "prepublishOnly": "pnpm run build",
     "pretest": "pnpm run clean",
     "start": "pnpm run storybook",
-    "storybook": "STORYBOOK_ENV=development storybook dev -p 9010",
+    "storybook": "STORYBOOK_ENV=development storybook dev -p ${PORT:-9010}",
     "storybook:clean": "rm -rf ./storybook-static",
     "storybook:build": "pnpm run storybook:clean && pnpm run build:documentation:functions && STORYBOOK_ENV=production pnpm exec storybook build",
     "storybook:build:docs-only": "pnpm run storybook:build --docs",
-    "test:a11y": "pnpm exec test-storybook --url http://localhost:9010/",
+    "test:a11y": "pnpm exec test-storybook --url http://localhost:${PORT:-9010}/",
     "test:visual": "pnpm exec percy storybook --disable-cache --config ./percy.config.cjs --verbose ./storybook-static",
     "test": "pnpm exec vitest run --test-timeout=10000",
     "test:one": "pnpm exec vitest related --run",

packages/dialtone-vue3/project.json

@@ -20,7 +20,7 @@
       "executor": "nx:run-script",
       "dependsOn": [
         {
-          "projects": [ "dialtone-icons" ],
+          "projects": [ "dialtone", "dialtone-icons" ],
           "target": "build",
           "params": "ignore"
         }