diff --git a/packages/shared-ui/.storybook/main.ts b/packages/shared-ui/.storybook/main.ts index 6f29262..2f6b18c 100644 --- a/packages/shared-ui/.storybook/main.ts +++ b/packages/shared-ui/.storybook/main.ts @@ -5,6 +5,7 @@ const config = { "@storybook/addon-essentials", "@storybook/addon-onboarding", "@storybook/addon-interactions", + "@storybook/addon-a11y", ], docs: { autodocs: "tag", diff --git a/packages/shared-ui/components/cart/CartContent.tsx b/packages/shared-ui/components/cart/CartContent.tsx index 25f26a5..791bf10 100644 --- a/packages/shared-ui/components/cart/CartContent.tsx +++ b/packages/shared-ui/components/cart/CartContent.tsx @@ -45,7 +45,9 @@ export const CartContent = ({ ProductListLink }: CartContentProps) => {
Total - {isLoading ? "..." : currencyFormatter.format(totalPrice)} + + {isLoading ? "..." : currencyFormatter.format(totalPrice)} +
-
@@ -121,12 +121,25 @@ export const API: StoryObj = { ); }, ], - play: async ({ canvasElement }) => { + play: async ({ canvasElement, step }) => { const canvas = within(canvasElement); - await waitFor(async () => { + await step("add to cart", async () => { await userEvent.click(canvas.getByRole("button", { name: /product1/i })); await userEvent.click(canvas.getByRole("button", { name: /product2/i })); expect(canvas.getByTestId("cart")).toHaveTextContent("Cart3"); }); + + await step("open cart and modify quantity", async () => { + await userEvent.click(canvas.getByTestId("cart")); + await userEvent.type(canvas.getByLabelText("product 1 quantity"), "{backspace}9"); + await waitFor(() => expect(canvas.getByTestId("total")).toHaveTextContent("$20.00")); + }); + + await step("clear cart", async () => { + await userEvent.click(canvas.getByRole("button", { name: /close/i })); + expect(canvas.getByTestId("cart")).toHaveTextContent("Cart10"); + await userEvent.click(canvas.getByRole("button", { name: /clear/i })); + expect(canvas.getByTestId("cart")).toHaveTextContent("Cart0"); + }); }, }; diff --git a/packages/shared-ui/package.json b/packages/shared-ui/package.json index 955069b..db37f1f 100644 --- a/packages/shared-ui/package.json +++ b/packages/shared-ui/package.json @@ -29,8 +29,10 @@ "react-dom": ">=18.0.0" }, "devDependencies": { + "@storybook/addon-a11y": "^7.5.2", "@storybook/addon-actions": "^7.5.2", "@storybook/react-vite": "^7.5.2", + "http-server": "^14.1.1", "react": "18.2.0", "react-dom": "18.2.0", "tsup": "^7.2.0" diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 883277f..b6cbf1a 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -299,12 +299,18 @@ importers: specifier: ^4.4.0 version: 4.4.0(react@18.2.0) devDependencies: + '@storybook/addon-a11y': + specifier: ^7.5.2 + version: 7.5.2(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0)(react@18.2.0) '@storybook/addon-actions': specifier: ^7.5.2 version: 7.5.2(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0)(react@18.2.0) '@storybook/react-vite': specifier: ^7.5.2 version: 7.5.2(react-dom@18.2.0)(react@18.2.0)(typescript@4.9.4) + http-server: + specifier: ^14.1.1 + version: 14.1.1 react: specifier: 18.2.0 version: 18.2.0 @@ -4473,6 +4479,37 @@ packages: '@sinonjs/commons': 1.8.6 dev: true + /@storybook/addon-a11y@7.5.2(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-HTYESaRr208b/AVguudRIy7rwRMk2bOkBr2P46ozK+8Y9mWXnKxw5O8qYS2kLuEuHfu1S+ktWp7SWjRvz8vHXA==} + peerDependencies: + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + react: + optional: true + react-dom: + optional: true + dependencies: + '@storybook/addon-highlight': 7.5.2 + '@storybook/channels': 7.5.2 + '@storybook/client-logger': 7.5.2 + '@storybook/components': 7.5.2(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0)(react@18.2.0) + '@storybook/core-events': 7.5.2 + '@storybook/global': 5.0.0 + '@storybook/manager-api': 7.5.2(react-dom@18.2.0)(react@18.2.0) + '@storybook/preview-api': 7.5.2 + '@storybook/theming': 7.5.2(react-dom@18.2.0)(react@18.2.0) + '@storybook/types': 7.5.2 + axe-core: 4.4.3 + lodash: 4.17.21 + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + react-resize-detector: 7.1.2(react-dom@18.2.0)(react@18.2.0) + transitivePeerDependencies: + - '@types/react' + - '@types/react-dom' + dev: true + /@storybook/addon-actions@7.4.0(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-0lHLLUlrGE7CBFrfmAXrBKu7fUIsiQlnNekuE3cIAjSgVR481bJEzYHUUoMATqpPC4GGErBdP1CZxVDDwWV8jA==} peerDependencies: @@ -4664,6 +4701,14 @@ packages: '@storybook/preview-api': 7.4.0 dev: true + /@storybook/addon-highlight@7.5.2: + resolution: {integrity: sha512-0vek42fHh7Aeinvkwge0ZTq5VfNsuMSejUv0wHa3zQWgUmlaRlGY8zDw7nG6LiIz6rnTBDTznsfyWenAySSHXg==} + dependencies: + '@storybook/core-events': 7.5.2 + '@storybook/global': 5.0.0 + '@storybook/preview-api': 7.5.2 + dev: true + /@storybook/addon-interactions@7.4.0(@types/react-dom@18.2.0)(@types/react@18.2.0): resolution: {integrity: sha512-nEWP+Ib0Y/ShXfpCm40FBTbBy1/MT8XxTEAhcNN+3ZJ07Vhhkrb8GMlWHTKQv2PyghEVBYEoPFHhElUJQOe00g==} peerDependencies: @@ -16078,6 +16123,17 @@ packages: use-sidecar: 1.1.2(@types/react@18.2.0)(react@18.2.0) dev: true + /react-resize-detector@7.1.2(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-zXnPJ2m8+6oq9Nn8zsep/orts9vQv3elrpA+R8XTcW7DVVUJ9vwDwMXaBtykAYjMnkCIaOoK9vObyR7ZgFNlOw==} + peerDependencies: + react: ^16.0.0 || ^17.0.0 || ^18.0.0 + react-dom: ^16.0.0 || ^17.0.0 || ^18.0.0 + dependencies: + lodash: 4.17.21 + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + dev: true + /react-rx@2.1.3(react@18.2.0)(rxjs@7.8.0): resolution: {integrity: sha512-4dppkgEFAldr75IUUz14WyxuI2cJhpXYrrIM+4gvG6slKzaMUCmcgiiykx9Hst0UmtwNt247nRoOFDmN0Q7GJw==} peerDependencies: