test: drag and drop unit components

Author: navinkarkera

src/generic/DraggableList/DraggableList.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { createPortal } from 'react-dom';
 
@@ -25,17 +25,17 @@ const DraggableList = ({
   updateOrder,
   children,
   renderOverlay,
+  activeId,
+  setActiveId,
 }) => {
   const sensors = useSensors(
     useSensor(PointerSensor),
     useSensor(KeyboardSensor, {
       coordinateGetter: sortableKeyboardCoordinates,
     }),
   );
-  const [activeId, setActiveId] = useState(null);
 
-  const handleDragEnd = (event) => {
-    setActiveId(null);
+  const handleDragEnd = useCallback((event) => {
     const { active, over } = event;
     if (active.id !== over.id) {
       let updatedArray;
@@ -49,11 +49,12 @@ const DraggableList = ({
       });
       updateOrder()(updatedArray);
     }
-  };
+    setActiveId?.(null);
+  }, [updateOrder, setActiveId]);
 
-  const handleDragStart = (event) => {
-    setActiveId(event.active.id);
-  };
+  const handleDragStart = useCallback((event) => {
+    setActiveId?.(event.active.id);
+  }, [setActiveId]);
 
   return (
     <DndContext
@@ -81,6 +82,8 @@ const DraggableList = ({
 
 DraggableList.defaultProps = {
   renderOverlay: undefined,
+  activeId: null,
+  setActiveId: () => {},
 };
 
 DraggableList.propTypes = {
@@ -91,6 +94,8 @@ DraggableList.propTypes = {
   updateOrder: PropTypes.func.isRequired,
   children: PropTypes.node.isRequired,
   renderOverlay: PropTypes.func,
+  activeId: PropTypes.string,
+  onDragEnd: PropTypes.func,
 };
 
 export default DraggableList;

src/library-authoring/data/api.test.ts

@@ -126,4 +126,15 @@ describe('library data API', () => {
     await api.addComponentsToContainer(containerId, [componentId]);
     expect(axiosMock.history.post[0].url).toEqual(url);
   });
+
+  it('should update container children', async () => {
+    const { axiosMock } = initializeMocks();
+    const containerId = 'lct:org:lib1';
+    const url = api.getLibraryContainerChildrenApiUrl(containerId);
+
+    axiosMock.onPatch(url).reply(200);
+
+    await api.updateLibraryContainerChildren(containerId, ['test']);
+    expect(axiosMock.history.patch[0].url).toEqual(url);
+  });
 });

src/library-authoring/data/apiHooks.test.tsx

@@ -29,6 +29,7 @@ import {
   useRestoreContainer,
   useContainerChildren,
   useAddComponentsToContainer,
+  useUpdateContainerChildren,
 } from './apiHooks';
 
 let axiosMock;
@@ -273,4 +274,16 @@ describe('library api hooks', () => {
 
     expect(axiosMock.history.post[0].url).toEqual(url);
   });
+
+  it('should update container children', async () => {
+    const containerId = 'lct:org:lib1';
+    const url = getLibraryContainerChildrenApiUrl(containerId);
+
+    axiosMock.onPatch(url).reply(200);
+    const { result } = renderHook(() => useUpdateContainerChildren(containerId), { wrapper });
+    await result.current.mutateAsync([]);
+    await waitFor(() => {
+      expect(axiosMock.history.patch[0].url).toEqual(url);
+    });
+  });
 });

src/library-authoring/units/LibraryUnitBlocks.tsx

@@ -126,7 +126,6 @@ export const LibraryUnitBlocks = ({ preview }: LibraryUnitBlocksProps) => {
 
   /** Render drag overlay component */
   const renderOverlay = (activeId: string | null) => {
-    setHidePreviewFor(activeId);
     if (!activeId) {
       return null;
     }
@@ -186,6 +185,8 @@ export const LibraryUnitBlocks = ({ preview }: LibraryUnitBlocksProps) => {
         setState={setOrderedBlocks}
         updateOrder={handleReorder}
         renderOverlay={renderOverlay}
+        activeId={hidePreviewFor}
+        setActiveId={setHidePreviewFor}
       >
         {renderedBlocks}
       </DraggableList>

src/library-authoring/units/LibraryUnitPage.test.tsx

@@ -1,5 +1,6 @@
 import userEvent from '@testing-library/user-event';
 import {
+  fireEvent,
   initializeMocks,
   render,
   screen,
@@ -16,9 +17,16 @@ import {
 import { mockContentSearchConfig, mockGetBlockTypes } from '../../search-manager/data/api.mock';
 import { mockClipboardEmpty } from '../../generic/data/api.mock';
 import LibraryLayout from '../LibraryLayout';
+import { getLibraryContainerChildrenApiUrl } from '../data/api';
+import { RequestStatus } from '../../data/constants';
+import { closestCorners } from '@dnd-kit/core';
+import { ToastActionData } from '../../generic/toast-context';
+import { act } from 'react';
 
 const path = '/library/:libraryId/*';
 const libraryTitle = mockContentLibrary.libraryData.title;
+let axiosMock: import("axios-mock-adapter/types");
+let mockShowToast: (message: string, action?: ToastActionData | undefined) => void;
 
 mockClipboardEmpty.applyMock();
 mockGetContainerMetadata.applyMock();
@@ -29,9 +37,22 @@ mockContentLibrary.applyMock();
 mockXBlockFields.applyMock();
 mockLibraryBlockMetadata.applyMock();
 
+jest.mock('@dnd-kit/core', () => ({
+  ...jest.requireActual('@dnd-kit/core'),
+  // Since jsdom (used by jest) does not support getBoundingClientRect function
+  // which is required for drag-n-drop calculations, we mock closestCorners fn
+  // from dnd-kit to return collided elements as per the test. This allows us to
+  // test all drag-n-drop handlers.
+  closestCorners: jest.fn(),
+}));
+// eslint-disable-next-line no-promise-executor-return
+const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+
 describe('<LibraryUnitPage />', () => {
   beforeEach(() => {
-    initializeMocks();
+    const mocks = initializeMocks();
+    axiosMock = mocks.axiosMock;
+    mockShowToast = mocks.mockShowToast;
   });
 
   const renderLibraryUnitPage = (unitId?: string, libraryId?: string) => {
@@ -111,4 +132,19 @@ describe('<LibraryUnitPage />', () => {
     userEvent.click(closeButton);
     await waitFor(() => expect(screen.queryByTestId('library-sidebar')).not.toBeInTheDocument());
   });
+
+  it('should call update order api on dragging component', async () => {
+    renderLibraryUnitPage();
+    const firstDragHandle = (await screen.findAllByRole('button', { name: 'Drag to reorder' }))[0];
+    axiosMock
+      .onPatch(getLibraryContainerChildrenApiUrl(mockGetContainerMetadata.containerId))
+      .reply(200);
+    closestCorners.mockReturnValue([{ id: "lb:org1:Demo_course:html:text-1" }]);
+    await act(async () => {
+      fireEvent.keyDown(firstDragHandle, { code: 'Space' });
+      await sleep(1);
+      fireEvent.keyUp(firstDragHandle, { code: 'Space' });
+    })
+    await waitFor(() => expect(mockShowToast).toHaveBeenLastCalledWith('test'));
+  });
 });