wix-style-react/src/SortableList/test/SortableList.spec.js

wix-style-react

import React from 'react';

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

import SortableList from '../SortableList';
import sortableListFactory from '../SortableList.driver';
import { sortableListUniDriverFactory } from '../SortableList.uni.driver';

describe('SortableList', () => {
  describe('[sync]', () => {
    runTests(createRendererWithDriver(sortableListFactory));
  });
  describe('[async]', () => {
    runTests(createRendererWithUniDriver(sortableListUniDriverFactory));
  });
});

const renderSortableList = props => {
  const dataHook = 'sortable-list';
  const items = [
    { id: '0', text: 'item 0' },
    { id: '1', text: 'item 1' },
    { id: '2', text: 'item 2' },
  ];
  const renderItem = ({ item }) => (
    <div data-hook={`item-${item.id}`}>{item.text}</div>
  );

  return (
    <SortableList
      contentClassName="cl"
      dataHook={dataHook}
      containerId="sortable-list"
      items={items}
      renderItem={renderItem}
      onDrop={() => {}}
      {...props}
    />
  );
};

function runTests(render) {
  afterEach(() => cleanup());

  describe('reorder by id (legacy)', () => {
    it('should reorder', async () => {
      const { driver } = render(renderSortableList());
      await driver.reorder({ removedId: '0', addedId: '1' });
      expect(await driver.getItemCurrentPosition({ dataHook: 'item-0' })).toBe(
        1,
      );
    });
    it('should reorder with portal', async () => {
      const { driver } = render(renderSortableList({ usePortal: true }));
      await driver.reorder({ removedId: '0', addedId: '1' });
      expect(await driver.getItemCurrentPosition({ dataHook: 'item-0' })).toBe(
        1,
      );
    });
    it('should insert at the end of the list', async () => {
      const { driver } = render(renderSortableList({ insertPosition: 'end' }));
      await driver.reorder({ removedId: '0', addedId: '1' });
      expect(await driver.getItemCurrentPosition({ dataHook: 'item-0' })).toBe(
        2,
      );
    });
    it('should insert at the start of the list', async () => {
      const { driver } = render(
        renderSortableList({ insertPosition: 'start' }),
      );
      await driver.reorder({ removedId: '0', addedId: '1' });
      expect(await driver.getItemCurrentPosition({ dataHook: 'item-0' })).toBe(
        0,
      );
    });
  });
  describe('reorder by data-hook', () => {
    it('should reorder', async () => {
      const { driver } = render(renderSortableList());
      await driver.reorderByDataHook({ from: 'item-0', to: 'item-1' });
      expect(await driver.getItemCurrentPosition({ dataHook: 'item-0' })).toBe(
        1,
      );
    });
    it('should reorder with portal', async () => {
      const { driver } = render(renderSortableList({ usePortal: true }));
      await driver.reorderByDataHook({ from: 'item-0', to: 'item-1' });
      expect(await driver.getItemCurrentPosition({ dataHook: 'item-0' })).toBe(
        1,
      );
    });
    it('should insert at the end of the list', async () => {
      const { driver } = render(renderSortableList({ insertPosition: 'end' }));
      await driver.reorderByDataHook({ from: 'item-0', to: 'item-1' });
      expect(await driver.getItemCurrentPosition({ dataHook: 'item-0' })).toBe(
        2,
      );
    });
    it('should insert at the start of the list', async () => {
      const { driver } = render(
        renderSortableList({ insertPosition: 'start' }),
      );
      await driver.reorderByDataHook({ from: 'item-0', to: 'item-1' });
      expect(await driver.getItemCurrentPosition({ dataHook: 'item-0' })).toBe(
        0,
      );
    });
  });
}