148 lines
3.7 KiB
TypeScript
148 lines
3.7 KiB
TypeScript
import { fireEvent, render, screen } from "@testing-library/react";
|
|
import { describe, expect, it, vi } from "vitest";
|
|
import { DeleteTabloModal } from "./DeleteTabloModal";
|
|
|
|
// Mock ClickOutside
|
|
vi.mock("./ClickOutside", () => ({
|
|
ClickOutside: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
|
|
}));
|
|
|
|
describe("DeleteTabloModal", () => {
|
|
const mockTablo = {
|
|
id: "tablo-1",
|
|
name: "Test Tablo",
|
|
color: "bg-blue-500",
|
|
user_id: "user-id",
|
|
access_level: "admin",
|
|
is_admin: true,
|
|
created_at: "2024-01-01T00:00:00Z",
|
|
deleted_at: "2024-01-01T00:00:00Z",
|
|
position: 0,
|
|
status: "active",
|
|
image: null,
|
|
};
|
|
|
|
const mockOnClose = vi.fn();
|
|
const mockOnConfirm = vi.fn();
|
|
|
|
beforeEach(() => {
|
|
vi.clearAllMocks();
|
|
});
|
|
|
|
it("renders without crashing when tablo is provided", () => {
|
|
render(
|
|
<DeleteTabloModal
|
|
tablo={mockTablo}
|
|
onClose={mockOnClose}
|
|
onConfirm={mockOnConfirm}
|
|
isDeleting={false}
|
|
/>
|
|
);
|
|
expect(screen.getByText("Delete tablo")).toBeInTheDocument();
|
|
});
|
|
|
|
it("returns null when tablo is null", () => {
|
|
const { container } = render(
|
|
<DeleteTabloModal
|
|
tablo={null}
|
|
onClose={mockOnClose}
|
|
onConfirm={mockOnConfirm}
|
|
isDeleting={false}
|
|
/>
|
|
);
|
|
expect(container.firstChild).toBeNull();
|
|
});
|
|
|
|
it("displays tablo name in confirmation message", () => {
|
|
render(
|
|
<DeleteTabloModal
|
|
tablo={mockTablo}
|
|
onClose={mockOnClose}
|
|
onConfirm={mockOnConfirm}
|
|
isDeleting={false}
|
|
/>
|
|
);
|
|
expect(screen.getByText(/Test Tablo/)).toBeInTheDocument();
|
|
});
|
|
|
|
it("calls onConfirm when delete button is clicked", () => {
|
|
render(
|
|
<DeleteTabloModal
|
|
tablo={mockTablo}
|
|
onClose={mockOnClose}
|
|
onConfirm={mockOnConfirm}
|
|
isDeleting={false}
|
|
/>
|
|
);
|
|
const deleteButton = screen.getByText("Delete");
|
|
fireEvent.click(deleteButton);
|
|
expect(mockOnConfirm).toHaveBeenCalledWith("tablo-1");
|
|
});
|
|
|
|
it("calls onClose when cancel button is clicked", () => {
|
|
render(
|
|
<DeleteTabloModal
|
|
tablo={mockTablo}
|
|
onClose={mockOnClose}
|
|
onConfirm={mockOnConfirm}
|
|
isDeleting={false}
|
|
/>
|
|
);
|
|
const cancelButton = screen.getByText("Cancel");
|
|
fireEvent.click(cancelButton);
|
|
expect(mockOnClose).toHaveBeenCalled();
|
|
});
|
|
|
|
it("disables buttons when isDeleting is true", () => {
|
|
render(
|
|
<DeleteTabloModal
|
|
tablo={mockTablo}
|
|
onClose={mockOnClose}
|
|
onConfirm={mockOnConfirm}
|
|
isDeleting={true}
|
|
/>
|
|
);
|
|
const deleteButton = screen.getByText("Deleting...");
|
|
const cancelButton = screen.getByText("Cancel");
|
|
expect(deleteButton).toBeDisabled();
|
|
expect(cancelButton).toBeDisabled();
|
|
});
|
|
|
|
it("shows deleting text when isDeleting is true", () => {
|
|
render(
|
|
<DeleteTabloModal
|
|
tablo={mockTablo}
|
|
onClose={mockOnClose}
|
|
onConfirm={mockOnConfirm}
|
|
isDeleting={true}
|
|
/>
|
|
);
|
|
expect(screen.getByText("Deleting...")).toBeInTheDocument();
|
|
});
|
|
|
|
it("shows spinner when deleting", () => {
|
|
const { container } = render(
|
|
<DeleteTabloModal
|
|
tablo={mockTablo}
|
|
onClose={mockOnClose}
|
|
onConfirm={mockOnConfirm}
|
|
isDeleting={true}
|
|
/>
|
|
);
|
|
expect(container.querySelector(".animate-spin")).toBeInTheDocument();
|
|
});
|
|
|
|
it("displays warning message", () => {
|
|
render(
|
|
<DeleteTabloModal
|
|
tablo={mockTablo}
|
|
onClose={mockOnClose}
|
|
onConfirm={mockOnConfirm}
|
|
isDeleting={false}
|
|
/>
|
|
);
|
|
expect(
|
|
screen.getByText("All data associated with this tablo will be permanently lost.")
|
|
).toBeInTheDocument();
|
|
});
|
|
});
|