@innovaccer/design-system 2.5.0-2 → 2.5.1

package/core/components/organisms/dateRangePicker/utilities.tsx

@@ -61,11 +61,8 @@ export const getPrevious90Days = () => {
 };
 
 export const getCustomDates = () => {
-  const current = new Date();
-  const currentDate = current.getDate();
-
   return {
-    startDate: setDate(currentDate),
-    endDate: setDate(currentDate),
+    startDate: '',
+    endDate: '',
   };
 };

package/core/components/organisms/grid/Cell.tsx

@@ -58,8 +58,8 @@ const HeaderCell = (props: HeaderCellProps) => {
   const el = React.createRef<HTMLDivElement>();
 
   const sortOptions: DropdownProps['options'] = [
-    { label: 'Sort Ascending', value: 'sortAsc', icon: 'arrow_downward' },
-    { label: 'Sort Descending', value: 'sortDesc', icon: 'arrow_upward' },
+    { label: 'Sort Ascending', value: 'sortAsc', icon: 'arrow_upward' },
+    { label: 'Sort Descending', value: 'sortDesc', icon: 'arrow_downward' },
   ];
   const pinOptions: DropdownProps['options'] = [
     { label: 'Pin Left', value: 'pinLeft', icon: 'skip_previous' },
@@ -98,9 +98,9 @@ const HeaderCell = (props: HeaderCellProps) => {
         <div className="Grid-sortingIcons">
           {sorted ? (
             sorted === 'asc' ? (
-              <Icon name="arrow_downward" />
-            ) : (
               <Icon name="arrow_upward" />
+            ) : (
+              <Icon name="arrow_downward" />
             )
           ) : (
             <Icon name="unfold_more" />
@@ -114,6 +114,7 @@ const HeaderCell = (props: HeaderCellProps) => {
     <div key={name} className={classes} ref={el}>
       <div
         className="Grid-cellContent"
+        data-test="DesignSystem-Grid-cellContent"
         onClick={() => {
           if (!loading && sorting) {
             if (sorted === 'asc') onMenuChange(name, 'sortDesc');

package/core/components/organisms/grid/Grid.tsx

@@ -321,7 +321,7 @@ export class Grid extends React.Component<GridProps, GridState> {
       this.addScrollListeners();
     }
 
-    if (prevProps.page !== this.props.page) {
+    if (prevProps.page !== this.props.page || prevProps.error !== this.props.error) {
       this.removeScrollListeners();
       this.addScrollListeners();
     }

package/core/components/organisms/grid/GridCell.tsx

@@ -128,7 +128,7 @@ const renderMetaList = (props: CellProps) => {
 
   if (metaList) {
     return (
-      <div className="GridCell-metaList">
+      <div className="GridCell-metaList" data-test="DesignSystem-GridCell-metaList">
         {metaList.map((list, index) => (
           <Text key={index} className="ellipsis" appearance={'subtle'} size="small">
             {list}
@@ -204,7 +204,11 @@ export const GridCell = (props: GridCellProps) => {
     case 'DEFAULT':
       return (
         <div className={`${cellClass} GridCell--align-${align} GridCell--default`}>
-          {loading ? <PlaceholderParagraph length="medium" /> : renderTitle({ tooltip, cellData })}
+          {loading ? (
+            <PlaceholderParagraph length="medium" data-test="DesignSystem-GridCell-placeHolder" />
+          ) : (
+            renderTitle({ tooltip, cellData })
+          )}
         </div>
       );
 
@@ -213,7 +217,7 @@ export const GridCell = (props: GridCellProps) => {
         <div className={`${cellClass} GridCell--metaList`}>
           {loading ? (
             <>
-              <PlaceholderParagraph length="medium" />
+              <PlaceholderParagraph length="medium" data-test="DesignSystem-GridCell-withMetaList" />
               <PlaceholderParagraph length="large" size="xxs" />
             </>
           ) : (
@@ -230,7 +234,10 @@ export const GridCell = (props: GridCellProps) => {
         return <Placeholder className={`GridCell--align-${align}`} imageSize={'medium'} round={true} />;
       }
       return (
-        <div className={`${cellClass} GridCell--align-${align} GridCell--avatar`}>
+        <div
+          className={`${cellClass} GridCell--align-${align} GridCell--avatar`}
+          data-test="DesignSystem-GridCell-avatar"
+        >
           {size !== 'tight' && renderAvatar({ cellData })}
         </div>
       );
@@ -244,7 +251,7 @@ export const GridCell = (props: GridCellProps) => {
         );
       }
       return (
-        <div className={`${cellClass} GridCell--avatarWithText`}>
+        <div className={`${cellClass}   `} data-test="DesignSystem-GridCell-avatarWithText">
           {size !== 'tight' && renderAvatar({ cellData })}
           {renderTitle({ tooltip, cellData })}
         </div>
@@ -260,7 +267,7 @@ export const GridCell = (props: GridCellProps) => {
         );
       }
       return (
-        <div className={`${cellClass} GridCell--avatarWithText`}>
+        <div className={`${cellClass} GridCell--avatarWithText`} data-test="DesignSystem-GridCell-avatarWithMetaList">
           {size !== 'tight' && renderAvatar({ cellData })}
           <div className="GridCell-metaListWrapper">
             {renderTitle({ tooltip, cellData })}
@@ -273,7 +280,11 @@ export const GridCell = (props: GridCellProps) => {
       if (loading) {
         return <Placeholder className={`GridCell--align-${align}`} imageSize={'small'} round={true} />;
       }
-      return <div className={`${cellClass} GridCell--align-${align} GridCell--icon`}>{renderIcon({ cellData })}</div>;
+      return (
+        <div className={`${cellClass} GridCell--align-${align} GridCell--icon`} data-test="DesignSystem-GridCell-icon">
+          {renderIcon({ cellData })}
+        </div>
+      );
 
     case 'STATUS_HINT':
       return (

package/core/components/organisms/grid/GridHead.tsx

@@ -81,7 +81,7 @@ export const GridHead = (props: GridHeadProps) => {
   };
 
   return (
-    <div className="Grid-head">
+    <div className="Grid-head" data-test="DesignSystem-GridHead-wrapper">
       <div className="Grid-row Grid-row--head">
         {renderSchema(leftPinnedSchema, !!leftPinnedSchema.length, 'left')}
         {renderSchema(unpinnedSchema, !leftPinnedSchema.length && !!unpinnedSchema.length)}

package/core/components/organisms/grid/GridRow.tsx

@@ -25,13 +25,9 @@ export const GridRow = (props: GridRowProps) => {
   const rowRef = React.useRef<HTMLDivElement>(null);
   const [expanded, setExpanded] = React.useState<boolean>(false);
 
-  const rowClasses = classNames(
-    'Grid-row',
-    'Grid-row--body',
-    {
-      'Grid-row--selected': data._selected
-    }
-  );
+  const rowClasses = classNames('Grid-row', 'Grid-row--body', {
+    'Grid-row--selected': data._selected,
+  });
 
   const onClickHandler = React.useCallback(() => {
     if (type === 'resource' && !loading) {
@@ -75,7 +71,7 @@ export const GridRow = (props: GridRowProps) => {
       });
 
       return (
-        <div className={classes}>
+        <div className={classes} data-test="DesignSystem-Grid-cellGroup">
           {renderCheckbox(shouldRenderCheckbox)}
           {currSchema.map((s, index) => {
             let cI = pinned === 'left' ? index : leftPinnedSchema.length + index;
@@ -113,10 +109,7 @@ export const GridRow = (props: GridRowProps) => {
       </div>
       {nestedRows && expanded && (
         <div className="Grid-nestedRow">
-          <GridNestedRow
-            data={data}
-            rowIndex={rI}
-          />
+          <GridNestedRow data={data} rowIndex={rI} />
         </div>
       )}
     </div>

package/core/components/organisms/grid/__tests__/Grid.test.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { render } from '@testing-library/react';
+import { render, fireEvent } from '@testing-library/react';
 import { Grid } from '@/index';
 import { GridProps as Props } from '@/index.type';
 import { testHelper, filterUndefined, valueHelper, testMessageHelper } from '@/utils/testHelper';
@@ -19,6 +19,11 @@ const headCellTooltip = [true, false];
 const separator = [true, false];
 const showFilters = [true, false];
 const FunctionValue = jest.fn();
+const onSelectAll = jest.fn();
+const updateSortingList = jest.fn();
+const updateSchema = jest.fn();
+const updateFilterList = jest.fn();
+const nestedRowRenderer = jest.fn();
 
 describe('Grid component', () => {
   const mapper: Record<string, any> = {
@@ -55,3 +60,176 @@ describe('Grid component', () => {
 
   testHelper(mapper, testFunc);
 });
+
+describe('renders Grid with showHead true and false', () => {
+  it('renders Grid with showHead true', () => {
+    const { queryByTestId } = render(<Grid showHead={true} />);
+    expect(queryByTestId('DesignSystem-GridHead-wrapper')).toBeInTheDocument();
+  });
+  it('renders Grid with showHead false', () => {
+    const { queryByTestId } = render(<Grid showHead={false} />);
+    expect(queryByTestId('DesignSystem-GridHead-wrapper')).not.toBeInTheDocument();
+  });
+});
+
+describe('Grid component prop: onSelectAll when withCheckbox is true', () => {
+  it('calls onSelectAll when head checkbox is rendered', () => {
+    const schema = [
+      {
+        name: 'name',
+        displayName: 'Name',
+        width: '50%',
+      },
+    ];
+    const { getByTestId } = render(<Grid schema={schema} withCheckbox={true} onSelectAll={onSelectAll} />);
+    const input = getByTestId('DesignSystem-Checkbox-InputBox');
+    fireEvent.click(input);
+    expect(onSelectAll).toHaveBeenCalledTimes(1);
+  });
+});
+
+describe('render Grid component prop: updateSortingList with sortTypes', () => {
+  const schema = [
+    {
+      name: 'name',
+      displayName: 'Name',
+      width: '50%',
+    },
+  ];
+  const data = [
+    {
+      name: 'Zara',
+      gender: 'f',
+    },
+  ];
+  it('calls updateSortingList with sorting order as asc when no sortingList is passed', () => {
+    const { getAllByTestId } = render(
+      <Grid
+        schema={schema}
+        data={data}
+        withCheckbox={true}
+        withPagination={true}
+        updateSortingList={updateSortingList}
+      />
+    );
+    const input = getAllByTestId('DesignSystem-Grid-cellContent')[0];
+    fireEvent.click(input);
+    expect(updateSortingList).toHaveBeenCalledTimes(1);
+    expect(updateSortingList).toHaveBeenCalledWith([{ name: 'name', type: 'asc' }]);
+  });
+
+  it('calls updateSortingList without sorting order when  sortingList is passed with type desc', () => {
+    const { getByTestId } = render(
+      <Grid
+        schema={schema}
+        data={data}
+        withCheckbox={true}
+        withPagination={true}
+        updateSortingList={updateSortingList}
+        sortingList={[{ name: 'name', type: 'desc' }]}
+      />
+    );
+    const input = getByTestId('DesignSystem-Grid-cellContent');
+    fireEvent.click(input);
+    expect(updateSortingList).toHaveBeenCalled();
+    expect(updateSortingList.mock.calls[1]).toEqual([[]]);
+  });
+
+  it('calls updateSortingList with sorting order as desc when  sortingList is passed with type asc', () => {
+    const { getByTestId } = render(
+      <Grid
+        schema={schema}
+        data={data}
+        withCheckbox={true}
+        withPagination={true}
+        updateSortingList={updateSortingList}
+        sortingList={[{ name: 'name', type: 'asc' }]}
+      />
+    );
+    const input = getByTestId('DesignSystem-Grid-cellContent');
+    fireEvent.click(input);
+    expect(updateSortingList).toHaveBeenCalled();
+    expect(updateSortingList.mock.calls[2]).toEqual([[{ name: 'name', type: 'desc' }]]);
+  });
+});
+
+describe('render Grid component prop: updateSchema ', () => {
+  const schema = [
+    {
+      name: 'name',
+      displayName: 'Name',
+      width: '50%',
+    },
+  ];
+  const data = [
+    {
+      name: 'Zara',
+      selected: true,
+    },
+  ];
+  it('calls updateSchema with pinned left', () => {
+    const { getAllByTestId } = render(<Grid schema={schema} showMenu={true} data={data} updateSchema={updateSchema} />);
+    const popoverButton = getAllByTestId('DesignSystem-Button')[0];
+    fireEvent.click(popoverButton);
+    const dropdownOption = getAllByTestId('DesignSystem-DropdownOption--WITH_ICON')[2];
+    fireEvent.click(dropdownOption);
+    expect(updateSchema).toHaveBeenCalledTimes(1);
+    expect(updateSchema).toHaveBeenCalledWith([{ displayName: 'Name', name: 'name', pinned: 'left', width: '50%' }]);
+  });
+  it('calls updateSchema with pinned right', () => {
+    const { getAllByTestId } = render(<Grid schema={schema} showMenu={true} data={data} updateSchema={updateSchema} />);
+    const popoverButton = getAllByTestId('DesignSystem-Button')[0];
+    fireEvent.click(popoverButton);
+    const dropdownOption = getAllByTestId('DesignSystem-DropdownOption--WITH_ICON')[3];
+    fireEvent.click(dropdownOption);
+    expect(updateSchema).toHaveBeenCalledTimes(2);
+    expect(updateSchema).toHaveBeenCalledWith([{ displayName: 'Name', name: 'name', pinned: 'right', width: '50%' }]);
+  });
+  it('calls updateSchema with hidden true', () => {
+    const { getAllByTestId } = render(<Grid schema={schema} showMenu={true} data={data} updateSchema={updateSchema} />);
+    const popoverButton = getAllByTestId('DesignSystem-Button')[0];
+    fireEvent.click(popoverButton);
+    const dropdownOption = getAllByTestId('DesignSystem-DropdownOption--WITH_ICON')[4];
+    fireEvent.click(dropdownOption);
+    expect(updateSchema).toHaveBeenCalledTimes(3);
+    expect(updateSchema).toHaveBeenCalledWith([{ displayName: 'Name', name: 'name', hidden: true, width: '50%' }]);
+  });
+});
+
+describe('renders children with pagination and page', () => {
+  const schema = [
+    {
+      name: 'name',
+      displayName: 'Name',
+      width: '50%',
+      filters: [{ label: 'Sort Descending', value: 'sortDesc', icon: 'arrow_upward' }],
+    },
+  ];
+  const data = [{ name: 'Zara' }];
+  it('renders children with pagination', () => {
+    const { getAllByTestId } = render(
+      <Grid withPagination={true} schema={schema} data={data} showFilters={true} updateFilterList={updateFilterList} />
+    );
+    const popoverButton = getAllByTestId('DesignSystem-Button')[0];
+    fireEvent.click(popoverButton);
+    const dropdownOption = getAllByTestId('DesignSystem-Checkbox-InputBox')[0];
+    fireEvent.click(dropdownOption);
+    const applyButton = getAllByTestId('DesignSystem-Button')[2];
+    fireEvent.click(applyButton);
+    expect(updateFilterList).toHaveBeenCalledTimes(1);
+  });
+});
+
+describe('renders children with nestedRows', () => {
+  const schema = [
+    {
+      name: 'name',
+      displayName: 'Name',
+    },
+  ];
+  const data = [{ name: 'Zara' }];
+  it('renders children with nestedRows', () => {
+    render(<Grid schema={schema} data={data} nestedRows={true} nestedRowRenderer={nestedRowRenderer} />);
+    expect(nestedRowRenderer).toBeCalled();
+  });
+});

package/core/components/organisms/grid/__tests__/GridCell.test.tsx

@@ -0,0 +1,218 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+import { GridCell } from '@/index';
+
+describe('renders GridCell with no cellType ', () => {
+  it('renders Grid with  no cellType , loading true ', () => {
+    const { queryByTestId } = render(
+      <GridCell
+        schema={{
+          displayName: 'Name',
+          name: 'name',
+        }}
+        data={{ name: 'Zara' }}
+        loading={true}
+      />
+    );
+    expect(queryByTestId('DesignSystem-GridCell-placeHolder')).toBeInTheDocument();
+  });
+  it('renders Grid with  no cellType , loading false ', () => {
+    const { queryByTestId } = render(
+      <GridCell
+        schema={{
+          displayName: 'Name',
+          name: 'name',
+        }}
+        data={{ name: 'Zara' }}
+      />
+    );
+    expect(queryByTestId('DesignSystem-Text')).toBeInTheDocument();
+  });
+});
+
+describe('renders GridCell with cellType WITH_META_LIST', () => {
+  it('renders Grid with loading true ', () => {
+    const { getByTestId } = render(
+      <GridCell
+        schema={{
+          displayName: 'Name',
+          name: 'name',
+          cellType: 'WITH_META_LIST',
+        }}
+        data={{ name: 'Zara' }}
+        loading={true}
+      />
+    );
+    expect(getByTestId('DesignSystem-GridCell-withMetaList')).toBeInTheDocument();
+  });
+
+  it('renders Grid with loading false', () => {
+    const { queryByTestId } = render(
+      <GridCell
+        schema={{
+          cellType: 'WITH_META_LIST',
+          displayName: 'Name',
+          name: 'name',
+        }}
+        data={{ name: { metaList: ['Meta Item 1'] } }}
+      />
+    );
+    expect(queryByTestId('DesignSystem-GridCell-metaList')).toBeInTheDocument();
+  });
+});
+
+describe('renders GridCell with cellType AVATAR', () => {
+  it('renders Grid with loading true ', () => {
+    const { queryByTestId } = render(
+      <GridCell
+        schema={{
+          displayName: 'Name',
+          name: 'name',
+          cellType: 'AVATAR',
+          align: 'right',
+        }}
+        data={{ name: 'Zara' }}
+        loading={true}
+      />
+    );
+    expect(queryByTestId('DesignSystem-Placeholder')).toBeInTheDocument();
+    expect(queryByTestId('DesignSystem-Placeholder')).toHaveClass('GridCell--align-right');
+  });
+
+  it('renders Grid with loading false', () => {
+    const { queryByTestId } = render(
+      <GridCell
+        schema={{
+          cellType: 'AVATAR',
+          displayName: 'Name',
+          name: 'name',
+        }}
+        data={{ name: 'Zara' }}
+      />
+    );
+    expect(queryByTestId('DesignSystem-GridCell-avatar')).toBeInTheDocument();
+    expect(queryByTestId('DesignSystem-GridCell-avatar')).toHaveClass('GridCell--avatar');
+  });
+});
+
+describe('renders GridCell with cellType AVATAR_WITH_TEXT', () => {
+  it('renders Grid with loading true ', () => {
+    const { queryByTestId } = render(
+      <GridCell
+        schema={{
+          displayName: 'Name',
+          name: 'name',
+          cellType: 'AVATAR_WITH_TEXT',
+        }}
+        data={{ name: 'Zara' }}
+        loading={true}
+      />
+    );
+    expect(queryByTestId('DesignSystem-Placeholder')).toBeInTheDocument();
+  });
+
+  it('renders Grid with loading false', () => {
+    const { queryByTestId } = render(
+      <GridCell
+        schema={{
+          cellType: 'AVATAR_WITH_TEXT',
+          displayName: 'Name',
+          name: 'name',
+        }}
+        data={{ name: 'Zara' }}
+      />
+    );
+    expect(queryByTestId('DesignSystem-GridCell-avatarWithText')).toBeInTheDocument();
+  });
+});
+describe('renders GridCell with cellType AVATAR_WITH_META_LIST', () => {
+  it('renders Grid with loading true ', () => {
+    const { queryByTestId } = render(
+      <GridCell
+        schema={{
+          displayName: 'Name',
+          name: 'name',
+          cellType: 'AVATAR_WITH_META_LIST',
+        }}
+        data={{ name: 'Zara' }}
+        loading={true}
+      />
+    );
+    expect(queryByTestId('DesignSystem-Placeholder')).toBeInTheDocument();
+  });
+
+  it('renders Grid with loading false', () => {
+    const { queryByTestId } = render(
+      <GridCell
+        schema={{
+          cellType: 'AVATAR_WITH_META_LIST',
+          displayName: 'Name',
+          name: 'name',
+        }}
+        data={{ name: 'Zara' }}
+      />
+    );
+    expect(queryByTestId('DesignSystem-GridCell-avatarWithMetaList')).toBeInTheDocument();
+    expect(queryByTestId('DesignSystem-GridCell-avatarWithMetaList')).toHaveClass('GridCell--avatarWithText');
+  });
+});
+describe('renders GridCell with cellType ICON', () => {
+  it('renders Grid with loading true ', () => {
+    const { queryByTestId } = render(
+      <GridCell
+        schema={{
+          displayName: 'Name',
+          name: 'name',
+          cellType: 'ICON',
+        }}
+        data={{ name: 'Zara' }}
+        loading={true}
+      />
+    );
+    expect(queryByTestId('DesignSystem-Placeholder')).toBeInTheDocument();
+  });
+
+  it('renders Grid with loading false', () => {
+    const { queryByTestId } = render(
+      <GridCell
+        schema={{
+          cellType: 'ICON',
+          displayName: 'Name',
+          name: 'name',
+        }}
+        data={{ name: 'Zara' }}
+      />
+    );
+    expect(queryByTestId('DesignSystem-GridCell-icon')).toHaveClass('GridCell--icon');
+  });
+});
+describe('renders GridCell with cellType STATUS_HINT', () => {
+  it('renders Grid with loading true ', () => {
+    const { queryByTestId } = render(
+      <GridCell
+        schema={{
+          displayName: 'Name',
+          name: 'name',
+          cellType: 'STATUS_HINT',
+        }}
+        data={{ name: 'Zara' }}
+        loading={true}
+      />
+    );
+    expect(queryByTestId('DesignSystem-Placeholder')).toBeInTheDocument();
+  });
+
+  it('renders Grid with loading false', () => {
+    const { queryByTestId } = render(
+      <GridCell
+        schema={{
+          cellType: 'STATUS_HINT',
+          displayName: 'Name',
+          name: 'name',
+        }}
+        data={{ name: { statusAppearance: 'info', title: 'title' } }}
+      />
+    );
+    expect(queryByTestId('DesignSystem-StatusHint')).toBeInTheDocument();
+  });
+});