120 lines
3.4 KiB
TypeScript
120 lines
3.4 KiB
TypeScript
import LoyaltyCardListItem from "@/apps/new-ui/pages/(loyalty)/loyalty-cards/+components/LoyaltyCardListItem";
|
|
import { render, screen, fireEvent, waitFor } from "@testing-library/react";
|
|
import { BrowserRouter } from "react-router-dom";
|
|
|
|
jest.mock("@/apps/new-ui/pages/CustomerClub/index.css", () => ({}));
|
|
|
|
jest.mock("@/utils/date-time", () => ({
|
|
formatPersianDate: jest.fn(() => "1402/01/15"),
|
|
}));
|
|
|
|
jest.mock("../src/apps/new-ui/Utils/env.ts", () => ({
|
|
ENV: { API_URL: "https://api.test" },
|
|
}));
|
|
|
|
// Mock images
|
|
jest.mock(
|
|
"../../../../assets/loyalty-cards/cosmetic1.png",
|
|
() => "cosmetic1.png",
|
|
);
|
|
jest.mock(
|
|
"../../../../assets/loyalty-cards/cosmetic2.png",
|
|
() => "cosmetic2.png",
|
|
);
|
|
jest.mock(
|
|
"../../../../assets/loyalty-cards/cosmetic3.png",
|
|
() => "cosmetic3.png",
|
|
);
|
|
jest.mock(
|
|
"../../../../assets/loyalty-cards/cosmetic4.png",
|
|
() => "cosmetic4.png",
|
|
);
|
|
jest.mock("../../../../assets/profilePhoto.svg", () => "avatar.svg");
|
|
|
|
jest.mock("@/apps/new-ui/constant/CustomerTypes", () => ({
|
|
CUSTOMER_TYPES: [
|
|
{ status: "VIP", icon: "vip.png" },
|
|
{ status: "NORMAL", icon: "normal.png" },
|
|
],
|
|
}));
|
|
|
|
const renderUI = (data: any, handlers: any) =>
|
|
render(
|
|
<BrowserRouter>
|
|
<LoyaltyCardListItem {...handlers} data={data} />
|
|
</BrowserRouter>,
|
|
);
|
|
|
|
describe("LoyaltyCardListItem", () => {
|
|
const baseData = {
|
|
id: 55,
|
|
customer_name: "علی رضایی",
|
|
customer_phone_number: "09120000000",
|
|
card_type: "1",
|
|
creation_time: "2024-02-10 12:00",
|
|
link: "https://example.com/share/55",
|
|
description_of_discount: "20 درصد تخفیف",
|
|
predicted_number_of_visits: 12,
|
|
primary_number_of_visits: 3,
|
|
extera_description: "توضیحات تست",
|
|
};
|
|
|
|
const handlers = {
|
|
deleteLoyaltyCardHandler: jest.fn(),
|
|
shareLinkHandler: jest.fn(),
|
|
deletePending: false,
|
|
};
|
|
|
|
test("renders basic loyalty card info", async () => {
|
|
renderUI(baseData, handlers);
|
|
|
|
await waitFor(() => {
|
|
expect(screen.getByText("کارت وفاداری")).toBeInTheDocument();
|
|
});
|
|
});
|
|
|
|
test("fetches customer profile picture and renders medal", async () => {
|
|
renderUI(baseData, handlers);
|
|
|
|
await waitFor(() => {
|
|
const img = screen.getByAltText("avatar");
|
|
expect(img).toBeInTheDocument();
|
|
});
|
|
});
|
|
|
|
// test("calls delete handler when X clicked", () => {
|
|
// renderUI(baseData, handlers);
|
|
|
|
// const xIcon = screen.getByText("کارت وفاداری").previousElementSibling;
|
|
// if (xIcon) fireEvent.click(xIcon);
|
|
|
|
// expect(handlers.deleteLoyaltyCardHandler).toHaveBeenCalledWith(55);
|
|
// });
|
|
|
|
test("calls delete handler when X clicked", () => {
|
|
renderUI(baseData, handlers);
|
|
|
|
// DeleteButton is after the "کارت وفاداری" text, find it by its container
|
|
const deleteBtn = screen
|
|
.getByText("کارت وفاداری")
|
|
.closest("div")!
|
|
.querySelector("button");
|
|
|
|
if (deleteBtn) fireEvent.click(deleteBtn);
|
|
|
|
expect(handlers.deleteLoyaltyCardHandler).toHaveBeenCalledWith(55);
|
|
});
|
|
|
|
test("toggles accordion on click", () => {
|
|
renderUI(baseData, handlers);
|
|
|
|
const moreBtn = screen.getByText("بیشتر");
|
|
fireEvent.click(moreBtn);
|
|
expect(screen.getByText("جایزه")).toBeInTheDocument();
|
|
|
|
const lessBtn = screen.getByText("کمتر");
|
|
fireEvent.click(lessBtn);
|
|
expect(screen.queryByText("جایزه")).not.toBeInTheDocument();
|
|
});
|
|
});
|