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

wix-style-react

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

import StyledNestableList from '../StyledNestableList';
import { styledNestableListDriverFactory } from '../StyledNestableList.uni.driver';

const renderStyledNestableList = () => {
  return (
    <StyledNestableList
      dataHook="styled-nestable-list"
      items={[
        {
          id: '0',
          options: [{ value: 'Node 0' }],
          draggable: true,
          children: [
            { id: '1', options: [{ value: 'Node 0 child' }], draggable: true },
          ],
        },
        {
          id: '2',
          options: [{ value: 'Node 1' }],
          draggable: true,
          children: [
            { id: '3', options: [{ value: 'Node 1 child' }], draggable: true },
          ],
        },
      ]}
      onChange={() => {}}
    />
  );
};

describe('StyledNestableList', () => {
  const render = createRendererWithUniDriver(styledNestableListDriverFactory);

  afterEach(cleanup);

  it('should reorder by data-hook', async () => {
    const { driver } = render(renderStyledNestableList());

    await driver.reorderByDataHook({
      from: 'styled-nestable-list-item-0',
      to: 'styled-nestable-list-item-2',
    });

    expect(
      await driver.getItemPosition({ dataHook: 'styled-nestable-list-item-0' }),
    ).toEqual(2);
  });
  it('should change item depth', async () => {
    const { driver } = render(renderStyledNestableList());

    await driver.changeItemDepth({
      dataHook: 'styled-nestable-list-item-2',
      depthLevel: 2,
    });

    expect(
      await driver.getItemDepth({ dataHook: 'styled-nestable-list-item-2' }),
    ).toEqual(2);
  });
});