diff --git a/.github/workflows/storybook-test.yml b/.github/workflows/storybook-test.yml new file mode 100644 index 0000000..b329fd8 --- /dev/null +++ b/.github/workflows/storybook-test.yml @@ -0,0 +1,24 @@ +name: Storybook Tests + +on: deployment_statuson: + 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: Run Storybook tests + run: yarn storybook:test diff --git a/package.json b/package.json index 6e2069c..3a06480 100644 --- a/package.json +++ b/package.json @@ -34,8 +34,9 @@ "version:major": "npm version major", "version:minor": "npm version minor", "version:patch": "npm version patch", - "storybook": "storybook dev -p 6006", - "build-storybook": "storybook build", + "storybook:dev": "storybook dev -p 6006", + "storybook:build": "storybook build", + "storybook:test": "test-storybook", "chromatic": "npx chromatic --project-token=chpt_ca9ead39821522d" }, "lint-staged": { @@ -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", diff --git a/src/components/Button/Button.stories.tsx b/src/components/Button/Button.stories.tsx index 173e9eb..e58bede 100644 --- a/src/components/Button/Button.stories.tsx +++ b/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 = { 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(); + }); }, }; diff --git a/src/components/Button/button.test.tsx b/src/components/Button/button.test.tsx index 684351f..605ad6e 100644 --- a/src/components/Button/button.test.tsx +++ b/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();