ci: vrt sharding test

.github/composite/install/action.yml

@@ -4,8 +4,6 @@ description: 'Sets up Node.js and runs install'
 runs:
     using: composite
     steps:
-        - uses: actions/checkout@v4
-
         - uses: pnpm/action-setup@v4
           with:
               run_install: false

.github/workflows/compare-snapshots.yml → .github/workflows/test-regressions.yml

@@ -1,6 +1,6 @@
-name: 'Run Visual Regression Tests'
+name: "Tests"
 
-'on':
+"on":
     workflow_dispatch:
     pull_request:
         types:
@@ -18,11 +18,22 @@ env:
     AWS_REGION: ${{ secrets.AWS_REGION }}
     AWS_IAM_ROLE_NAME: ${{ secrets.AWS_IAM_ROLE_NAME }}
     AWS_IAM_ROLE_SESSION_NAME: ${{ secrets.AWS_IAM_ROLE_SESSION_NAME }}
-    REPORT_PATH: ''
+    REPORT_PATH: ""
 
 jobs:
-    visual-regression:
+    regressions:
         runs-on: macos-latest
+        strategy:
+            fail-fast: false
+            matrix:
+                shard:
+                    [
+                        { name: firefox, project: firefox },
+                        { name: webkit, project: webkit },
+                        { name: chromium, project: chromium },
+                        { name: "Microsoft Edge", project: msedge },
+                    ]
+
         steps:
             - name: Git clone the repository
               uses: actions/checkout@v4
@@ -33,33 +44,69 @@ jobs:
               uses: ./.github/composite/install
 
             - name: Install Playwright Browsers
-              uses: ./.github/composite/browser-install
-              with:
-                  working-directory: packages/core
+              run: pnpm core exec playwright install ${{ matrix.shard.project }}
+            #   uses: ./.github/composite/browser-install
+            #   with:
+            #       working-directory: packages/core
 
             - name: Build Icons
-              run: pnpm icons build
+              run: pnpm build --filter=@vapor-ui/icons
 
             - name: Build Storybook
               run: pnpm build-storybook
 
-            - name: Run Snapshot Tests
-              run: pnpm core test:visual
+            - name: Run Playwright tests
+              run: pnpm core exec playwright test --project="${{ matrix.shard.name }}"
+
+            - name: Upload blob report to GitHub Actions Artifacts
+              if: ${{ !cancelled() }}
+              uses: actions/upload-artifact@v4
+              with:
+                  name: blob-report-${{ matrix.shard.project }}
+                  path: packages/core/blob-report
+                  retention-days: 1
+
+            # - uses: actions/upload-artifact@v4
+            #   if: "${{ !cancelled() }}"
+            #   with:
+            #       name: test-results
+            #       path: ./packages/core/__tests__/report/
+
+    merge-reports:
+        if: ${{ !cancelled() }}
+        needs: [regressions]
+        runs-on: ubuntu-latest
+        steps:
+            - uses: actions/checkout@v4
+
+            - name: Install Dependencies
+              uses: ./.github/composite/install
+
+            - name: Download blob reports from GitHub Actions Artifacts
+              uses: actions/download-artifact@v4
+              with:
+                  path: all-blob-reports
+                  pattern: blob-report-*
+                  merge-multiple: true
+
+            - name: Merge into HTML Report
+              run: pnpm core exec playwright merge-reports -c ./playwright.merge.ts ../../all-blob-reports
 
-            - uses: actions/upload-artifact@v4
-              if: '${{ !cancelled() }}'
+            - name: Upload HTML report
+              uses: actions/upload-artifact@v4
               with:
-                  name: test-results
+                  name: html-report--attempt-${{ github.run_attempt }}
                   path: ./packages/core/__tests__/report/
+                  retention-days: 14
 
     deploy-report:
-        needs: visual-regression
+        needs: [regressions, merge-reports]
         if: always()
         runs-on: ubuntu-latest
         steps:
             - uses: actions/download-artifact@v4
               with:
-                  name: test-results
+                  name: html-report--attempt-${{ github.run_attempt }}
                   path: ./report/
 
             - name: Configure AWS Credentials
@@ -122,7 +169,7 @@ jobs:
             - uses: marocchino/sticky-pull-request-comment@v2
               with:
                   message: |
-                      ${{ needs.visual-regression.result == 'failure' && format('🚫 **{0} tests failed!**', steps.parse-results.outputs.failed) || '✅ **All tests passed!**' }}
+                      ${{ contains(needs.regressions.result, 'failure') && format('🚫 **{0} tests failed!**', steps.parse-results.outputs.failed) || '✅ **All tests passed!**' }}
 
                       | Tests | Passed | Failed | Duration | Report |
                       | :---- | :----- | :----- | :------- | :----- |

.storybook/main.ts

@@ -30,10 +30,6 @@ const config: StorybookConfig = {
         },
     },
 
-    previewHead: (head) => `
-    ${head}
-    ${'<link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css" />'}`,
-
     viteFinal: async (config) => {
         const mergedConfig = mergeConfig(config, {
             ...config,

packages/core/__tests__/visual-check.test.ts → packages/core/__tests__/regressions.test.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { expect, test } from '@playwright/test';
 
 import manifest from '../../../storybook-static/index.json' with { type: 'json' };

packages/core/package.json

@@ -72,7 +72,7 @@
         "rainbow-sprinkles": "^1.0.0"
     },
     "devDependencies": {
-        "@playwright/test": "^1.55.0",
+        "@playwright/test": "^1.55.1",
         "@repo/eslint-config": "workspace:*",
         "@repo/typescript-config": "workspace:*",
         "@testing-library/dom": "^10.4.1",

packages/core/playwright.config.ts

@@ -4,27 +4,22 @@ const BASE_URL = 'http://localhost:9999';
 
 export default defineConfig({
     snapshotPathTemplate: './__tests__/screenshots/{arg}-{projectName}-{platform}-{ext}',
-    testMatch: '__tests__/visual-check.test.ts',
+    testMatch: '__tests__/regressions.test.ts',
     outputDir: `./__tests__/results/`,
 
     reporter: [
-        ['html', { outputFolder: './__tests__/report' }],
+        process.env.CI ? ['blob'] : ['html', { outputFolder: './__tests__/report' }],
         ['json', { outputFile: './__tests__/report/index.json' }],
     ],
     use: { baseURL: BASE_URL, trace: 'on' },
     projects: [
         { name: 'firefox', use: { ...devices['Desktop Firefox'] } },
         { name: 'webkit', use: { ...devices['Desktop Safari'] } },
-        {
-            name: 'chromium',
-            use: { ...devices['Desktop Chrome'], channel: 'chrome' },
-        },
-        {
-            name: 'Microsoft Edge',
-            use: { ...devices['Desktop Edge'], channel: 'msedge' },
-        },
+        { name: 'chromium', use: { ...devices['Desktop Chrome'], channel: 'chrome' } },
+        { name: 'Microsoft Edge', use: { ...devices['Desktop Edge'], channel: 'msedge' } },
     ],
 
+    fullyParallel: true,
     workers: 1,
 
     webServer: {

packages/core/playwright.merge.ts

@@ -0,0 +1,6 @@
+export default {
+    reporter: [
+        ['html', { outputFolder: './__tests__/report' }],
+        ['json', { outputFile: './__tests__/report/index.json' }],
+    ],
+};