@marimo-team/islands 0.20.1 → 0.20.3-dev76

package/src/components/data-table/range-focus/__tests__/cell-selection-stats.test.tsx

@@ -0,0 +1,365 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import type { Table } from "@tanstack/react-table";
+import { render, screen } from "@testing-library/react";
+import { useEffect } from "react";
+import { describe, expect, it } from "vitest";
+import { SELECT_COLUMN_ID } from "../../types";
+import { useCellSelectionReducerActions } from "../atoms";
+import { CellSelectionStats } from "../cell-selection-stats";
+import { CellSelectionProvider } from "../provider";
+import { createMockCell, createMockRow, createMockTable } from "./test-utils";
+
+const TestHarness = ({
+  table,
+  selectedCellIds,
+}: {
+  table: Table<unknown>;
+  selectedCellIds: Set<string>;
+}) => {
+  const actions = useCellSelectionReducerActions();
+  useEffect(() => {
+    actions.setSelectedCells(selectedCellIds);
+  }, [actions, selectedCellIds]);
+  return <CellSelectionStats table={table} />;
+};
+
+describe("CellSelectionStats", () => {
+  it("should return null when fewer than 2 cells are selected", () => {
+    const row = createMockRow("0", [
+      createMockCell("0_0", 10),
+      createMockCell("0_1", 20),
+    ]);
+    const table = createMockTable([row], []);
+
+    const { container } = render(
+      <CellSelectionProvider>
+        <TestHarness table={table} selectedCellIds={new Set(["0_0"])} />
+      </CellSelectionProvider>,
+    );
+
+    expect(container.firstChild).toBeNull();
+  });
+
+  it("should display Count stat when 2 or more cells are selected", () => {
+    const row = createMockRow("0", [
+      createMockCell("0_0", 10),
+      createMockCell("0_1", 20),
+    ]);
+    const table = createMockTable([row], []);
+
+    render(
+      <CellSelectionProvider>
+        <TestHarness table={table} selectedCellIds={new Set(["0_0", "0_1"])} />
+      </CellSelectionProvider>,
+    );
+
+    expect(screen.getByText("Count: 2")).toBeInTheDocument();
+  });
+
+  it("should display Sum when selection contains numeric values", () => {
+    const row = createMockRow("0", [
+      createMockCell("0_0", 10),
+      createMockCell("0_1", 20),
+    ]);
+    const table = createMockTable([row], []);
+
+    render(
+      <CellSelectionProvider>
+        <TestHarness table={table} selectedCellIds={new Set(["0_0", "0_1"])} />
+      </CellSelectionProvider>,
+    );
+
+    expect(screen.getByText("Sum: 30")).toBeInTheDocument();
+  });
+
+  it("should display Average when selection contains numeric values", () => {
+    const row = createMockRow("0", [
+      createMockCell("0_0", 10),
+      createMockCell("0_1", 20),
+    ]);
+    const table = createMockTable([row], []);
+
+    render(
+      <CellSelectionProvider>
+        <TestHarness table={table} selectedCellIds={new Set(["0_0", "0_1"])} />
+      </CellSelectionProvider>,
+    );
+
+    expect(screen.getByText("Average: 15")).toBeInTheDocument();
+  });
+
+  it("should not display Sum or Average when selection has no numeric values", () => {
+    const row = createMockRow("0", [
+      createMockCell("0_0", "a"),
+      createMockCell("0_1", "b"),
+    ]);
+    const table = createMockTable([row], []);
+
+    render(
+      <CellSelectionProvider>
+        <TestHarness table={table} selectedCellIds={new Set(["0_0", "0_1"])} />
+      </CellSelectionProvider>,
+    );
+
+    expect(screen.getByText("Count: 2")).toBeInTheDocument();
+    expect(screen.queryByText(/Sum:/)).not.toBeInTheDocument();
+    expect(screen.queryByText(/Average:/)).not.toBeInTheDocument();
+  });
+
+  it("should round sum and average to 8 decimal places", () => {
+    const row = createMockRow("0", [
+      createMockCell("0_0", 0.112_233_441_1),
+      createMockCell("0_1", 0.112_233_441_1),
+    ]);
+    const table = createMockTable([row], []);
+
+    render(
+      <CellSelectionProvider>
+        <TestHarness table={table} selectedCellIds={new Set(["0_0", "0_1"])} />
+      </CellSelectionProvider>,
+    );
+
+    expect(screen.getByText("Sum: 0.22446688")).toBeInTheDocument(); // Round 0.2244668866 to 8 decimal places
+    expect(screen.getByText("Average: 0.11223344")).toBeInTheDocument(); // Round 0.1122334411 to 8 decimal places
+  });
+
+  it("should correctly round sum and average to 8 decimal places", () => {
+    const row = createMockRow("0", [
+      createMockCell("0_0", 0.112_233_443_3),
+      createMockCell("0_1", 0.112_233_443_3),
+    ]);
+    const table = createMockTable([row], []);
+
+    render(
+      <CellSelectionProvider>
+        <TestHarness table={table} selectedCellIds={new Set(["0_0", "0_1"])} />
+      </CellSelectionProvider>,
+    );
+
+    expect(screen.getByText("Sum: 0.22446689")).toBeInTheDocument(); // Round 0.2244668866 to 8 decimal places
+    expect(screen.getByText("Average: 0.11223344")).toBeInTheDocument(); // Round 0.1122334433 to 8 decimal places
+  });
+
+  it("should not add extra decimal places to sum and average", () => {
+    const row = createMockRow("0", [
+      createMockCell("0_0", 0.1),
+      createMockCell("0_1", 0.2),
+    ]);
+    const table = createMockTable([row], []);
+
+    render(
+      <CellSelectionProvider>
+        <TestHarness table={table} selectedCellIds={new Set(["0_0", "0_1"])} />
+      </CellSelectionProvider>,
+    );
+
+    expect(screen.getByText("Sum: 0.3")).toBeInTheDocument();
+    expect(screen.getByText("Average: 0.15")).toBeInTheDocument();
+  });
+
+  it("should display Sum: 0 and Average: 0 when all selected values are zero", () => {
+    const row = createMockRow("0", [
+      createMockCell("0_0", 0),
+      createMockCell("0_1", 0),
+    ]);
+    const table = createMockTable([row], []);
+
+    render(
+      <CellSelectionProvider>
+        <TestHarness table={table} selectedCellIds={new Set(["0_0", "0_1"])} />
+      </CellSelectionProvider>,
+    );
+
+    expect(screen.getByText("Count: 2")).toBeInTheDocument();
+    expect(screen.getByText("Sum: 0")).toBeInTheDocument();
+    expect(screen.getByText("Average: 0")).toBeInTheDocument();
+  });
+
+  it("should not display any stats when exactly one cell is selected", () => {
+    const row = createMockRow("0", [
+      createMockCell("0_0", 10),
+      createMockCell("0_1", 20),
+    ]);
+    const table = createMockTable([row], []);
+
+    const { container } = render(
+      <CellSelectionProvider>
+        <TestHarness table={table} selectedCellIds={new Set(["0_0"])} />
+      </CellSelectionProvider>,
+    );
+
+    expect(container.firstChild).toBeNull();
+    expect(screen.queryByText(/Count:/)).not.toBeInTheDocument();
+  });
+
+  it("should display Sum and Average for negative numbers", () => {
+    const row = createMockRow("0", [
+      createMockCell("0_0", -10),
+      createMockCell("0_1", -20),
+    ]);
+    const table = createMockTable([row], []);
+
+    render(
+      <CellSelectionProvider>
+        <TestHarness table={table} selectedCellIds={new Set(["0_0", "0_1"])} />
+      </CellSelectionProvider>,
+    );
+
+    expect(screen.getByText("Count: 2")).toBeInTheDocument();
+    expect(screen.getByText("Sum: -30")).toBeInTheDocument();
+    expect(screen.getByText("Average: -15")).toBeInTheDocument();
+  });
+
+  it("should display Sum and Average for number strings", () => {
+    const row = createMockRow("0", [
+      createMockCell("0_0", "42"),
+      createMockCell("0_1", "3.14"),
+    ]);
+    const table = createMockTable([row], []);
+
+    render(
+      <CellSelectionProvider>
+        <TestHarness table={table} selectedCellIds={new Set(["0_0", "0_1"])} />
+      </CellSelectionProvider>,
+    );
+
+    expect(screen.getByText("Count: 2")).toBeInTheDocument();
+    expect(screen.getByText("Sum: 45.14")).toBeInTheDocument();
+    expect(screen.getByText("Average: 22.57")).toBeInTheDocument();
+  });
+
+  it("should skip NaN and Infinity and show stats for finite values only", () => {
+    const row = createMockRow("0", [
+      createMockCell("0_0", 5),
+      createMockCell("0_1", Number.NaN),
+      createMockCell("0_2", Infinity),
+    ]);
+    const table = createMockTable([row], []);
+
+    render(
+      <CellSelectionProvider>
+        <TestHarness
+          table={table}
+          selectedCellIds={new Set(["0_0", "0_1", "0_2"])}
+        />
+      </CellSelectionProvider>,
+    );
+
+    expect(screen.getByText("Count: 3")).toBeInTheDocument();
+    expect(screen.getByText("Sum: 5")).toBeInTheDocument();
+    expect(screen.getByText("Average: 5")).toBeInTheDocument();
+  });
+
+  it("should exclude booleans from Sum and Average", () => {
+    const row = createMockRow("0", [
+      createMockCell("0_0", 10),
+      createMockCell("0_1", true),
+      createMockCell("0_2", false),
+    ]);
+    const table = createMockTable([row], []);
+
+    render(
+      <CellSelectionProvider>
+        <TestHarness
+          table={table}
+          selectedCellIds={new Set(["0_0", "0_1", "0_2"])}
+        />
+      </CellSelectionProvider>,
+    );
+
+    expect(screen.getByText("Count: 3")).toBeInTheDocument();
+    expect(screen.getByText("Sum: 10")).toBeInTheDocument();
+    expect(screen.getByText("Average: 10")).toBeInTheDocument();
+  });
+
+  it("should ignore select checkbox column for Count, Sum and Average", () => {
+    const selectCellId = `0_${SELECT_COLUMN_ID}`;
+    const row = createMockRow("0", [
+      createMockCell(selectCellId, 10),
+      createMockCell("0_0", 20),
+      createMockCell("0_1", 30),
+    ]);
+    const table = createMockTable([row], []);
+
+    render(
+      <CellSelectionProvider>
+        <TestHarness
+          table={table}
+          selectedCellIds={new Set([selectCellId, "0_0", "0_1"])}
+        />
+      </CellSelectionProvider>,
+    );
+
+    expect(screen.getByText("Count: 2")).toBeInTheDocument();
+    expect(screen.getByText("Sum: 50")).toBeInTheDocument();
+    expect(screen.getByText("Average: 25")).toBeInTheDocument();
+  });
+
+  it("should not display stats when only checkbox column cells are selected", () => {
+    const selectCellId1 = `0_${SELECT_COLUMN_ID}`;
+    const selectCellId2 = `1_${SELECT_COLUMN_ID}`;
+    const row1 = createMockRow("0", [createMockCell(selectCellId1, true)]);
+    const row2 = createMockRow("1", [createMockCell(selectCellId2, false)]);
+    const table = createMockTable([row1, row2], []);
+
+    const { container } = render(
+      <CellSelectionProvider>
+        <TestHarness
+          table={table}
+          selectedCellIds={new Set([selectCellId1, selectCellId2])}
+        />
+      </CellSelectionProvider>,
+    );
+
+    expect(container.firstChild).toBeNull();
+    expect(screen.queryByText(/Count:/)).not.toBeInTheDocument();
+  });
+
+  it("should show Sum and Average only for numeric cells when selection has mixed types", () => {
+    const row = createMockRow("0", [
+      createMockCell("0_0", 10),
+      createMockCell("0_1", "abc"),
+      createMockCell("0_2", undefined),
+    ]);
+    const table = createMockTable([row], []);
+
+    render(
+      <CellSelectionProvider>
+        <TestHarness
+          table={table}
+          selectedCellIds={new Set(["0_0", "0_1", "0_2"])}
+        />
+      </CellSelectionProvider>,
+    );
+
+    expect(screen.getByText("Count: 3")).toBeInTheDocument();
+    expect(screen.getByText("Sum: 10")).toBeInTheDocument();
+    expect(screen.getByText("Average: 10")).toBeInTheDocument();
+  });
+
+  it("should display stats for multiple numeric cells across rows", () => {
+    const row1 = createMockRow("0", [
+      createMockCell("0_0", 1),
+      createMockCell("0_1", 2),
+    ]);
+    const row2 = createMockRow("1", [
+      createMockCell("1_0", 3),
+      createMockCell("1_1", 4),
+    ]);
+    const table = createMockTable([row1, row2], []);
+
+    render(
+      <CellSelectionProvider>
+        <TestHarness
+          table={table}
+          selectedCellIds={new Set(["0_0", "0_1", "1_0", "1_1"])}
+        />
+      </CellSelectionProvider>,
+    );
+
+    expect(screen.getByText("Count: 4")).toBeInTheDocument();
+    expect(screen.getByText("Sum: 10")).toBeInTheDocument();
+    expect(screen.getByText("Average: 2.5")).toBeInTheDocument();
+  });
+});

package/src/components/data-table/range-focus/__tests__/test-utils.ts

@@ -0,0 +1,77 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import type { Cell, Column, Row, Table } from "@tanstack/react-table";
+import { vi } from "vitest";
+import type { SelectedCell } from "../atoms";
+
+export function createMockCell(
+  id: string,
+  value: unknown,
+): Cell<unknown, unknown> {
+  return {
+    id,
+    getValue: () => value,
+    column: {} as Column<unknown>,
+    row: {} as Row<unknown>,
+    getContext: vi.fn(),
+    renderValue: vi.fn(),
+  } as unknown as Cell<unknown, unknown>;
+}
+
+export function createMockColumn(id: string): Column<unknown> {
+  return {
+    id: id,
+    getIndex: () => Number.parseInt(id, 10),
+  } as unknown as Column<unknown>;
+}
+
+export function createMockRow(
+  id: string,
+  cells: Cell<unknown, unknown>[],
+): Row<unknown> {
+  const cellMap = new Map(cells.map((cell) => [cell.id, cell]));
+  return {
+    id,
+    index: Number.parseInt(id, 10),
+    getAllCells: () => cells,
+    getValue: (columnId: string) => {
+      const cellId = `${id}_${columnId}`;
+      if (cellMap.has(cellId)) {
+        return cellMap.get(cellId)!.getValue();
+      }
+      if (cellMap.has(columnId)) {
+        return cellMap.get(columnId)!.getValue();
+      }
+      return undefined;
+    },
+    original: {},
+    depth: 0,
+    subRows: [],
+    getVisibleCells: vi.fn(),
+    getUniqueValues: vi.fn(),
+    renderValue: vi.fn(),
+  } as unknown as Row<unknown>;
+}
+
+export function createMockTable(
+  rows: Row<unknown>[],
+  columns: Column<unknown>[],
+): Table<unknown> {
+  return {
+    getRow: (id: string) => rows.find((row) => row.id === id),
+    getRowModel: () => ({ rows }),
+    getColumn: (columnId: string) => columns.find((col) => col.id === columnId),
+    getAllColumns: () => columns,
+  } as unknown as Table<unknown>;
+}
+
+export function createSelectedCell(
+  rowId: string,
+  columnId: string,
+): SelectedCell {
+  return {
+    rowId,
+    columnId,
+    cellId: `${rowId}_${columnId}`,
+  };
+}