xtablo-source/apps/main/src/components/CustomModal.test.tsx

import { render, screen } from "@testing-library/react";
import { describe, expect, it, vi } from "vitest";
import { CustomModal } from "./CustomModal";

describe("CustomModal", () => {
  const mockOnClose = vi.fn();

  beforeEach(() => {
    vi.clearAllMocks();
  });

  it("renders without crashing when open", () => {
    render(
      <CustomModal isOpen={true} onClose={mockOnClose} title="Test Modal">
        <div>Test Content</div>
      </CustomModal>
    );
    expect(screen.getByText("Test Modal")).toBeInTheDocument();
  });

  it("does not render when closed", () => {
    render(
      <CustomModal isOpen={false} onClose={mockOnClose} title="Test Modal">
        <div>Test Content</div>
      </CustomModal>
    );
    expect(screen.queryByText("Test Modal")).not.toBeInTheDocument();
  });

  it("displays the title", () => {
    render(
      <CustomModal isOpen={true} onClose={mockOnClose} title="Test Modal Title">
        <div>Test Content</div>
      </CustomModal>
    );
    expect(screen.getByText("Test Modal Title")).toBeInTheDocument();
  });

  it("renders children content", () => {
    render(
      <CustomModal isOpen={true} onClose={mockOnClose} title="Test Modal">
        <div>Custom Modal Content</div>
      </CustomModal>
    );
    expect(screen.getByText("Custom Modal Content")).toBeInTheDocument();
  });

  it("applies sm width prop", () => {
    render(
      <CustomModal isOpen={true} onClose={mockOnClose} title="Test Modal" width="sm">
        <div>Test Content</div>
      </CustomModal>
    );
    expect(screen.getByText("Test Modal")).toBeInTheDocument();
  });

  it("renders with md width by default", () => {
    render(
      <CustomModal isOpen={true} onClose={mockOnClose} title="Test Modal">
        <div>Test Content</div>
      </CustomModal>
    );
    expect(screen.getByText("Test Modal")).toBeInTheDocument();
  });

  it("applies lg width prop", () => {
    render(
      <CustomModal isOpen={true} onClose={mockOnClose} title="Test Modal" width="lg">
        <div>Test Content</div>
      </CustomModal>
    );
    expect(screen.getByText("Test Modal")).toBeInTheDocument();
  });

  it("applies xl width prop", () => {
    render(
      <CustomModal isOpen={true} onClose={mockOnClose} title="Test Modal" width="xl">
        <div>Test Content</div>
      </CustomModal>
    );
    expect(screen.getByText("Test Modal")).toBeInTheDocument();
  });

  it("applies 2xl width prop", () => {
    render(
      <CustomModal isOpen={true} onClose={mockOnClose} title="Test Modal" width="2xl">
        <div>Test Content</div>
      </CustomModal>
    );
    expect(screen.getByText("Test Modal")).toBeInTheDocument();
  });

  it("applies full width prop", () => {
    render(
      <CustomModal isOpen={true} onClose={mockOnClose} title="Test Modal" width="full">
        <div>Test Content</div>
      </CustomModal>
    );
    expect(screen.getByText("Test Modal")).toBeInTheDocument();
  });

  it("applies auto width prop", () => {
    render(
      <CustomModal isOpen={true} onClose={mockOnClose} title="Test Modal" width="auto">
        <div>Test Content</div>
      </CustomModal>
    );
    expect(screen.getByText("Test Modal")).toBeInTheDocument();
  });
});