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

wix-style-react

import React from 'react';

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

import nestableListFactory from '../NestableList.driver';
import { nestableListUniDriverFactory } from '../NestableList.uni.driver';
import NestableList from '../NestableList';

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

  return (
    <NestableList
      dataHook={dataHook}
      renderItem={renderItem}
      maxDepth={2}
      items={items}
      {...props}
    />
  );
};

describe('NestableList', () => {
  describe('[sync]', () => {
    runTests(createRendererWithDriver(nestableListFactory));
  });
  describe('[async]', () => {
    runTests(createRendererWithUniDriver(nestableListUniDriverFactory));
  });
});

function runTests(render) {
  afterEach(() => cleanup());
  describe('reorder vertically', () => {
    it('by id', async () => {
      const { driver } = render(renderNestableList());
      await driver.reorder({ removedId: '0', addedId: '1' });

      expect(await driver.getItemPosition({ dataHook: 'item-0' })).toEqual(1);
    });
    it('by data-hook', async () => {
      const { driver } = render(renderNestableList());
      await driver.reorderByDataHook({ from: 'item-0', to: 'item-1' });

      expect(await driver.getItemPosition({ dataHook: 'item-0' })).toEqual(1);
    });
  });

  describe('change depth', () => {
    it('should increment depth level if dropped item is above threshold', async () => {
      const threshold = 30;

      const { driver } = render(renderNestableList({ threshold }));
      const offset = { x: threshold + 1, y: 0 };
      await driver.reorder({ removedId: '1', addedId: '1' }, offset);
      expect(await driver.getItemDepth({ dataHook: 'item-1' })).toEqual(1);
    });
    it('should not increment depth level if dropped item is not above threshold', async () => {
      const threshold = 30;

      const { driver } = render(renderNestableList({ threshold }));
      const offset = { x: threshold - 1, y: 0 };
      await driver.reorder({ removedId: '1', addedId: '1' }, offset);
      expect(await driver.getItemDepth({ dataHook: 'item-1' })).toEqual(0);
    });
    it('should increment depth level', async () => {
      const { driver } = render(renderNestableList());
      await driver.changeItemDepth({ dataHook: 'item-1', depthLevel: 1 });
      expect(await driver.getItemDepth({ dataHook: 'item-1' })).toEqual(1);
    });
    it('should decrement depth level', async () => {
      const { driver } = render(renderNestableList());
      await driver.changeItemDepth({ dataHook: 'item-22', depthLevel: -1 });
      expect(await driver.getItemDepth({ dataHook: 'item-22' })).toEqual(0);
    });
  });
}