@navikt/ds-react 8.5.0 → 8.5.1

package/src/data/table/helpers/table-grid-nav.test.ts

@@ -0,0 +1,659 @@
+import { afterEach, describe, expect, test } from "vitest";
+import {
+  buildTableGridMap,
+  findFirstCell,
+  findFirstCellInRow,
+  findLastCell,
+  findLastCellInRow,
+  findNextFocusableCell,
+  getNextGridPosition,
+  isCellFocusable,
+} from "./table-grid-nav";
+
+let container: HTMLDivElement;
+
+afterEach(() => {
+  container?.parentNode && document.body.removeChild(container);
+});
+
+function createTable(html: string): HTMLTableElement {
+  container = document.createElement("div");
+  container.innerHTML = html;
+  document.body.appendChild(container);
+  return container.querySelector("table")!;
+}
+
+describe("buildTableGridMap", () => {
+  test("should build grid for simple 2x2 table without spans", () => {
+    const table = createTable(`
+      <table>
+        <tr>
+          <td>A1</td>
+          <td>B1</td>
+        </tr>
+        <tr>
+          <td>A2</td>
+          <td>B2</td>
+        </tr>
+      </table>
+    `);
+
+    const { grid, positions } = buildTableGridMap(table);
+
+    expect(grid.length).toBe(2);
+    expect(grid[0].length).toBe(2);
+    expect(grid[1].length).toBe(2);
+
+    const cells = Array.from(table.querySelectorAll("td"));
+    expect(grid[0][0]).toBe(cells[0]);
+    expect(grid[0][1]).toBe(cells[1]);
+    expect(grid[1][0]).toBe(cells[2]);
+    expect(grid[1][1]).toBe(cells[3]);
+
+    expect(positions.get(cells[0])).toEqual({ x: 0, y: 0 });
+    expect(positions.get(cells[1])).toEqual({ x: 1, y: 0 });
+    expect(positions.get(cells[2])).toEqual({ x: 0, y: 1 });
+    expect(positions.get(cells[3])).toEqual({ x: 1, y: 1 });
+  });
+
+  test("should handle colspan correctly", () => {
+    const table = createTable(`
+      <table>
+        <tr>
+          <td colspan="2">A1-B1</td>
+        </tr>
+        <tr>
+          <td>A2</td>
+          <td>B2</td>
+        </tr>
+      </table>
+    `);
+
+    const { grid, positions } = buildTableGridMap(table);
+
+    expect(grid.length).toBe(2);
+    expect(grid[0].length).toBe(2);
+    expect(grid[1].length).toBe(2);
+
+    const cells = Array.from(table.querySelectorAll("td"));
+    const cellWithColspan = cells[0];
+
+    expect(grid[0][0]).toBe(cellWithColspan);
+    expect(grid[0][1]).toBe(cellWithColspan);
+    expect(grid[1][0]).toBe(cells[1]);
+    expect(grid[1][1]).toBe(cells[2]);
+
+    expect(positions.get(cellWithColspan)).toEqual({ x: 0, y: 0 });
+    expect(positions.get(cells[1])).toEqual({ x: 0, y: 1 });
+    expect(positions.get(cells[2])).toEqual({ x: 1, y: 1 });
+  });
+
+  test("should handle rowspan correctly", () => {
+    const table = createTable(`
+      <table>
+        <tr>
+          <td rowspan="2">A1-A2</td>
+          <td>B1</td>
+        </tr>
+        <tr>
+          <td>B2</td>
+        </tr>
+      </table>
+    `);
+
+    const { grid, positions } = buildTableGridMap(table);
+
+    expect(grid.length).toBe(2);
+    expect(grid[0].length).toBe(2);
+    expect(grid[1].length).toBe(2);
+
+    const cells = Array.from(table.querySelectorAll("td"));
+    const cellWithRowspan = cells[0];
+
+    expect(grid[0][0]).toBe(cellWithRowspan);
+    expect(grid[0][1]).toBe(cells[1]);
+    expect(grid[1][0]).toBe(cellWithRowspan);
+    expect(grid[1][1]).toBe(cells[2]);
+
+    expect(positions.get(cellWithRowspan)).toEqual({ x: 0, y: 0 });
+    expect(positions.get(cells[1])).toEqual({ x: 1, y: 0 });
+    expect(positions.get(cells[2])).toEqual({ x: 1, y: 1 });
+  });
+
+  test("should handle both colspan and rowspan", () => {
+    const table = createTable(`
+      <table>
+        <tr>
+          <td colspan="2" rowspan="2">A1-B1-A2-B2</td>
+          <td>C1</td>
+        </tr>
+        <tr>
+          <td>C2</td>
+        </tr>
+      </table>
+    `);
+
+    const { grid, positions } = buildTableGridMap(table);
+
+    expect(grid.length).toBe(2);
+    expect(grid[0].length).toBe(3);
+    expect(grid[1].length).toBe(3);
+
+    const cells = Array.from(table.querySelectorAll("td"));
+    const spanningCell = cells[0];
+
+    expect(grid[0][0]).toBe(spanningCell);
+    expect(grid[0][1]).toBe(spanningCell);
+    expect(grid[0][2]).toBe(cells[1]);
+    expect(grid[1][0]).toBe(spanningCell);
+    expect(grid[1][1]).toBe(spanningCell);
+    expect(grid[1][2]).toBe(cells[2]);
+
+    expect(positions.get(spanningCell)).toEqual({ x: 0, y: 0 });
+    expect(positions.get(cells[1])).toEqual({ x: 2, y: 0 });
+    expect(positions.get(cells[2])).toEqual({ x: 2, y: 1 });
+  });
+
+  test("should handle complex table with multiple spans", () => {
+    const table = createTable(`
+      <table>
+        <tr>
+          <td>A1</td>
+          <td colspan="2">B1-C1</td>
+          <td>D1</td>
+        </tr>
+        <tr>
+          <td rowspan="2">A2-A3</td>
+          <td>B2</td>
+          <td>C2</td>
+          <td>D2</td>
+        </tr>
+        <tr>
+          <td>B3</td>
+          <td colspan="2">C3-D3</td>
+        </tr>
+      </table>
+    `);
+
+    const { grid, positions } = buildTableGridMap(table);
+
+    expect(grid.length).toBe(3);
+    expect(grid[0].length).toBe(4);
+    expect(grid[1].length).toBe(4);
+    expect(grid[2].length).toBe(4);
+
+    const cells = Array.from(table.querySelectorAll("td"));
+
+    expect(grid[0][0]).toBe(cells[0]);
+    expect(grid[0][1]).toBe(cells[1]);
+    expect(grid[0][2]).toBe(cells[1]);
+    expect(grid[0][3]).toBe(cells[2]);
+
+    expect(grid[1][0]).toBe(cells[3]);
+    expect(grid[1][1]).toBe(cells[4]);
+    expect(grid[1][2]).toBe(cells[5]);
+    expect(grid[1][3]).toBe(cells[6]);
+
+    expect(grid[2][0]).toBe(cells[3]);
+    expect(grid[2][1]).toBe(cells[7]);
+    expect(grid[2][2]).toBe(cells[8]);
+    expect(grid[2][3]).toBe(cells[8]);
+
+    expect(positions.get(cells[0])).toEqual({ x: 0, y: 0 });
+    expect(positions.get(cells[1])).toEqual({ x: 1, y: 0 });
+    expect(positions.get(cells[2])).toEqual({ x: 3, y: 0 });
+    expect(positions.get(cells[3])).toEqual({ x: 0, y: 1 });
+    expect(positions.get(cells[4])).toEqual({ x: 1, y: 1 });
+    expect(positions.get(cells[5])).toEqual({ x: 2, y: 1 });
+    expect(positions.get(cells[6])).toEqual({ x: 3, y: 1 });
+    expect(positions.get(cells[7])).toEqual({ x: 1, y: 2 });
+    expect(positions.get(cells[8])).toEqual({ x: 2, y: 2 });
+  });
+
+  test("should handle table with thead, tbody, and tfoot", () => {
+    const table = createTable(`
+      <table>
+        <thead>
+          <tr>
+            <th>Header 1</th>
+            <th>Header 2</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>Body 1</td>
+            <td>Body 2</td>
+          </tr>
+        </tbody>
+        <tfoot>
+          <tr>
+            <td>Footer 1</td>
+            <td>Footer 2</td>
+          </tr>
+        </tfoot>
+      </table>
+    `);
+
+    const { grid } = buildTableGridMap(table);
+
+    expect(grid.length).toBe(3);
+    expect(grid[0].length).toBe(2);
+    expect(grid[1].length).toBe(2);
+    expect(grid[2].length).toBe(2);
+
+    const headerCells = Array.from(table.querySelectorAll("th"));
+    const bodyCells = Array.from(table.querySelectorAll("tbody td"));
+    const footerCells = Array.from(table.querySelectorAll("tfoot td"));
+
+    expect(grid[0][0]).toBe(headerCells[0]);
+    expect(grid[0][1]).toBe(headerCells[1]);
+    expect(grid[1][0]).toBe(bodyCells[0]);
+    expect(grid[1][1]).toBe(bodyCells[1]);
+    expect(grid[2][0]).toBe(footerCells[0]);
+    expect(grid[2][1]).toBe(footerCells[1]);
+  });
+
+  test("should handle empty table", () => {
+    const table = createTable("<table></table>");
+
+    const { grid, positions } = buildTableGridMap(table);
+
+    expect(grid.length).toBe(0);
+    expect(positions.size).toBe(0);
+  });
+
+  test("should handle table with empty row", () => {
+    const table = createTable(`
+      <table>
+        <tr></tr>
+      </table>
+    `);
+
+    const { grid, positions } = buildTableGridMap(table);
+
+    expect(grid.length).toBe(1);
+    expect(grid[0].length).toBe(0);
+    expect(positions.size).toBe(0);
+  });
+
+  test("should handle colspan=0 and rowspan=0 as 1", () => {
+    const table = createTable(`
+      <table>
+        <tr>
+          <td colspan="0">A</td>
+          <td>B</td>
+        </tr>
+        <tr>
+          <td rowspan="0">C</td>
+          <td>D</td>
+        </tr>
+      </table>
+    `);
+
+    const { grid } = buildTableGridMap(table);
+    const cells = Array.from(table.querySelectorAll("td"));
+
+    expect(grid[0][0]).toBe(cells[0]);
+    expect(grid[0][1]).toBe(cells[1]);
+    expect(grid[1][0]).toBe(cells[2]);
+    expect(grid[1][1]).toBe(cells[3]);
+  });
+
+  test("should handle negative span values as 1", () => {
+    const table = createTable(`
+      <table>
+        <tr>
+          <td colspan="-1">A</td>
+          <td>B</td>
+        </tr>
+        <tr>
+          <td rowspan="-2">C</td>
+          <td>D</td>
+        </tr>
+      </table>
+    `);
+
+    const { grid } = buildTableGridMap(table);
+    const cells = Array.from(table.querySelectorAll("td"));
+
+    expect(grid[0][0]).toBe(cells[0]);
+    expect(grid[0][1]).toBe(cells[1]);
+    expect(grid[1][0]).toBe(cells[2]);
+    expect(grid[1][1]).toBe(cells[3]);
+  });
+
+  test("should handle large span values", () => {
+    const table = createTable(`
+      <table>
+        <tr>
+          <td colspan="5">Wide cell</td>
+        </tr>
+        <tr>
+          <td>A</td>
+          <td>B</td>
+          <td>C</td>
+          <td>D</td>
+          <td>E</td>
+        </tr>
+      </table>
+    `);
+
+    const { grid, positions } = buildTableGridMap(table);
+    const cells = Array.from(table.querySelectorAll("td"));
+    const wideCell = cells[0];
+
+    expect(grid[0].length).toBe(5);
+    expect(grid[0][0]).toBe(wideCell);
+    expect(grid[0][1]).toBe(wideCell);
+    expect(grid[0][2]).toBe(wideCell);
+    expect(grid[0][3]).toBe(wideCell);
+    expect(grid[0][4]).toBe(wideCell);
+
+    expect(positions.get(wideCell)).toEqual({ x: 0, y: 0 });
+  });
+
+  test("should skip over slots occupied by previous spans", () => {
+    const table = createTable(`
+      <table>
+        <tr>
+          <td rowspan="2">A</td>
+          <td>B</td>
+          <td>C</td>
+        </tr>
+        <tr>
+          <td>D</td>
+          <td>E</td>
+        </tr>
+      </table>
+    `);
+
+    const { grid, positions } = buildTableGridMap(table);
+    const cells = Array.from(table.querySelectorAll("td"));
+
+    expect(grid[0][0]).toBe(cells[0]);
+    expect(grid[0][1]).toBe(cells[1]);
+    expect(grid[0][2]).toBe(cells[2]);
+    expect(grid[1][0]).toBe(cells[0]);
+    expect(grid[1][1]).toBe(cells[3]);
+    expect(grid[1][2]).toBe(cells[4]);
+
+    expect(positions.get(cells[3])).toEqual({ x: 1, y: 1 });
+    expect(positions.get(cells[4])).toEqual({ x: 2, y: 1 });
+  });
+});
+
+describe("getNextGridPosition", () => {
+  test("should return null when moving out of bounds", () => {
+    const grid = [
+      [undefined, undefined],
+      [undefined, undefined],
+    ];
+    const down = getNextGridPosition(grid, { x: 0, y: 1 }, { x: 0, y: 1 });
+    const up = getNextGridPosition(grid, { x: 0, y: 0 }, { x: 0, y: -1 });
+    const right = getNextGridPosition(grid, { x: 1, y: 0 }, { x: 1, y: 0 });
+    const left = getNextGridPosition(grid, { x: 0, y: 0 }, { x: -1, y: 0 });
+
+    expect(down).toBeNull();
+    expect(up).toBeNull();
+    expect(right).toBeNull();
+    expect(left).toBeNull();
+  });
+
+  test("should handle empty grid", () => {
+    const grid: (Element | undefined)[][] = [];
+    const result = getNextGridPosition(grid, { x: 0, y: 0 }, { x: 1, y: 0 });
+    expect(result).toBeNull();
+  });
+});
+
+describe("isCellFocusable", () => {
+  test("should return false when cell is undefined", () => {
+    expect(isCellFocusable(undefined)).toBe(false);
+  });
+
+  test("should return true when cell has focusable elements", () => {
+    const table = createTable(`
+      <table>
+        <tr>
+          <td>A</td>
+          <td><button>B</button></td>
+        </tr>
+      </table>
+    `);
+    const cells = table.querySelectorAll("td");
+
+    expect(isCellFocusable(cells[1])).toBe(true);
+  });
+});
+
+describe("findNextFocusableCell", () => {
+  test("should find next focusable cell to the right", () => {
+    const table = createTable(`
+      <table>
+        <tr>
+          <td><button>A</button></td>
+          <td><button>B</button></td>
+          <td><button>C</button></td>
+        </tr>
+      </table>
+    `);
+
+    const { grid, positions } = buildTableGridMap(table);
+    const cells = Array.from(table.querySelectorAll("td"));
+
+    const currentPos = positions.get(cells[0])!;
+    const result = findNextFocusableCell(
+      grid,
+      currentPos,
+      { x: 1, y: 0 },
+      cells[0],
+    );
+
+    expect(result).toBe(cells[1]);
+  });
+
+  test("should not skip non-focusable cells", () => {
+    const table = createTable(`
+      <table>
+        <tr>
+          <td><button>A</button></td>
+          <td>B</td>
+          <td><button>C</button></td>
+        </tr>
+      </table>
+    `);
+
+    const { grid, positions } = buildTableGridMap(table);
+    const cells = Array.from(table.querySelectorAll("td"));
+
+    const currentPos = positions.get(cells[0])!;
+    const result = findNextFocusableCell(
+      grid,
+      currentPos,
+      { x: 1, y: 0 },
+      cells[0],
+    );
+
+    expect(result).toBe(cells[1]);
+  });
+
+  test("should return null when reaching edge of grid", () => {
+    const table = createTable(`
+      <table>
+        <tr>
+          <td><button>A</button></td>
+          <td>B</td>
+        </tr>
+      </table>
+    `);
+
+    const { grid, positions } = buildTableGridMap(table);
+    const cells = Array.from(table.querySelectorAll("td"));
+
+    const currentPos = positions.get(cells[1])!;
+    const result = findNextFocusableCell(
+      grid,
+      currentPos,
+      { x: 1, y: 0 },
+      cells[1],
+    );
+
+    expect(result).toBeNull();
+  });
+
+  test("should find next focusable cell downward", () => {
+    const table = createTable(`
+      <table>
+        <tr><td><button>A</button></td></tr>
+        <tr><td><button>B</button></td></tr>
+      </table>
+    `);
+
+    const { grid, positions } = buildTableGridMap(table);
+    const cells = Array.from(table.querySelectorAll("td"));
+
+    const currentPos = positions.get(cells[0])!;
+    const result = findNextFocusableCell(
+      grid,
+      currentPos,
+      { x: 0, y: 1 },
+      cells[0],
+    );
+
+    expect(result).toBe(cells[1]);
+  });
+});
+
+describe("findFirstCellInRow", () => {
+  test("should find first focusable cell in row", () => {
+    const table = createTable(`
+      <table>
+        <tr>
+          <td><button>A</button></td>
+          <td><button>B</button></td>
+          <td><button>C</button></td>
+        </tr>
+      </table>
+    `);
+
+    const { grid } = buildTableGridMap(table);
+    const cells = Array.from(table.querySelectorAll("td"));
+
+    const result = findFirstCellInRow(grid, 0);
+
+    expect(result).toBe(cells[0]);
+  });
+});
+
+describe("findLastCellInRow", () => {
+  test("should find last focusable cell in row", () => {
+    const table = createTable(`
+      <table>
+        <tr>
+          <td><button>A</button></td>
+          <td><button>B</button></td>
+          <td><button>C</button></td>
+        </tr>
+      </table>
+    `);
+
+    const { grid } = buildTableGridMap(table);
+    const cells = Array.from(table.querySelectorAll("td"));
+
+    const result = findLastCellInRow(grid, 0);
+
+    expect(result).toBe(cells[2]);
+  });
+});
+
+describe("findFirstCell", () => {
+  test("should find first focusable cell in table", () => {
+    const table = createTable(`
+      <table>
+        <tr>
+          <td><button>A</button></td>
+          <td><button>B</button></td>
+        </tr>
+        <tr>
+          <td><button>C</button></td>
+          <td><button>D</button></td>
+        </tr>
+      </table>
+    `);
+
+    const { grid } = buildTableGridMap(table);
+    const cells = Array.from(table.querySelectorAll("td"));
+
+    const result = findFirstCell(grid);
+
+    expect(result).toBe(cells[0]);
+  });
+
+  test("should skip non-focusable cells", () => {
+    const table = createTable(`
+      <table>
+        <tr>
+          <td style="visibility:hidden;">A</td>
+          <td>B</td>
+        </tr>
+        <tr>
+          <td><button>C</button></td>
+          <td><button>D</button></td>
+        </tr>
+      </table>
+    `);
+
+    const { grid } = buildTableGridMap(table);
+    const cells = Array.from(table.querySelectorAll("td"));
+
+    const result = findFirstCell(grid);
+
+    expect(result).toBe(cells[1]);
+  });
+});
+
+describe("findLastCell", () => {
+  test("should find last focusable cell in table", () => {
+    const table = createTable(`
+      <table>
+        <tr>
+          <td><button>A</button></td>
+          <td><button>B</button></td>
+        </tr>
+        <tr>
+          <td><button>C</button></td>
+          <td><button>D</button></td>
+        </tr>
+      </table>
+    `);
+
+    const { grid } = buildTableGridMap(table);
+    const cells = Array.from(table.querySelectorAll("td"));
+
+    const result = findLastCell(grid);
+
+    expect(result).toBe(cells[3]);
+  });
+
+  test("should skip non-focusable cells", () => {
+    const table = createTable(`
+      <table>
+        <tr>
+          <td><button>A</button></td>
+          <td><button>B</button></td>
+        </tr>
+        <tr>
+          <td><button>C</button></td>
+          <td style="visibility:hidden;">D</td>
+        </tr>
+      </table>
+    `);
+
+    const { grid } = buildTableGridMap(table);
+    const cells = Array.from(table.querySelectorAll("td"));
+
+    const result = findLastCell(grid);
+
+    expect(result).toBe(cells[2]);
+  });
+});