feat/test storybook

.github/workflows/storybook-test.yml

@@ -0,0 +1,48 @@
+name: Storybook Tests
+
+on:
+  pull_request:
+    branches:
+      - '*'
+      - '*/*'
+      - '**'
+
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version-file: '.nvmrc'
+      - name: Install dependencies
+        run: yarn
+      - name: Install Playwright
+        run: npx playwright install --with-deps
+      - name: Build Storybook
+        run: yarn storybook:build --quiet
+      - name: Serve Storybook and run tests
+        run: |
+           npx concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \
+            "npx http-server storybook-static --port 6006 --silent" \
+            "npx wait-on http-get://127.0.0.1:6006 && yarn storybook:test"
+  user-flow:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - uses: actions/setup-node@v3
+        with:
+          node-version-file: '.nvmrc'
+      - name: Install dependencies
+        run: yarn
+      - name: Publish to Chromatic
+        uses: chromaui/action@latest
+        with:
+          projectToken: "chpt_ca9ead39821522d"
+          autoAcceptChanges: "main"
+          buildScriptName: "storybook:build"
+        env:
+          CI: true

package.json

@@ -34,9 +34,10 @@
     "version:major": "npm version major",
     "version:minor": "npm version minor",
     "version:patch": "npm version patch",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
-    "chromatic": "npx chromatic --project-token=chpt_ca9ead39821522d"
+    "storybook:dev": "storybook dev -p 6006",
+    "storybook:build": "storybook build",
+    "storybook:test": "test-storybook",
+    "storybook:chromatic": "npx chromatic --project-token=chpt_ca9ead39821522d"
   },
   "lint-staged": {
     "*.{ts,tsx}": [
@@ -67,14 +68,17 @@
     "@platformbuilders/eslint-config-builders": "1.0.2",
     "@storybook/addon-a11y": "^7.6.12",
     "@storybook/addon-essentials": "^7.6.12",
-    "@storybook/addon-interactions": "^7.6.12",
+    "@storybook/addon-interactions": "^7.6.13",
     "@storybook/addon-links": "^7.6.12",
     "@storybook/addon-onboarding": "^1.0.11",
     "@storybook/addon-themes": "^7.6.12",
     "@storybook/blocks": "^7.6.12",
+    "@storybook/jest": "^0.2.3",
     "@storybook/react": "^7.6.12",
     "@storybook/react-vite": "^7.6.12",
     "@storybook/test": "^7.6.12",
+    "@storybook/test-runner": "^0.16.0",
+    "@storybook/testing-library": "^0.2.2",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "14.0.0",
     "@types/lodash": "4.14.196",

src/components/Button/Button.stories.tsx

@@ -1,6 +1,16 @@
+import { expect, jest } from '@storybook/jest';
 import type { Meta, StoryObj } from '@storybook/react';
+import { configure, userEvent, within } from '@storybook/testing-library';
 import Button from './index';
 
+configure({
+  testIdAttribute: 'testid',
+});
+
+//  Mocks
+const normalBtnFn = jest.fn();
+const btnNormalID = 'button-normal-id';
+
 const meta: Meta<typeof Button> = {
   title: 'Components/Button',
   component: Button,
@@ -22,6 +32,22 @@ export const Normal: Story = {
   args: {
     children: 'Botão de Teste',
     size: 'normal',
+    testID: btnNormalID,
+    onPress: normalBtnFn,
+  },
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+
+    await step('Button - Normal | Test Render', async () => {
+      expect(canvas.getByTestId(btnNormalID)).toBeInTheDocument();
+      expect(normalBtnFn).not.toHaveBeenCalled();
+    });
+
+    await step('Button - Normal | Check Event Click', async () => {
+      await userEvent.click(canvas.getByTestId(btnNormalID));
+
+      expect(normalBtnFn).toHaveBeenCalled();
+    });
   },
 };
 

src/components/Button/button.test.tsx

@@ -47,6 +47,7 @@ describe('Component: Button', () => {
     // then
     expect(mockFunction).toHaveBeenCalled();
   });
+
   test('should not call onPress when pressed', () => {
     // should
     const mockFunction = vi.fn();