add jest dom dependency

package.json

@@ -17,7 +17,7 @@
     "test:visual": "run-p -r preview test:visual:vitest",
     "test:visual:vitest": "vitest run --config vite.e2e-visual.config.js",
     "test:visual:update": "UPDATE_SCREENSHOTS=true npm run test:visual",
-    "pretest": "tsc -p tsconfig.test.json",
+    "pretest": "tsc -p tsconfig.unit.json && tsc -p tsconfig.e2e.json",
     "test": "run-s lint test:unit test:functional",
     "preview": "vite preview",
     "start": "run-p start:server start:watch:ts start:watch:css",
@@ -64,6 +64,7 @@
     "@cloudscape-design/test-utils-converter": "^1.0.0",
     "@cloudscape-design/theming-build": "^1",
     "@juggle/resize-observer": "^3.4.0",
+    "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@types/jest-image-snapshot": "^6.1.0",
     "@types/lodash": "^4.14.191",

src/__tests__/setup.ts

@@ -0,0 +1,9 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+// type-only import, because in runtime it tries to access Jest globals, which do not exist
+/// <reference types="@testing-library/jest-dom" />
+import matchers from "@testing-library/jest-dom/matchers";
+import { expect } from "vitest";
+
+expect.extend(matchers);

src/board/utils/__tests__/layout.test.ts

@@ -15,6 +15,7 @@ function createMockTransition(
 ): Transition<null> {
   return {
     operation,
+    acquiredItem: null,
     interactionType: "keyboard",
     itemsLayout,
     insertionDirection: null,

src/board/utils/__tests__/path.test.ts

@@ -8,8 +8,7 @@ import { appendMovePath, appendResizePath, normalizeInsertionPath } from "../pat
 
 describe("normalizeInsertionPath", () => {
   test("keeps path unchanged if empty", () => {
-    const path = [];
-    expect(normalizeInsertionPath(path, "right", 4, 1)).toEqual(path);
+    expect(normalizeInsertionPath([], "right", 4, 1)).toEqual([]);
   });
 
   test("keeps path unchanged if it has a single step", () => {
@@ -68,9 +67,8 @@ describe("normalizeInsertionPath", () => {
 
 describe("appendMovePath", () => {
   test("appends new position as first if the path is empty", () => {
-    const path = [];
     const rect = { left: 1, right: 2, top: 3, bottom: 4 };
-    expect(appendMovePath(path, rect)).toEqual([new Position({ x: 1, y: 3 })]);
+    expect(appendMovePath([], rect)).toEqual([new Position({ x: 1, y: 3 })]);
   });
 
   test("does not append new position if it is the same as previous", () => {
@@ -100,9 +98,8 @@ describe("appendMovePath", () => {
 
 describe("appendResizePath", () => {
   test("appends new position as first if the path is empty", () => {
-    const path = [];
     const rect = { left: 1, right: 2, top: 3, bottom: 4 };
-    expect(appendResizePath(path, rect)).toEqual([new Position({ x: 2, y: 4 })]);
+    expect(appendResizePath([], rect)).toEqual([new Position({ x: 2, y: 4 })]);
   });
 
   test("does not append new position if it is the same as previous", () => {

src/internal/grid/__tests__/grid.test.tsx

@@ -47,10 +47,18 @@ test("annotates data attributes on individual elements", () => {
     columnOffset: "1",
     rowOffset: "1",
   });
+  expect(items[0]).toHaveStyle({
+    "grid-row-start": "1",
+    "grid-row-end": "span 1",
+  });
   expect(items[1].dataset).toMatchObject({
     rowSpan: "1",
     columnSpan: "2",
     columnOffset: "3",
     rowOffset: "1",
   });
+  expect(items[0]).toHaveStyle({
+    "grid-row-start": "1",
+    "grid-row-end": "span 1",
+  });
 });

src/internal/layout-engine/__tests__/engine-chained.test.ts

@@ -3,6 +3,7 @@
 
 import { expect, test } from "vitest";
 import { fromMatrix, toString } from "../../debug-tools";
+import { Position } from "../../utils/position";
 import { LayoutEngine } from "../engine";
 
 test("engine operations can be chained", () => {
@@ -13,15 +14,12 @@ test("engine operations can be chained", () => {
   ]);
 
   const layoutShift = new LayoutEngine(grid)
-    .insert({ itemId: "X", width: 1, height: 1, path: [{ x: 1, y: 1 }] })
+    .insert({ itemId: "X", width: 1, height: 1, path: [new Position({ x: 1, y: 1 })] })
     .move({
       itemId: "X",
-      path: [
-        { x: 1, y: 2 },
-        { x: 1, y: 3 },
-      ],
+      path: [new Position({ x: 1, y: 2 }), new Position({ x: 1, y: 3 })],
     })
-    .resize({ itemId: "X", path: [{ x: 3, y: 4 }] })
+    .resize({ itemId: "X", path: [new Position({ x: 3, y: 4 })] })
     .remove("F")
     .refloat()
     .getLayoutShift();
@@ -44,13 +42,13 @@ test("engine operations are not chained when executed separately", () => {
   const engine = new LayoutEngine(grid);
 
   // These commands are ignored.
-  engine.insert({ itemId: "X", width: 1, height: 1, path: [{ x: 1, y: 1 }] });
-  engine.move({ itemId: "A", path: [{ x: 0, y: 1 }] });
-  engine.resize({ itemId: "A", path: [{ x: 2, y: 1 }] });
+  engine.insert({ itemId: "X", width: 1, height: 1, path: [new Position({ x: 1, y: 1 })] });
+  engine.move({ itemId: "A", path: [new Position({ x: 0, y: 1 })] });
+  engine.resize({ itemId: "A", path: [new Position({ x: 2, y: 1 })] });
   engine.remove("A");
 
   // The last command only is reflected in the layoutShift.
-  engine.move({ itemId: "A", path: [{ x: 1, y: 0 }] });
+  engine.move({ itemId: "A", path: [new Position({ x: 1, y: 0 })] });
 
   expect(toString(engine.getLayoutShift().next)).toBe(
     toString([

src/internal/layout-engine/__tests__/engine-immutable.test.ts

@@ -4,6 +4,7 @@
 import { cloneDeep } from "lodash";
 import { expect, test } from "vitest";
 import { generateGrid, generateMove, generateResize } from "../../debug-tools";
+import { Position } from "../../utils/position";
 import { LayoutEngine } from "../engine";
 
 test("input arguments stay unchanged when using engine", () => {
@@ -16,7 +17,7 @@ test("input arguments stay unchanged when using engine", () => {
 
   new LayoutEngine(grid).move(movePath);
   new LayoutEngine(grid).resize(resize);
-  new LayoutEngine(grid).insert({ itemId: "X", width: 1, height: 1, path: [{ x: 0, y: 0 }] });
+  new LayoutEngine(grid).insert({ itemId: "X", width: 1, height: 1, path: [new Position({ x: 0, y: 0 })] });
   new LayoutEngine(grid).remove("A");
   new LayoutEngine(grid).refloat();
 

src/internal/layout-engine/__tests__/engine-insert.test.ts

@@ -3,6 +3,7 @@
 
 import { describe, expect, test } from "vitest";
 import { fromMatrix, generateGrid, generateInsert, toString } from "../../debug-tools";
+import { Position } from "../../utils/position";
 import { LayoutEngine } from "../engine";
 import { forEachTimes } from "./helpers";
 
@@ -24,7 +25,7 @@ describe("insert scenarios", () => {
         ["A", "A", "D"],
         ["E", "E", "D"],
       ],
-      { itemId: "X", width: 1, height: 1, path: [{ x: 0, y: 0 }] },
+      { itemId: "X", width: 1, height: 1, path: [new Position({ x: 0, y: 0 })] },
       [
         ["X", "B", "C"],
         ["A", "A", "D"],
@@ -38,7 +39,7 @@ describe("insert scenarios", () => {
         ["A", "A", "D"],
         ["E", "E", "D"],
       ],
-      { itemId: "X", width: 2, height: 2, path: [{ x: 1, y: 1 }] },
+      { itemId: "X", width: 2, height: 2, path: [new Position({ x: 1, y: 1 })] },
       [
         [" ", " ", "B"],
         [" ", "X", "X"],
@@ -60,7 +61,7 @@ describe("insert scenarios", () => {
         ["C", "C"],
         ["C", "C"],
       ],
-      { itemId: "X", width: 2, height: 4, path: [{ x: 0, y: 0 }] },
+      { itemId: "X", width: 2, height: 4, path: [new Position({ x: 0, y: 0 })] },
       [
         ["X", "X"],
         ["X", "X"],

src/internal/layout-engine/__tests__/engine-resize.test.ts

@@ -3,6 +3,7 @@
 
 import { describe, expect, test } from "vitest";
 import { fromMatrix, generateGrid, generateRandomPath, generateResize, toString } from "../../debug-tools";
+import { Position } from "../../utils/position";
 import { LayoutEngine } from "../engine";
 import { forEachTimes } from "./helpers";
 
@@ -31,10 +32,10 @@ test("commits no changes if resize path returns to original or smaller", () => {
     if (resize.path.length > 0) {
       const lastPathItem = resize.path[resize.path.length - 1];
       const resizeTarget = grid.items.find((it) => it.id === resize.itemId)!;
-      const originalSizePath = {
+      const originalSizePath = new Position({
         x: randomPathValue(resizeTarget.x + resizeTarget.width),
         y: randomPathValue(resizeTarget.y + resizeTarget.height),
-      };
+      });
       resize.path = [...resize.path, ...generateRandomPath(lastPathItem, originalSizePath)];
       const moves = new LayoutEngine(grid).resize(resize).getLayoutShift().moves;
       expect(moves.filter((move) => move.type !== "RESIZE" && move.type !== "FLOAT")).toHaveLength(0);
@@ -57,10 +58,7 @@ describe("resize scenarios", () => {
       ],
       {
         itemId: "A",
-        path: [
-          { x: 2, y: 1 },
-          { x: 2, y: 2 },
-        ],
+        path: [new Position({ x: 2, y: 1 }), new Position({ x: 2, y: 2 })],
       },
       [
         ["A", "A", "B"],
@@ -77,10 +75,7 @@ describe("resize scenarios", () => {
       ],
       {
         itemId: "A",
-        path: [
-          { x: 1, y: 2 },
-          { x: 2, y: 2 },
-        ],
+        path: [new Position({ x: 1, y: 2 }), new Position({ x: 2, y: 2 })],
       },
       [
         ["A", "A", "B"],
@@ -97,10 +92,7 @@ describe("resize scenarios", () => {
       ],
       {
         itemId: "A",
-        path: [
-          { x: 3, y: 2 },
-          { x: 3, y: 1 },
-        ],
+        path: [new Position({ x: 3, y: 2 }), new Position({ x: 3, y: 1 })],
       },
       [
         ["A", "A", "A"],
@@ -118,10 +110,7 @@ describe("resize scenarios", () => {
       ],
       {
         itemId: "A",
-        path: [
-          { x: 3, y: 2 },
-          { x: 3, y: 3 },
-        ],
+        path: [new Position({ x: 3, y: 2 }), new Position({ x: 3, y: 3 })],
       },
       [
         ["A", "A", "A"],
@@ -140,7 +129,7 @@ describe("resize scenarios", () => {
         ["C", "D", "D", "E"],
         ["C", "F", "F", "F"],
       ],
-      { itemId: "B", path: [{ x: 4, y: 3 }] },
+      { itemId: "B", path: [new Position({ x: 4, y: 3 })] },
       [
         ["A", "A", "A", " "],
         ["B", "B", "B", "B"],
@@ -159,10 +148,7 @@ describe("resize scenarios", () => {
       ],
       {
         itemId: "B",
-        path: [
-          { x: 4, y: 3 },
-          { x: 4, y: 4 },
-        ],
+        path: [new Position({ x: 4, y: 3 }), new Position({ x: 4, y: 4 })],
       },
       [
         ["A", "A", "A", " "],
@@ -183,10 +169,7 @@ describe("resize scenarios", () => {
       ],
       {
         itemId: "A",
-        path: [
-          { x: 3, y: 2 },
-          { x: 3, y: 3 },
-        ],
+        path: [new Position({ x: 3, y: 2 }), new Position({ x: 3, y: 3 })],
       },
       [
         ["A", "A", "A", " "],
@@ -207,7 +190,7 @@ describe("resize scenarios", () => {
       ],
       {
         itemId: "B",
-        path: [{ x: 2, y: 2 }],
+        path: [new Position({ x: 2, y: 2 })],
       },
       [
         ["A", "B", "C", "D"],

src/internal/layout-engine/__tests__/engine-validation.test.ts

@@ -3,6 +3,7 @@
 
 import { expect, test } from "vitest";
 import { fromMatrix, fromTextPath } from "../../debug-tools";
+import { Position } from "../../utils/position";
 import { LayoutEngine } from "../engine";
 
 test("throws if grid definition is not valid", () => {
@@ -37,10 +38,10 @@ test("throws if move command is not valid", () => {
     ["G", "E", "E"],
   ]);
 
-  expect(() => new LayoutEngine(grid).move({ itemId: "X", path: [{ x: 0, y: 0 }] })).toThrowError(
+  expect(() => new LayoutEngine(grid).move({ itemId: "X", path: [new Position({ x: 0, y: 0 })] })).toThrowError(
     'Item with id "X" not found in the grid.'
   );
-  expect(() => new LayoutEngine(grid).move({ itemId: "F", path: [{ x: 3, y: 1 }] })).toThrowError(
+  expect(() => new LayoutEngine(grid).move({ itemId: "F", path: [new Position({ x: 3, y: 1 })] })).toThrowError(
     "Invalid move: outside grid."
   );
 });
@@ -52,7 +53,7 @@ test("throws if resize command is not valid", () => {
     ["G", "E", "E"],
   ]);
 
-  expect(() => new LayoutEngine(grid).resize({ itemId: "X", path: [{ x: 1, y: 1 }] })).toThrowError(
+  expect(() => new LayoutEngine(grid).resize({ itemId: "X", path: [new Position({ x: 1, y: 1 })] })).toThrowError(
     'Item with id "X" not found in the grid.'
   );
 
@@ -64,10 +65,7 @@ test("throws if resize command is not valid", () => {
       ])
     ).resize({
       itemId: "A",
-      path: [
-        { x: 1, y: 2 },
-        { x: 0, y: 2 },
-      ],
+      path: [new Position({ x: 1, y: 2 }), new Position({ x: 0, y: 2 })],
     })
   ).toThrowError("Invalid resize: can't resize to 0.");
 
@@ -79,10 +77,7 @@ test("throws if resize command is not valid", () => {
       ])
     ).resize({
       itemId: "A",
-      path: [
-        { x: 2, y: 1 },
-        { x: 2, y: 0 },
-      ],
+      path: [new Position({ x: 2, y: 1 }), new Position({ x: 2, y: 0 })],
     })
   ).toThrowError("Invalid resize: can't resize to 0.");
 
@@ -92,7 +87,7 @@ test("throws if resize command is not valid", () => {
         ["A", "A"],
         ["A", "A"],
       ])
-    ).resize({ itemId: "A", path: [{ x: 3, y: 2 }] })
+    ).resize({ itemId: "A", path: [new Position({ x: 3, y: 2 })] })
   ).toThrowError("Invalid resize: outside grid.");
 });
 
@@ -104,10 +99,10 @@ test("throws if insert command is not valid", () => {
   ]);
 
   expect(() =>
-    new LayoutEngine(grid).insert({ itemId: "X", width: 2, height: 1, path: [{ x: 2, y: 2 }] })
+    new LayoutEngine(grid).insert({ itemId: "X", width: 2, height: 1, path: [new Position({ x: 2, y: 2 })] })
   ).toThrowError("Inserting item is outside the boundaries.");
   expect(() =>
-    new LayoutEngine(grid).insert({ itemId: "X", width: 2, height: 0, path: [{ x: 1, y: 1 }] })
+    new LayoutEngine(grid).insert({ itemId: "X", width: 2, height: 0, path: [new Position({ x: 1, y: 1 })] })
   ).toThrowError("Inserting item has invalid size.");
 });
 

src/test-utils/tsconfig.json

@@ -11,5 +11,5 @@
     "experimentalDecorators": true,
     "tsBuildInfoFile": "../../.cache/test-utils.tsbuildinfo"
   },
-  "include": ["./", "../../types"]
+  "include": ["./", "./types"]
 }

src/test-utils/types/global.d.ts

@@ -0,0 +1,10 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+declare module "*.css.js" {
+  const styles: Record<string, string>;
+  export default styles;
+}
+declare module "*.selectors.js" {
+  const styles: Record<string, string>;
+  export default styles;
+}