@axinom/mosaic-ui 0.35.0-rc.0 → 0.35.0-rc.10

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

@@ -1,13 +1,53 @@
 import { mount, shallow } from 'enzyme';
 import React from 'react';
 import { act } from 'react-dom/test-utils';
-import { config } from 'react-transition-group';
-import { Button } from '../Buttons';
 import { DynamicDataList, DynamicDataListProps } from './DynamicDataList';
 import { DynamicListColumn } from './DynamicDataList.model';
 import { DynamicListDataEntry } from './DynamicListDataEntry/DynamicListDataEntry';
 import { DynamicListHeader } from './DynamicListHeader/DynamicListHeader';
 import { DynamicListRow } from './DynamicListRow/DynamicListRow';
+import { useDataHandler } from './helpers/useDataHandler';
+
+jest.mock('./helpers/useDataHandler');
+jest.mock('./helpers/generateId', () => ({
+  uuid: jest.fn().mockReturnValue('test-uuid'),
+}));
+
+const mockUseDataHandler = useDataHandler as jest.MockedFunction<
+  typeof useDataHandler
+>;
+
+jest.mock('react-beautiful-dnd', () => ({
+  Droppable: ({
+    children,
+  }: {
+    children: (provided: any, snapshot: any) => React.ReactNode;
+  }) =>
+    children(
+      {
+        draggableProps: {
+          style: {},
+        },
+        innerRef: jest.fn(),
+      },
+      {},
+    ),
+  Draggable: ({
+    children,
+  }: {
+    children: (provided: any, snapshot: any) => React.ReactNode;
+  }) =>
+    children(
+      {
+        draggableProps: {
+          style: {},
+        },
+        innerRef: jest.fn(),
+      },
+      {},
+    ),
+  DragDropContext: ({ children }: { children: React.ReactNode }) => children,
+}));
 
 interface DynamicListTestData {
   id: number;
@@ -37,11 +77,17 @@ const defaultColumns: DynamicListColumn<DynamicListTestData>[] = [
 const defaultProps: DynamicDataListProps<DynamicListTestData> = {
   value: defaultData,
   columns: defaultColumns,
+  positionPropertyName: 'position',
 };
 
 describe('DynamicDataList', () => {
-  // Disable Animations for testing
-  config.disabled = true;
+  mockUseDataHandler.mockReturnValue({
+    removeItem: jest.fn(),
+    addItem: jest.fn(),
+    canAddItems: false,
+    items: defaultData,
+    nextPosition: 2,
+  });
 
   it('renders the component without crashing', () => {
     const wrapper = shallow(<DynamicDataList {...defaultProps} />);
@@ -69,10 +115,10 @@ describe('DynamicDataList', () => {
     expect(header.prop('positionLabel')).toBe(mockLabel);
   });
 
-  it(`creates a position column, columns for each property, and an action column by default`, () => {
-    const mockColumns = '100px 1fr 1fr 50px';
+  it(`creates a position column and columns for each property`, () => {
+    const mockColumns = '100px 1fr 1fr';
 
-    const wrapper = shallow(<DynamicDataList {...defaultProps} />);
+    const wrapper = mount(<DynamicDataList {...defaultProps} />);
 
     const header = wrapper.find(DynamicListHeader);
     const row = wrapper.find(DynamicListRow);
@@ -82,7 +128,7 @@ describe('DynamicDataList', () => {
   });
 
   it(`does not create a column for position if prop 'allowReordering' is false`, () => {
-    const mockColumns = '1fr 1fr 50px';
+    const mockColumns = '1fr 1fr';
 
     const wrapper = shallow(
       <DynamicDataList {...defaultProps} allowReordering={false} />,
@@ -96,9 +142,9 @@ describe('DynamicDataList', () => {
   });
 
   it(`create a smaller position column if 'allowDragging' is false`, () => {
-    const mockColumns = '60px 1fr 1fr 50px';
+    const mockColumns = '50px 1fr 1fr';
 
-    const wrapper = shallow(
+    const wrapper = mount(
       <DynamicDataList
         {...defaultProps}
         allowReordering={true}
@@ -113,20 +159,6 @@ describe('DynamicDataList', () => {
     expect(row.prop('columnSizes')).toBe(mockColumns);
   });
 
-  it(`does not create a column for the action button if prop 'allowAddAndRemove' is false`, () => {
-    const mockColumns = '100px 1fr 1fr';
-
-    const wrapper = shallow(
-      <DynamicDataList {...defaultProps} allowAddAndRemove={false} />,
-    );
-
-    const header = wrapper.find(DynamicListHeader);
-    const row = wrapper.find(DynamicListRow);
-
-    expect(header.prop('columnSizes')).toBe(mockColumns);
-    expect(row.prop('columnSizes')).toBe(mockColumns);
-  });
-
   it(`each button element should have type of 'button'`, () => {
     const wrapper = mount(
       <DynamicDataList {...defaultProps} allowNewData={true} />,
@@ -170,7 +202,7 @@ describe('DynamicDataList', () => {
       position: 3,
     };
 
-    const wrapper = shallow(
+    const wrapper = mount(
       <DynamicDataList
         {...defaultProps}
         columns={defaultColumns}
@@ -184,26 +216,6 @@ describe('DynamicDataList', () => {
     expect(row.prop('positionKey')).toBe(mockKey);
   });
 
-  it(`sets 'allowReordering' prop for DynamicListHeader to false if 'positionKey' prop is undefined`, () => {
-    const dataWithPosition: DynamicListTestData = {
-      id: 0,
-      title: 'fses',
-      position: 3,
-    };
-
-    const wrapper = shallow(
-      <DynamicDataList
-        {...defaultProps}
-        columns={defaultColumns}
-        value={[dataWithPosition]}
-      />,
-    );
-
-    const header = wrapper.find(DynamicListHeader);
-
-    expect(header.prop('allowReordering')).toBe(false);
-  });
-
   it(`sets 'allowReordering' prop for DynamicListHeader to true if 'positionPropertyName' prop is set and 'allowReordering' is true`, () => {
     const mockKey = 'position';
 
@@ -249,407 +261,128 @@ describe('DynamicDataList', () => {
     expect(header.prop('allowReordering')).toBe(false);
   });
 
-  it(`sets 'dragging' to true if a row is being dragged and back to false when dragging is done`, () => {
-    const dataWithPosition: DynamicListTestData = {
-      id: 0,
-      title: 'fses',
-      position: 3,
-    };
-
-    const wrapper = shallow(
-      <DynamicDataList
-        {...defaultProps}
-        columns={defaultColumns}
-        value={[dataWithPosition]}
-        allowReordering={true}
-      />,
-    );
-
-    let row = wrapper.find(DynamicListRow);
-
-    expect(row.prop('dragging')).toBe(false);
-
-    // @ts-expect-error not full event args object
-    row.prop('onDragStart')?.({}, dataWithPosition.position);
-
-    wrapper.update();
-
-    row = wrapper.find(DynamicListRow);
-
-    expect(row.prop('dragging')).toBe(true);
-
-    // @ts-expect-error not full event args object
-    row.prop('onDragEnd')?.({}, dataWithPosition);
-
-    wrapper.update();
-
-    row = wrapper.find(DynamicListRow);
-
-    expect(row.prop('dragging')).toBe(false);
-  });
-
-  describe('Data entry', () => {
-    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 },
-    ];
-
-    it('disables new data entry by default', () => {
-      const wrapper = shallow(<DynamicDataList {...defaultProps} />);
-
-      const dataEntryRow = wrapper.find(DynamicListDataEntry);
-
-      expect(dataEntryRow.exists()).toBe(false);
-    });
-
-    it(`allows new data entry if 'allowNewData' is true, 'allowAddAndRemove' prop is set to 'true'(default), and maxItemLimit is not set(default)`, () => {
-      const wrapper = shallow(
-        <DynamicDataList {...defaultProps} allowNewData={true} />,
-      );
-
-      const dataEntryRow = wrapper.find(DynamicListDataEntry);
-
-      expect(dataEntryRow.exists()).toBe(true);
-    });
+  describe('useDataHandler', () => {
+    it(`calls the 'useDataHandler' hook with the correct arguments`, () => {
+      const changeSpy = jest.fn();
+      const addTransformSpy = jest.fn();
+      const mockPositionKey = 'position';
 
-    it(`disables new data entry if 'allowAddAndRemove' prop is set to 'false'`, () => {
-      const wrapper = shallow(
+      mount(
         <DynamicDataList
           {...defaultProps}
+          positionPropertyName={mockPositionKey}
+          maxItemLimit={10}
           allowNewData={true}
-          allowAddAndRemove={false}
+          onChange={changeSpy}
+          onAddTransformData={addTransformSpy}
         />,
       );
 
-      const dataEntryRow = wrapper.find(DynamicListDataEntry);
-
-      expect(dataEntryRow.exists()).toBe(false);
-    });
-
-    it(`disables new data entry if current item count is greater then the 'maxItemLimit' prop`, () => {
-      const currentItemSize = defaultProps.value.length;
-      const wrapper = shallow(
-        <DynamicDataList
-          {...defaultProps}
-          allowNewData={true}
-          maxItemLimit={0}
-        />,
+      expect(useDataHandler).toHaveBeenCalledWith(
+        defaultData,
+        mockPositionKey,
+        10,
+        true,
+        changeSpy,
+        addTransformSpy,
       );
-
-      const dataEntryRow = wrapper.find(DynamicListDataEntry);
-
-      expect(currentItemSize).toBe(1);
-      expect(dataEntryRow.exists()).toBe(false);
     });
 
-    it(`disables new data entry if current item count has reached 'maxItemLimit' prop`, () => {
-      const currentItemSize = defaultProps.value.length;
-      const wrapper = shallow(
-        <DynamicDataList
-          {...defaultProps}
-          allowNewData={true}
-          maxItemLimit={1}
-        />,
+    it(`doesn't show new data entry row if 'canAddItems' is false`, () => {
+      const wrapper = mount(
+        <DynamicDataList {...defaultProps} allowNewData={true} />,
       );
 
       const dataEntryRow = wrapper.find(DynamicListDataEntry);
 
-      expect(currentItemSize).toBe(1);
       expect(dataEntryRow.exists()).toBe(false);
     });
 
-    it(`allows new data entry if current item count has not reached the 'maxItemLimit' prop`, () => {
-      const currentItemSize = defaultProps.value.length;
-      const wrapper = shallow(
-        <DynamicDataList
-          {...defaultProps}
-          allowNewData={true}
-          maxItemLimit={2}
-        />,
+    it(`shows new data entry row if 'canAddItems' is true`, () => {
+      mockUseDataHandler.mockReturnValue({
+        removeItem: jest.fn(),
+        addItem: jest.fn(),
+        canAddItems: true,
+        items: defaultData,
+        nextPosition: 2,
+      });
+
+      const wrapper = mount(
+        <DynamicDataList {...defaultProps} allowNewData={true} />,
       );
 
       const dataEntryRow = wrapper.find(DynamicListDataEntry);
 
-      expect(currentItemSize).toBe(1);
       expect(dataEntryRow.exists()).toBe(true);
     });
 
-    it(`new data row position should be set after the last item in the list`, () => {
-      const lastDataRow: DynamicListTestData = dataWithPositions.slice(-1)[0];
+    it(`sets 'newDataPosition' prop for DynamicListDataEntry`, () => {
+      const mockLimit = 10;
 
-      const wrapper = shallow(
-        <DynamicDataList
-          {...defaultProps}
-          allowNewData={true}
-          columns={defaultColumns}
-          value={dataWithPositions}
-          allowReordering={true}
-          positionPropertyName={'position'}
-        />,
-      );
-
-      const dataEntryRow = wrapper.find(DynamicListDataEntry);
-
-      expect(dataEntryRow.prop('newDataPosition')).toBe(
-        (lastDataRow.position ?? 0) + 1,
-      );
-    });
+      mockUseDataHandler.mockReturnValue({
+        removeItem: jest.fn(),
+        addItem: jest.fn(),
+        canAddItems: true,
+        items: defaultData,
+        nextPosition: mockLimit,
+      });
 
-    it('new data row position should default to 1 if the list is empty', () => {
-      const wrapper = shallow(
-        <DynamicDataList
-          {...defaultProps}
-          allowNewData={true}
-          columns={defaultColumns}
-          value={[]}
-          allowReordering={true}
-        />,
-      );
+      const wrapper = mount(<DynamicDataList {...defaultProps} />);
 
       const dataEntryRow = wrapper.find(DynamicListDataEntry);
 
-      expect(dataEntryRow.prop('newDataPosition')).toBe(1);
+      expect(dataEntryRow.prop('newDataPosition')).toBe(mockLimit);
     });
 
-    it('appends new item to the end of the list array when the add button is clicked', () => {
-      const addSpy = jest.fn();
-      const mockNewItem: DynamicListTestData = {
-        id: 3,
-        title: 'title-3',
-      };
-      const wrapper = shallow(
-        <DynamicDataList
-          {...defaultProps}
-          allowNewData={true}
-          columns={defaultColumns}
-          value={dataWithPositions}
-          allowReordering={true}
-          onChange={addSpy}
-        />,
-      );
-
-      let rows = wrapper.find(DynamicListRow);
+    it('calls the addItem function when the add button is clicked', () => {
+      const addItemSpy = jest.fn();
 
-      expect(rows).toHaveLength(3);
-
-      const entryRow = wrapper.find(DynamicListDataEntry);
-
-      act(() => {
-        entryRow.prop('onActionClicked')?.(mockNewItem);
+      mockUseDataHandler.mockReturnValue({
+        removeItem: jest.fn(),
+        addItem: addItemSpy,
+        canAddItems: true,
+        items: defaultData,
+        nextPosition: 2,
       });
-      wrapper.update();
 
-      rows = wrapper.find(DynamicListRow);
-
-      expect(rows).toHaveLength(4);
-      expect(addSpy).toHaveBeenCalledTimes(1);
-      expect(addSpy).toHaveBeenCalledWith([...dataWithPositions, mockNewItem]);
-    });
-
-    it(`transform new data if 'onAddTransformData' is set`, () => {
-      const mockNewItem: DynamicListTestData = {
-        id: 3,
-        title: 'title-3',
+      const mockItem = {
+        id: 2,
+        title: 'test',
       };
-      const mockTransformedItem: DynamicListTestData = {
-        id: 3,
-        title: 'transformed-title-3',
-      };
-      const addSpy = jest.fn();
-      const transformSpy = jest.fn().mockReturnValueOnce(mockTransformedItem);
-
-      const wrapper = shallow(
-        <DynamicDataList
-          {...defaultProps}
-          allowNewData={true}
-          columns={defaultColumns}
-          value={dataWithPositions}
-          allowReordering={true}
-          onChange={addSpy}
-          onAddTransformData={transformSpy}
-        />,
-      );
-
-      let rows = wrapper.find(DynamicListRow);
-
-      expect(rows).toHaveLength(3);
-
-      const entryRow = wrapper.find(DynamicListDataEntry);
-
-      act(() => {
-        entryRow.prop('onActionClicked')?.(mockNewItem);
-      });
-      wrapper.update();
-
-      rows = wrapper.find(DynamicListRow);
-
-      expect(rows).toHaveLength(4);
-      expect(transformSpy).toHaveBeenCalledTimes(1);
-      expect(transformSpy).toHaveBeenCalledWith(mockNewItem);
-      expect(addSpy).toHaveBeenCalledWith([
-        ...dataWithPositions,
-        mockTransformedItem,
-      ]);
-    });
-
-    it('sorts the data using the position parameter', () => {
-      const dataWithPositions: DynamicListTestData[] = [
-        { id: 0, title: 'title-0', position: 2 },
-        { id: 1, title: 'title-1', position: 3 },
-        { id: 2, title: 'title-2', position: 1 },
-      ];
 
       const wrapper = mount(
-        <DynamicDataList
-          {...defaultProps}
-          allowNewData={true}
-          columns={defaultColumns}
-          value={dataWithPositions}
-          allowRowDragging={false}
-          allowReordering={false}
-          positionPropertyName="position"
-        />,
-      );
-
-      const rows = wrapper.find(DynamicListRow);
-
-      expect(rows).toHaveLength(3);
-
-      const data = rows.map((row) => row.prop('data'));
-
-      expect(data).toMatchObject([
-        { id: 2, title: 'title-2', position: 1 },
-        { id: 0, title: 'title-0', position: 2 },
-        { id: 1, title: 'title-1', position: 3 },
-      ]);
-    });
-  });
-
-  describe('deleting items', () => {
-    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 },
-    ];
-
-    it('deletes a row when the delete action button is clicked and repositioning is not allowed', () => {
-      const deleteSpy = jest.fn();
-      const mockEvent = {
-        e: 'event',
-      };
-      const [, mockRow2, mockRow3] = dataWithPositions;
-      const wrapper = mount(
-        <DynamicDataList
-          {...defaultProps}
-          allowNewData={true}
-          columns={defaultColumns}
-          value={dataWithPositions}
-          allowRowDragging={false}
-          allowReordering={false}
-          onChange={deleteSpy}
-        />,
+        <DynamicDataList {...defaultProps} allowNewData={true} />,
       );
 
-      let rows = wrapper.find(DynamicListRow);
-
-      expect(rows).toHaveLength(3);
-
-      const deleteActions = wrapper.find(Button);
+      const dataEntryRow = wrapper.find(DynamicListDataEntry);
 
       act(() => {
-        // @ts-expect-error not full event args object
-        deleteActions.at(1).prop('onButtonClicked')?.(mockEvent);
+        dataEntryRow.prop('onActionClicked')?.(mockItem);
       });
-      wrapper.update();
-
-      rows = wrapper.find(DynamicListRow);
 
-      expect(rows).toHaveLength(2);
-      expect(deleteSpy).toHaveBeenCalledTimes(1);
-      expect(deleteSpy).toHaveBeenCalledWith([mockRow2, mockRow3]);
+      expect(addItemSpy).toHaveBeenCalledWith(mockItem);
     });
 
-    it('deletes a row and updates subsequent row positions when row repositioning is allowed', () => {
-      const mockEvent = {
-        e: 'event',
-      };
-      const deleteSpy = jest.fn();
-      const [, mockRow2, mockRow3] = dataWithPositions;
-      const wrapper = mount(
-        <DynamicDataList
-          {...defaultProps}
-          allowNewData={true}
-          columns={defaultColumns}
-          value={dataWithPositions}
-          positionPropertyName={'position'}
-          allowRowDragging={true}
-          allowReordering={true}
-          onChange={deleteSpy}
-        />,
-      );
+    it('calls the removeItem function when the delete button is clicked', () => {
+      const removeItemSpy = jest.fn();
 
-      let rows = wrapper.find(DynamicListRow);
-
-      expect(rows).toHaveLength(3);
-
-      const deleteActions = wrapper.find(Button);
-
-      act(() => {
-        // @ts-expect-error not full event args object
-        deleteActions.at(1).prop('onButtonClicked')?.(mockEvent);
+      mockUseDataHandler.mockReturnValue({
+        removeItem: removeItemSpy,
+        addItem: jest.fn(),
+        canAddItems: true,
+        items: defaultData,
+        nextPosition: 2,
       });
-      wrapper.update();
 
-      rows = wrapper.find(DynamicListRow);
+      const wrapper = mount(<DynamicDataList {...defaultProps} />);
 
-      expect(rows).toHaveLength(2);
-      expect(deleteSpy).toHaveBeenCalledTimes(1);
-      expect(deleteSpy).toHaveBeenCalledWith([
-        { ...mockRow2, position: mockPos1 },
-        { ...mockRow3, position: mockPos2 },
-      ]);
-    });
-
-    it(`data entry row's position should always be after the new last item's position after deleting the previous last item`, () => {
-      const mockEvent = {
-        e: 'event',
-      };
-
-      const wrapper = mount(
-        <DynamicDataList
-          {...defaultProps}
-          allowNewData={true}
-          columns={defaultColumns}
-          value={dataWithPositions}
-          positionPropertyName={'position'}
-          allowReordering={true}
-        />,
-      );
-
-      const deleteActions = wrapper.find(Button);
-
-      let dataEntryRow = wrapper.find(DynamicListDataEntry);
-
-      expect(dataEntryRow.prop('newDataPosition')).toBe(mockPos3 + 1);
+      const row = wrapper.find(DynamicListRow);
 
       act(() => {
-        // @ts-expect-error not full event args object
-        deleteActions.at(2).prop('onButtonClicked')?.(mockEvent);
+        row.prop('onActionClicked')?.(defaultData[0]);
       });
-      wrapper.update();
-
-      dataEntryRow = wrapper.find(DynamicListDataEntry);
 
-      expect(dataEntryRow.prop('newDataPosition')).toBe(mockPos2 + 1);
+      expect(removeItemSpy).toHaveBeenCalledWith(defaultData[0]);
     });
   });
 });

package/src/components/DynamicDataList/DynamicDataList.stories.tsx

@@ -103,11 +103,6 @@ const meta: Meta<StoryDDLType> = {
   component: DynamicDataList,
   argTypes: {
     ...groups,
-    error: {
-      table: {
-        disable: true,
-      },
-    },
     customDataEntry: {
       ...groups.customDataEntry,
       control: false,