chore: attempt fixing visual tests for vue 2

.github/workflows/visual_tests.yml

@@ -13,6 +13,7 @@ jobs:
       pull-requests: read
     outputs:
       dialtone-vue-3: ${{ steps.filter.outputs.dialtone-vue-3 }}
+      dialtone-vue-2: ${{ steps.filter.outputs.dialtone-vue-2 }}
     steps:
       - name: Checkout
         uses: actions/checkout@v4
@@ -27,10 +28,15 @@ jobs:
               - 'packages/dialtone-icons/**'
               - 'packages/dialtone-tokens/**'
               - 'packages/dialtone-vue3/**'
+            dialtone-vue-2:
+              - 'packages/dialtone/**'
+              - 'packages/dialtone-icons/**'
+              - 'packages/dialtone-tokens/**'
+              - 'packages/dialtone-vue2/**'
 
   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-3 == 'true' || needs.filter-actions.outputs.dialtone-vue-2 == '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
@@ -40,7 +46,7 @@ jobs:
 
   test:
     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-3 == 'true' || needs.filter-actions.outputs.dialtone-vue-2 == 'true')  && (contains(github.event.pull_request.labels.*.name, 'visual-test-ready') || github.event_name == 'push'))
 
     concurrency:
       group: ${{ github.workflow }}-${{ github.ref }}
@@ -78,11 +84,24 @@ 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 library and documentation site (Vue 3)
+        if: needs.filter-actions.outputs.dialtone-vue-3 == 'true'
+        run: pnpm nx run --verbose dialtone-vue3:storybook:build
+
+      - name: Run Visual Tests (Vue 3)
+        if: needs.filter-actions.outputs.dialtone-vue-3 == 'true'
+        env:
+          PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}
+          PERCY_TARGET_BRANCH: ${{ github.base_ref }}
+        run: pnpm nx run --verbose dialtone-vue3:test:visual
+
+      - name: Build Dialtone library and documentation site (Vue 2)
+        if: needs.filter-actions.outputs.dialtone-vue-2 == 'true'
+        run: pnpm nx run --verbose dialtone-vue2:storybook:build
 
-      - name: Run Visual Tests
+      - name: Run Visual Tests (Vue 2)
+        if: needs.filter-actions.outputs.dialtone-vue-2 == 'true'
         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-vue2:test:visual

packages/dialtone-vue2/components/button/button.vue

@@ -9,7 +9,7 @@
     :disabled="disabled"
     :style="{ width: width }"
     :aria-live="computedAriaLive"
-    :aria-label="loading ? 'loading' : $attrs['aria-label']"
+    :aria-label="loading ? 'loading1111' : $attrs['aria-label']"
     v-on="buttonListeners"
   >
     <!-- NOTE(cormac): This span is needed since we can't apply styles to slots. -->

packages/dialtone-vue2/scripts/build-docs.js

@@ -1,7 +1,7 @@
 import { parse } from 'vue-docgen-api';
 import path, { join } from 'path';
 import { fileURLToPath } from 'url';
-import { readdirSync, writeFile } from 'fs';
+import { readdirSync, writeFile, existsSync, mkdirSync } from 'fs';
 
 import componentsList from '../common/components_list.cjs';
 
@@ -32,6 +32,10 @@ const getFileList = (folder) => {
 const writeDocumentationFile = (data) => {
   const jsonData = JSON.stringify(data);
 
+  const dist = path.resolve(join(__dirname, '../dist'));
+  if (!existsSync(dist)) {
+    mkdirSync(dist);
+  }
   writeFile(outputPath, jsonData, 'utf8', (err) => {
     if (err) return console.error('An error occurred while writing JSON Object to File.', err);
 

packages/dialtone-vue3/scripts/build-docs.js

@@ -1,7 +1,7 @@
 import { parse } from 'vue-docgen-api';
 import path, { join } from 'path';
 import { fileURLToPath } from 'url';
-import { readdirSync, writeFile } from 'fs';
+import { readdirSync, writeFile, existsSync, mkdirSync } from 'fs';
 
 import componentsList from '../common/components_list.cjs';
 
@@ -32,6 +32,10 @@ const getFileList = (folder) => {
 const writeDocumentationFile = (data) => {
   const jsonData = JSON.stringify(data);
 
+  const dist = path.resolve(join(__dirname, '../dist'));
+  if (!existsSync(dist)) {
+    mkdirSync(dist);
+  }
   writeFile(outputPath, jsonData, 'utf8', (err) => {
     if (err) return console.error('An error occurred while writing JSON Object to File.', err);