You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
82 lines
2.4 KiB
82 lines
2.4 KiB
import { cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react";
|
|
import { afterEach, describe, expect, it, vi } from "vitest";
|
|
import type { QuestionField } from "@/lib/schema-adapter";
|
|
import { QuestionPhone } from "./question-phone";
|
|
|
|
afterEach(() => {
|
|
cleanup();
|
|
});
|
|
|
|
vi.mock("@/translations/provider", () => ({
|
|
useI18n: () => ({
|
|
dictionary: {
|
|
"Select country": "انتخاب کشور",
|
|
Close: "بستن",
|
|
Confirm: "تایید",
|
|
},
|
|
locale: "fa",
|
|
}),
|
|
}));
|
|
|
|
vi.mock("./question-answer-storage", () => ({
|
|
useQuestionAnswers: () => ({
|
|
getAnswerValue: () => null,
|
|
setAnswerValue: vi.fn(),
|
|
isLoading: false,
|
|
}),
|
|
}));
|
|
|
|
describe("QuestionPhone Component", () => {
|
|
const mockQuestion = {
|
|
id: "personal_contact_number",
|
|
title: "شماره تماس شخصی",
|
|
type: "phone",
|
|
extras: {
|
|
placeHolder: "+98 9123456789",
|
|
},
|
|
} as QuestionField;
|
|
|
|
it("renders phone input and opens sheet on country code click", async () => {
|
|
render(<QuestionPhone question={mockQuestion} countryCode="+98" />);
|
|
|
|
const countryButton = screen.getByRole("button", { name: /\+98/i });
|
|
expect(countryButton).toBeInTheDocument();
|
|
|
|
fireEvent.click(countryButton);
|
|
|
|
const dialog = screen.getByRole("dialog");
|
|
expect(dialog).toBeInTheDocument();
|
|
expect(screen.getByText("انتخاب کشور")).toBeInTheDocument();
|
|
|
|
// Close button exists in header
|
|
const closeBtn = screen.getByLabelText("Close");
|
|
expect(closeBtn).toBeInTheDocument();
|
|
|
|
// Search input is present with translated placeholder
|
|
const searchInput = screen.getByPlaceholderText("جستجو...");
|
|
expect(searchInput).toBeInTheDocument();
|
|
});
|
|
|
|
it("filters countries when searching and selects a country", async () => {
|
|
const { container } = render(
|
|
<QuestionPhone question={mockQuestion} countryCode="+44" />,
|
|
);
|
|
|
|
const triggerButton = container.querySelector("button")!;
|
|
fireEvent.click(triggerButton);
|
|
|
|
const searchInput = screen.getByPlaceholderText("جستجو...");
|
|
fireEvent.change(searchInput, { target: { value: "ایران" } });
|
|
|
|
// Option should be rendered
|
|
const iranOption = screen.getByRole("button", { name: /ایران/i });
|
|
expect(iranOption).toBeInTheDocument();
|
|
|
|
fireEvent.click(iranOption);
|
|
|
|
// After selection, dialog closes
|
|
await waitFor(() => {
|
|
expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
|
|
});
|
|
});
|
|
});
|