AddToCartButton.stories.tsx

import type { Meta, StoryObj } from "@storybook/react-vite";
import {
  userEvent,
  screen,
  waitForElementToBeRemoved,
  expect,
} from "storybook/test";
import {
  withRouter,
  reactRouterParameters,
} from "storybook-addon-remix-react-router";

import { generateUuid } from "@/test-lib/generate-uuid";
import { putAddToCartHandler } from "@/test-lib/handlers/put-add-to-cart-handler";

import { AddToCartButton } from "./AddToCartButton";
import { ProductAddedDialog } from "./ProductAddedDialog";

const meta = {
  title: "modules/Carts/AddToCartButton",
  component: AddToCartButton,
  decorators: [
    (story) => {
      return (
        <>
          {story()}
          <ProductAddedDialog />
        </>
      );
    },
    withRouter,
  ],
  parameters: {
    layout: "centered",
    msw: {
      handlers: [putAddToCartHandler()],
    },
    reactRouter: reactRouterParameters({
      routing: { path: "/products" },
    }),
  },
} satisfies Meta<typeof AddToCartButton>;

export default meta;
type Story = StoryObj<typeof meta>;

export const Default: Story = {
  args: { productId: generateUuid() },
};

export const AddingProductToCart: Story = {
  ...Default,
  play: async ({ step }) => {
    await step("Add a new product", async () => {
      await userEvent.click(
        screen.getByRole("button", { name: /Add to cart/ })
      );

      await expect(
        await screen.findByText(
          "A product has been successfully added to your cart."
        )
      ).toBeInTheDocument();
      await expect(
        await screen.findByText(
          /Wonderful! You have already added a new product to your cart/
        )
      ).toBeInTheDocument();
    });

    await step("Acknowledge and continue shopping", async () => {
      await userEvent.click(
        screen.getByRole("button", { name: /Continue shopping/ })
      );

      await waitForElementToBeRemoved(() =>
        screen.queryByText(
          /Wonderful! You have already added a new product to your cart/
        )
      );
    });
  },
};