@datarecce/ui 0.1.30 → 0.1.31

package/recce-source/js/src/lib/dataGrid/shared/toDiffColumn.test.tsx

@@ -0,0 +1,719 @@
+/**
+ * @file toDiffColumn.test.tsx
+ * @description Tests for toDiffColumn shared column builder
+ *
+ * Tests cover:
+ * - createCellClassBase factory function
+ * - createCellClassCurrent factory function
+ * - toDiffColumn inline mode
+ * - toDiffColumn side_by_side mode
+ * - Column metadata preservation
+ * - Header cell class assignment
+ */
+
+import type { CellClassParams } from "ag-grid-community";
+import React from "react";
+import { ColumnRenderMode, ColumnType, RowObjectType } from "@/lib/api/types";
+import {
+  createCellClassBase,
+  createCellClassCurrent,
+  DiffColumnConfig,
+  DiffColumnResult,
+  toDiffColumn,
+} from "./toDiffColumn";
+
+// ============================================================================
+// Mocks
+// ============================================================================
+
+// Mock AG Grid modules
+jest.mock("ag-grid-community", () => ({
+  ModuleRegistry: { registerModules: jest.fn() },
+  AllCommunityModule: {},
+}));
+
+// Mock the UI components to avoid React rendering complexity
+jest.mock("@/components/ui/dataGrid", () => ({
+  DataFrameColumnGroupHeader: () => null,
+  defaultRenderCell: jest.fn(),
+  inlineRenderCell: jest.fn(),
+}));
+
+jest.mock("./gridUtils", () => ({
+  getHeaderCellClass: (status: string | undefined) => {
+    if (status === "added") return "diff-header-added";
+    if (status === "removed") return "diff-header-removed";
+    return undefined;
+  },
+}));
+
+// ============================================================================
+// Types for testing (uses AG Grid types)
+// ============================================================================
+
+/**
+ * Context for custom column metadata
+ */
+interface TestColumnContext {
+  columnType?: ColumnType;
+  columnRenderMode?: ColumnRenderMode;
+}
+
+/**
+ * Test-friendly Column type (based on AG Grid ColDef)
+ */
+interface TestColumn {
+  field: string;
+  headerName?: string;
+  headerComponent?: React.ComponentType;
+  headerClass?: string;
+  cellClass?:
+    | string
+    | ((params: CellClassParams<RowObjectType>) => string | undefined);
+  cellRenderer?: unknown;
+  context?: TestColumnContext;
+}
+
+/**
+ * Test-friendly ColumnGroup type (based on AG Grid ColGroupDef)
+ */
+interface TestColumnGroup {
+  headerName?: string;
+  headerClass?: string;
+  children: readonly TestColumn[];
+  context?: TestColumnContext;
+}
+
+// ============================================================================
+// Test Helpers
+// ============================================================================
+
+/**
+ * Helper to create a valid RowObjectType with required __status
+ */
+const createRow = (
+  values: Record<string, number | string | boolean | null | undefined>,
+  status: "added" | "removed" | "modified" | undefined = undefined,
+): RowObjectType => ({
+  ...values,
+  __status: status,
+});
+
+/**
+ * Helper to create mock CellClassParams from a row
+ * This is needed because AG Grid cellClass functions expect CellClassParams
+ */
+const createCellClassParams = (
+  row: RowObjectType,
+): CellClassParams<RowObjectType> =>
+  ({
+    data: row,
+    value: undefined,
+    node: undefined,
+    colDef: {},
+    column: {},
+    api: {},
+    rowIndex: 0,
+  }) as unknown as CellClassParams<RowObjectType>;
+
+/**
+ * Creates a minimal DiffColumnConfig for testing
+ */
+const createConfig = (
+  overrides: Partial<DiffColumnConfig> = {},
+): DiffColumnConfig => ({
+  name: "test_column",
+  columnStatus: "",
+  columnType: "text",
+  displayMode: "inline",
+  ...overrides,
+});
+
+/**
+ * Check if result is a Column (inline mode) - has 'field' property
+ * Returns boolean instead of type predicate to avoid ESM type compatibility issues
+ */
+function isColumn(result: DiffColumnResult): boolean {
+  return "field" in result && !("children" in result);
+}
+
+/**
+ * Check if result is a ColumnGroup (side_by_side mode) - has 'children' property
+ * Returns boolean instead of type predicate to avoid ESM type compatibility issues
+ */
+function isColumnGroup(result: DiffColumnResult): boolean {
+  return (
+    "children" in result &&
+    Array.isArray((result as unknown as TestColumnGroup).children)
+  );
+}
+
+/**
+ * Cast result to TestColumn for accessing column properties
+ */
+function asColumn(result: DiffColumnResult): TestColumn {
+  return result as unknown as TestColumn;
+}
+
+/**
+ * Cast result to TestColumnGroup for accessing column group properties
+ */
+function asColumnGroup(result: DiffColumnResult): TestColumnGroup {
+  return result as unknown as TestColumnGroup;
+}
+
+/**
+ * Helper to get children from a column group as TestColumn array
+ */
+function getChildren(result: DiffColumnResult): TestColumn[] {
+  return asColumnGroup(result).children as TestColumn[];
+}
+
+// ============================================================================
+// createCellClassBase Tests
+// ============================================================================
+
+describe("createCellClassBase", () => {
+  test("returns a function", () => {
+    const cellClassFn = createCellClassBase("value", "");
+
+    expect(typeof cellClassFn).toBe("function");
+  });
+
+  test("returns 'diff-cell-removed' for removed row status", () => {
+    const cellClassFn = createCellClassBase("value", "");
+    const row = createRow({}, "removed");
+
+    expect(cellClassFn(createCellClassParams(row))).toBe("diff-cell-removed");
+  });
+
+  test("returns 'diff-cell-added' for added row status", () => {
+    const cellClassFn = createCellClassBase("value", "");
+    const row = createRow({}, "added");
+
+    expect(cellClassFn(createCellClassParams(row))).toBe("diff-cell-added");
+  });
+
+  test("returns undefined for added column status", () => {
+    const cellClassFn = createCellClassBase("value", "added");
+    const row = createRow({ base__value: 100, current__value: 200 });
+
+    expect(cellClassFn(createCellClassParams(row))).toBeUndefined();
+  });
+
+  test("returns undefined for removed column status", () => {
+    const cellClassFn = createCellClassBase("value", "removed");
+    const row = createRow({ base__value: 100, current__value: 200 });
+
+    expect(cellClassFn(createCellClassParams(row))).toBeUndefined();
+  });
+
+  test("returns 'diff-cell-removed' when base and current values differ", () => {
+    const cellClassFn = createCellClassBase("value", "");
+    const row = createRow({ base__value: 100, current__value: 200 });
+
+    expect(cellClassFn(createCellClassParams(row))).toBe("diff-cell-removed");
+  });
+
+  test("returns undefined when base and current values are equal", () => {
+    const cellClassFn = createCellClassBase("value", "");
+    const row = createRow({ base__value: 100, current__value: 100 });
+
+    expect(cellClassFn(createCellClassParams(row))).toBeUndefined();
+  });
+
+  test("handles case-insensitive key lookup (lowercase)", () => {
+    const cellClassFn = createCellClassBase("Value", "");
+    // Keys are lowercased: base__value, current__value
+    const row = createRow({ base__value: 100, current__value: 200 });
+
+    expect(cellClassFn(createCellClassParams(row))).toBe("diff-cell-removed");
+  });
+
+  test("handles null values", () => {
+    const cellClassFn = createCellClassBase("value", "");
+    const row = createRow({ base__value: null, current__value: "test" });
+
+    expect(cellClassFn(createCellClassParams(row))).toBe("diff-cell-removed");
+  });
+
+  test("handles undefined values (both undefined = equal)", () => {
+    const cellClassFn = createCellClassBase("value", "");
+    const row = createRow({});
+
+    expect(cellClassFn(createCellClassParams(row))).toBeUndefined();
+  });
+
+  test("handles modified row status with equal values", () => {
+    const cellClassFn = createCellClassBase("value", "");
+    const row = createRow(
+      { base__value: 100, current__value: 100 },
+      "modified",
+    );
+
+    // Row status is modified, but this specific column has equal values
+    expect(cellClassFn(createCellClassParams(row))).toBeUndefined();
+  });
+
+  test("handles object value comparison with lodash isEqual", () => {
+    const cellClassFn = createCellClassBase("data", "");
+    // Objects with same content should be considered equal
+    const row = createRow({});
+    // Manually set object values (createRow doesn't support objects in its type)
+    (row as Record<string, unknown>).base__data = { a: 1 };
+    (row as Record<string, unknown>).current__data = { a: 1 };
+
+    expect(cellClassFn(createCellClassParams(row))).toBeUndefined();
+  });
+
+  test("detects different objects as modified", () => {
+    const cellClassFn = createCellClassBase("data", "");
+    const row = createRow({});
+    (row as Record<string, unknown>).base__data = { a: 1 };
+    (row as Record<string, unknown>).current__data = { a: 2 };
+
+    expect(cellClassFn(createCellClassParams(row))).toBe("diff-cell-removed");
+  });
+});
+
+// ============================================================================
+// createCellClassCurrent Tests
+// ============================================================================
+
+describe("createCellClassCurrent", () => {
+  test("returns a function", () => {
+    const cellClassFn = createCellClassCurrent("value", "");
+
+    expect(typeof cellClassFn).toBe("function");
+  });
+
+  test("returns 'diff-cell-removed' for removed row status", () => {
+    const cellClassFn = createCellClassCurrent("value", "");
+    const row = createRow({}, "removed");
+
+    expect(cellClassFn(createCellClassParams(row))).toBe("diff-cell-removed");
+  });
+
+  test("returns 'diff-cell-added' for added row status", () => {
+    const cellClassFn = createCellClassCurrent("value", "");
+    const row = createRow({}, "added");
+
+    expect(cellClassFn(createCellClassParams(row))).toBe("diff-cell-added");
+  });
+
+  test("returns undefined for added column status", () => {
+    const cellClassFn = createCellClassCurrent("value", "added");
+    const row = createRow({ base__value: 100, current__value: 200 });
+
+    expect(cellClassFn(createCellClassParams(row))).toBeUndefined();
+  });
+
+  test("returns undefined for removed column status", () => {
+    const cellClassFn = createCellClassCurrent("value", "removed");
+    const row = createRow({ base__value: 100, current__value: 200 });
+
+    expect(cellClassFn(createCellClassParams(row))).toBeUndefined();
+  });
+
+  test("returns 'diff-cell-added' when base and current values differ", () => {
+    const cellClassFn = createCellClassCurrent("value", "");
+    const row = createRow({ base__value: 100, current__value: 200 });
+
+    // Current column shows "added" styling for modified cells
+    expect(cellClassFn(createCellClassParams(row))).toBe("diff-cell-added");
+  });
+
+  test("returns undefined when base and current values are equal", () => {
+    const cellClassFn = createCellClassCurrent("value", "");
+    const row = createRow({ base__value: 100, current__value: 100 });
+
+    expect(cellClassFn(createCellClassParams(row))).toBeUndefined();
+  });
+
+  test("handles case-insensitive key lookup (lowercase)", () => {
+    const cellClassFn = createCellClassCurrent("Value", "");
+    const row = createRow({ base__value: 100, current__value: 200 });
+
+    expect(cellClassFn(createCellClassParams(row))).toBe("diff-cell-added");
+  });
+});
+
+// ============================================================================
+// createCellClassBase vs createCellClassCurrent Comparison
+// ============================================================================
+
+describe("createCellClassBase vs createCellClassCurrent", () => {
+  test("base returns 'diff-cell-removed', current returns 'diff-cell-added' for same modified cell", () => {
+    const baseFn = createCellClassBase("value", "");
+    const currentFn = createCellClassCurrent("value", "");
+    const row = createRow({ base__value: 100, current__value: 200 });
+
+    expect(baseFn(createCellClassParams(row))).toBe("diff-cell-removed");
+    expect(currentFn(createCellClassParams(row))).toBe("diff-cell-added");
+  });
+
+  test("both return same class for row-level status (added/removed)", () => {
+    const baseFn = createCellClassBase("value", "");
+    const currentFn = createCellClassCurrent("value", "");
+
+    const addedRow = createRow({}, "added");
+    const removedRow = createRow({}, "removed");
+
+    expect(baseFn(createCellClassParams(addedRow))).toBe(
+      currentFn(createCellClassParams(addedRow)),
+    );
+    expect(baseFn(createCellClassParams(removedRow))).toBe(
+      currentFn(createCellClassParams(removedRow)),
+    );
+  });
+
+  test("both return undefined for unchanged cells", () => {
+    const baseFn = createCellClassBase("value", "");
+    const currentFn = createCellClassCurrent("value", "");
+    const row = createRow({ base__value: 100, current__value: 100 });
+
+    expect(baseFn(createCellClassParams(row))).toBeUndefined();
+    expect(currentFn(createCellClassParams(row))).toBeUndefined();
+  });
+});
+
+// ============================================================================
+// toDiffColumn - Inline Mode Tests
+// ============================================================================
+
+describe("toDiffColumn - inline mode", () => {
+  test("returns column with field matching column name", () => {
+    const result = toDiffColumn(createConfig({ name: "price" }));
+
+    expect(isColumn(result)).toBe(true);
+    const col = asColumn(result);
+    expect(col.field).toBe("price");
+  });
+
+  test("does not have children property", () => {
+    const result = toDiffColumn(createConfig({ displayMode: "inline" }));
+
+    expect(isColumnGroup(result)).toBe(false);
+  });
+
+  test("includes cellRenderer function (inlineRenderCell)", () => {
+    const result = toDiffColumn(createConfig({ displayMode: "inline" }));
+
+    expect(isColumn(result)).toBe(true);
+    const col = asColumn(result);
+    expect(col.cellRenderer).toBeDefined();
+  });
+
+  test("preserves columnType", () => {
+    const result = toDiffColumn(
+      createConfig({ columnType: "number", displayMode: "inline" }),
+    );
+
+    expect(result.context?.columnType).toBe("number");
+  });
+
+  test("preserves columnRenderMode", () => {
+    const result = toDiffColumn(
+      createConfig({ columnRenderMode: "percent", displayMode: "inline" }),
+    );
+
+    expect(result.context?.columnRenderMode).toBe("percent");
+  });
+
+  test("uses undefined as default columnRenderMode (triggers smart formatting)", () => {
+    const result = toDiffColumn(createConfig({ displayMode: "inline" }));
+
+    expect(result.context?.columnRenderMode).toBeUndefined();
+  });
+
+  test("sets headerClass for added column", () => {
+    const result = toDiffColumn(
+      createConfig({ columnStatus: "added", displayMode: "inline" }),
+    );
+
+    expect(result.headerClass).toBe("diff-header-added");
+  });
+
+  test("sets headerClass for removed column", () => {
+    const result = toDiffColumn(
+      createConfig({ columnStatus: "removed", displayMode: "inline" }),
+    );
+
+    expect(result.headerClass).toBe("diff-header-removed");
+  });
+
+  test("headerClass is undefined for empty status", () => {
+    const result = toDiffColumn(
+      createConfig({ columnStatus: "", displayMode: "inline" }),
+    );
+
+    expect(result.headerClass).toBeUndefined();
+  });
+
+  test("has headerComponent", () => {
+    const result = toDiffColumn(createConfig({ displayMode: "inline" }));
+
+    // biome-ignore lint/suspicious/noExplicitAny: Accessing AG Grid internal property for testing
+    expect((result as any).headerComponent).toBeDefined();
+  });
+});
+
+// ============================================================================
+// toDiffColumn - Side-by-Side Mode Tests
+// ============================================================================
+
+describe("toDiffColumn - side_by_side mode", () => {
+  test("returns column group with children", () => {
+    const result = toDiffColumn(createConfig({ displayMode: "side_by_side" }));
+
+    expect(isColumnGroup(result)).toBe(true);
+  });
+
+  test("has exactly 2 children (base and current)", () => {
+    const result = toDiffColumn(createConfig({ displayMode: "side_by_side" }));
+
+    const children = getChildren(result);
+    expect(children).toHaveLength(2);
+  });
+
+  test("children have correct fields (base__name and current__name)", () => {
+    const result = toDiffColumn(
+      createConfig({ name: "value", displayMode: "side_by_side" }),
+    );
+
+    const children = getChildren(result);
+    const fields = children.map((child) => child.field);
+    expect(fields).toContain("base__value");
+    expect(fields).toContain("current__value");
+  });
+
+  test("uses default titles 'Base' and 'Current'", () => {
+    const result = toDiffColumn(createConfig({ displayMode: "side_by_side" }));
+
+    const children = getChildren(result);
+    const names = children.map((child) => child.headerName);
+    expect(names).toContain("Base");
+    expect(names).toContain("Current");
+  });
+
+  test("uses custom baseTitle and currentTitle", () => {
+    const result = toDiffColumn(
+      createConfig({
+        displayMode: "side_by_side",
+        baseTitle: "Before",
+        currentTitle: "After",
+      }),
+    );
+
+    const children = getChildren(result);
+    const names = children.map((child) => child.headerName);
+    expect(names).toContain("Before");
+    expect(names).toContain("After");
+  });
+
+  test("children have cellClass functions", () => {
+    const result = toDiffColumn(createConfig({ displayMode: "side_by_side" }));
+
+    const children = getChildren(result);
+    children.forEach((child) => {
+      expect(typeof child.cellClass).toBe("function");
+    });
+  });
+
+  test("children have cellRenderer function (defaultRenderCell)", () => {
+    const result = toDiffColumn(createConfig({ displayMode: "side_by_side" }));
+
+    const children = getChildren(result);
+    children.forEach((child) => {
+      expect(child.cellRenderer).toBeDefined();
+    });
+  });
+
+  test("children inherit headerCellClass", () => {
+    const result = toDiffColumn(
+      createConfig({ columnStatus: "added", displayMode: "side_by_side" }),
+    );
+
+    const children = getChildren(result);
+    children.forEach((child) => {
+      expect(child.headerClass).toBe("diff-header-added");
+    });
+  });
+
+  test("children have columnType and columnRenderMode", () => {
+    const result = toDiffColumn(
+      createConfig({
+        displayMode: "side_by_side",
+        columnType: "number",
+        columnRenderMode: 2,
+      }),
+    );
+
+    const children = getChildren(result);
+    children.forEach((child) => {
+      expect(child.context?.columnType).toBe("number");
+      expect(child.context?.columnRenderMode).toBe(2);
+    });
+  });
+
+  test("has headerGroupComponent", () => {
+    const result = toDiffColumn(createConfig({ displayMode: "side_by_side" }));
+
+    // biome-ignore lint/suspicious/noExplicitAny: Accessing AG Grid internal property for testing
+    expect((result as any).headerGroupComponent).toBeDefined();
+  });
+
+  test("does not have field property (column group)", () => {
+    const result = toDiffColumn(createConfig({ displayMode: "side_by_side" }));
+
+    // Column groups don't have a field at the top level
+    expect(isColumn(result)).toBe(false);
+  });
+});
+
+// ============================================================================
+// toDiffColumn - headerProps Tests
+// ============================================================================
+
+describe("toDiffColumn - headerProps", () => {
+  test("passes headerProps to DataFrameColumnGroupHeader", () => {
+    const headerProps = {
+      primaryKeys: ["id"],
+      pinnedColumns: ["name"],
+    };
+
+    const result = toDiffColumn(
+      createConfig({
+        headerProps,
+        displayMode: "inline",
+      }),
+    );
+
+    // The header is rendered via headerComponent
+    // biome-ignore lint/suspicious/noExplicitAny: Accessing AG Grid internal property for testing
+    expect((result as any).headerComponent).toBeDefined();
+  });
+
+  test("uses empty object when headerProps is undefined", () => {
+    const result = toDiffColumn(
+      createConfig({
+        headerProps: undefined,
+        displayMode: "inline",
+      }),
+    );
+
+    // biome-ignore lint/suspicious/noExplicitAny: Accessing AG Grid internal property for testing
+    expect((result as any).headerComponent).toBeDefined();
+  });
+});
+
+// ============================================================================
+// toDiffColumn - Edge Cases
+// ============================================================================
+
+describe("toDiffColumn - edge cases", () => {
+  test("handles empty column name", () => {
+    const result = toDiffColumn(createConfig({ name: "" }));
+
+    const col = asColumn(result);
+    expect(col.field).toBe("");
+  });
+
+  test("handles column name with special characters", () => {
+    const result = toDiffColumn(createConfig({ name: "col-with-dashes" }));
+
+    const col = asColumn(result);
+    expect(col.field).toBe("col-with-dashes");
+  });
+
+  test("handles column name with spaces", () => {
+    const result = toDiffColumn(createConfig({ name: "Column Name" }));
+
+    const col = asColumn(result);
+    expect(col.field).toBe("Column Name");
+  });
+
+  test("handles various columnType values", () => {
+    const types = [
+      "text",
+      "number",
+      "integer",
+      "boolean",
+      "date",
+      "datetime",
+      "unknown",
+    ] as const;
+
+    types.forEach((type) => {
+      const result = toDiffColumn(createConfig({ columnType: type }));
+      expect(result.context?.columnType).toBe(type);
+    });
+  });
+
+  test("handles numeric columnRenderMode", () => {
+    const modes = [2] as const;
+
+    modes.forEach((mode) => {
+      const result = toDiffColumn(createConfig({ columnRenderMode: mode }));
+      expect(result.context?.columnRenderMode).toBe(mode);
+    });
+  });
+
+  test("handles modified columnStatus (no special header class)", () => {
+    const result = toDiffColumn(createConfig({ columnStatus: "modified" }));
+
+    // "modified" doesn't have a special header class in getHeaderCellClass
+    expect(result.headerClass).toBeUndefined();
+  });
+});
+
+// ============================================================================
+// Integration: Cell Class Functions in Side-by-Side Mode
+// ============================================================================
+
+describe("toDiffColumn - side_by_side cell class integration", () => {
+  test("base child cellClass returns correct class for modified row", () => {
+    const result = toDiffColumn(
+      createConfig({ name: "value", displayMode: "side_by_side" }),
+    );
+
+    const children = getChildren(result);
+    const baseChild = children[0];
+    if (typeof baseChild.cellClass === "function") {
+      const row = createRow({ base__value: 100, current__value: 200 });
+      expect(baseChild.cellClass(createCellClassParams(row))).toBe(
+        "diff-cell-removed",
+      );
+    }
+  });
+
+  test("current child cellClass returns correct class for modified row", () => {
+    const result = toDiffColumn(
+      createConfig({ name: "value", displayMode: "side_by_side" }),
+    );
+
+    const children = getChildren(result);
+    const currentChild = children[1];
+    if (typeof currentChild.cellClass === "function") {
+      const row = createRow({ base__value: 100, current__value: 200 });
+      expect(currentChild.cellClass(createCellClassParams(row))).toBe(
+        "diff-cell-added",
+      );
+    }
+  });
+
+  test("both children return undefined for unchanged row", () => {
+    const result = toDiffColumn(
+      createConfig({ name: "value", displayMode: "side_by_side" }),
+    );
+
+    const children = getChildren(result);
+    const row = createRow({ base__value: 100, current__value: 100 });
+
+    children.forEach((child) => {
+      if (typeof child.cellClass === "function") {
+        expect(child.cellClass(createCellClassParams(row))).toBeUndefined();
+      }
+    });
+  });
+});