chore: Add extra unit test for coverage

src/board/__tests__/board-acquisition.test.tsx

@@ -0,0 +1,39 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { act, render, screen } from "@testing-library/react";
+import { expect, test, vi } from "vitest";
+import { Board } from "../../../lib/components";
+import { mockController } from "../../../lib/components/internal/dnd-controller/__mocks__/controller";
+import { DragAndDropData } from "../../../lib/components/internal/dnd-controller/controller";
+import { Coordinates } from "../../../lib/components/internal/utils/coordinates";
+import { defaultProps } from "./utils";
+
+vi.mock("../../../lib/components/internal/dnd-controller/controller");
+
+test("renders acquired item", () => {
+  render(<Board {...defaultProps} />);
+  expect(screen.queryByTestId("acquired-item")).toBeNull();
+  const draggableItem = { id: "test", data: { title: "Test item" }, definition: {} };
+
+  act(() =>
+    mockController.start({
+      interactionType: "keyboard",
+      operation: "insert",
+      draggableItem,
+      collisionRect: { top: 0, bottom: 0, left: 0, right: 0 },
+      coordinates: new Coordinates({ x: 0, y: 0 }),
+    } as DragAndDropData)
+  );
+
+  act(() =>
+    mockController.acquire({
+      droppableId: "awsui-placeholder-1-0",
+      draggableItem,
+      renderAcquiredItem: () => <div data-testid="acquired-item"></div>,
+    })
+  );
+  expect(screen.queryByTestId("acquired-item")).toBeInTheDOM();
+
+  act(() => mockController.discard());
+  expect(screen.queryByTestId("acquired-item")).toBeNull();
+});

src/board/__tests__/board.test.tsx

@@ -1,74 +1,15 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import Button from "@cloudscape-design/components/button";
 import { KeyCode } from "@cloudscape-design/test-utils-core/utils";
 import { cleanup, fireEvent, render, waitFor } from "@testing-library/react";
 import { vi } from "vitest";
 import { afterEach, beforeAll, describe, expect, test } from "vitest";
-import Board, { BoardProps } from "../../../lib/components/board";
-import BoardItem from "../../../lib/components/board-item";
+import Board from "../../../lib/components/board";
 import dragHandleStyles from "../../../lib/components/internal/drag-handle/styles.css.js";
 import globalStateStyles from "../../../lib/components/internal/global-drag-state-styles/styles.css.js";
 import resizeHandleStyles from "../../../lib/components/internal/resize-handle/styles.css.js";
 import createWrapper from "../../../lib/components/test-utils/dom";
-
-interface ItemData {
-  title: string;
-}
-
-const i18nStrings: BoardProps.I18nStrings<ItemData> = {
-  liveAnnouncementDndStarted() {
-    return "Operation started";
-  },
-  liveAnnouncementDndItemReordered() {
-    return "Reorder performed";
-  },
-  liveAnnouncementDndItemResized() {
-    return "Resize performed";
-  },
-  liveAnnouncementDndItemInserted() {
-    return "Insert performed";
-  },
-  liveAnnouncementDndCommitted() {
-    return "Operation committed";
-  },
-  liveAnnouncementDndDiscarded() {
-    return "Operation discarded";
-  },
-  liveAnnouncementItemRemoved() {
-    return "Remove performed";
-  },
-  navigationAriaLabel: "Board navigation",
-  navigationAriaDescription: "Click on non-empty item to move focus over",
-  navigationItemAriaLabel: (item) => (item ? item.data.title : "Empty"),
-};
-
-const itemI18nStrings = {
-  dragHandleAriaLabel: "Drag handle",
-  resizeHandleAriaLabel: "Resize handle",
-};
-
-const defaultProps: BoardProps<{ title: string }> = {
-  items: [
-    { id: "1", data: { title: "Item 1" } },
-    { id: "2", data: { title: "Item 2" } },
-  ],
-  renderItem: (item, actions) => (
-    <BoardItem
-      i18nStrings={itemI18nStrings}
-      settings={
-        <Button data-testid="remove-button" onClick={() => actions.removeItem()}>
-          Remove
-        </Button>
-      }
-    >
-      {item.data.title}
-    </BoardItem>
-  ),
-  onItemsChange: () => undefined,
-  i18nStrings: i18nStrings,
-  empty: "No items",
-};
+import { defaultProps } from "./utils";
 
 describe("Board", () => {
   beforeAll(() => {

src/board/__tests__/utils.tsx

@@ -0,0 +1,63 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import Button from "@cloudscape-design/components/button";
+import { BoardProps } from "../../../lib/components/board";
+import BoardItem from "../../../lib/components/board-item";
+
+interface ItemData {
+  title: string;
+}
+
+const i18nStrings: BoardProps.I18nStrings<ItemData> = {
+  liveAnnouncementDndStarted() {
+    return "Operation started";
+  },
+  liveAnnouncementDndItemReordered() {
+    return "Reorder performed";
+  },
+  liveAnnouncementDndItemResized() {
+    return "Resize performed";
+  },
+  liveAnnouncementDndItemInserted() {
+    return "Insert performed";
+  },
+  liveAnnouncementDndCommitted() {
+    return "Operation committed";
+  },
+  liveAnnouncementDndDiscarded() {
+    return "Operation discarded";
+  },
+  liveAnnouncementItemRemoved() {
+    return "Remove performed";
+  },
+  navigationAriaLabel: "Board navigation",
+  navigationAriaDescription: "Click on non-empty item to move focus over",
+  navigationItemAriaLabel: (item) => (item ? item.data.title : "Empty"),
+};
+
+const itemI18nStrings = {
+  dragHandleAriaLabel: "Drag handle",
+  resizeHandleAriaLabel: "Resize handle",
+};
+
+export const defaultProps: BoardProps<{ title: string }> = {
+  items: [
+    { id: "1", data: { title: "Item 1" } },
+    { id: "2", data: { title: "Item 2" } },
+  ],
+  renderItem: (item, actions) => (
+    <BoardItem
+      i18nStrings={itemI18nStrings}
+      settings={
+        <Button data-testid="remove-button" onClick={() => actions.removeItem()}>
+          Remove
+        </Button>
+      }
+    >
+      {item.data.title}
+    </BoardItem>
+  ),
+  onItemsChange: () => undefined,
+  i18nStrings: i18nStrings,
+  empty: "No items",
+};

src/internal/dnd-controller/__mocks__/controller.ts

@@ -3,7 +3,7 @@
 
 import { useEffect } from "react";
 import { vi } from "vitest";
-import { DragAndDropData, DragAndDropEvents } from "../controller";
+import { AcquireData, DragAndDropData, DragAndDropEvents } from "../controller";
 import { EventEmitter } from "../event-emitter";
 
 class MockController extends EventEmitter<DragAndDropEvents> {
@@ -22,6 +22,10 @@ class MockController extends EventEmitter<DragAndDropEvents> {
   public discard() {
     this.emit("discard");
   }
+
+  public acquire(event: AcquireData) {
+    this.emit("acquire", event);
+  }
 }
 
 export const mockController = new MockController();
@@ -41,3 +45,5 @@ export const mockDraggable = {
 export function useDraggable() {
   return mockDraggable;
 }
+
+export function useDroppable() {}

src/internal/dnd-controller/controller.ts

@@ -39,7 +39,7 @@ export interface Droppable {
   context: DropTargetContext;
 }
 
-interface AcquireData {
+export interface AcquireData {
   droppableId: ItemId;
   draggableItem: Item;
   renderAcquiredItem: () => ReactNode;

src/internal/item-container/__tests__/get-next-droppable.test.ts

@@ -0,0 +1,37 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { expect, test } from "vitest";
+import { Droppable } from "../../../../lib/components/internal/dnd-controller/controller";
+import { Rect } from "../../../../lib/components/internal/interfaces";
+import { getNextDroppable } from "../../../../lib/components/internal/item-container/get-next-droppable";
+
+function getMockElement({ left, right, top, bottom }: Rect) {
+  return {
+    getBoundingClientRect: () => ({ left, right, top, bottom }),
+    ownerDocument: {
+      defaultView: {
+        pageXOffset: 0,
+        pageYOffset: 0,
+      },
+    },
+  } as HTMLElement;
+}
+
+test("returns null if there are no droppables", () => {
+  const elementMock = getMockElement({ left: 0, right: 0, top: 0, bottom: 0 });
+  expect(getNextDroppable(elementMock, [], "left")).toBe(null);
+});
+
+test("returns next droppable matching the direction", () => {
+  const elementMock = getMockElement({ left: 6, right: 4, top: 0, bottom: 0 });
+  const next = getNextDroppable(
+    elementMock,
+    [
+      ["1", { element: getMockElement({ left: 0, right: 10, top: 0, bottom: 0 }) } as Droppable],
+      ["2", { element: getMockElement({ left: 5, right: 5, top: 0, bottom: 0 }) } as Droppable],
+      ["3", { element: getMockElement({ left: 10, right: 0, top: 0, bottom: 0 }) } as Droppable],
+    ],
+    "right"
+  );
+  expect(next).toBe("2");
+});