huridocs/uwazi

View on GitHub
app/react/V2/Components/UI/Table/specs/helpers.spec.ts

Summary

Maintainability
B
4 hrs
Test Coverage
/* eslint-disable max-statements */
import { UniqueIdentifier } from '@dnd-kit/core';
import { getRowIds, dndSortHandler } from '../helpers';
import { tableData } from './fixtures';

describe('row id generator', () => {
  it('should return a flat array of row ids with the correct format', () => {
    const ids = getRowIds(tableData);
    expect(ids).toEqual([
      { id: '1' },
      { id: '1.1', parentId: '1' },
      { id: '1.2', parentId: '1' },
      { id: '1.3', parentId: '1' },
      { id: '2' },
      { id: 'A', parentId: '2' },
      { id: 'B', parentId: '2' },
      { id: '3' },
      { id: 'C', parentId: '3' },
      { id: 'D', parentId: '3' },
      { id: '4' },
      { id: '4-dropzone', parentId: '4' },
      { id: '5' },
      { id: '6' },
    ]);
  });
});

describe('DnD table sort handler', () => {
  let ids: { id: UniqueIdentifier; parentId?: string }[] = [];

  beforeAll(() => {
    ids = getRowIds(tableData);
  });

  // eslint-disable-next-line max-statements
  it('should sort root items', () => {
    let result = dndSortHandler({
      currentState: tableData,
      dataIds: ids,
      activeId: '4',
      overId: '6',
    });

    expect(result[3].title).toEqual('Item 1');
    expect(result[4].title).toEqual('Item 2');
    expect(result[5].title).toEqual('Group 4');

    result = dndSortHandler({
      currentState: tableData,
      dataIds: ids,
      activeId: '1',
      overId: '3',
    });

    expect(result[0].title).toEqual('Group 2');
    expect(result[1].title).toEqual('Group 3');
    expect(result[2].title).toEqual('Group 1');

    result = dndSortHandler({
      currentState: tableData,
      dataIds: ids,
      activeId: '5',
      overId: '3',
    });

    expect(result[2].title).toEqual('Item 1');
    expect(result[3].title).toEqual('Group 3');
    expect(result[4].title).toEqual('Group 4');

    result = dndSortHandler({
      currentState: tableData,
      dataIds: ids,
      activeId: '6',
      overId: '1',
    });

    expect(result[0].title).toEqual('Item 2');
    expect(result[1].title).toEqual('Group 1');

    result = dndSortHandler({
      currentState: tableData,
      dataIds: ids,
      activeId: '1',
      overId: '6',
    });

    expect(result[4].title).toEqual('Item 2');
    expect(result[5].title).toEqual('Group 1');
  });

  it('should sort childring within the parent', () => {
    const [firstElement, rest] = dndSortHandler({
      currentState: tableData,
      dataIds: ids,
      activeId: '1.1',
      overId: '1.2',
    });

    expect(firstElement).toEqual({
      rowId: '1',
      title: 'Group 1',
      created: 10,
      description: 'First group',
      subRows: [
        {
          rowId: '1.2',
          title: 'Sub 1-2',
          description: 'Second child',
          created: 7,
        },
        {
          rowId: '1.1',
          title: 'Sub 1-1',
          description: 'First child',
          created: 5,
        },
        {
          rowId: '1.3',
          title: 'Sub 1-3',
          description: 'Last child',
          created: 9,
        },
      ],
    });

    const [, expected] = tableData;
    expect(rest).toEqual(expected);

    const result = dndSortHandler({
      currentState: tableData,
      dataIds: ids,
      activeId: 'D',
      overId: 'C',
    });

    expect(result[2]).toEqual({
      rowId: '3',
      title: 'Group 3',
      created: 30,
      description: 'Third group',
      subRows: [
        {
          rowId: 'D',
          title: 'Sub 3-2',
          description: 'Second item',
          created: 18,
        },
        {
          rowId: 'C',
          title: 'Sub 3-1',
          description: 'First item',
          created: 12,
        },
      ],
    });
  });

  it('should move childring from one parent to another', () => {
    const result = dndSortHandler({
      currentState: tableData,
      dataIds: ids,
      activeId: 'A',
      overId: 'C',
    });

    expect(result[1]).toEqual({
      rowId: '2',
      title: 'Group 2',
      created: 20,
      description: 'Second group',
      subRows: [
        {
          rowId: 'B',
          title: 'Sub 2-2',
          description: 'Second sub',
          created: 15,
        },
      ],
    });

    expect(result[2]).toEqual({
      rowId: '3',
      title: 'Group 3',
      created: 30,
      description: 'Third group',
      subRows: [
        {
          rowId: 'A',
          title: 'Sub 2-1',
          description: 'First sub',
          created: 10,
        },
        {
          rowId: 'C',
          title: 'Sub 3-1',
          description: 'First item',
          created: 12,
        },
        {
          rowId: 'D',
          title: 'Sub 3-2',
          description: 'Second item',
          created: 18,
        },
      ],
    });
  });

  it('should move a child out of the parent', () => {
    const result = dndSortHandler({
      currentState: tableData,
      dataIds: ids,
      activeId: '1.3',
      overId: '5',
    });

    expect(result[0]).toEqual({
      rowId: '1',
      title: 'Group 1',
      created: 10,
      description: 'First group',
      subRows: [
        {
          rowId: '1.1',
          title: 'Sub 1-1',
          description: 'First child',
          created: 5,
        },
        {
          rowId: '1.2',
          title: 'Sub 1-2',
          description: 'Second child',
          created: 7,
        },
      ],
    });

    expect(result[3].title).toEqual('Group 4');

    expect(result[4]).toEqual({
      rowId: '1.3',
      title: 'Sub 1-3',
      description: 'Last child',
      created: 9,
    });

    expect(result[5].title).toEqual('Item 1');
  });

  it('should not move parent items inside other parent items when droping it on parents', () => {
    let result = dndSortHandler({
      currentState: tableData,
      dataIds: ids,
      activeId: '4',
      overId: '3',
    });
    result = dndSortHandler({
      currentState: result,
      dataIds: ids,
      activeId: '4',
      overId: '2',
    });
    result = dndSortHandler({
      currentState: result,
      dataIds: ids,
      activeId: '1',
      overId: '4',
    });
    expect(result[0].title).toEqual('Group 4');
    expect(result[1].title).toEqual('Group 1');
  });

  it('should not move parent items inside other parent items when droping it on children', () => {
    const result = dndSortHandler({
      currentState: tableData,
      dataIds: ids,
      activeId: '4',
      overId: 'C',
    });
    expect(result).toEqual(tableData);
  });

  it('should move a root item inside a parent', () => {
    const result = dndSortHandler({
      currentState: tableData,
      dataIds: ids,
      activeId: '6',
      overId: 'D',
    });

    expect(result.find(item => item.rowId === '6')).toEqual(undefined);
    expect(result[2]).toEqual({
      rowId: '3',
      title: 'Group 3',
      created: 30,
      description: 'Third group',
      subRows: [
        {
          rowId: 'C',
          title: 'Sub 3-1',
          description: 'First item',
          created: 12,
        },
        {
          rowId: '6',
          title: 'Item 2',
          created: 60,
          description: 'Another regular',
        },
        {
          rowId: 'D',
          title: 'Sub 3-2',
          description: 'Second item',
          created: 18,
        },
      ],
    });
  });

  it('should not move a children inside a parent when dropping it on the parent', () => {
    const result = dndSortHandler({
      currentState: tableData,
      dataIds: ids,
      activeId: '6',
      overId: '1',
    });
    expect(result[0].title).toEqual('Item 2');
    expect(result[1]).toEqual({
      rowId: '1',
      title: 'Group 1',
      created: 10,
      description: 'First group',
      subRows: [
        {
          rowId: '1.1',
          title: 'Sub 1-1',
          description: 'First child',
          created: 5,
        },
        {
          rowId: '1.2',
          title: 'Sub 1-2',
          description: 'Second child',
          created: 7,
        },
        {
          rowId: '1.3',
          title: 'Sub 1-3',
          description: 'Last child',
          created: 9,
        },
      ],
    });
  });

  it('should move an item withing a parent when dropped on the dropzone', () => {
    const result = dndSortHandler({
      currentState: tableData,
      dataIds: ids,
      activeId: '6',
      overId: '4-dropzone',
    });
    expect(result[3]).toEqual({
      rowId: '4',
      title: 'Group 4',
      created: 40,
      description: 'Empty subrows',
      subRows: [
        {
          rowId: '6',
          title: 'Item 2',
          created: 60,
          description: 'Another regular',
        },
      ],
    });
  });

  it('should empty a group by moving all items out of it', () => {
    let result = dndSortHandler({
      currentState: tableData,
      dataIds: ids,
      activeId: 'C',
      overId: '6',
    });
    result = dndSortHandler({
      currentState: result,
      dataIds: ids,
      activeId: 'D',
      overId: '6',
    });
    expect(result[2]).toEqual({
      rowId: '3',
      title: 'Group 3',
      created: 30,
      description: 'Third group',
      subRows: [],
    });
  });

  it('should not allow removing or adding items in groups when disabled', () => {
    let result = dndSortHandler({
      currentState: tableData,
      dataIds: ids,
      activeId: '1.1',
      overId: '1',
      disableEditingGroups: true,
    });
    expect(result).toEqual(tableData);

    result = dndSortHandler({
      currentState: tableData,
      dataIds: ids,
      activeId: '1.1',
      overId: 'B',
      disableEditingGroups: true,
    });
    expect(result).toEqual(tableData);

    result = dndSortHandler({
      currentState: tableData,
      dataIds: ids,
      activeId: '4',
      overId: 'C',
      disableEditingGroups: true,
    });
    expect(result).toEqual(tableData);
  });

  it('should allow sorting within groups and sorting root items when editing groups is disabled', () => {
    let result = dndSortHandler({
      currentState: tableData,
      dataIds: ids,
      activeId: '1.1',
      overId: '1.2',
      disableEditingGroups: true,
    });
    expect(result[0]).toEqual({
      ...tableData[0],
      subRows: [
        {
          rowId: '1.2',
          title: 'Sub 1-2',
          description: 'Second child',
          created: 7,
        },
        {
          rowId: '1.1',
          title: 'Sub 1-1',
          description: 'First child',
          created: 5,
        },

        {
          rowId: '1.3',
          title: 'Sub 1-3',
          description: 'Last child',
          created: 9,
        },
      ],
    });

    result = dndSortHandler({
      currentState: tableData,
      dataIds: ids,
      activeId: '6',
      overId: '1',
      disableEditingGroups: true,
    });
    expect(result[0]).toEqual(tableData[5]);
    expect(result[1]).toEqual(tableData[0]);
  });
});