wix-style-react/src/DragAndDrop/Draggable/Draggable.spec.js

wix-style-react

/* eslint-disable no-console */
import React from 'react';

import {
  createRendererWithDriver,
  createRendererWithUniDriver,
  cleanup,
} from '../../../test/utils/react';

import draggableDriverFactory from './Draggable.driver';
import { draggableUniDriverFactory } from './Draggable.uni.driver';
import { Draggable } from './Draggable';

const renderDraggableSet = ({ onDragStart, onDragEnd, onDrop, onHover }) => {
  const commonProps = {
    renderItem: ({ item }) => (
      <div data-hook={`item-${item.id}`}>{item.text}</div>
    ),
    onDragStart,
    onDragEnd,
    onDrop,
    onHover,
    setWrapperNode: () => {},
    containerId: 'container-1',
    groupName: 'group-1',
  };

  const items = [
    {
      id: '0',
      item: { text: 'item 1', id: '0' },
      index: 0,
    },
    {
      id: '1',
      item: { text: 'item 2', id: '1' },
      index: 1,
    },
  ];

  return (
    <Draggable.Manager dataHook="dnd-provider">
      {items.map(item => (
        <Draggable.Item key={item.id} {...item} {...commonProps} />
      ))}
    </Draggable.Manager>
  );
};

describe('Draggable', () => {
  describe('[sync]', () => {
    runTests(createRendererWithDriver(draggableDriverFactory));
  });
  describe('[async]', () => {
    runTests(createRendererWithUniDriver(draggableUniDriverFactory));
  });
});

const assertOnDragStart = ({ onDragStart, onDragEnd, onDrop, onHover }) => {
  expect(onDragStart).toBeCalledWith({
    containerId: 'container-1',
    groupName: 'group-1',
    id: '0',
    index: 0,
    item: { text: 'item 1', id: '0' },
  });
  expect(onDragEnd).toHaveBeenCalledTimes(0);
  expect(onDrop).toHaveBeenCalledTimes(0);
  expect(onHover).toHaveBeenCalledTimes(0);
};

const assertOnDragOver = ({ onDragStart, onDragEnd, onDrop, onHover }) => {
  expect(onDragStart).toHaveBeenCalledTimes(1);
  expect(onHover).toBeCalledWith({
    id: '0',
    addedIndex: 1,
    removedIndex: 0,
    item: { text: 'item 1', id: '0' },
  });
  expect(onDrop).toHaveBeenCalledTimes(0);
  expect(onDragEnd).toHaveBeenCalledTimes(0);
};

const assertOnDragEnd = ({ onDragStart, onDragEnd, onDrop, onHover }) => {
  expect(onDragStart).toHaveBeenCalledTimes(1);
  expect(onHover).toHaveBeenCalledTimes(1);
  expect(onDrop).toBeCalledWith({
    addedIndex: 1,
    addedToContainerId: 'container-1',
    removedFromContainerId: 'container-1',
    removedIndex: 0,
    payload: { text: 'item 1', id: '0' },
  });
  expect(onDragEnd).toBeCalledWith({
    containerId: 'container-1',
    groupName: 'group-1',
    id: '0',
    index: 0,
    item: { text: 'item 1', id: '0' },
  });
};

function runTests(render) {
  afterEach(() => cleanup());
  describe('beginDrag/dragOver/endDrag', () => {
    it('by dataHook', async () => {
      const onDragStart = jest.fn();
      const onDragEnd = jest.fn();
      const onDrop = jest.fn();
      const onHover = jest.fn();

      const { driver } = render(
        renderDraggableSet({
          onDragStart,
          onDragEnd,
          onDrop,
          onHover,
        }),
      );

      await driver.beginDrag({
        dataHook: 'item-0',
      });

      assertOnDragStart({ onDragStart, onDragEnd, onDrop, onHover });

      await driver.dragOver({
        dataHook: 'item-1',
      });

      assertOnDragOver({ onDragStart, onDragEnd, onDrop, onHover });

      await driver.endDrag();

      assertOnDragEnd({ onDragStart, onDragEnd, onDrop, onHover });
    });
    it('by id', async () => {
      const onDragStart = jest.fn();
      const onDragEnd = jest.fn();
      const onDrop = jest.fn();
      const onHover = jest.fn();

      const { driver } = render(
        renderDraggableSet({
          onDragStart,
          onDragEnd,
          onDrop,
          onHover,
        }),
      );

      await driver.beginDrag({ id: '0' });

      assertOnDragStart({ onDragStart, onDragEnd, onDrop, onHover });

      await driver.dragOver({ id: '1' });

      assertOnDragOver({ onDragStart, onDragEnd, onDrop, onHover });

      await driver.endDrag();

      assertOnDragEnd({ onDragStart, onDragEnd, onDrop, onHover });
    });
  });
}