import { act, fireEvent, render, screen } from "@testing-library/react";
import { vi } from "vitest";
import { sampleProduct } from "../fixtures";

describe("ShopContext", () => {
  it("adds items to cart", async () => {
    const shopContextPath = new URL("../../context/ShopContext.tsx", import.meta.url).pathname;
    vi.doUnmock(shopContextPath);
    await vi.resetModules();

    const { ShopProvider, useShop } = await import(shopContextPath);

    const TestComponent = () => {
      const { cart, addToCart } = useShop();
      return (
        <div>
          <span data-testid="count">{cart.length}</span>
          <button onClick={() => addToCart(sampleProduct)}>Add</button>
        </div>
      );
    };

    render(
      <ShopProvider>
        <TestComponent />
      </ShopProvider>
    );

    await act(async () => {
      await Promise.resolve();
    });

    expect(screen.getByTestId("count").textContent).toBe("0");
    await act(async () => {
      fireEvent.click(screen.getByRole("button", { name: "Add" }));
    });

    expect(screen.getByTestId("count").textContent).toBe("1");
  });
});