salona/tests/CreateGiftCard.test.tsx

/* ------------------------------------------------------------------ */
/* ✅ MUST BE AT THE TOP – before any jest.mock                         */
/* ------------------------------------------------------------------ */
const mockBanners = [
  { id: 1, banner: "banner-1.jpg", cardType: "type1" },
  { id: 2, banner: "banner-2.jpg", cardType: "type2" },
];

const mockStaticGiftCardTexts = ["تولدت مبارک", "با آرزوی موفقیت"];

import { render, screen, fireEvent } from "@testing-library/react";
import "@testing-library/jest-dom";
import CreateGiftCard from "../src/apps/new-ui/pages/GiftCardCreator/Create/index";

/* ------------------------------------------------------------------ */
/* ✅ Mocks                                                            */
/* ------------------------------------------------------------------ */

// react-router
const mockNavigate = jest.fn();
jest.mock("react-router-dom", () => ({
  useNavigate: () => mockNavigate,
}));

// toast
jest.mock("react-hot-toast", () => ({
  __esModule: true,
  default: { error: jest.fn() },
}));

// AllCards
jest.mock(
  "../src/apps/new-ui/pages/GiftCardCreator/+components//AllCards",
  () => ({
    banners: mockBanners,
  }),
);

// constants
jest.mock("@/utils/constants", () => ({
  STATIC_GIFT_CARD_TEXTS: mockStaticGiftCardTexts,
}));

// GiftCard service
const mockMutate = jest.fn();
jest.mock("../src/apps/new-ui/services/GiftCard.ts", () => ({
  useCreateGiftCard: () => ({
    mutate: mockMutate,
    isPending: false,
  }),
}));

// CustomAlert
const mockAlert = jest.fn();
jest.mock("@/apps/new-ui/components/CustomAlert", () => ({
  showCustomSingleButtonAlert: (args: any) => mockAlert(args),
}));

// utils
jest.mock("../src/apps/new-ui/pages/GiftCardCreator/utils/GiftCard.ts", () => ({
  computeDisplayedAmount: jest.fn(() => "100,000"),
  computeExpireText: jest.fn(() => "10 روز"),
  getExpiryDate: jest.fn(() => "2026-01-01"),
}));

/* ------------------------------------------------------------------ */
/* ✅ Child components (simple stubs)                                  */
/* ------------------------------------------------------------------ */

jest.mock(
  "../src/apps/new-ui/pages/GiftCardCreator/+components/BannerCarousel",
  () => (props: any) => (
    <button
      data-testid="select-banner"
      onClick={() => props.onSelect(1, "banner-1.jpg", "type1")}
    >
      Banner
    </button>
  ),
);

jest.mock(
  "../src/apps/new-ui/pages/GiftCardCreator/+components/TextPicker",
  () => (props: any) => (
    <button
      data-testid="select-text"
      onClick={() => props.onSelectValue("متن تست")}
    >
      Text
    </button>
  ),
);

jest.mock(
  "../src/apps/new-ui/pages/GiftCardCreator/+components/AmountSelector",
  () => (props: any) => (
    <button
      data-testid="select-amount"
      onClick={() => props.onChooseAmount(100)}
    >
      Amount
    </button>
  ),
);

jest.mock(
  "../src/apps/new-ui/pages/GiftCardCreator/+components/DaySelector",
  () => (props: any) => (
    <button data-testid="select-day" onClick={() => props.onChooseDay(10)}>
      Day
    </button>
  ),
);

jest.mock(
  "../src/apps/new-ui/pages/GiftCardCreator/+components/ServicesGiftCard",
  () => (props: any) => (
    <button
      data-testid="select-service"
      onClick={() => props.setSelectedService("Haircut")}
    >
      Service
    </button>
  ),
);

jest.mock(
  "../src/apps/new-ui/pages/GiftCardCreator/+components/FooterActions",
  () => (props: any) => (
    <>
      <button
        data-testid="submit-btn"
        disabled={props.disabled}
        // اگر دکمه disabled باشد، onClick عملاً غیرفعال است
        onClick={props.disabled ? undefined : props.onSubmit}
      >
        Submit
      </button>
      <button onClick={props.onCancel}>Cancel</button>
    </>
  ),
);

jest.mock("../src/apps/new-ui/pages/PageTitle/PageTitle.tsx", () => () => (
  <div>PageTitle</div>
));

/* ------------------------------------------------------------------ */
/* ✅ Tests                                                            */
/* ------------------------------------------------------------------ */

describe("CreateGiftCard", () => {
  beforeEach(() => {
    jest.clearAllMocks();
  });

  it("renders without crashing", () => {
    render(<CreateGiftCard />);
    expect(screen.getByText("Submit")).toBeInTheDocument();
  });

  it("shows validation alert if submit is clicked with empty form", () => {
    render(<CreateGiftCard />);

    const submitBtn = screen.getByTestId("submit-btn");

    expect(submitBtn).toBeDisabled();

    fireEvent.click(submitBtn);
  });

  it("submits gift card when all fields are valid", () => {
    render(<CreateGiftCard />);

    fireEvent.click(screen.getByTestId("select-banner"));
    fireEvent.click(screen.getByTestId("select-text"));
    fireEvent.click(screen.getByTestId("select-amount"));
    fireEvent.click(screen.getByTestId("select-day"));
    fireEvent.click(screen.getByTestId("select-service"));

    fireEvent.click(screen.getByText("Submit"));

    expect(mockMutate).toHaveBeenCalledWith({
      amount: "100000",
      text: "متن تست",
      service: "Haircut",
      expire_date: "2026-01-01",
      card_type: "type1",
    });
  });

  it("navigates home on cancel", () => {
    render(<CreateGiftCard />);
    fireEvent.click(screen.getByText("Cancel"));
    expect(mockNavigate).toHaveBeenCalledWith("/");
  });
});