tests

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",

packages/shared-ui/components/cart/CartContent.tsx

@@ -45,7 +45,9 @@ export const CartContent = ({ ProductListLink }: CartContentProps) => {
       <div className="flex flex-col gap-3">
         <div className="flex justify-between items-center text-h6">
           <span>Total</span>
-          <span className="font-bold font-jeanLuc">{isLoading ? "..." : currencyFormatter.format(totalPrice)}</span>
+          <span className="font-bold font-jeanLuc" data-testid="total">
+            {isLoading ? "..." : currencyFormatter.format(totalPrice)}
+          </span>
         </div>
         <Button variant="primary" as="button" onClick={notifyWeDontSellBread}>
           Checkout

packages/shared-ui/components/cart/CartItem.tsx

@@ -45,6 +45,7 @@ export const CartLineItem = ({ item }: CartItemProps) => {
             value={desiredQty}
             name="amount"
             type="number"
+            aria-label={`${item.name} quantity`}
             placeholder="1"
             min={1}
             max={100}

packages/shared-ui/components/cart/stories/Cart.stories.tsx

@@ -55,7 +55,7 @@ const AddToCartButtons = () => {
       >
         Add product2
       </button>
-      <button type="button" className="bg-red text-white hover:bg-red/90 mr-2 p-2" onClick={clearCart}>
+      <button type="button" className="border-black border hover:bg-red/90 mr-2 p-2" onClick={clearCart}>
         Clear Cart
       </button>
     </div>
@@ -121,12 +121,25 @@ export const API: StoryObj<typeof Cart> = {
       );
     },
   ],
-  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");
+    });
   },
 };

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"