@multiplatform.one/table 6.1.0 → 6.4.0

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

@@ -1,6 +1,7 @@
 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 { DataTable } from "../DataTable";
 import { DataTableExport, type ExportOptions } from "./index";
 
 // Test data type
@@ -276,6 +277,31 @@ describe("DataTableExport", () => {
     // Checkbox behavior would be tested in integration tests
   });
 
+  it("honors popover column deselection in the exported CSV", async () => {
+    mockCreateObjectURL.mockClear();
+    renderWithProviders(<DataTableExport data={mockData} columns={mockColumns} />);
+
+    fireEvent.click(screen.getByText("Options"));
+    await waitFor(() => {
+      expect(screen.getByText("Export Options")).toBeInTheDocument();
+    });
+
+    // Uncheck "Email" in the Select Columns list, then export via the quick
+    // CSV button (first match — the popover format list also says "CSV") —
+    // the deselected column must not reach the file.
+    fireEvent.click(screen.getByText("Email"));
+    fireEvent.click(screen.getAllByText("CSV")[0]!);
+
+    await waitFor(() => expect(mockCreateObjectURL).toHaveBeenCalledWith(expect.any(Blob)));
+    const blob = (mockCreateObjectURL.mock.calls.at(-1) as unknown as [Blob])[0];
+    const text = await blob.text();
+    const lines = text.trim().split("\n");
+    expect(lines[0]).toBe("Name,Status,Created At");
+    expect(text).not.toContain("jane@example.com");
+    // Data rows keep pace with the reduced column set (no ragged rows).
+    expect(lines[1]).toBe("John Doe,active,2024-01-15T10:00:00.000Z");
+  });
+
   it("filters disabled export formats", () => {
     const customFormats = [
       {
@@ -316,15 +342,11 @@ describe("DataTableExport", () => {
   });
 
   it("handles print functionality", async () => {
-    // Mock window.open and print
+    // Mock window.open with a real detached document (printTable builds DOM
+    // nodes instead of writing an HTML string).
     const mockPrint = vi.fn();
-    const mockPrintWindow = {
-      document: {
-        write: vi.fn(),
-        close: vi.fn(),
-      },
-      print: mockPrint,
-    };
+    const printDoc = document.implementation.createHTMLDocument("print");
+    const mockPrintWindow = { document: printDoc, print: mockPrint };
 
     vi.spyOn(window, "open").mockReturnValue(mockPrintWindow as any);
 
@@ -337,6 +359,10 @@ describe("DataTableExport", () => {
       expect(mockPrint).toHaveBeenCalled();
     });
 
+    // The printed table contains the data rows.
+    expect(printDoc.body.textContent).toContain("John Doe");
+    expect(printDoc.body.textContent).toContain("jane@example.com");
+
     vi.restoreAllMocks();
   });
 
@@ -359,6 +385,39 @@ describe("DataTableExport", () => {
     );
   });
 
+  it("exports raw values: 0 and false survive, JSX cell renderers never leak", async () => {
+    mockCreateObjectURL.mockClear();
+
+    const data = [{ name: "Widget", stock: 0, active: false, status: "active" }];
+    const columns = [
+      { accessorKey: "name", header: "Name" },
+      { accessorKey: "stock", header: "Stock" },
+      { accessorKey: "active", header: "Active" },
+      {
+        accessorKey: "status",
+        header: "Status",
+        // JSX-style renderer — used to export as "[object Object]"
+        cell: () => ({ type: "span", props: { children: "Active" } }),
+      },
+    ];
+
+    renderWithProviders(<DataTableExport data={data} columns={columns as any} />);
+
+    fireEvent.click(screen.getByText("CSV"));
+
+    await waitFor(
+      () => {
+        expect(mockCreateObjectURL).toHaveBeenCalledWith(expect.any(Blob));
+      },
+      { timeout: 3000 },
+    );
+
+    const blob = (mockCreateObjectURL.mock.calls[0] as unknown as [Blob])[0];
+    const text = await blob.text();
+    expect(text).toContain("Widget,0,false,active");
+    expect(text).not.toContain("[object Object]");
+  });
+
   it("handles empty data array", () => {
     renderWithProviders(<DataTableExport data={[]} columns={mockColumns} />);
 
@@ -376,6 +435,164 @@ describe("DataTableExport", () => {
     expect(screen.getByText("CSV")).toBeInTheDocument();
   });
 
+  it("quotes CSV values containing newlines so rows don't split", async () => {
+    mockCreateObjectURL.mockClear();
+
+    const data = [{ name: "Line one\nLine two", note: "with\r\nCRLF" }];
+    const columns = [
+      { accessorKey: "name", header: "Name" },
+      { accessorKey: "note", header: "Note" },
+    ];
+
+    renderWithProviders(<DataTableExport data={data} columns={columns} />);
+    fireEvent.click(screen.getByText("CSV"));
+
+    await waitFor(() => expect(mockCreateObjectURL).toHaveBeenCalledWith(expect.any(Blob)));
+    const blob = (mockCreateObjectURL.mock.calls.at(-1) as unknown as [Blob])[0];
+    const text = await blob.text();
+    // Header + exactly one (quoted, multi-line) data record.
+    expect(text).toContain('"Line one\nLine two"');
+    expect(text).toContain('"with\r\nCRLF"');
+  });
+
+  it("escapes commas and quotes in CSV headers", async () => {
+    mockCreateObjectURL.mockClear();
+
+    const data = [{ a: "x", b: "y" }];
+    const columns = [
+      { accessorKey: "a", header: "Name, Legal" },
+      { accessorKey: "b", header: 'The "B" column' },
+    ];
+
+    renderWithProviders(<DataTableExport data={data} columns={columns} />);
+    fireEvent.click(screen.getByText("CSV"));
+
+    await waitFor(() => expect(mockCreateObjectURL).toHaveBeenCalledWith(expect.any(Blob)));
+    const blob = (mockCreateObjectURL.mock.calls.at(-1) as unknown as [Blob])[0];
+    const text = await blob.text();
+    const headerLine = text.split("\n")[0];
+    expect(headerLine).toBe('"Name, Legal","The ""B"" column"');
+  });
+
+  it("guards CSV formula injection on string values but leaves numbers intact", async () => {
+    mockCreateObjectURL.mockClear();
+
+    const data = [{ formula: "=SUM(A1:A9)", phone: "+15125551234", note: "@import", delta: -42 }];
+    const columns = [
+      { accessorKey: "formula", header: "Formula" },
+      { accessorKey: "phone", header: "Phone" },
+      { accessorKey: "note", header: "Note" },
+      { accessorKey: "delta", header: "Delta" },
+    ];
+
+    renderWithProviders(<DataTableExport data={data} columns={columns} />);
+    fireEvent.click(screen.getByText("CSV"));
+
+    await waitFor(() => expect(mockCreateObjectURL).toHaveBeenCalledWith(expect.any(Blob)));
+    const blob = (mockCreateObjectURL.mock.calls.at(-1) as unknown as [Blob])[0];
+    const text = await blob.text();
+    const dataLine = text.split("\n")[1];
+    // Strings that spreadsheet apps would evaluate get the OWASP `'` prefix;
+    // genuine numbers (raw typeof number) are untouched.
+    expect(dataLine).toBe("'=SUM(A1:A9),'+15125551234,'@import,-42");
+  });
+
+  it("exports the current view when composed in a DataTable (sort order + hidden columns)", async () => {
+    mockCreateObjectURL.mockClear();
+
+    const rows = [
+      { id: "1", name: "Charlie", email: "c@x.com", status: "active" },
+      { id: "2", name: "Alice", email: "a@x.com", status: "inactive" },
+      { id: "3", name: "Bob", email: "b@x.com", status: "active" },
+    ];
+    const cols = [
+      { id: "name", accessorKey: "name", header: "Name" },
+      { id: "email", accessorKey: "email", header: "Email" },
+      { id: "status", accessorKey: "status", header: "Status" },
+    ];
+
+    renderWithProviders(
+      <DataTable
+        data={rows}
+        columns={cols as any}
+        initialState={{
+          sorting: [{ id: "name", desc: false }],
+          columnVisibility: { email: false },
+        }}
+      >
+        <DataTable.Export />
+      </DataTable>,
+    );
+
+    fireEvent.click(screen.getByText("CSV"));
+
+    await waitFor(() => expect(mockCreateObjectURL).toHaveBeenCalledWith(expect.any(Blob)));
+    const blob = (mockCreateObjectURL.mock.calls.at(-1) as unknown as [Blob])[0];
+    const text = await blob.text();
+    const lines = text.trim().split("\n");
+    // Hidden column excluded, view (sorted) order preserved.
+    expect(lines[0]).toBe("Name,Status");
+    expect(lines[1]).toBe("Alice,inactive");
+    expect(lines[2]).toBe("Bob,active");
+    expect(lines[3]).toBe("Charlie,active");
+  });
+
+  it("exports only filtered rows when composed in a DataTable with an active filter", async () => {
+    mockCreateObjectURL.mockClear();
+
+    const rows = [
+      { id: "1", name: "Charlie", status: "ready" },
+      { id: "2", name: "Alice", status: "blocked" },
+      { id: "3", name: "Bob", status: "ready" },
+    ];
+    const cols = [
+      { id: "name", accessorKey: "name", header: "Name" },
+      { id: "status", accessorKey: "status", header: "Status" },
+    ];
+
+    renderWithProviders(
+      <DataTable
+        data={rows}
+        columns={cols as any}
+        initialState={{ columnFilters: [{ id: "status", value: "ready" }] }}
+      >
+        <DataTable.Export />
+      </DataTable>,
+    );
+
+    fireEvent.click(screen.getByText("CSV"));
+
+    await waitFor(() => expect(mockCreateObjectURL).toHaveBeenCalledWith(expect.any(Blob)));
+    const blob = (mockCreateObjectURL.mock.calls.at(-1) as unknown as [Blob])[0];
+    const text = await blob.text();
+    expect(text).toContain("Charlie");
+    expect(text).toContain("Bob");
+    expect(text).not.toContain("Alice");
+  });
+
+  it("escapes HTML in print output so cell values can't inject markup", async () => {
+    const printDoc = document.implementation.createHTMLDocument("print");
+    const mockPrintWindow = { document: printDoc, print: vi.fn() };
+    vi.spyOn(window, "open").mockReturnValue(mockPrintWindow as any);
+
+    const data = [{ name: "<img src=x onerror=alert(1)>", note: "a & b < c" }];
+    const columns = [
+      { accessorKey: "name", header: "Name <script>" },
+      { accessorKey: "note", header: "Note" },
+    ];
+
+    renderWithProviders(<DataTableExport data={data} columns={columns} />);
+    fireEvent.click(screen.getByText("Print"));
+
+    await waitFor(() => expect(mockPrintWindow.print).toHaveBeenCalled());
+    // No live elements were injected from the data...
+    expect(printDoc.querySelector("img")).toBeNull();
+    expect(printDoc.querySelector("script")).toBeNull();
+    // ...but the literal text survives (serialized escaped).
+    expect(printDoc.body.innerHTML).toContain("&lt;img src=x onerror=alert(1)&gt;");
+    expect(printDoc.body.textContent).toContain("a & b < c");
+  });
+
   it("prevents multiple simultaneous exports", async () => {
     const mockOnExport = vi.fn(
       () => new Promise<void>((resolve) => setTimeout(resolve, 200)),