@axinom/mosaic-ui 0.35.0-rc.6 → 0.35.0-rc.8

package/src/components/DynamicDataList/DynamicDataList.reposition.spec.tsx

@@ -1,816 +0,0 @@
-import { shallow } from 'enzyme';
-import React from 'react';
-import { act } from 'react-dom/test-utils';
-import {
-  calculateNewList,
-  DynamicDataList,
-  DynamicDataListProps,
-  removeItemFromList,
-} from './DynamicDataList';
-import { DynamicListColumn } from './DynamicDataList.model';
-import { DynamicListRow } from './DynamicListRow/DynamicListRow';
-
-interface DynamicListTestData {
-  id: number;
-  title: string;
-  position?: number;
-}
-
-const defaultData: DynamicListTestData[] = [
-  {
-    id: 1,
-    title: 'fses',
-    position: 1,
-  },
-];
-
-const defaultColumns: DynamicListColumn<DynamicListTestData>[] = [
-  {
-    propertyName: 'id',
-    label: 'Id',
-  },
-  {
-    propertyName: 'title',
-    label: 'Title',
-  },
-];
-
-const defaultProps: DynamicDataListProps<DynamicListTestData> = {
-  value: defaultData,
-  columns: defaultColumns,
-};
-
-const mockPos1 = 1;
-const mockPos2 = 2;
-const mockPos3 = 3;
-
-const dataWithPositions: DynamicListTestData[] = [
-  { id: 0, title: 'title-0', position: mockPos1 },
-  { id: 1, title: 'title-1', position: mockPos2 },
-  { id: 2, title: 'title-2', position: mockPos3 },
-];
-const [mockRow1, mockRow2, mockRow3] = dataWithPositions;
-
-describe('DynamicDataList', () => {
-  describe('row dragging', () => {
-    it(`doesn't reorder the list if a dragged row's position is the same as the target row's position`, () => {
-      const wrapper = shallow(
-        <DynamicDataList
-          {...defaultProps}
-          columns={defaultColumns}
-          value={dataWithPositions}
-          allowReordering={true}
-          allowRowDragging={true}
-        />,
-      );
-
-      let rows = wrapper.find(DynamicListRow);
-
-      expect(rows.at(0).prop('data')).toBe(mockRow1);
-      expect(rows.at(1).prop('data')).toBe(mockRow2);
-      expect(rows.at(2).prop('data')).toBe(mockRow3);
-
-      act(() => {
-        // @ts-expect-error not full event args object
-        rows.last().prop('onDragStart')?.({}, mockRow2);
-      });
-      wrapper.update();
-
-      rows = wrapper.find(DynamicListRow);
-
-      act(() => {
-        // @ts-expect-error not full event args object
-        rows.first().prop('onDrop')?.({}, mockRow2, 'above');
-      });
-      wrapper.update();
-
-      rows = wrapper.find(DynamicListRow);
-
-      expect(rows.at(0).prop('data')).toBe(mockRow1);
-      expect(rows.at(1).prop('data')).toBe(mockRow2);
-      expect(rows.at(2).prop('data')).toBe(mockRow3);
-    });
-
-    it(`emits 'onChange' when the list is reordered`, () => {
-      const onChangeSpy = jest.fn();
-      const wrapper = shallow(
-        <DynamicDataList
-          {...defaultProps}
-          columns={defaultColumns}
-          value={dataWithPositions}
-          positionPropertyName={'position'}
-          allowReordering={true}
-          allowRowDragging={true}
-          onChange={onChangeSpy}
-        />,
-      );
-
-      let rows = wrapper.find(DynamicListRow);
-
-      act(() => {
-        // @ts-expect-error not full event args object
-        rows.last().prop('onDragStart')?.({}, mockPos3);
-      });
-      wrapper.update();
-
-      rows = wrapper.find(DynamicListRow);
-
-      act(() => {
-        // @ts-expect-error not full event args object
-        rows.first().prop('onDrop')?.({}, mockPos1, 'above');
-      });
-      wrapper.update();
-
-      expect(onChangeSpy).toHaveBeenCalledTimes(1);
-    });
-
-    describe('dragging a row upwards', () => {
-      it(`replaces target row with dragged row if dragged on the top half of the target row and current row is dragged up`, () => {
-        const onChangeSpy = jest.fn();
-        const wrapper = shallow(
-          <DynamicDataList
-            {...defaultProps}
-            columns={defaultColumns}
-            value={dataWithPositions}
-            positionPropertyName={'position'}
-            allowReordering={true}
-            allowRowDragging={true}
-            onChange={onChangeSpy}
-          />,
-        );
-
-        let rows = wrapper.find(DynamicListRow);
-
-        expect(rows.at(0).prop('data')).toBe(mockRow1);
-        expect(rows.at(1).prop('data')).toBe(mockRow2);
-        expect(rows.at(2).prop('data')).toBe(mockRow3);
-
-        act(() => {
-          // @ts-expect-error not full event args object
-          rows.last().prop('onDragStart')?.({}, mockPos3);
-        });
-        wrapper.update();
-
-        rows = wrapper.find(DynamicListRow);
-
-        act(() => {
-          // @ts-expect-error not full event args object
-          rows.first().prop('onDrop')?.({}, mockPos1, 'above');
-        });
-        wrapper.update();
-
-        rows = wrapper.find(DynamicListRow);
-
-        expect(rows.at(0).prop('data')).toEqual({
-          ...mockRow3,
-          position: mockPos1,
-        });
-        expect(rows.at(1).prop('data')).toEqual({
-          ...mockRow1,
-          position: mockPos2,
-        });
-        expect(rows.at(2).prop('data')).toEqual({
-          ...mockRow2,
-          position: mockPos3,
-        });
-
-        expect(onChangeSpy).toHaveBeenCalledTimes(1);
-        expect(onChangeSpy).toHaveBeenCalledWith([
-          { id: 2, position: 1, title: 'title-2' },
-          { id: 0, position: 2, title: 'title-0' },
-          { id: 1, position: 3, title: 'title-1' },
-        ]);
-      });
-
-      it(`places dragged row below target row if dragged on the bottom half of the target row and current row is dragged up`, () => {
-        const onChangeSpy = jest.fn();
-        const wrapper = shallow(
-          <DynamicDataList
-            {...defaultProps}
-            columns={defaultColumns}
-            value={dataWithPositions}
-            positionPropertyName={'position'}
-            allowReordering={true}
-            allowRowDragging={true}
-            onChange={onChangeSpy}
-          />,
-        );
-
-        let rows = wrapper.find(DynamicListRow);
-
-        expect(rows.at(0).prop('data')).toBe(mockRow1);
-        expect(rows.at(1).prop('data')).toBe(mockRow2);
-        expect(rows.at(2).prop('data')).toBe(mockRow3);
-
-        act(() => {
-          // @ts-expect-error not full event args object
-          rows.last().prop('onDragStart')?.({}, mockPos3);
-        });
-        wrapper.update();
-
-        rows = wrapper.find(DynamicListRow);
-
-        act(() => {
-          // @ts-expect-error not full event args object
-          rows.first().prop('onDrop')?.({}, mockPos1, 'below');
-        });
-        wrapper.update();
-
-        rows = wrapper.find(DynamicListRow);
-
-        expect(rows.at(0).prop('data')).toBe(mockRow1);
-        expect(rows.at(1).prop('data')).toEqual({
-          ...mockRow3,
-          position: mockPos2,
-        });
-        expect(rows.at(2).prop('data')).toEqual({
-          ...mockRow2,
-          position: mockPos3,
-        });
-
-        expect(onChangeSpy).toHaveBeenCalledTimes(1);
-        expect(onChangeSpy).toHaveBeenCalledWith([
-          { id: 0, position: 1, title: 'title-0' },
-          { id: 2, position: 2, title: 'title-2' },
-          { id: 1, position: 3, title: 'title-1' },
-        ]);
-      });
-    });
-
-    describe('dragging a row downwards', () => {
-      it(`places dragged row above target row if dragged on the top half of the target row and current row is dragged down`, () => {
-        const onChangeSpy = jest.fn();
-        const wrapper = shallow(
-          <DynamicDataList
-            {...defaultProps}
-            columns={defaultColumns}
-            value={dataWithPositions}
-            positionPropertyName={'position'}
-            allowReordering={true}
-            allowRowDragging={true}
-            onChange={onChangeSpy}
-          />,
-        );
-
-        let rows = wrapper.find(DynamicListRow);
-
-        expect(rows.at(0).prop('data')).toBe(mockRow1);
-        expect(rows.at(1).prop('data')).toBe(mockRow2);
-        expect(rows.at(2).prop('data')).toBe(mockRow3);
-
-        act(() => {
-          // @ts-expect-error not full event args object
-          rows.first().prop('onDragStart')?.({}, mockPos1);
-        });
-        wrapper.update();
-
-        rows = wrapper.find(DynamicListRow);
-
-        act(() => {
-          // @ts-expect-error not full event args object
-          rows.last().prop('onDrop')?.({}, mockPos3, 'above');
-        });
-        wrapper.update();
-
-        rows = wrapper.find(DynamicListRow);
-
-        expect(rows.at(0).prop('data')).toEqual({
-          ...mockRow2,
-          position: mockPos1,
-        });
-        expect(rows.at(1).prop('data')).toEqual({
-          ...mockRow1,
-          position: mockPos2,
-        });
-        expect(rows.at(2).prop('data')).toEqual({
-          ...mockRow3,
-          position: mockPos3,
-        });
-
-        expect(onChangeSpy).toHaveBeenCalledTimes(1);
-        expect(onChangeSpy).toHaveBeenCalledWith([
-          { id: 1, position: 1, title: 'title-1' },
-          { id: 0, position: 2, title: 'title-0' },
-          { id: 2, position: 3, title: 'title-2' },
-        ]);
-      });
-
-      it(`replaces target row if dragged on the bottom half of the target row and current row is dragged down`, () => {
-        const onChangeSpy = jest.fn();
-        const wrapper = shallow(
-          <DynamicDataList
-            {...defaultProps}
-            columns={defaultColumns}
-            value={dataWithPositions}
-            positionPropertyName={'position'}
-            allowReordering={true}
-            allowRowDragging={true}
-            onChange={onChangeSpy}
-          />,
-        );
-
-        let rows = wrapper.find(DynamicListRow);
-
-        expect(rows.at(0).prop('data')).toBe(mockRow1);
-        expect(rows.at(1).prop('data')).toBe(mockRow2);
-        expect(rows.at(2).prop('data')).toBe(mockRow3);
-
-        act(() => {
-          // @ts-expect-error not full event args object
-          rows.first().prop('onDragStart')?.({}, mockPos1);
-        });
-        wrapper.update();
-
-        rows = wrapper.find(DynamicListRow);
-
-        act(() => {
-          // @ts-expect-error not full event args object
-          rows.last().prop('onDrop')?.({}, mockPos3, 'below');
-        });
-        wrapper.update();
-
-        rows = wrapper.find(DynamicListRow);
-
-        expect(rows.at(0).prop('data')).toEqual({
-          ...mockRow2,
-          position: mockPos1,
-        });
-        expect(rows.at(1).prop('data')).toEqual({
-          ...mockRow3,
-          position: mockPos2,
-        });
-        expect(rows.at(2).prop('data')).toEqual({
-          ...mockRow1,
-          position: mockPos3,
-        });
-
-        expect(onChangeSpy).toHaveBeenCalledTimes(1);
-        expect(onChangeSpy).toHaveBeenCalledWith([
-          { id: 1, position: 1, title: 'title-1' },
-          { id: 2, position: 2, title: 'title-2' },
-          { id: 0, position: 3, title: 'title-0' },
-        ]);
-      });
-    });
-  });
-
-  describe('caclulateNewList', () => {
-    describe('item is moved up', () => {
-      it(`when rows are sequential
-      all items before the new position and all items after the current row should not be affected.
-      the item in the new position, and the items in between should have their positions incremented.
-      the item being moved should have the calculated position.`, () => {
-        const result = calculateNewList(
-          [
-            { id: 1, pos: 1 },
-            { id: 2, pos: 2 },
-            { id: 3, pos: 3 },
-            { id: 4, pos: 4 },
-            { id: 5, pos: 5 },
-          ],
-          'pos',
-          4,
-          2,
-          'drag',
-          'above',
-        );
-
-        expect(result).toEqual([
-          { id: 1, pos: 1 },
-          { id: 4, pos: 2 },
-          { id: 2, pos: 3 },
-          { id: 3, pos: 4 },
-          { id: 5, pos: 5 },
-        ]);
-      });
-
-      it(`when rows are not sequential
-      all items before the new position and all items after the current row should not be affected.
-      only increment positions until the gap is reached.
-      the item being moved should have the calculated position.`, () => {
-        const result = calculateNewList(
-          [
-            { id: 1, pos: 1 },
-            { id: 2, pos: 2 },
-            { id: 7, pos: 7 },
-            { id: 8, pos: 8 },
-            { id: 20, pos: 20 },
-            { id: 100, pos: 100 },
-          ],
-          'pos',
-          20,
-          2,
-          'drag',
-          'above',
-        );
-
-        expect(result).toEqual([
-          { id: 1, pos: 1 },
-          { id: 20, pos: 2 },
-          { id: 2, pos: 3 },
-          { id: 7, pos: 7 },
-          { id: 8, pos: 8 },
-          { id: 100, pos: 100 },
-        ]);
-      });
-
-      it(`when a row is placed between two rows with a gap and dragged below the top item
-      all items before the new position and all items after the current row should not be affected.
-      only increment positions until the gap is reached.
-      the item being moved should be placed after the row above it.`, () => {
-        const result = calculateNewList(
-          [
-            { id: 1, pos: 1 },
-            { id: 2, pos: 2 },
-            { id: 7, pos: 7 },
-            { id: 8, pos: 8 },
-            { id: 20, pos: 20 },
-            { id: 100, pos: 100 },
-          ],
-          'pos',
-          20,
-          2,
-          'drag',
-          'below',
-        );
-
-        expect(result).toEqual([
-          { id: 1, pos: 1 },
-          { id: 2, pos: 2 },
-          { id: 20, pos: 3 },
-          { id: 7, pos: 7 },
-          { id: 8, pos: 8 },
-          { id: 100, pos: 100 },
-        ]);
-      });
-
-      it(`when a row is placed between two rows with a gap and dragged above the bottom item
-      all items before the new position and all items after the current row should not be affected.
-      only increment positions until the gap is reached.
-      the item being moved should be placed after the row above it.`, () => {
-        const result = calculateNewList(
-          [
-            { id: 1, pos: 1 },
-            { id: 2, pos: 2 },
-            { id: 7, pos: 7 },
-            { id: 8, pos: 8 },
-            { id: 20, pos: 20 },
-            { id: 100, pos: 100 },
-          ],
-          'pos',
-          20,
-          7,
-          'drag',
-          'above',
-        );
-
-        expect(result).toEqual([
-          { id: 1, pos: 1 },
-          { id: 2, pos: 2 },
-          { id: 20, pos: 3 },
-          { id: 7, pos: 7 },
-          { id: 8, pos: 8 },
-          { id: 100, pos: 100 },
-        ]);
-      });
-
-      it(`when rows are sequential
-      item should take position 1 if set via input and new value is 0 or less.
-      all items inbetween the current row and new position should be incremented.`, () => {
-        const result = calculateNewList(
-          [
-            { id: 1, pos: 1 },
-            { id: 2, pos: 2 },
-            { id: 3, pos: 3 },
-            { id: 4, pos: 4 },
-            { id: 5, pos: 5 },
-          ],
-          'pos',
-          4,
-          0,
-          'input',
-        );
-
-        expect(result).toEqual([
-          { id: 4, pos: 1 },
-          { id: 1, pos: 2 },
-          { id: 2, pos: 3 },
-          { id: 3, pos: 4 },
-          { id: 5, pos: 5 },
-        ]);
-      });
-
-      it(`when rows are sequential
-      item should replace target row.
-      all items inbetween the current row and new position should be incremented.`, () => {
-        const result = calculateNewList(
-          [
-            { id: 1, pos: 1 },
-            { id: 2, pos: 2 },
-            { id: 3, pos: 3 },
-            { id: 4, pos: 4 },
-            { id: 5, pos: 5 },
-          ],
-          'pos',
-          4,
-          2,
-          'input',
-        );
-
-        expect(result).toEqual([
-          { id: 1, pos: 1 },
-          { id: 4, pos: 2 },
-          { id: 2, pos: 3 },
-          { id: 3, pos: 4 },
-          { id: 5, pos: 5 },
-        ]);
-      });
-
-      it(`when rows are not sequential and current row is moved into an empty position
-      current row should take up the empty poisition
-      no other row should be affected.`, () => {
-        const result = calculateNewList(
-          [
-            { id: 1, pos: 1 },
-            { id: 2, pos: 2 },
-            { id: 7, pos: 7 },
-            { id: 8, pos: 8 },
-            { id: 20, pos: 20 },
-            { id: 100, pos: 100 },
-          ],
-          'pos',
-          100,
-          10,
-          'input',
-        );
-
-        expect(result).toEqual([
-          { id: 1, pos: 1 },
-          { id: 2, pos: 2 },
-          { id: 7, pos: 7 },
-          { id: 8, pos: 8 },
-          { id: 100, pos: 10 },
-          { id: 20, pos: 20 },
-        ]);
-      });
-
-      it(`when rows are not sequential and current row is moved between 2 rows
-      current row should be placed after the row above it.
-      all rows after the new position should be incremented until a gap is reached.`, () => {
-        const result = calculateNewList(
-          [
-            { id: 1, pos: 1 },
-            { id: 2, pos: 2 },
-            { id: 7, pos: 7 },
-            { id: 8, pos: 8 },
-            { id: 20, pos: 20 },
-            { id: 100, pos: 100 },
-          ],
-          'pos',
-          20,
-          2,
-          'input',
-        );
-
-        expect(result).toEqual([
-          { id: 1, pos: 1 },
-          { id: 20, pos: 2 },
-          { id: 2, pos: 3 },
-          { id: 7, pos: 7 },
-          { id: 8, pos: 8 },
-          { id: 100, pos: 100 },
-        ]);
-      });
-    });
-
-    describe('item is moved down', () => {
-      it(`when rows are sequential
-      all items before the new position and all items after the current row should not be affected.
-      the item in the new position, and the items in between should have their positions decremented.
-      the item being moved should have the calculated position.`, () => {
-        const result = calculateNewList(
-          [
-            { id: 1, pos: 1 },
-            { id: 2, pos: 2 },
-            { id: 3, pos: 3 },
-            { id: 4, pos: 4 },
-            { id: 5, pos: 5 },
-          ],
-          'pos',
-          4,
-          2,
-          'drag',
-          'above',
-        );
-
-        expect(result).toEqual([
-          { id: 1, pos: 1 },
-          { id: 4, pos: 2 },
-          { id: 2, pos: 3 },
-          { id: 3, pos: 4 },
-          { id: 5, pos: 5 },
-        ]);
-      });
-
-      it(`when rows are not sequential
-      all items before the new position and all items after the current row should not be affected.
-      only decrement positions until the gap is reached.
-      the item being moved should have the calculated position.`, () => {
-        const result = calculateNewList(
-          [
-            { id: 1, pos: 1 },
-            { id: 2, pos: 2 },
-            { id: 7, pos: 7 },
-            { id: 8, pos: 8 },
-            { id: 20, pos: 20 },
-            { id: 100, pos: 100 },
-          ],
-          'pos',
-          1,
-          20,
-          'drag',
-          'below',
-        );
-
-        expect(result).toEqual([
-          { id: 2, pos: 2 },
-          { id: 7, pos: 7 },
-          { id: 8, pos: 8 },
-          { id: 20, pos: 19 },
-          { id: 1, pos: 20 },
-          { id: 100, pos: 100 },
-        ]);
-      });
-
-      it(`when a row is placed between two rows with a gap and dragged above the bottom item
-      all items before the new position and all items after the current row should not be affected.
-      only decrement positions until the gap is reached.
-      the item being moved should replace the row above it.`, () => {
-        const result = calculateNewList(
-          [
-            { id: 1, pos: 1 },
-            { id: 2, pos: 2 },
-            { id: 7, pos: 7 },
-            { id: 8, pos: 8 },
-            { id: 20, pos: 20 },
-            { id: 100, pos: 100 },
-          ],
-          'pos',
-          1,
-          20,
-          'drag',
-          'above',
-        );
-
-        expect(result).toEqual([
-          { id: 2, pos: 2 },
-          { id: 7, pos: 6 },
-          { id: 8, pos: 7 },
-          { id: 1, pos: 8 },
-          { id: 20, pos: 20 },
-          { id: 100, pos: 100 },
-        ]);
-      });
-
-      it(`when a row is placed between two rows with a gap and dragged below the top item
-      all items before the new position and all items after the current row should not be affected.
-      only decrement positions until the gap is reached.
-      the item being moved should replace the row above it.`, () => {
-        const result = calculateNewList(
-          [
-            { id: 1, pos: 1 },
-            { id: 2, pos: 2 },
-            { id: 7, pos: 7 },
-            { id: 8, pos: 8 },
-            { id: 20, pos: 20 },
-            { id: 100, pos: 100 },
-          ],
-          'pos',
-          1,
-          8,
-          'drag',
-          'below',
-        );
-
-        expect(result).toEqual([
-          { id: 2, pos: 2 },
-          { id: 7, pos: 6 },
-          { id: 8, pos: 7 },
-          { id: 1, pos: 8 },
-          { id: 20, pos: 20 },
-          { id: 100, pos: 100 },
-        ]);
-      });
-
-      it(`when rows are sequential
-      all items before the current and all items after the new position should not be affected.
-      the item in the new position, and the items in between should have their positions decremented.
-      the item being moved should have the calculated position.`, () => {
-        const result = calculateNewList(
-          [
-            { id: 1, pos: 1 },
-            { id: 2, pos: 2 },
-            { id: 3, pos: 3 },
-            { id: 4, pos: 4 },
-            { id: 5, pos: 5 },
-          ],
-          'pos',
-          2,
-          4,
-          'input',
-        );
-
-        expect(result).toEqual([
-          { id: 1, pos: 1 },
-          { id: 3, pos: 2 },
-          { id: 4, pos: 3 },
-          { id: 2, pos: 4 },
-          { id: 5, pos: 5 },
-        ]);
-      });
-
-      it(`when rows are not sequential
-      all items before the current and all items after the new position should not be affected.
-      the item in the new position, and the items in between should have their positions decremented until a gap is reached
-      the item being moved should have the calculated position.`, () => {
-        const result = calculateNewList(
-          [
-            { id: 1, pos: 1 },
-            { id: 2, pos: 2 },
-            { id: 7, pos: 7 },
-            { id: 8, pos: 8 },
-            { id: 20, pos: 20 },
-            { id: 100, pos: 100 },
-          ],
-          'pos',
-          1,
-          20,
-          'input',
-        );
-
-        expect(result).toEqual([
-          { id: 2, pos: 2 },
-          { id: 7, pos: 7 },
-          { id: 8, pos: 8 },
-          { id: 20, pos: 19 },
-          { id: 1, pos: 20 },
-          { id: 100, pos: 100 },
-        ]);
-      });
-    });
-  });
-
-  describe('removeItemFromList', () => {
-    it(`when all rows are sequential
-    all items before the deleted item should not be affected.
-    removes the item being deleted.
-    decrements all subsequent item positions`, () => {
-      const result = removeItemFromList(
-        [
-          { id: 1, pos: 1 },
-          { id: 2, pos: 2 },
-          { id: 3, pos: 3 },
-          { id: 4, pos: 4 },
-          { id: 5, pos: 5 },
-        ],
-        'pos',
-        2,
-      );
-
-      expect(result).toEqual([
-        { id: 1, pos: 1 },
-        { id: 2, pos: 2 },
-        { id: 4, pos: 3 },
-        { id: 5, pos: 4 },
-      ]);
-    });
-
-    it(`when rows are not sequential
-    all items before the deleted item should not be affected.
-    removes the item being deleted.
-    decrements all subsequent item positions until a gap is reached`, () => {
-      const result = removeItemFromList(
-        [
-          { id: 1, pos: 1 },
-          { id: 2, pos: 2 },
-          { id: 3, pos: 3 },
-          { id: 7, pos: 7 },
-          { id: 8, pos: 8 },
-          { id: 20, pos: 20 },
-          { id: 100, pos: 100 },
-        ],
-        'pos',
-        1,
-      );
-
-      expect(result).toEqual([
-        { id: 1, pos: 1 },
-        { id: 3, pos: 2 },
-        { id: 7, pos: 7 },
-        { id: 8, pos: 8 },
-        { id: 20, pos: 20 },
-        { id: 100, pos: 100 },
-      ]);
-    });
-  });
-});