react-beautiful-dnd test cases using @testing-library/react library

Question

I am trying to write a test case for dragging a node from one list & drop it to another list. After dragging end, the onDragEnd function will receive a result of source & destination. Right now i am getting, destination null & reason CANCEL. Expected result is to also get the destination & a reason DROP.

{
  draggableId: '6001e75c6475cb6add2a8c74-new 4',
  type: 'DEFAULT',
  source: { droppableId: 'droppable-main', index: 0 },
  mode: 'FLUID',
  combine: null,
  destination: null,
  reason: 'CANCEL'
}

Code for a test case:

export const elementToBePresent = async (id, getByTestId, toAwait = false) => {
  const element = toAwait
    ? await waitForElement(() => getByTestId(id))
    : getByTestId(id)
  expect(element).toBeInTheDOM()
}

const mockGetBoundingClientRect = (el, bound = null) =>
  jest.spyOn(el, 'getBoundingClientRect').mockImplementation(() =>
    !bound
      ? {
          top: 0,
          right: 0,
          bottom: 0,
          left: 0,
          width: 0,
          height: 0,
          x: space,
          y: space,
          center: { x: 0, y: 0 }
        }
      : bound
  )

describe('Alternate Hierarchy Tree', () => {
  it('copy node', async () => {
    // just to clean up the console
    console.warn = jest.fn()
    console.error = jest.fn()

    await setUpDataAlternate()

    const { getByTestId, debug } = render(
      <AlternateHierarchyPage
        rootId={'root'}
        location={alternateHierarchyLocation}
      />
    )


    /* 
       This node draggable id & source is this
       draggableId: 6001e75c6475cb6add2a8c74-new 4
       source: { droppableId: 'droppable-main', index: 0 } 
    */
    const masterListNode = await waitForElement(() =>
      getByTestId('master-list-node-0-0')
    )

    mockGetBoundingClientRect(masterListNode, {
      bottom: 170.7291717529297,
      height: 48.99305725097656,
      left: 245.62501525878906,
      right: 490.6250305175781,
      top: 121.73611450195312,
      width: 245.00001525878906,
      x: 245.62501525878906,
      y: 121.73611450195312
    })

    // Drop the node in this this list
    const listElement = await waitForElement(() =>
      getByTestId('list-0')
    )


    mockGetBoundingClientRect(listElement, {
      bottom: 430.26043701171875,
      height: 285.6944580078125,
      left: 589.7222290039062,
      right: 851.7361450195312,
      top: 144.56597900390625,
      width: 262.013916015625,
      x: 589.7222290039062,
      y: 144.56597900390625
    })


    // Press mouse button
    fireEvent.mouseDown(masterListNode, {clientX: 245.62501525878906, clientY: 121.73611450195312})

    // move mouse
    fireEvent.mouseMove(masterListNode, {clientX: 589.7222290039062,
    clientY: 144.56597900390625})

    // release mouse button
    fireEvent.mouseUp(masterListNode, {clientX: 589.7222290039062,
    clientY: 144.56597900390625})

  })
})

react-beautiful-dnd test cases using @testing-library/react library

0 Answers0