@multiplatform.one/table 6.0.0

package/src/components/DataTableExport/DataTableExport.spec.tsx

@@ -0,0 +1,398 @@
+import { fireEvent, screen, waitFor } from "@testing-library/react";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { DataTableExport, type ExportOptions } from "./index";
+
+// Test data type
+type TestItem = {
+  id: string;
+  name: string;
+  email: string;
+  status: "active" | "inactive";
+  createdAt: string;
+};
+
+// Test data
+const mockData: TestItem[] = [
+  {
+    id: "1",
+    name: "John Doe",
+    email: "john@example.com",
+    status: "active",
+    createdAt: "2024-01-15T10:00:00.000Z",
+  },
+  {
+    id: "2",
+    name: "Jane Smith",
+    email: "jane@example.com",
+    status: "inactive",
+    createdAt: "2024-01-16T10:00:00.000Z",
+  },
+];
+
+// Test columns
+const mockColumns = [
+  {
+    accessorKey: "name",
+    header: "Name",
+  },
+  {
+    accessorKey: "email",
+    header: "Email",
+  },
+  {
+    accessorKey: "status",
+    header: "Status",
+  },
+  {
+    accessorKey: "createdAt",
+    header: "Created At",
+  },
+];
+
+// Mock URL.createObjectURL and URL.revokeObjectURL
+const mockCreateObjectURL = vi.fn(() => "mock-url");
+const mockRevokeObjectURL = vi.fn();
+
+Object.defineProperty(window.URL, "createObjectURL", {
+  writable: true,
+  value: mockCreateObjectURL,
+});
+
+Object.defineProperty(window.URL, "revokeObjectURL", {
+  writable: true,
+  value: mockRevokeObjectURL,
+});
+
+// Mock document methods for download functionality
+const mockClick = vi.fn();
+const mockAppendChild = vi.fn();
+const mockRemoveChild = vi.fn();
+
+// Store the original functions
+const originalCreateElement = document.createElement.bind(document);
+const originalAppendChild = document.body.appendChild.bind(document.body);
+const originalRemoveChild = document.body.removeChild.bind(document.body);
+
+// Mock createElement to return a mock anchor element for download tests
+vi.spyOn(document, "createElement").mockImplementation((tagName: string) => {
+  if (tagName === "a") {
+    const anchor = originalCreateElement(tagName) as HTMLAnchorElement;
+    anchor.click = mockClick;
+    return anchor;
+  }
+  return originalCreateElement(tagName);
+});
+
+// Spy on appendChild and removeChild without breaking them
+vi.spyOn(document.body, "appendChild").mockImplementation((node) => {
+  mockAppendChild(node);
+  return originalAppendChild(node);
+});
+
+vi.spyOn(document.body, "removeChild").mockImplementation((node) => {
+  mockRemoveChild(node);
+  return originalRemoveChild(node);
+});
+
+describe("DataTableExport", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it("renders export buttons for enabled formats", () => {
+    renderWithProviders(<DataTableExport data={mockData} columns={mockColumns} />);
+
+    expect(screen.getByText("CSV")).toBeInTheDocument();
+    expect(screen.getByText("Excel")).toBeInTheDocument();
+    expect(screen.getByText("Print")).toBeInTheDocument();
+  });
+
+  it("shows only first 3 enabled formats as quick buttons", () => {
+    const customFormats = [
+      {
+        id: "csv",
+        label: "CSV",
+        icon: null,
+        extension: "csv",
+        mimeType: "text/csv",
+        description: "CSV",
+        enabled: true,
+      },
+      {
+        id: "excel",
+        label: "Excel",
+        icon: null,
+        extension: "xlsx",
+        mimeType: "application/vnd.ms-excel",
+        description: "Excel",
+        enabled: true,
+      },
+      {
+        id: "pdf",
+        label: "PDF",
+        icon: null,
+        extension: "pdf",
+        mimeType: "application/pdf",
+        description: "PDF",
+        enabled: true,
+      },
+      {
+        id: "json",
+        label: "JSON",
+        icon: null,
+        extension: "json",
+        mimeType: "application/json",
+        description: "JSON",
+        enabled: true,
+      },
+      {
+        id: "xml",
+        label: "XML",
+        icon: null,
+        extension: "xml",
+        mimeType: "application/xml",
+        description: "XML",
+        enabled: true,
+      },
+    ];
+
+    renderWithProviders(
+      <DataTableExport data={mockData} columns={mockColumns} exportFormats={customFormats} />,
+    );
+
+    expect(screen.getByText("CSV")).toBeInTheDocument();
+    expect(screen.getByText("Excel")).toBeInTheDocument();
+    expect(screen.getByText("PDF")).toBeInTheDocument();
+    expect(screen.queryByText("JSON")).not.toBeInTheDocument();
+    expect(screen.queryByText("XML")).not.toBeInTheDocument();
+  });
+
+  it("calls onExport with correct options when export button is clicked", async () => {
+    const mockOnExport = vi
+      .fn<(options: ExportOptions) => Promise<void>>()
+      .mockResolvedValue(undefined);
+
+    renderWithProviders(
+      <DataTableExport data={mockData} columns={mockColumns} onExport={mockOnExport} />,
+    );
+
+    fireEvent.click(screen.getByText("CSV"));
+
+    await waitFor(() => {
+      expect(mockOnExport).toHaveBeenCalledWith({
+        format: "csv",
+        includeHeaders: true,
+        filename: "export",
+        selectedColumns: undefined,
+        customColumns: undefined,
+        dateFormat: undefined,
+        numberFormat: undefined,
+      });
+    });
+  });
+
+  it("shows loading state when export is in progress", async () => {
+    const mockOnExport = vi.fn(
+      () => new Promise<void>((resolve) => setTimeout(resolve, 100)),
+    ) as unknown as ReturnType<typeof vi.fn> & ((options: ExportOptions) => Promise<void>);
+
+    renderWithProviders(
+      <DataTableExport data={mockData} columns={mockColumns} onExport={mockOnExport} />,
+    );
+
+    fireEvent.click(screen.getByText("CSV"));
+    expect(screen.getByText("...")).toBeInTheDocument();
+  });
+
+  it("disables buttons when disabled prop is true", () => {
+    renderWithProviders(<DataTableExport data={mockData} columns={mockColumns} disabled />);
+
+    const csvButton = screen.getByRole("button", { name: /CSV/i });
+    expect(csvButton).toHaveAttribute("aria-disabled", "true");
+  });
+
+  it("handles export errors gracefully", async () => {
+    const consoleSpy = vi.spyOn(console, "error").mockImplementation(() => {});
+    const mockOnExport = vi.fn(() =>
+      Promise.reject(new Error("Export failed")),
+    ) as unknown as ReturnType<typeof vi.fn> & ((options: ExportOptions) => Promise<void>);
+
+    renderWithProviders(
+      <DataTableExport data={mockData} columns={mockColumns} onExport={mockOnExport} />,
+    );
+
+    fireEvent.click(screen.getByText("CSV"));
+
+    await waitFor(() => {
+      expect(consoleSpy).toHaveBeenCalledWith("Export failed:", expect.any(Error));
+    });
+
+    consoleSpy.mockRestore();
+  });
+
+  it("opens export options popover when options button is clicked", async () => {
+    renderWithProviders(<DataTableExport data={mockData} columns={mockColumns} />);
+
+    const optionsButton = screen.getByText("Options");
+    fireEvent.click(optionsButton);
+
+    await waitFor(() => {
+      expect(screen.getByText("Export Options")).toBeInTheDocument();
+    });
+  });
+
+  it("allows filename customization in options", async () => {
+    renderWithProviders(<DataTableExport data={mockData} columns={mockColumns} />);
+
+    fireEvent.click(screen.getByText("Options"));
+
+    await waitFor(() => {
+      expect(screen.getByText("Export Options")).toBeInTheDocument();
+    });
+
+    const filenameInput = screen.getByPlaceholderText("Enter filename");
+    fireEvent.change(filenameInput, { target: { value: "custom-export" } });
+
+    // The input should be updated
+    expect(filenameInput).toHaveValue("custom-export");
+  });
+
+  it("toggles include headers checkbox", async () => {
+    renderWithProviders(<DataTableExport data={mockData} columns={mockColumns} />);
+
+    fireEvent.click(screen.getByText("Options"));
+
+    await waitFor(() => {
+      expect(screen.getByText("Export Options")).toBeInTheDocument();
+    });
+
+    const checkbox = screen.getByText("Include headers");
+    fireEvent.click(checkbox);
+    // Checkbox behavior would be tested in integration tests
+  });
+
+  it("filters disabled export formats", () => {
+    const customFormats = [
+      {
+        id: "csv",
+        label: "CSV",
+        icon: null,
+        extension: "csv",
+        mimeType: "text/csv",
+        description: "CSV",
+        enabled: true,
+      },
+      {
+        id: "excel",
+        label: "Excel",
+        icon: null,
+        extension: "xlsx",
+        mimeType: "application/vnd.ms-excel",
+        description: "Excel",
+        enabled: false,
+      },
+    ];
+
+    renderWithProviders(
+      <DataTableExport data={mockData} columns={mockColumns} exportFormats={customFormats} />,
+    );
+
+    expect(screen.getByText("CSV")).toBeInTheDocument();
+    expect(screen.queryByText("Excel")).not.toBeInTheDocument();
+  });
+
+  it("uses custom filename prop", () => {
+    renderWithProviders(
+      <DataTableExport data={mockData} columns={mockColumns} filename="my-custom-data" />,
+    );
+
+    // This would be tested by checking the export options
+    expect(screen.getByText("Options")).toBeInTheDocument();
+  });
+
+  it("handles print functionality", async () => {
+    // Mock window.open and print
+    const mockPrint = vi.fn();
+    const mockPrintWindow = {
+      document: {
+        write: vi.fn(),
+        close: vi.fn(),
+      },
+      print: mockPrint,
+    };
+
+    vi.spyOn(window, "open").mockReturnValue(mockPrintWindow as any);
+
+    renderWithProviders(<DataTableExport data={mockData} columns={mockColumns} />);
+
+    fireEvent.click(screen.getByText("Print"));
+
+    await waitFor(() => {
+      expect(window.open).toHaveBeenCalledWith("", "_blank");
+      expect(mockPrint).toHaveBeenCalled();
+    });
+
+    vi.restoreAllMocks();
+  });
+
+  it("creates file download for CSV export", async () => {
+    mockCreateObjectURL.mockClear();
+    mockRevokeObjectURL.mockClear();
+
+    renderWithProviders(<DataTableExport data={mockData} columns={mockColumns} />);
+
+    const csvButton = screen.getByText("CSV");
+    fireEvent.click(csvButton);
+
+    // URL.createObjectURL is set via Object.defineProperty (not vi.spyOn) so it
+    // survives vi.restoreAllMocks() and reliably tracks blob-based downloads.
+    await waitFor(
+      () => {
+        expect(mockCreateObjectURL).toHaveBeenCalledWith(expect.any(Blob));
+      },
+      { timeout: 3000 },
+    );
+  });
+
+  it("handles empty data array", () => {
+    renderWithProviders(<DataTableExport data={[]} columns={mockColumns} />);
+
+    expect(screen.getByText("CSV")).toBeInTheDocument();
+    expect(screen.getByText("Excel")).toBeInTheDocument();
+  });
+
+  it("handles columns without accessorKey", () => {
+    const columnsWithoutAccessor = [{ header: "Name" }, { header: "Email" }];
+
+    renderWithProviders(
+      <DataTableExport data={mockData} columns={columnsWithoutAccessor as any} />,
+    );
+
+    expect(screen.getByText("CSV")).toBeInTheDocument();
+  });
+
+  it("prevents multiple simultaneous exports", async () => {
+    const mockOnExport = vi.fn(
+      () => new Promise<void>((resolve) => setTimeout(resolve, 200)),
+    ) as unknown as ReturnType<typeof vi.fn> & ((options: ExportOptions) => Promise<void>);
+
+    renderWithProviders(
+      <DataTableExport data={mockData} columns={mockColumns} onExport={mockOnExport} />,
+    );
+
+    // Click export twice quickly - button shows "..." when loading
+    const exportButton = screen.getByRole("button", { name: /Export as CSV/i });
+    fireEvent.click(exportButton);
+    fireEvent.click(exportButton);
+
+    // Should only call once
+    await waitFor(() => {
+      expect(mockOnExport).toHaveBeenCalledTimes(1);
+    });
+  });
+});