121 lines
4.1 KiB
TypeScript
121 lines
4.1 KiB
TypeScript
import { fireEvent, render, screen } from "@testing-library/react";
|
|
import { describe, expect, it, vi } from "vitest";
|
|
import { CreateTabloModal } from "./CreateTabloModal";
|
|
|
|
// Mock ClickOutside
|
|
vi.mock("./ClickOutside", () => ({
|
|
ClickOutside: ({ children, onClickOutside }: any) => (
|
|
<div data-testid="click-outside" onClick={onClickOutside}>
|
|
{children}
|
|
</div>
|
|
),
|
|
}));
|
|
|
|
// Mock translations
|
|
vi.mock("react-i18next", () => ({
|
|
useTranslation: () => ({
|
|
t: (key: string) => key,
|
|
}),
|
|
}));
|
|
|
|
describe("CreateTabloModal", () => {
|
|
const mockOnClose = vi.fn();
|
|
const mockOnCreate = vi.fn();
|
|
|
|
beforeEach(() => {
|
|
vi.clearAllMocks();
|
|
});
|
|
|
|
it("renders without crashing", () => {
|
|
render(<CreateTabloModal onClose={mockOnClose} onCreate={mockOnCreate} />);
|
|
expect(screen.getByText("modals:createTablo.title")).toBeInTheDocument();
|
|
});
|
|
|
|
it("displays name input field", () => {
|
|
render(<CreateTabloModal onClose={mockOnClose} onCreate={mockOnCreate} />);
|
|
expect(screen.getByPlaceholderText("modals:createTablo.namePlaceholder")).toBeInTheDocument();
|
|
});
|
|
|
|
it("allows typing in name input", () => {
|
|
render(<CreateTabloModal onClose={mockOnClose} onCreate={mockOnCreate} />);
|
|
const input = screen.getByPlaceholderText(
|
|
"modals:createTablo.namePlaceholder"
|
|
) as HTMLInputElement;
|
|
fireEvent.change(input, { target: { value: "New Tablo" } });
|
|
expect(input.value).toBe("New Tablo");
|
|
});
|
|
|
|
it("calls onCreate when create button is clicked with valid name", () => {
|
|
render(<CreateTabloModal onClose={mockOnClose} onCreate={mockOnCreate} />);
|
|
const input = screen.getByPlaceholderText("modals:createTablo.namePlaceholder");
|
|
fireEvent.change(input, { target: { value: "New Tablo" } });
|
|
|
|
const createButton = screen.getByText("common:buttons.create");
|
|
fireEvent.click(createButton);
|
|
|
|
expect(mockOnCreate).toHaveBeenCalledWith({
|
|
name: "New Tablo",
|
|
status: "todo",
|
|
image: null,
|
|
color: "bg-blue-500",
|
|
});
|
|
});
|
|
|
|
it("does not call onCreate when name is empty", () => {
|
|
render(<CreateTabloModal onClose={mockOnClose} onCreate={mockOnCreate} />);
|
|
const createButton = screen.getByText("common:buttons.create");
|
|
fireEvent.click(createButton);
|
|
|
|
expect(mockOnCreate).not.toHaveBeenCalled();
|
|
});
|
|
|
|
it("disables create button when name is empty", () => {
|
|
render(<CreateTabloModal onClose={mockOnClose} onCreate={mockOnCreate} />);
|
|
const createButton = screen.getByText("common:buttons.create");
|
|
expect(createButton).toBeDisabled();
|
|
});
|
|
|
|
it("calls onClose when cancel button is clicked", () => {
|
|
render(<CreateTabloModal onClose={mockOnClose} onCreate={mockOnCreate} />);
|
|
const cancelButton = screen.getByText("common:buttons.cancel");
|
|
fireEvent.click(cancelButton);
|
|
expect(mockOnClose).toHaveBeenCalled();
|
|
});
|
|
|
|
it("renders StatusPicker component", () => {
|
|
render(<CreateTabloModal onClose={mockOnClose} onCreate={mockOnCreate} />);
|
|
expect(screen.getByText("À faire")).toBeInTheDocument();
|
|
});
|
|
|
|
it("renders ImageColorPicker component", () => {
|
|
render(<CreateTabloModal onClose={mockOnClose} onCreate={mockOnCreate} />);
|
|
expect(screen.getByText("Style")).toBeInTheDocument();
|
|
});
|
|
|
|
it("resets form after successful creation", () => {
|
|
render(<CreateTabloModal onClose={mockOnClose} onCreate={mockOnCreate} />);
|
|
const input = screen.getByPlaceholderText(
|
|
"modals:createTablo.namePlaceholder"
|
|
) as HTMLInputElement;
|
|
fireEvent.change(input, { target: { value: "New Tablo" } });
|
|
|
|
const createButton = screen.getByText("common:buttons.create");
|
|
fireEvent.click(createButton);
|
|
|
|
expect(input.value).toBe("");
|
|
});
|
|
|
|
it("disables create button when in image mode", () => {
|
|
render(<CreateTabloModal onClose={mockOnClose} onCreate={mockOnCreate} />);
|
|
const input = screen.getByPlaceholderText("modals:createTablo.namePlaceholder");
|
|
fireEvent.change(input, { target: { value: "New Tablo" } });
|
|
|
|
// Switch to image mode
|
|
fireEvent.click(screen.getByText("Image (Bientôt disponible)"));
|
|
|
|
const createButton = screen.getByText("common:buttons.create");
|
|
expect(createButton).toBeDisabled();
|
|
});
|
|
});
|
|
|
|
|