fix: test workflow

Author: hussedev

.github/workflows/storybook-tests-on-push.yml

@@ -1,4 +1,4 @@
-name: "Storybook Tests"
+name: "Tests Storybook"
 on: push
 
 concurrency:
@@ -26,28 +26,41 @@ jobs:
       - name: Install dependencies
         run: pnpm install
 
-      - name: Cache Playwright browsers
+      - name: Cache Build
+        id: cache-build
         uses: actions/cache@v4
         with:
-          path: ~/.cache/ms-playwright
-          key: ${{ runner.os }}-playwright-${{ hashFiles('**/pnpm-lock.yaml') }}
+          path: dist
+          key: ${{ runner.os }}-build-${{ hashFiles('**/*.ts', '**/*.tsx', '**/*.mdx', '**/pnpm-lock.yaml') }} # Cache key based on OS and file hashes
           restore-keys: |
-            ${{ runner.os }}-playwright-
+            ${{ runner.os }}-build-
 
-      - name: Install Playwright
-        run: npx playwright install --with-deps
+      - name: Build
+        if: steps.cache-build.outputs.cache-hit != 'true'
+        run: pnpm build
 
       - name: Cache Storybook build
         uses: actions/cache@v4
         with:
           path: storybook-static
-          key: ${{ runner.os }}-storybook-${{ hashFiles('**/pnpm-lock.yaml') }}
+          key: ${{ runner.os }}-storybook-${{ hashFiles('**/*.ts', '**/*.tsx', '**/*.mdx', '**/pnpm-lock.yaml') }}
           restore-keys: |
             ${{ runner.os }}-storybook-
 
       - name: Build Storybook
         run: pnpm build-storybook --quiet
 
+      - name: Cache Playwright browsers
+        uses: actions/cache@v4
+        with:
+          path: ~/.cache/ms-playwright
+          key: ${{ runner.os }}-playwright-${{ hashFiles('**/*.ts', '**/*.tsx', '**/*.mdx', '**/pnpm-lock.yaml') }} # Cache key based on OS and file hashes
+          restore-keys: |
+            ${{ runner.os }}-playwright-
+
+      - name: Install Playwright
+        run: npx playwright install --with-deps
+
       - name: Serve Storybook and run tests
         run: |
           npx concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \

lib/examples/task-list/task-list.tsx

@@ -34,10 +34,11 @@ export const TaskList = () => {
 
       <div className="ui-flex ui-flex-col ui-rounded-md ui-bg-slate-50 ui-shadow-md dark:ui-bg-slate-800">
         {error ? (
-          <div className="ui-flex ui-items-center ui-gap-2 ui-border-b ui-border-slate-200 ui-px-4 ui-py-2 last:ui-border-b-0 dark:ui-border-slate-800">
-            <p data-testid="error-message" className="ui-text-danger-500">
-              Error loading tasks: {error.message}
-            </p>
+          <div
+            data-testid="error-message"
+            className="ui-flex ui-items-center ui-gap-2 ui-border ui-border-danger-500 ui-px-4 ui-py-2 dark:ui-border-slate-800"
+          >
+            Error loading tasks: {error.message}
           </div>
         ) : (
           tasks.map((task) => (

package.json

@@ -2,9 +2,9 @@
   "name": "gitcoin-ui",
   "version": "0.0.0",
   "type": "module",
+  "types": "./dist/index.d.ts",
   "main": "./dist/index.umd.ts",
   "module": "./dist/index.es.ts",
-  "types": "./dist/index.d.ts",
   "files": [
     "dist"
   ],
@@ -48,6 +48,7 @@
     "@vitejs/plugin-react": "^4.3.2",
     "@vitejs/plugin-react-swc": "^3.7.1",
     "autoprefixer": "^10.4.20",
+    "axe-playwright": "^2.0.3",
     "chromatic": "^11.12.5",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",