Kuma/tests/products/pass-card.test.tsx

import { describe, it, expect, vi } from "vitest";
import { render, screen } from "@testing-library/react";

vi.mock("next/image", () => ({ default: () => null }));

import PassCard from "@/src/modules/products/ui/components/PassCard";
import type { CardDesign } from "@/src/modules/products/lib/card-design";

const design: CardDesign = {
  style: "solid",
  color: "#112233",
  secondaryColor: "#445566",
  imageUrl: null,
};

const baseProps = {
  design,
  studioName: "Studio Mia",
  logoUrl: null,
  title: "10er-Karte",
  credits: 10,
  validity: "6 Monate gültig",
};

describe("PassCard", () => {
  it("zeigt als Produkt alle Einheiten", () => {
    render(<PassCard {...baseProps} />);
    expect(screen.getByText("10 Einheiten")).toBeInTheDocument();
    expect(screen.getByText("6 Monate gültig")).toBeInTheDocument();
  });

  it("zeigt auf einer gekauften Karte die übrigen Einheiten und den Namen", () => {
    const { container } = render(
      <PassCard {...baseProps} remaining={7} holderName="Anna Müller" />
    );
    expect(screen.getByText("7 von 10 frei")).toBeInTheDocument();
    expect(screen.getByText("Anna Müller")).toBeInTheDocument();
    // 7 gefüllte von 10 Punkten
    expect(container.querySelectorAll("span.bg-current")).toHaveLength(7);
  });

  it("zeigt bei vielen Einheiten einen Balken statt Punkten", () => {
    const { container } = render(<PassCard {...baseProps} credits={30} remaining={15} />);
    expect(container.querySelectorAll("span.rounded-full")).toHaveLength(0);
    expect(container.querySelector('[style*="width: 50%"]')).not.toBeNull();
  });
});