@datarecce/ui 0.1.30 → 0.1.32

package/recce-source/js/src/components/ui/dataGrid/inlineRenderCell.test.tsx

@@ -0,0 +1,607 @@
+/**
+ * @file inlineRenderCell.test.tsx
+ * @description Tests for inline diff cell renderer
+ *
+ * Tests cover:
+ * - asNumber helper function
+ * - inlineRenderCell component rendering
+ * - Delta mode display
+ * - Diff display (base vs current)
+ */
+
+import CssBaseline from "@mui/material/CssBaseline";
+import { ThemeProvider } from "@mui/material/styles";
+import { render, screen } from "@testing-library/react";
+import type { ICellRendererParams } from "ag-grid-community";
+import type { ReactNode } from "react";
+import { lightTheme as theme } from "@/components/ui/mui-theme";
+import type {
+  ColumnRenderMode,
+  ColumnType,
+  RowObjectType,
+} from "@/lib/api/types";
+import type { ColDefWithMetadata } from "./defaultRenderCell";
+import { asNumber, inlineRenderCell } from "./inlineRenderCell";
+
+// ============================================================================
+// Test Wrapper
+// ============================================================================
+
+/**
+ * Test wrapper that provides MUI ThemeProvider context
+ */
+function TestWrapper({ children }: { children: ReactNode }) {
+  return (
+    <ThemeProvider theme={theme}>
+      <CssBaseline />
+      {children}
+    </ThemeProvider>
+  );
+}
+
+/**
+ * Custom render function that includes providers
+ */
+function renderWithProviders(ui: React.ReactElement) {
+  return render(ui, { wrapper: TestWrapper });
+}
+
+// ============================================================================
+// Test Helpers
+// ============================================================================
+
+/**
+ * Creates a mock row object with required __status property
+ */
+function createRow(data: Record<string, unknown>): RowObjectType {
+  return {
+    __status: undefined,
+    ...data,
+  } as RowObjectType;
+}
+
+/**
+ * Creates a mock column definition for testing
+ * Using ColDefWithMetadata which includes columnType and columnRenderMode
+ */
+function createMockColDef(
+  field: string,
+  options: {
+    columnType?: ColumnType;
+    columnRenderMode?: ColumnRenderMode;
+  } = {},
+): ColDefWithMetadata {
+  return {
+    field,
+    headerName: field,
+    context: {
+      columnType: options.columnType,
+      columnRenderMode: options.columnRenderMode,
+    },
+  };
+}
+
+/**
+ * Renders inlineRenderCell with provided row and column configuration
+ */
+function renderInlineCell(
+  rowData: Record<string, unknown>,
+  columnField: string,
+  options: {
+    columnType?: ColumnType;
+    columnRenderMode?: ColumnRenderMode;
+  } = {},
+) {
+  const row = createRow(rowData);
+  const colDef = createMockColDef(columnField, options);
+
+  // Create mock ICellRendererParams
+  const params = {
+    data: row,
+    colDef,
+    value: row[columnField],
+  } as ICellRendererParams<RowObjectType>;
+
+  const element = inlineRenderCell(params);
+
+  return renderWithProviders(<>{element}</>);
+}
+
+// ============================================================================
+// asNumber Tests
+// ============================================================================
+
+describe("asNumber", () => {
+  describe("number input", () => {
+    test("returns number as-is", () => {
+      expect(asNumber(123)).toBe(123);
+    });
+
+    test("returns negative number as-is", () => {
+      expect(asNumber(-456)).toBe(-456);
+    });
+
+    test("returns decimal number as-is", () => {
+      expect(asNumber(123.456)).toBe(123.456);
+    });
+
+    test("returns zero as-is", () => {
+      expect(asNumber(0)).toBe(0);
+    });
+
+    test("returns negative zero as-is", () => {
+      expect(asNumber(-0)).toBe(-0);
+    });
+
+    test("returns NaN as-is", () => {
+      expect(Number.isNaN(asNumber(NaN))).toBe(true);
+    });
+
+    test("returns Infinity as-is", () => {
+      expect(asNumber(Infinity)).toBe(Infinity);
+    });
+
+    test("returns negative Infinity as-is", () => {
+      expect(asNumber(-Infinity)).toBe(-Infinity);
+    });
+  });
+
+  describe("string input", () => {
+    test("parses numeric string", () => {
+      expect(asNumber("123")).toBe(123);
+    });
+
+    test("parses decimal string", () => {
+      expect(asNumber("123.456")).toBe(123.456);
+    });
+
+    test("parses negative string", () => {
+      expect(asNumber("-456")).toBe(-456);
+    });
+
+    test("parses string with leading whitespace", () => {
+      expect(asNumber("  123")).toBe(123);
+    });
+
+    test("parses string with trailing whitespace", () => {
+      expect(asNumber("123  ")).toBe(123);
+    });
+
+    test("returns 0 for non-numeric string", () => {
+      expect(asNumber("abc")).toBe(0);
+    });
+
+    test("returns 0 for empty string", () => {
+      expect(asNumber("")).toBe(0);
+    });
+
+    test("parses string starting with number", () => {
+      // parseFloat stops at first non-numeric character
+      expect(asNumber("123abc")).toBe(123);
+    });
+
+    test("returns 0 for string starting with non-number", () => {
+      expect(asNumber("abc123")).toBe(0);
+    });
+
+    test("parses scientific notation string", () => {
+      expect(asNumber("1.5e10")).toBe(1.5e10);
+    });
+
+    test("parses Infinity string", () => {
+      expect(asNumber("Infinity")).toBe(Infinity);
+    });
+
+    test("parses negative Infinity string", () => {
+      expect(asNumber("-Infinity")).toBe(-Infinity);
+    });
+  });
+
+  describe("other types", () => {
+    test("returns 0 for null", () => {
+      expect(asNumber(null as never)).toBe(0);
+    });
+
+    test("returns 0 for undefined", () => {
+      expect(asNumber(undefined as never)).toBe(0);
+    });
+
+    test("returns 0 for boolean true", () => {
+      expect(asNumber(true as never)).toBe(0);
+    });
+
+    test("returns 0 for boolean false", () => {
+      expect(asNumber(false as never)).toBe(0);
+    });
+
+    test("returns 0 for object", () => {
+      expect(asNumber({} as never)).toBe(0);
+    });
+
+    test("returns 0 for array", () => {
+      expect(asNumber([] as never)).toBe(0);
+    });
+  });
+});
+
+// ============================================================================
+// inlineRenderCell Tests - No Values
+// ============================================================================
+
+describe("inlineRenderCell", () => {
+  describe("when neither base nor current values exist", () => {
+    test("returns dash for missing column data", () => {
+      const row = { id: 1, other_column: "value" };
+      renderInlineCell(row, "missing_column");
+
+      expect(screen.getByText("-")).toBeInTheDocument();
+    });
+
+    test("returns dash for empty row", () => {
+      const row = {};
+      renderInlineCell(row, "any_column");
+
+      expect(screen.getByText("-")).toBeInTheDocument();
+    });
+  });
+
+  // ============================================================================
+  // inlineRenderCell Tests - Equal Values
+  // ============================================================================
+
+  describe("when base and current values are equal", () => {
+    test("renders single value for matching strings", () => {
+      const row = {
+        base__name: "John",
+        current__name: "John",
+      };
+      renderInlineCell(row, "name");
+
+      expect(screen.getByText("John")).toBeInTheDocument();
+      // Should only show once (not in DiffText components)
+      expect(screen.queryAllByText("John")).toHaveLength(1);
+    });
+
+    test("renders single value for matching numbers", () => {
+      const row = {
+        base__amount: 100,
+        current__amount: 100,
+      };
+      renderInlineCell(row, "amount", { columnType: "number" });
+
+      expect(screen.getByText("100")).toBeInTheDocument();
+    });
+
+    test("renders single value for matching null values", () => {
+      const row = {
+        base__value: null,
+        current__value: null,
+      };
+      renderInlineCell(row, "value");
+
+      // Null values are rendered as "-"
+      expect(screen.getByText("-")).toBeInTheDocument();
+    });
+
+    test("renders grayed out text for null values", () => {
+      const row = {
+        base__value: null,
+        current__value: null,
+      };
+      const { container } = renderInlineCell(row, "value");
+
+      const span = container.querySelector("span");
+      expect(span).toBeInTheDocument();
+      // Check that the span has gray color style
+      expect(span).toHaveAttribute("style", expect.stringContaining("gray"));
+    });
+  });
+
+  // ============================================================================
+  // inlineRenderCell Tests - Delta Mode
+  // ============================================================================
+
+  describe("delta mode with numeric columns", () => {
+    test("renders positive delta for increased values", () => {
+      const row = {
+        base__count: 100,
+        current__count: 150,
+      };
+      renderInlineCell(row, "count", {
+        columnType: "number",
+        columnRenderMode: "delta",
+      });
+
+      // Should show current value
+      expect(screen.getByText("150")).toBeInTheDocument();
+      // Should show positive delta
+      expect(screen.getByText("(+50)")).toBeInTheDocument();
+    });
+
+    test("renders negative delta for decreased values", () => {
+      const row = {
+        base__count: 200,
+        current__count: 150,
+      };
+      renderInlineCell(row, "count", {
+        columnType: "number",
+        columnRenderMode: "delta",
+      });
+
+      // Should show current value
+      expect(screen.getByText("150")).toBeInTheDocument();
+      // Should show negative delta
+      expect(screen.getByText("(-50)")).toBeInTheDocument();
+    });
+
+    test("renders zero delta when values are equal", () => {
+      const row = {
+        base__count: 100,
+        current__count: 100,
+      };
+      // Note: When values are equal, it renders single value, not delta
+      renderInlineCell(row, "count", {
+        columnType: "number",
+        columnRenderMode: "delta",
+      });
+
+      // Should show single value (no delta display for equal values)
+      expect(screen.getByText("100")).toBeInTheDocument();
+      expect(screen.queryByText("(+0)")).not.toBeInTheDocument();
+    });
+
+    test("handles zero base value (avoids division by zero)", () => {
+      const row = {
+        base__count: 0,
+        current__count: 50,
+      };
+      renderInlineCell(row, "count", {
+        columnType: "number",
+        columnRenderMode: "delta",
+      });
+
+      // Should show current value and delta
+      expect(screen.getByText("50")).toBeInTheDocument();
+      expect(screen.getByText("(+50)")).toBeInTheDocument();
+    });
+
+    test("works with integer column type", () => {
+      const row = {
+        base__id: 10,
+        current__id: 15,
+      };
+      renderInlineCell(row, "id", {
+        columnType: "integer",
+        columnRenderMode: "delta",
+      });
+
+      expect(screen.getByText("15")).toBeInTheDocument();
+      expect(screen.getByText("(+5)")).toBeInTheDocument();
+    });
+
+    test("works with string numeric values", () => {
+      const row = {
+        base__amount: "100.50",
+        current__amount: "200.75",
+      };
+      renderInlineCell(row, "amount", {
+        columnType: "number",
+        columnRenderMode: "delta",
+      });
+
+      expect(screen.getByText("200.75")).toBeInTheDocument();
+      expect(screen.getByText("(+100.25)")).toBeInTheDocument();
+    });
+
+    test("formats decimal values with smart decimals", () => {
+      const row = {
+        base__price: 10.1,
+        current__price: 10.25,
+      };
+      renderInlineCell(row, "price", {
+        columnType: "number",
+        columnRenderMode: "delta",
+      });
+
+      expect(screen.getByText("10.25")).toBeInTheDocument();
+      expect(screen.getByText("(+0.15)")).toBeInTheDocument();
+    });
+
+    test("falls back to standard diff for non-numeric column types in delta mode", () => {
+      const row = {
+        base__status: "active",
+        current__status: "inactive",
+      };
+      renderInlineCell(row, "status", {
+        columnType: "text",
+        columnRenderMode: "delta",
+      });
+
+      // Should render as standard diff (both values shown)
+      expect(screen.getByText("active")).toBeInTheDocument();
+      expect(screen.getByText("inactive")).toBeInTheDocument();
+    });
+
+    test("falls back to standard diff when only base exists", () => {
+      const row = {
+        base__count: 100,
+      };
+      renderInlineCell(row, "count", {
+        columnType: "number",
+        columnRenderMode: "delta",
+      });
+
+      // Should show only base value (no delta calculation possible)
+      expect(screen.getByText("100")).toBeInTheDocument();
+    });
+
+    test("falls back to standard diff when only current exists", () => {
+      const row = {
+        current__count: 150,
+      };
+      renderInlineCell(row, "count", {
+        columnType: "number",
+        columnRenderMode: "delta",
+      });
+
+      // Should show only current value
+      expect(screen.getByText("150")).toBeInTheDocument();
+    });
+  });
+
+  // ============================================================================
+  // inlineRenderCell Tests - Standard Diff Display
+  // ============================================================================
+
+  describe("standard diff display (values differ)", () => {
+    test("renders both base and current when values differ", () => {
+      const row = {
+        base__name: "John",
+        current__name: "Jane",
+      };
+      renderInlineCell(row, "name");
+
+      expect(screen.getByText("John")).toBeInTheDocument();
+      expect(screen.getByText("Jane")).toBeInTheDocument();
+    });
+
+    test("renders only base value when current is missing", () => {
+      const row = {
+        base__name: "John",
+      };
+      renderInlineCell(row, "name");
+
+      expect(screen.getByText("John")).toBeInTheDocument();
+      expect(screen.queryByText("Jane")).not.toBeInTheDocument();
+    });
+
+    test("renders only current value when base is missing", () => {
+      const row = {
+        current__name: "Jane",
+      };
+      renderInlineCell(row, "name");
+
+      expect(screen.getByText("Jane")).toBeInTheDocument();
+      expect(screen.queryByText("John")).not.toBeInTheDocument();
+    });
+
+    test("handles null to value change", () => {
+      const row = {
+        base__status: null,
+        current__status: "active",
+      };
+      renderInlineCell(row, "status");
+
+      // Null values are rendered as "-"
+      expect(screen.getByText("-")).toBeInTheDocument();
+      expect(screen.getByText("active")).toBeInTheDocument();
+    });
+
+    test("handles value to null change", () => {
+      const row = {
+        base__status: "active",
+        current__status: null,
+      };
+      renderInlineCell(row, "status");
+
+      expect(screen.getByText("active")).toBeInTheDocument();
+      // Null values are rendered as "-"
+      expect(screen.getByText("-")).toBeInTheDocument();
+    });
+
+    test("renders numeric values correctly", () => {
+      const row = {
+        base__price: 99.99,
+        current__price: 149.99,
+      };
+      renderInlineCell(row, "price", { columnType: "number" });
+
+      expect(screen.getByText("99.99")).toBeInTheDocument();
+      expect(screen.getByText("149.99")).toBeInTheDocument();
+    });
+
+    test("handles case-insensitive column key matching", () => {
+      // The component lowercases the keys
+      const row = {
+        base__name: "John",
+        current__name: "Jane",
+      };
+      renderInlineCell(row, "NAME");
+
+      expect(screen.getByText("John")).toBeInTheDocument();
+      expect(screen.getByText("Jane")).toBeInTheDocument();
+    });
+  });
+
+  // ============================================================================
+  // inlineRenderCell Tests - Edge Cases
+  // ============================================================================
+
+  describe("edge cases", () => {
+    test("handles empty string values", () => {
+      const row = {
+        base__name: "",
+        current__name: "Jane",
+      };
+      renderInlineCell(row, "name");
+
+      // Empty string should be rendered (possibly as empty DiffText)
+      expect(screen.getByText("Jane")).toBeInTheDocument();
+    });
+
+    test("handles boolean values", () => {
+      const row = {
+        base__active: true,
+        current__active: false,
+      };
+      renderInlineCell(row, "active", { columnType: "boolean" });
+
+      expect(screen.getByText("true")).toBeInTheDocument();
+      expect(screen.getByText("false")).toBeInTheDocument();
+    });
+
+    test("handles very large numbers in delta mode", () => {
+      const row = {
+        base__amount: 1000000,
+        current__amount: 2500000,
+      };
+      renderInlineCell(row, "amount", {
+        columnType: "number",
+        columnRenderMode: "delta",
+      });
+
+      // Large numbers are formatted with thousand separators
+      expect(screen.getByText("2,500,000")).toBeInTheDocument();
+      expect(screen.getByText("(+1,500,000)")).toBeInTheDocument();
+    });
+
+    test("handles negative numbers in delta mode", () => {
+      const row = {
+        base__balance: -100,
+        current__balance: -50,
+      };
+      renderInlineCell(row, "balance", {
+        columnType: "number",
+        columnRenderMode: "delta",
+      });
+
+      // Change from -100 to -50 is an increase of 50
+      expect(screen.getByText("-50")).toBeInTheDocument();
+      expect(screen.getByText("(+50)")).toBeInTheDocument();
+    });
+
+    test("handles decimal precision in delta calculations", () => {
+      const row = {
+        base__rate: 0.123,
+        current__rate: 0.456,
+      };
+      renderInlineCell(row, "rate", {
+        columnType: "number",
+        columnRenderMode: "delta",
+      });
+
+      expect(screen.getByText("0.46")).toBeInTheDocument();
+      expect(screen.getByText("(+0.33)")).toBeInTheDocument();
+    });
+  });
+});