UI-329 : integrating tests with storybook

.github/workflows/chromatic.yml

@@ -0,0 +1,27 @@
+name: "Chromatic"
+
+on: push
+
+jobs:
+  chromatic:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - uses: pnpm/action-setup@v2
+        name: install pnpm
+        with:
+          version: 8.10.0
+          run_install: false
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Run Chromatic
+        uses: chromaui/action@latest
+        with:
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          workingDir: packages/phoenix

.github/workflows/storybook-tests.yml

@@ -0,0 +1,36 @@
+name: 'Storybook Tests'
+on: push
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 20.9.0
+
+      - uses: pnpm/action-setup@v2
+        name: install pnpm
+        with:
+          version: 8.10.0
+          run_install: false
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Install Playwright
+        run: npx playwright install --with-deps
+
+      - name: Build Storybook
+        run: pnpm build-storybook --quiet
+        working-directory: packages/phoenix
+
+      - name: Install wait-on
+        run: pnpm add -D wait-on
+        working-directory: packages/phoenix
+
+      - name: Serve Storybook and run tests
+        run: pnpm test-storybook:ci
+        working-directory: packages/phoenix

packages/phoenix/.storybook/main.ts

@@ -9,14 +9,16 @@ module.exports = {
   "addons": [
     "@storybook/addon-links",
     "@storybook/addon-essentials",
-    "@storybook/addon-interactions"
+    "@storybook/addon-interactions",
+    "@chromatic-com/storybook",
+    "storybook-addon-rtl"
   ],
   "framework": {
     "name": "@storybook/vue3-vite",
     "options": {}
   },
   "docs": {
-    "docsPage": false
+    autodocs: true
   },
   async viteFinal(config, { configType }) {
     config.resolve.alias['~'] =  `${path.resolve(__dirname, 'src')}/`;

packages/phoenix/.storybook/preview.ts

@@ -3,7 +3,6 @@ import '../src/assets/main.css';
 import '@youcan/ui-core/tokens';
 
 export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
   controls: {
     matchers: {
       color: /(background|color)$/i,

packages/phoenix/chromatic.config.json

@@ -0,0 +1,4 @@
+{
+  "projectId": "Project:66432575dd302195a63c304b",
+  "zip": true
+}

packages/phoenix/package.json

@@ -2,7 +2,11 @@
   "name": "@youcan/ui-vue3",
   "version": "2.6.0-beta.3",
   "description": "YouCan Vue3 components library",
-  "author": "YouCan <[email protected]> (https://github.com/youcan-shop/)",
+  "author": {
+    "name": "YouCan",
+    "email": "[email protected]",
+    "url": "https://github.com/youcan-shop/"
+  },
   "license": "MIT",
   "homepage": "https://github.com/youcan-shop/youcan-ui",
   "keywords": [
@@ -55,7 +59,10 @@
     "lint": "eslint .",
     "storybook": "storybook dev -p 6007",
     "build-storybook": "storybook build",
-    "bench": "node vue3.bench.mjs"
+    "bench": "node vue3.bench.mjs",
+    "chromatic": "chromatic --exit-zero-on-changes",
+    "test-storybook": "test-storybook --url http://127.0.0.1:6007",
+    "test-storybook:ci": "npx concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"npx http-server storybook-static --port 6007 --silent\" \"npx wait-on tcp:6007 && pnpm test-storybook --url http://127.0.0.1:6007\""
   },
   "peerDependencies": {
     "vue": "^3.4.5"
@@ -66,26 +73,31 @@
     "vue-slicksort": "^2.0.5"
   },
   "devDependencies": {
+    "@chromatic-com/storybook": "^1.3.4",
     "@iconify-json/line-md": "^1.1.20",
     "@iconify-json/tabler": "^1.1.53",
-    "@storybook/addon-essentials": "^7.6.10",
-    "@storybook/addon-interactions": "^7.6.10",
-    "@storybook/addon-links": "^7.6.10",
-    "@storybook/blocks": "^7.6.10",
-    "@storybook/test": "^7.6.10",
-    "@storybook/vue3": "^7.6.10",
-    "@storybook/vue3-vite": "^7.6.10",
+    "@storybook/addon-essentials": "^8.0.10",
+    "@storybook/addon-interactions": "^8.0.10",
+    "@storybook/addon-links": "^8.0.10",
+    "@storybook/blocks": "^8.0.10",
+    "@storybook/test": "^8.0.10",
+    "@storybook/test-runner": "^0.18.0",
+    "@storybook/vue3": "^8.0.10",
+    "@storybook/vue3-vite": "^8.0.10",
     "@types/node": "18.7.15",
     "@types/quill": "^2.0.14",
     "@vitejs/plugin-vue": "^5.0.2",
     "@vueuse/core": "^9.9.0",
     "@youcan/ui-core": "*",
     "@youcan/ui-icons": "*",
     "@youcan/ui-visuals": "*",
+    "chromatic": "^11.3.1",
+    "playwright": "^1.44.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "sass": "1.54.8",
-    "storybook": "^7.6.10",
+    "storybook": "^8.0.10",
+    "storybook-addon-rtl": "^1.0.0",
     "typescript": "4.8.2",
     "unocss": "^0.47.6",
     "vite": "^5.0.11",

packages/phoenix/src/components/Sidebar/SidebarSubitem.stories.ts

@@ -25,8 +25,8 @@ export const SidebarSubitem_: Story = {
       <Sidebar>
         <template #items>
           <SidebarItem v-bind="item">
-            <SidebarSubitem v-bind="args">
-          <SidebarItem/>
+            <SidebarSubitem v-bind="args" />
+          </SidebarItem>
         </template>
       </Sidebar>
     `,