@pie-element/image-cloze-association 10.3.1-beta.2 → 10.3.1

package/src/__tests__/keyboard-coordinates.test.js

@@ -0,0 +1,127 @@
+import { KeyboardCode } from '@dnd-kit/core';
+import { closestDroppableKeyboardCoordinates } from '../keyboard-coordinates';
+
+function rectsToContext(rects) {
+  const droppableRects = new Map(Object.entries(rects));
+  const droppableContainers = new Map(Object.keys(rects).map((id) => [id, { disabled: false }]));
+
+  return { droppableRects, droppableContainers };
+}
+
+function makeEvent(code, shiftKey = false) {
+  return { code, preventDefault: () => {}, shiftKey };
+}
+
+// Mirrors dnd-kit's own KeyboardSensor, which always derives collisionRect's top-left
+// from the dragged item's current on-screen position on every keydown — so a test's
+// collisionRect must track currentCoordinates the same way on every simulated press,
+// not stay fixed while currentCoordinates changes across multiple presses.
+function press(rects, currentCoordinates, itemSize, event) {
+  const context = {
+    ...rectsToContext(rects),
+    collisionRect: { left: currentCoordinates.x, top: currentCoordinates.y, ...itemSize },
+  };
+
+  return closestDroppableKeyboardCoordinates(event, { context, currentCoordinates });
+}
+
+describe('closestDroppableKeyboardCoordinates', () => {
+  describe('arrow keys', () => {
+    it("nudges the dragged item by dnd-kit's own default step (25px), unchanged", () => {
+      const context = { ...rectsToContext({}), collisionRect: { left: 0, top: 0, width: 100, height: 40 } };
+      const currentCoordinates = { x: 10, y: 20 };
+
+      expect(
+        closestDroppableKeyboardCoordinates(makeEvent(KeyboardCode.Down), { context, currentCoordinates }),
+      ).toEqual({ x: 10, y: 45 });
+      expect(
+        closestDroppableKeyboardCoordinates(makeEvent(KeyboardCode.Up), { context, currentCoordinates }),
+      ).toEqual({ x: 10, y: -5 });
+      expect(
+        closestDroppableKeyboardCoordinates(makeEvent(KeyboardCode.Right), { context, currentCoordinates }),
+      ).toEqual({ x: 35, y: 20 });
+      expect(
+        closestDroppableKeyboardCoordinates(makeEvent(KeyboardCode.Left), { context, currentCoordinates }),
+      ).toEqual({ x: -15, y: 20 });
+    });
+  });
+
+  describe('Tab / Shift+Tab', () => {
+    // Two response containers plus the choices pool ("ica-board"), laid out
+    // top-to-bottom like they would be over an image.
+    const container0Rect = { left: 0, top: 0, width: 200, height: 40, right: 200, bottom: 40 };
+    const container1Rect = { left: 0, top: 60, width: 200, height: 40, right: 200, bottom: 100 };
+    const poolRect = { left: 0, top: 120, width: 400, height: 300, right: 400, bottom: 420 };
+    const baseRects = {
+      'response-container-0': container0Rect,
+      'response-container-1': container1Rect,
+      'ica-board': poolRect,
+    };
+
+    it('jumps to the next droppable in top-to-bottom order, landing at its center-left point', () => {
+      const currentCoordinates = { x: container0Rect.left, y: container0Rect.top };
+
+      const next = press(baseRects, currentCoordinates, { width: 200, height: 40 }, makeEvent('Tab'));
+
+      expect(next).toEqual({ x: container1Rect.left, y: container1Rect.top + container1Rect.height / 2 });
+    });
+
+    it('cycles backwards with Shift+Tab, wrapping to the pool', () => {
+      const currentCoordinates = { x: container0Rect.left, y: container0Rect.top };
+
+      const next = press(baseRects, currentCoordinates, { width: 200, height: 40 }, makeEvent('Tab', true));
+
+      expect(next).toEqual({ x: poolRect.left, y: poolRect.top + poolRect.height / 2 });
+    });
+
+    it('keeps advancing on repeated Shift+Tab when a container is much wider than the dragged item', () => {
+      // Regression case for the bug already found and fixed in match-list: matching the
+      // "current" target by reconstructing a center from the dragged item's own small
+      // size (instead of checking which target's rect actually contains it) makes the
+      // *next* press re-match a completely different droppable once the item is
+      // actually sitting on a wide target, so it looks like the press does nothing.
+      // Only two targets here (a wide container and the pool), to isolate this from
+      // sort-order effects.
+      const wideContainerRect = { left: 0, top: 0, width: 900, height: 40, right: 900, bottom: 40 };
+      const rects = { 'response-container-0': wideContainerRect, 'ica-board': poolRect };
+      const itemSize = { width: 100, height: 40 };
+
+      // Start inside the pool, Shift+Tab to the only other target: the wide container.
+      const afterFirst = press(rects, { x: poolRect.left, y: poolRect.top }, itemSize, makeEvent('Tab', true));
+
+      expect(afterFirst).toEqual({ x: 0, y: 20 }); // wide container's center-left point
+
+      // Now sitting exactly at that dropPosition — Shift+Tab again must advance back
+      // to the pool, not re-match some other droppable.
+      const afterSecond = press(rects, afterFirst, itemSize, makeEvent('Tab', true));
+
+      expect(afterSecond).toEqual({ x: poolRect.left, y: poolRect.top + poolRect.height / 2 });
+    });
+
+    it("correctly identifies the pool as the current target when picking up an item positioned near the pool's edge, close to a small neighboring container", () => {
+      // Regression case for the OTHER failure mode: matching "current target" purely
+      // by nearest-dropPosition (instead of containment first) can misidentify the
+      // pool as some small, unrelated nearby container, because a large droppable's
+      // dropPosition is anchored at ITS OWN vertical middle — which can be far from an
+      // item that's sitting near the droppable's edge, even though the item is clearly
+      // still inside it.
+      const tallPoolRect = { left: 0, top: 0, width: 400, height: 600, right: 400, bottom: 600 };
+      const smallContainerRect = { left: 0, top: -60, width: 100, height: 40, right: 100, bottom: -20 };
+      const rects = { 'response-container-0': smallContainerRect, 'ica-board': tallPoolRect };
+      const itemSize = { width: 100, height: 40 };
+
+      // The item sits just inside the pool's top edge (y: 10-50) — nowhere near the
+      // pool's own vertical middle (y: 300), but visually still inside it, and closer
+      // in raw distance to the small container's anchor point (top: -60, center y:
+      // -40) than to the pool's anchor point (center y: 300).
+      const currentCoordinates = { x: 0, y: 10 };
+
+      const next = press(rects, currentCoordinates, itemSize, makeEvent('Tab'));
+
+      // Tab forward from the pool lands on the only other target: the small
+      // container — proving the pool, not the small container, was identified as
+      // "current".
+      expect(next).toEqual({ x: smallContainerRect.left, y: smallContainerRect.top + smallContainerRect.height / 2 });
+    });
+  });
+});

package/src/__tests__/possible-response.test.jsx

@@ -0,0 +1,113 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import PossibleResponse from '../possible-response';
+
+jest.mock('@dnd-kit/core', () => ({
+  useDraggable: () => ({
+    setNodeRef: jest.fn(),
+    attributes: {},
+    listeners: {},
+    isDragging: false,
+  }),
+}));
+
+describe('PossibleResponse', () => {
+  const baseProps = {
+    canDrag: true,
+    data: { id: '0', value: 'Choice A' },
+    onDragBegin: jest.fn(),
+  };
+
+  it('selects a pool item on click when nothing else is selected', () => {
+    const onSelectClick = jest.fn();
+    const onPlacementClick = jest.fn();
+    const { container } = render(
+      <PossibleResponse
+        {...baseProps}
+        selectedResponse={null}
+        onSelectClick={onSelectClick}
+        onPlacementClick={onPlacementClick}
+      />,
+    );
+
+    fireEvent.click(container.firstChild);
+
+    expect(onSelectClick).toHaveBeenCalledWith(baseProps.data);
+    expect(onPlacementClick).not.toHaveBeenCalled();
+  });
+
+  it('toggles off (calls onSelectClick again) when clicking the already-selected item', () => {
+    const onSelectClick = jest.fn();
+    const onPlacementClick = jest.fn();
+    const { container } = render(
+      <PossibleResponse
+        {...baseProps}
+        selectedResponse={{ id: '0', containerIndex: undefined }}
+        onSelectClick={onSelectClick}
+        onPlacementClick={onPlacementClick}
+      />,
+    );
+
+    fireEvent.click(container.firstChild);
+
+    expect(onSelectClick).toHaveBeenCalledWith(baseProps.data);
+    expect(onPlacementClick).not.toHaveBeenCalled();
+  });
+
+  it('selects a different pool item on click even while something else is selected (pool items are never placement targets)', () => {
+    const onSelectClick = jest.fn();
+    const onPlacementClick = jest.fn();
+    const { container } = render(
+      <PossibleResponse
+        {...baseProps}
+        selectedResponse={{ id: '1', containerIndex: 2 }}
+        onSelectClick={onSelectClick}
+        onPlacementClick={onPlacementClick}
+      />,
+    );
+
+    fireEvent.click(container.firstChild);
+
+    expect(onSelectClick).toHaveBeenCalledWith(baseProps.data);
+    expect(onPlacementClick).not.toHaveBeenCalled();
+  });
+
+  it('places the current selection into this tile\'s container when clicking an already-placed tile that is not the selection', () => {
+    const onSelectClick = jest.fn();
+    const onPlacementClick = jest.fn();
+    const placedData = { id: '5', value: 'Choice B', containerIndex: 3 };
+    const { container } = render(
+      <PossibleResponse
+        {...baseProps}
+        data={placedData}
+        selectedResponse={{ id: '1', containerIndex: undefined }}
+        onSelectClick={onSelectClick}
+        onPlacementClick={onPlacementClick}
+      />,
+    );
+
+    fireEvent.click(container.firstChild);
+
+    expect(onPlacementClick).toHaveBeenCalledWith(3);
+    expect(onSelectClick).not.toHaveBeenCalled();
+  });
+
+  it('does nothing on click when disabled (canDrag=false)', () => {
+    const onSelectClick = jest.fn();
+    const onPlacementClick = jest.fn();
+    const { container } = render(
+      <PossibleResponse
+        {...baseProps}
+        canDrag={false}
+        selectedResponse={null}
+        onSelectClick={onSelectClick}
+        onPlacementClick={onPlacementClick}
+      />,
+    );
+
+    fireEvent.click(container.firstChild);
+
+    expect(onSelectClick).not.toHaveBeenCalled();
+    expect(onPlacementClick).not.toHaveBeenCalled();
+  });
+});

package/src/__tests__/possible-responses.test.jsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import PossibleResponses from '../possible-responses';
+
+jest.mock('@pie-lib/drag', () => ({
+  ICADroppablePlaceholder: ({ children }) => <div data-testid="ica-board">{children}</div>,
+}));
+
+jest.mock('../possible-response', () => (props) => (
+  <div data-testid={`possible-response-${props.data.id}`} onClick={(e) => { e.stopPropagation(); props.onSelectClick?.(props.data); }}>
+    {props.data.value}
+  </div>
+));
+
+describe('PossibleResponses', () => {
+  const baseProps = {
+    canDrag: true,
+    data: [{ id: '0', value: 'Choice A' }],
+    onDragBegin: jest.fn(),
+  };
+
+  it('places the selection into the pool when clicking the pool background', () => {
+    const onPlacementClick = jest.fn();
+    const { container } = render(
+      <PossibleResponses
+        {...baseProps}
+        selectedResponse={{ id: '9', containerIndex: 1 }}
+        onPlacementClick={onPlacementClick}
+      />,
+    );
+
+    fireEvent.click(container.firstChild);
+
+    expect(onPlacementClick).toHaveBeenCalledWith(undefined);
+  });
+
+  it('does nothing when clicking the pool background with nothing selected', () => {
+    const onPlacementClick = jest.fn();
+    const { container } = render(<PossibleResponses {...baseProps} onPlacementClick={onPlacementClick} />);
+
+    fireEvent.click(container.firstChild);
+
+    expect(onPlacementClick).not.toHaveBeenCalled();
+  });
+
+  it('clicking a specific pool item selects it, not the pool background handler', () => {
+    const onPlacementClick = jest.fn();
+    const onSelectClick = jest.fn();
+    const { getByTestId } = render(
+      <PossibleResponses
+        {...baseProps}
+        selectedResponse={{ id: '9', containerIndex: 1 }}
+        onSelectClick={onSelectClick}
+        onPlacementClick={onPlacementClick}
+      />,
+    );
+
+    fireEvent.click(getByTestId('possible-response-0'));
+
+    expect(onSelectClick).toHaveBeenCalledWith(baseProps.data[0]);
+    expect(onPlacementClick).not.toHaveBeenCalled();
+  });
+});

package/src/__tests__/root.test.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, fireEvent } from '@testing-library/react';
 import { ImageClozeAssociationComponent as Root } from '../root';
+import { closestDroppableKeyboardCoordinates } from '../keyboard-coordinates';
 
 jest.mock('@dnd-kit/core', () => ({
   DragOverlay: ({ children }) => <div>{children}</div>,
@@ -15,8 +16,13 @@ jest.mock('@dnd-kit/core', () => ({
   }),
 }));
 
+let capturedDragProviderProps;
+
 jest.mock('@pie-lib/drag', () => ({
-  DragProvider: ({ children }) => <div>{children}</div>,
+  DragProvider: (props) => {
+    capturedDragProviderProps = props;
+    return <div>{props.children}</div>;
+  },
   ICADroppablePlaceholder: ({ children }) => <div>{children}</div>,
 }));
 
@@ -34,6 +40,18 @@ const model = {
 describe('Root', () => {
   const updateAnswer = jest.fn();
 
+  // Warm-up render: the very first `render(<Root .../>)` call in this file's jest
+  // worker doesn't reliably invoke the mocked `DragProvider` (its assignment to
+  // `capturedDragProviderProps` never runs, even though React reports the correct
+  // component reference and the surrounding tree renders successfully) — a one-time
+  // environment quirk, not anything about the mock or Root itself, since every
+  // subsequent render works correctly. Priming it here, once, before any test's
+  // assertions depend on it, avoids the tests that check `capturedDragProviderProps`
+  // being order-dependent on some other, unrelated test happening to render first.
+  beforeAll(() => {
+    render(<Root model={model} session={{ answers: [] }} updateAnswer={jest.fn()} />).unmount();
+  });
+
   const mkWrapper = (opts = {}) => {
     const props = {
       model,
@@ -96,4 +114,245 @@ describe('Root', () => {
     });
   });
 
+  describe('selection state', () => {
+    it('mirrors an active drag into selectedResponse on drag start', () => {
+      const instance = createInstance();
+      const data = { id: '3', value: 'X', containerIndex: 1 };
+
+      instance.onDragStart({ active: { data: { current: data } } });
+
+      expect(instance.state.selectedResponse).toEqual(data);
+    });
+
+    it('toggleResponseSelection selects, then deselects the same response', () => {
+      const instance = createInstance();
+      const data = { id: '3', value: 'X', containerIndex: undefined };
+
+      instance.toggleResponseSelection(data);
+      expect(instance.state.selectedResponse).toEqual(data);
+
+      instance.toggleResponseSelection(data);
+      expect(instance.state.selectedResponse).toBeNull();
+    });
+
+    it('toggleResponseSelection switches selection to a different response', () => {
+      const instance = createInstance();
+      const first = { id: '3', value: 'X', containerIndex: undefined };
+      const second = { id: '4', value: 'Y', containerIndex: undefined };
+
+      instance.toggleResponseSelection(first);
+      instance.toggleResponseSelection(second);
+
+      expect(instance.state.selectedResponse).toEqual(second);
+    });
+
+    it('placeSelectedResponse places the selection into a container via handleOnAnswerSelect', () => {
+      const instance = createInstance();
+      const data = { id: '0', value: 'firstImage', containerIndex: undefined };
+
+      instance.toggleResponseSelection(data);
+      instance.placeSelectedResponse(1);
+
+      expect(instance.state.answers).toEqual([{ id: '0', value: 'firstImage', containerIndex: 1 }]);
+      expect(instance.state.selectedResponse).toBeNull();
+    });
+
+    it('placeSelectedResponse with containerIndex undefined removes the placed response (returns it to the pool)', () => {
+      const instance = createInstance();
+      instance.handleOnAnswerSelect({ value: 'firstImage', id: '0' }, 0);
+
+      instance.toggleResponseSelection({ id: '0', value: 'firstImage', containerIndex: 0 });
+      instance.placeSelectedResponse(undefined);
+
+      expect(instance.state.answers).toEqual([]);
+      expect(instance.state.possibleResponses).toEqual([
+        { value: 'secondImage', id: '1' },
+        { value: 'firstImage', id: '0' },
+      ]);
+    });
+
+    it('placeSelectedResponse does nothing when nothing is selected', () => {
+      const instance = createInstance();
+
+      instance.placeSelectedResponse(1);
+
+      expect(instance.state.answers).toEqual([]);
+    });
+
+    it('placeSelectedResponse(undefined) is a no-op when the selection is already a pool item, even if its id collides with an unrelated placed answer (C1)', () => {
+      // Pool items are indexed 0..n-1 over possibleResponses, and placed answers are
+      // re-indexed 0..n-1 independently over the session's initial answers — so a pool
+      // item's id can coincide with an unrelated placed answer's id purely from the
+      // initial model/session, with no further user action required.
+      const instance = createInstance({ session: { answers: [{ value: 'thirdImage', containerIndex: 1 }] } });
+
+      const unrelatedPlacedAnswer = { value: 'thirdImage', containerIndex: 1, id: '0' };
+      expect(instance.state.answers).toEqual([unrelatedPlacedAnswer]);
+
+      // 'firstImage' is a pool item whose id ('0') collides with the unrelated placed
+      // answer's id above, but it is NOT currently placed anywhere
+      // (containerIndex undefined).
+      const poolItem = { value: 'firstImage', id: '0' };
+      instance.toggleResponseSelection(poolItem);
+
+      instance.placeSelectedResponse(undefined);
+
+      // The unrelated placed answer must survive untouched...
+      expect(instance.state.answers).toEqual([unrelatedPlacedAnswer]);
+      // ...and nothing should have been incorrectly pushed into possibleResponses either.
+      expect(instance.state.possibleResponses).toEqual([
+        { value: 'firstImage', id: '0' },
+        { value: 'secondImage', id: '1' },
+      ]);
+      expect(instance.state.selectedResponse).toBeNull();
+    });
+
+    it('onDragEnd dropping a pool item back onto the pool ("ica-board") is a no-op, even if its id collides with an unrelated placed answer (C1, drag path)', () => {
+      // Same hazard as the click-path C1 test above, but reached via a real
+      // pointer/keyboard drag ending on the pool ('ica-board') instead of a click:
+      // pool tiles are draggable too, and 'ica-board' is a valid Tab/Shift+Tab
+      // keyboard-navigable drop target, so draggedItem can be a pool item
+      // (containerIndex undefined) rather than a placed answer being moved back.
+      const instance = createInstance({ session: { answers: [{ value: 'thirdImage', containerIndex: 1 }] } });
+
+      const unrelatedPlacedAnswer = { value: 'thirdImage', containerIndex: 1, id: '0' };
+      expect(instance.state.answers).toEqual([unrelatedPlacedAnswer]);
+
+      // 'firstImage' is a pool item whose id ('0') collides with the unrelated placed
+      // answer's id above, but it is NOT currently placed anywhere.
+      const poolItem = { id: '0', value: 'firstImage', containerIndex: undefined };
+
+      instance.onDragEnd({ active: { data: { current: poolItem } }, over: { id: 'ica-board' } });
+
+      // The unrelated placed answer must survive untouched.
+      expect(instance.state.answers).toEqual([unrelatedPlacedAnswer]);
+    });
+
+    it('onResponseClick and onPlacementClick are ignored for a short window right after a drag ends', () => {
+      const instance = createInstance();
+      const data = { id: '0', value: 'firstImage', containerIndex: undefined };
+
+      instance.onDragEnd({ active: null, over: null });
+      instance.onResponseClick(data);
+
+      expect(instance.state.selectedResponse).toBeNull();
+    });
+
+    it('onPlacementClick is ignored for a short window right after a drag ends, even with an active selection', () => {
+      const instance = createInstance();
+      const data = { id: '0', value: 'firstImage', containerIndex: undefined };
+
+      instance.toggleResponseSelection(data);
+      instance.lastDragEndAt = Date.now(); // simulate the guard window without clearing selectedResponse
+
+      instance.onPlacementClick(1);
+
+      expect(instance.state.answers).toEqual([]);
+      expect(instance.state.selectedResponse).toEqual(data); // still selected — the call was ignored, not processed
+    });
+
+    it('endAnyLiveKeyboardDrag does not dispatch a document Escape keydown when no drag is live (I4)', () => {
+      const instance = createInstance();
+      const dispatchSpy = jest.spyOn(document, 'dispatchEvent');
+
+      // No onDragStart call happened, so draggingElement.id is falsy.
+      instance.endAnyLiveKeyboardDrag();
+
+      expect(dispatchSpy).not.toHaveBeenCalled();
+      dispatchSpy.mockRestore();
+    });
+
+    it('endAnyLiveKeyboardDrag dispatches a document Escape keydown when a drag is live (I4)', () => {
+      const instance = createInstance();
+      const dispatchSpy = jest.spyOn(document, 'dispatchEvent');
+
+      instance.onDragStart({ active: { data: { current: { id: '3', value: 'X', containerIndex: undefined } } } });
+      instance.endAnyLiveKeyboardDrag();
+
+      expect(dispatchSpy).toHaveBeenCalledWith(expect.objectContaining({ type: 'keydown', code: 'Escape' }));
+      dispatchSpy.mockRestore();
+    });
+
+    it('onResponseClick ends a still-live keyboard drag before applying the click selection, so the new selection sticks (I1)', () => {
+      const instance = createInstance();
+      const tileA = { id: '3', value: 'A', containerIndex: undefined };
+      const tileB = { id: '4', value: 'B', containerIndex: undefined };
+
+      // Pick up tile A via keyboard: starts a real dnd-kit drag and mirrors it into
+      // selectedResponse.
+      instance.onDragStart({ active: { data: { current: tileA } } });
+      expect(instance.state.selectedResponse).toEqual(tileA);
+      expect(instance.state.draggingElement).toEqual(tileA);
+
+      // Now click tile B with the mouse. Real dnd-kit's own document Escape listener
+      // would react to the synthetic Escape dispatched by endAnyLiveKeyboardDrag and
+      // cancel the drag (calling onDragCancel) — simulate that here the same way,
+      // since @dnd-kit/core itself is mocked out of this test file.
+      const originalDispatch = document.dispatchEvent.bind(document);
+      const dispatchSpy = jest.spyOn(document, 'dispatchEvent').mockImplementation((event) => {
+        if (event.code === 'Escape') {
+          instance.onDragCancel();
+        }
+
+        return originalDispatch(event);
+      });
+
+      instance.onResponseClick(tileB);
+
+      expect(dispatchSpy).toHaveBeenCalled();
+      expect(instance.state.draggingElement).toEqual({ id: '', value: '' });
+      // B's selection must be the one that sticks, not wiped out by ending A's drag.
+      expect(instance.state.selectedResponse).toEqual(tileB);
+
+      dispatchSpy.mockRestore();
+    });
+
+  });
+
+  describe('DragProvider wiring', () => {
+    it('passes the Tab/Shift+Tab coordinate getter and keyboard codes to DragProvider', () => {
+      mkWrapper();
+
+      expect(capturedDragProviderProps.keyboardCoordinateGetter).toBe(closestDroppableKeyboardCoordinates);
+      expect(capturedDragProviderProps.keyboardCodes).toEqual({
+        start: ['Space', 'Enter'],
+        cancel: ['Escape'],
+        end: ['Space', 'Enter'],
+      });
+    });
+
+    it('passes onDragCancel to DragProvider (forward-compatible with the pie-lib fix once bumped)', () => {
+      mkWrapper();
+
+      expect(typeof capturedDragProviderProps.onDragCancel).toBe('function');
+    });
+  });
+
+  describe('full component tree (I5)', () => {
+    // Only @dnd-kit/core and @pie-lib/drag are mocked in this file — everything else,
+    // including image-container.jsx and image-drop-target.jsx, renders for real. This
+    // proves the whole click-to-select/click-to-place prop chain works end to end,
+    // rather than each component's own test mocking its immediate child.
+    it('clicking a real pool tile then a real response container places the answer, exercising the full prop chain', () => {
+      updateAnswer.mockClear();
+
+      const { getByText, container } = mkWrapper();
+
+      // Click a real pool tile (rendered by possible-responses.jsx -> possible-response.jsx).
+      const poolTile = getByText('firstImage');
+      fireEvent.click(poolTile);
+
+      // Both response containers (rendered by image-container.jsx -> image-drop-target.jsx)
+      // are still empty at this point, so both are native tab stops with role="button" —
+      // this is the only role="button" element in the tree (pool tiles don't set one).
+      const dropTargets = container.querySelectorAll('[role="button"]');
+      expect(dropTargets.length).toBe(2);
+
+      // Click the first response container to place the selected pool tile into it.
+      fireEvent.click(dropTargets[0]);
+
+      expect(updateAnswer).toHaveBeenCalledWith([{ value: 'firstImage', id: '0', containerIndex: 0 }]);
+    });
+  });
+
 });

package/src/image-container.jsx

@@ -27,6 +27,9 @@ class ImageContainer extends Component {
       responseContainerPadding,
       imageDropTargetPadding,
       maxResponsePerZone,
+      selectedResponse,
+      onSelectClick,
+      onPlacementClick,
     } = this.props;
 
     return (
@@ -62,6 +65,9 @@ class ImageContainer extends Component {
               responseContainerPadding={responseContainerPadding}
               imageDropTargetPadding={imageDropTargetPadding}
               maxResponsePerZone={maxResponsePerZone}
+              selectedResponse={selectedResponse}
+              onSelectClick={onSelectClick}
+              onPlacementClick={onPlacementClick}
             />
           );
         })}
@@ -85,6 +91,9 @@ ImageContainer.propTypes = {
   responseContainerPadding: PropTypes.string,
   imageDropTargetPadding: PropTypes.string,
   maxResponsePerZone: PropTypes.number,
+  selectedResponse: PropTypes.object,
+  onSelectClick: PropTypes.func,
+  onPlacementClick: PropTypes.func,
 };
 
 export default ImageContainer;