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

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

@@ -1,6 +1,5 @@
 import { mount, shallow } from 'enzyme';
 import React from 'react';
-import { act } from 'react-dom/test-utils';
 import { Button } from '../../Buttons';
 import { DynamicListColumn } from '../DynamicDataList.model';
 import { DynamicListRow, DynamicListRowProps } from './DynamicListRow';
@@ -50,7 +49,6 @@ const defaultProps: DynamicListRowProps<DynamicListRowTestData> = {
   positionKey: 'position',
   horizontalTextAlign: 'left',
   verticalTextAlign: 'center',
-  allowReordering: false,
   allowRemove: false,
 };
 
@@ -72,6 +70,7 @@ describe('DynamicListRow', () => {
       <DynamicListRow
         columns={defaultColumns}
         columnSizes={defaultProps.columnSizes}
+        rowHeight={defaultProps.rowHeight}
         data={defaultProps.data}
       />,
     );
@@ -80,7 +79,10 @@ describe('DynamicListRow', () => {
 
     expect(row.prop('style')).toHaveProperty('gridColumnGap', undefined);
     expect(row.prop('style')).toHaveProperty('alignItems', undefined);
-    expect(row.prop('style')).toHaveProperty('gridAutoRows', undefined);
+    expect(row.prop('style')).toHaveProperty(
+      'gridAutoRows',
+      `minmax(50px, ${defaultProps.rowHeight})`,
+    );
     expect(row.prop('style')).toHaveProperty(
       'gridTemplateColumns',
       defaultProps.columnSizes,
@@ -103,7 +105,7 @@ describe('DynamicListRow', () => {
     );
     expect(row.prop('style')).toHaveProperty(
       'gridAutoRows',
-      defaultProps.rowHeight,
+      `minmax(50px, ${defaultProps.rowHeight})`,
     );
     expect(row.prop('style')).toHaveProperty(
       'gridTemplateColumns',
@@ -117,7 +119,11 @@ describe('DynamicListRow', () => {
 
   it(`Button component should have type of 'button'`, () => {
     const wrapper = mount(
-      <DynamicListRow {...defaultProps} allowRemove={true} />,
+      <DynamicListRow
+        {...defaultProps}
+        allowRemove={true}
+        showActionColumn={true}
+      />,
     );
 
     const button = wrapper.find(Button);
@@ -137,7 +143,7 @@ describe('DynamicListRow', () => {
     });
   });
 
-  it(`renders the position column if a 'positionKey' prop is set and 'allowReordering' is set to true`, () => {
+  it(`renders the position column if 'showPositionColumn' is set to true`, () => {
     const dataWithPosition: DynamicListRowTestData = {
       id: 0,
       desc: 'tes',
@@ -151,7 +157,7 @@ describe('DynamicListRow', () => {
         columns={defaultColumns}
         data={dataWithPosition}
         positionKey={'position'}
-        allowReordering={true}
+        showPositionColumn={true}
       />,
     );
 
@@ -160,29 +166,7 @@ describe('DynamicListRow', () => {
     expect(position.exists()).toBe(true);
   });
 
-  it(`doesn't render the position column if a 'positionKey' isn't set`, () => {
-    const dataWithPosition: DynamicListRowTestData = {
-      id: 0,
-      desc: 'tes',
-      title: 'a title',
-      position: 3,
-    };
-
-    const wrapper = shallow(
-      <DynamicListRow
-        columnSizes={''}
-        columns={defaultColumns}
-        data={dataWithPosition}
-        allowReordering={true}
-      />,
-    );
-
-    const position = wrapper.find('.position');
-
-    expect(position.exists()).toBe(false);
-  });
-
-  it(`doesn't render the position column if 'allowReordering' is false`, () => {
+  it(`doesn't render the position column if 'showPositionColumn' is false`, () => {
     const dataWithPosition: DynamicListRowTestData = {
       id: 0,
       desc: 'tes',
@@ -196,7 +180,7 @@ describe('DynamicListRow', () => {
         columns={defaultColumns}
         data={dataWithPosition}
         positionKey={'position'}
-        allowReordering={false}
+        showPositionColumn={false}
       />,
     );
 
@@ -226,216 +210,39 @@ describe('DynamicListRow', () => {
     expect(actualColumns.at(0).text()).toBe('Changed: title');
   });
 
-  it(`if dragging is allowed, emits onDragStart with current row position. also adds 'dragging' class`, () => {
-    const dragSpy = jest.fn();
-    const propagateSpy = jest.fn();
-    const preventDefault = jest.fn();
-    const effectAllowedSpy = jest.fn();
-    const mockDragEvent = {
-      event: 'event',
-      stopPropagation: propagateSpy,
-      preventDefault: preventDefault,
-      dataTransfer: { effectAllowed: effectAllowedSpy },
-    };
-
-    const wrapper = shallow(
-      <DynamicListRow
-        columns={defaultColumns}
-        columnSizes={defaultProps.columnSizes}
-        data={dataWithPosition}
-        onDragStart={dragSpy}
-        positionKey={'position'}
-      />,
-    );
-
-    let row = wrapper.find('.container');
-
-    expect(row.hasClass('dragging')).toBe(false);
-
-    wrapper.setProps({ dragging: true });
-
-    act(() => {
-      // @ts-expect-error not full event args object
-      row.prop('onDragStart')(mockDragEvent);
-    });
-
-    wrapper.update();
-
-    row = wrapper.find('.container');
-
-    expect(dragSpy).toHaveBeenCalledTimes(1);
-    expect(dragSpy).toHaveBeenCalledWith(
-      mockDragEvent,
-      dataWithPosition.position,
-    );
-    expect(row.hasClass('dragging')).toBe(true);
-  });
-
-  it(`doesn't allow dragging by default`, () => {
-    const wrapper = shallow(
-      <DynamicListRow
-        columns={defaultColumns}
-        columnSizes={defaultProps.columnSizes}
-        data={dataWithPosition}
-        positionKey={'position'}
-      />,
-    );
-
-    const row = wrapper.find('.container');
-
-    expect(row.prop('draggable')).toBe(false);
-  });
-
-  it(`doesn't allow dragging if allowDragging is 'false'`, () => {
+  it(`doesn't allow dragging if showPositionColumn is 'false'`, () => {
     const wrapper = shallow(
       <DynamicListRow
         columns={defaultColumns}
         columnSizes={defaultProps.columnSizes}
         data={dataWithPosition}
         allowDragging={false}
-        allowReordering={true}
+        showPositionColumn={true}
         positionKey={'position'}
       />,
     );
 
-    const row = wrapper.find('.container');
     const dragIcon = wrapper.find('.draggable');
-
-    expect(row.prop('draggable')).toBe(false);
     expect(dragIcon.exists()).toBe(false);
   });
 
-  it(`doesn't allow dragging if allowReordering is 'false'`, () => {
+  it(`only allows dragging if both showPositionColumn and allowDragging are 'true'`, () => {
     const wrapper = shallow(
       <DynamicListRow
         columns={defaultColumns}
         columnSizes={defaultProps.columnSizes}
         data={dataWithPosition}
         allowDragging={true}
-        allowReordering={false}
+        showPositionColumn={true}
         positionKey={'position'}
       />,
     );
 
-    const row = wrapper.find('.container');
     const dragIcon = wrapper.find('.draggable');
 
-    expect(row.prop('draggable')).toBe(false);
-    expect(dragIcon.exists()).toBe(false);
-  });
-
-  it(`only allows dragging if both allowReordering and allowDragging are 'true'`, () => {
-    const wrapper = shallow(
-      <DynamicListRow
-        columns={defaultColumns}
-        columnSizes={defaultProps.columnSizes}
-        data={dataWithPosition}
-        allowDragging={true}
-        allowReordering={true}
-        positionKey={'position'}
-      />,
-    );
-
-    const row = wrapper.find('.container');
-    const dragIcon = wrapper.find('.draggable');
-
-    expect(row.prop('draggable')).toBe(true);
     expect(dragIcon.exists()).toBe(true);
   });
 
-  it(`emits onDragEnd with event and removes 'dragging' class`, () => {
-    const dragSpy = jest.fn();
-    const propagateSpy = jest.fn();
-    const preventDefault = jest.fn();
-    const effectAllowedSpy = jest.fn();
-    const mockDragEvent = {
-      event: 'event',
-      stopPropagation: propagateSpy,
-      preventDefault: preventDefault,
-      dataTransfer: { effectAllowed: effectAllowedSpy },
-    };
-
-    const wrapper = shallow(
-      <DynamicListRow
-        columns={defaultColumns}
-        columnSizes={defaultProps.columnSizes}
-        data={defaultProps.data}
-        onDragEnd={dragSpy}
-        dragging={true}
-      />,
-    );
-
-    let row = wrapper.find('.container');
-
-    act(() => {
-      // @ts-expect-error not full event args object
-      row.prop('onDragStart')(mockDragEvent);
-    });
-
-    wrapper.update();
-
-    row = wrapper.find('.container');
-
-    expect(row.hasClass('dragging')).toBe(true);
-
-    wrapper.setProps({ dragging: false });
-
-    act(() => {
-      // @ts-expect-error not full event args object
-      row.prop('onDragEnd')(mockDragEvent);
-    });
-
-    row = wrapper.find('.container');
-
-    expect(dragSpy).toHaveBeenCalledTimes(1);
-    expect(dragSpy).toHaveBeenCalledWith(mockDragEvent);
-    expect(row.hasClass('dragging')).toBe(false);
-  });
-
-  // TODO: figure out how to mock getBoundingClientRect
-  // it(`adds 'draggedAbove' or 'draggedBelow' class when a dragged element enters the drop zone`, () => {
-  //   const propagateSpy = jest.fn();
-  //   const preventDefaultSpy = jest.fn();
-  //   const dropEffectSpy = jest.fn();
-  //   const getBoundingClientRectSpy = jest.fn(() => ({ top: 100, height: 150 }));
-  //   const mockDragEvent = {
-  //     event: {
-  //       currentTarget: { getBoundingClientRect: getBoundingClientRectSpy },
-  //     },
-  //     stopPropagation: propagateSpy,
-  //     preventDefault: preventDefaultSpy,
-  //     dataTransfer: { dropEffect: dropEffectSpy },
-  //   };
-
-  //   const wrapper = shallow(
-  //     <DynamicListRow
-  //       columns={defaultColumns}
-  //       columnSizes={defaultProps.columnSizes}
-  //       data={dataWithPosition}
-  //       positionKey={'position'}
-  //     />,
-  //   );
-
-  //   let row = wrapper.find('.container');
-
-  //   expect(row.hasClass('draggedAbove')).toBe(false);
-
-  //   act(() => {
-  //     // @ts-ignore
-  //     row.prop('onDragOver')(mockDragEvent);
-  //   });
-
-  //   wrapper.update();
-
-  //   console.log(wrapper.debug());
-
-  //   row = wrapper.find('.container');
-
-  //   expect(row.hasClass('draggedAbove')).toBe(true);
-  // });
-
-  it.todo(`onDrop removes 'draggedAbove' or 'draggedBelow'`);
-
   it(`doesn't display an action button by default`, () => {
     const wrapper = shallow(
       <DynamicListRow
@@ -450,13 +257,14 @@ describe('DynamicListRow', () => {
     expect(button.exists()).toBe(false);
   });
 
-  it(`displays an action button if 'allowRemove' is set to true`, () => {
+  it(`displays an action button if 'showActionColumn' is set to true`, () => {
     const wrapper = shallow(
       <DynamicListRow
         columns={defaultColumns}
         columnSizes={defaultProps.columnSizes}
         data={defaultProps.data}
         allowRemove={true}
+        showActionColumn={true}
       />,
     );
 
@@ -474,6 +282,7 @@ describe('DynamicListRow', () => {
         data={defaultProps.data}
         allowRemove={true}
         onActionClicked={spy}
+        showActionColumn={true}
       />,
     );
 
@@ -485,27 +294,6 @@ describe('DynamicListRow', () => {
     expect(spy).toHaveBeenCalledWith(defaultData);
   });
 
-  it(`input width and height should be the same as the 'rowHeight' prop if its set`, () => {
-    const mockHeight = '70px';
-    const wrapper = mount(
-      <DynamicListRow
-        columns={defaultColumns}
-        columnSizes={defaultProps.columnSizes}
-        data={dataWithPosition}
-        positionKey={'position'}
-        allowReordering={true}
-        rowHeight={mockHeight}
-      />,
-    );
-
-    const inputStyles = wrapper
-      .find('input')
-      .prop('style') as React.CSSProperties;
-
-    expect(inputStyles.height).toBe(mockHeight);
-    expect(inputStyles.width).toBe(mockHeight);
-  });
-
   it('emits onPositionInputChanged with the current position and the new target position', () => {
     const inputSpy = jest.fn();
     const mockNewPosition = '9';
@@ -516,7 +304,7 @@ describe('DynamicListRow', () => {
         data={dataWithPosition}
         onPositionInputChanged={inputSpy}
         positionKey={'position'}
-        allowReordering={true}
+        showPositionColumn={true}
       />,
     );
 
@@ -544,7 +332,7 @@ describe('DynamicListRow', () => {
         data={dataWithPosition}
         onPositionInputChanged={inputSpy}
         positionKey={'position'}
-        allowReordering={true}
+        showPositionColumn={true}
       />,
     );
 
@@ -566,7 +354,7 @@ describe('DynamicListRow', () => {
         columnSizes={defaultProps.columnSizes}
         data={dataWithPosition}
         positionKey={'position'}
-        allowReordering={true}
+        showPositionColumn={true}
       />,
     );
 
@@ -591,7 +379,7 @@ describe('DynamicListRow', () => {
         columnSizes={defaultProps.columnSizes}
         data={dataWithPosition}
         positionKey={'position'}
-        allowReordering={true}
+        showPositionColumn={true}
       />,
     );
 
@@ -608,21 +396,6 @@ describe('DynamicListRow', () => {
     expect(input.prop('value')).toBe(dataWithPosition.position);
   });
 
-  it('disables pointer events while a row is being repositioned', () => {
-    const wrapper = shallow(
-      <DynamicListRow
-        columns={defaultColumns}
-        columnSizes={defaultProps.columnSizes}
-        data={defaultProps.data}
-        dragging={true}
-      />,
-    );
-
-    const row = wrapper.find('.container');
-
-    expect(row.hasClass('dragging')).toBe(true);
-  });
-
   describe('tooltip', () => {
     it(`renders a tooltip using the 'title' html attribute by default`, () => {
       const wrapper = shallow(