@innovaccer/design-system 2.5.0-2 → 2.5.1

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

@@ -0,0 +1,62 @@
+import * as rowUtility from '../rowUtility';
+
+describe('test updateBatchData', () => {
+  it('updates data at provided rowIndexes ', () => {
+    const data = [{ name: 'name', gender: 'f' }];
+    const rowIndexes = [0];
+    const dataUpdate = { age: 25 };
+    expect(rowUtility.updateBatchData(data, rowIndexes, dataUpdate)).toEqual([{ age: 25, gender: 'f', name: 'name' }]);
+  });
+});
+describe('test translateData', () => {
+  it('translate data with title', () => {
+    const schema = {
+      name: 'name',
+      displayName: 'Name',
+    };
+    const data = { name: 'zara' };
+    expect(rowUtility.translateData(schema, data)).toEqual({ name: { title: 'zara' } });
+  });
+  it('translate data when schema.translate present ', () => {
+    const schema = {
+      name: 'name',
+      displayName: 'Name',
+      translate: jest.fn(),
+    };
+    const data = { name: 'zara' };
+    schema.translate.mockReturnValueOnce('sara');
+    expect(rowUtility.translateData(schema, data)).toEqual({ name: { title: 'sara' } });
+  });
+});
+describe('test filterData', () => {
+  it(' test filterData  ', () => {
+    const schema = [
+      {
+        name: 'name',
+        displayName: 'Name',
+        onFilterChange: jest.fn(),
+      },
+    ];
+    const data = [{ name: 'zara', age: 25 }];
+    const filterList = { name: ['name'] };
+    schema[0].onFilterChange.mockReturnValueOnce({
+      age: 1,
+    });
+    expect(rowUtility.filterData(schema, data, filterList)).toEqual([{ age: 25, name: 'zara' }]);
+  });
+});
+describe('test sortData', () => {
+  it(' test sortData  ', () => {
+    const schema = [
+      {
+        name: 'name',
+        displayName: 'Name',
+      },
+    ];
+    const data = [{ name: 'sara' }, { name: 'zara' }];
+    expect(rowUtility.sortData(schema, data, [{ name: 'name', type: 'desc' }])).toEqual([
+      { name: 'zara' },
+      { name: 'sara' },
+    ]);
+  });
+});

package/core/components/organisms/inlineMessage/InlineMessage.tsx

@@ -23,17 +23,16 @@ export interface InlineMessageProps extends BaseProps {
 }
 
 export const InlineMessage = (props: InlineMessageProps) => {
-  const {
-    appearance,
-    className,
-    description
-  } = props;
+  const { appearance, className, description } = props;
 
   const baseProps = extractBaseProps(props);
 
-  const InlineMessageClass = classNames({
-    ['InlineMessage']: true
-  }, className);
+  const InlineMessageClass = classNames(
+    {
+      ['InlineMessage']: true,
+    },
+    className
+  );
 
   const IconClass = classNames({
     ['InlineMessage-icon']: true,
@@ -41,7 +40,7 @@ export const InlineMessage = (props: InlineMessageProps) => {
   });
 
   const DescriptionClass = classNames({
-    [`InlineMessage-text--${appearance}`]: appearance
+    [`InlineMessage-text--${appearance}`]: appearance,
   });
 
   return (
@@ -55,10 +54,7 @@ export const InlineMessage = (props: InlineMessageProps) => {
         />
       )}
       <div>
-        <Text
-          data-test="DesignSystem-InlineMessage--Description"
-          className={DescriptionClass}
-        >
+        <Text data-test="DesignSystem-InlineMessage--Description" className={DescriptionClass}>
           {description}
         </Text>
       </div>
@@ -69,7 +65,7 @@ export const InlineMessage = (props: InlineMessageProps) => {
 InlineMessage.displayName = 'InlineMessage';
 InlineMessage.defaultProps = {
   appearance: 'default',
-  description: ''
+  description: '',
 };
 
 export default InlineMessage;

package/core/components/organisms/inlineMessage/__stories__/InlineMessageWithinTable.story.tsx

@@ -23,11 +23,10 @@ const data = [
     lastName: 'Ciric',
     lastUpdated: 'May 19, 2020',
     recipients: 118467,
-  }
+  },
 ];
 
 export const InlineMessageWithinTable = () => {
-
   const schema: TableProps['schema'] = [
     {
       name: 'name',
@@ -36,9 +35,9 @@ export const InlineMessageWithinTable = () => {
       cellType: 'WITH_META_LIST',
       translate: (a) => ({
         title: a.name,
-        metaList: [`${a.recipients} recipients`]
+        metaList: [`${a.recipients} recipients`],
       }),
-      sorting: false
+      sorting: false,
     },
     {
       name: 'lastUpdated',
@@ -51,10 +50,8 @@ export const InlineMessageWithinTable = () => {
       displayName: 'Message',
       sorting: false,
       width: '40%',
-      cellRenderer: () => (
-        <InlineMessage appearance="info" description="Patient profile updated." />
-      )
-    }
+      cellRenderer: () => <InlineMessage appearance="info" description="Patient profile updated." />,
+    },
   ];
 
   return (
@@ -66,7 +63,7 @@ export const InlineMessageWithinTable = () => {
         schema={schema}
         withHeader={false}
         headerOptions={{
-          withSearch: false
+          withSearch: false,
         }}
       />
     </Card>
@@ -133,7 +130,7 @@ export default {
     docs: {
       docPage: {
         customCode,
-      }
-    }
-  }
+      },
+    },
+  },
 };

package/core/components/organisms/inlineMessage/__stories__/variants/Default.story.tsx

@@ -5,14 +5,12 @@ import { InlineMessage, Row, Column } from '@/index';
 export const defaultMessage = () => (
   <Row>
     <Column size="4">
-      <InlineMessage
-        description="Create a strong, unique password."
-      />
+      <InlineMessage description="Create a strong, unique password." />
     </Column>
   </Row>
 );
 
 export default {
   title: 'Components/InlineMessage/Variants/Default Message',
-  component: InlineMessage
+  component: InlineMessage,
 };

package/core/components/organisms/inlineMessage/__stories__/variants/Error.story.tsx

@@ -5,15 +5,12 @@ import { InlineMessage, Row, Column } from '@/index';
 export const alertMessage = () => (
   <Row>
     <Column size="4">
-      <InlineMessage
-        appearance="alert"
-        description="Inline message goes here."
-      />
+      <InlineMessage appearance="alert" description="Inline message goes here." />
     </Column>
   </Row>
 );
 
 export default {
   title: 'Components/InlineMessage/Variants/Alert Message',
-  component: InlineMessage
+  component: InlineMessage,
 };

package/core/components/organisms/inlineMessage/__stories__/variants/Info.story.tsx

@@ -5,15 +5,12 @@ import { InlineMessage, Row, Column } from '@/index';
 export const infoMessage = () => (
   <Row>
     <Column size="4">
-      <InlineMessage
-        appearance="info"
-        description="There are two new referral requests."
-      />
+      <InlineMessage appearance="info" description="There are two new referral requests." />
     </Column>
   </Row>
 );
 
 export default {
   title: 'Components/InlineMessage/Variants/Info Message',
-  component: InlineMessage
+  component: InlineMessage,
 };

package/core/components/organisms/inlineMessage/__stories__/variants/Success.story.tsx

@@ -5,15 +5,12 @@ import { InlineMessage, Row, Column } from '@/index';
 export const successMessage = () => (
   <Row>
     <Column size="4">
-      <InlineMessage
-        appearance="success"
-        description="Inline message goes here."
-      />
+      <InlineMessage appearance="success" description="Inline message goes here." />
     </Column>
   </Row>
 );
 
 export default {
   title: 'Components/InlineMessage/Variants/Success Message',
-  component: InlineMessage
+  component: InlineMessage,
 };

package/core/components/organisms/inlineMessage/__stories__/variants/Warning.story.tsx

@@ -4,15 +4,12 @@ import { InlineMessage, Row, Column } from '@/index';
 export const warningMessage = () => (
   <Row>
     <Column size="4">
-      <InlineMessage
-        appearance="warning"
-        description="Inline message goes here."
-      />
+      <InlineMessage appearance="warning" description="Inline message goes here." />
     </Column>
   </Row>
 );
 
 export default {
   title: 'Components/InlineMessage/Variants/Warning Message',
-  component: InlineMessage
+  component: InlineMessage,
 };

package/core/components/organisms/inlineMessage/__tests__/InlineMessage.test.tsx

@@ -4,31 +4,21 @@ import { testHelper, filterUndefined, valueHelper, testMessageHelper } from '@/u
 import { Appearance, InlineMessage } from '../InlineMessage';
 import { InlineMessageProps as Props } from '@/index.type';
 
-const appearance: Appearance[] = [
-  'default',
-  'alert',
-  'info',
-  'success',
-  'warning'
-];
+const appearance: Appearance[] = ['default', 'alert', 'info', 'success', 'warning'];
 
 const description = 'Inline Message here.';
 
 describe('InlineMessage component', () => {
   const mapper: Record<string, any> = {
     appearance: valueHelper(appearance, { required: true, iterate: true }),
-    description: valueHelper(description, { required: true })
+    description: valueHelper(description, { required: true }),
   };
 
   const testFunc = (props: Record<string, any>): void => {
     const attr = filterUndefined(props) as Props;
 
     it(testMessageHelper(attr), () => {
-      const { baseElement } = render(
-        <InlineMessage
-          {...attr}
-        />
-      );
+      const { baseElement } = render(<InlineMessage {...attr} />);
       expect(baseElement).toMatchSnapshot();
     });
   };
@@ -53,7 +43,6 @@ describe('InlineMessage component with prop:appearance', () => {
 });
 
 describe('InlineMessage component ', () => {
-
   it('check for icon when appearance:default', () => {
     render(<InlineMessage appearance="default" description={description} />);
     const IconComponent = screen.queryByText('DesignSystem-InlineMessage--Icon');
@@ -61,12 +50,7 @@ describe('InlineMessage component ', () => {
   });
 
   it('render component when appearance is not default', () => {
-    const { getByTestId } = render(
-      <InlineMessage
-        appearance="info"
-        description={description}
-      />
-    );
+    const { getByTestId } = render(<InlineMessage appearance="info" description={description} />);
     const descriptionID = getByTestId('DesignSystem-InlineMessage--Description');
     expect(descriptionID).toBeInTheDocument();
     expect(descriptionID.textContent).toMatch(description);

package/core/components/organisms/navigation/VerticalNavigation.tsx

@@ -136,10 +136,15 @@ export const VerticalNavigation = (props: VerticalNavigationProps) => {
     });
 
     return (
-      <div key={index}>
-        <div className={menuClasses} onClick={() => onClickHandler(menu)}>
+      <div key={index} data-test="DesignSystem-Navigation-VerticalNavigation--menuWrapper">
+        <div
+          data-test="DesignSystem-Navigation-VerticalNavigation--menuItem"
+          className={menuClasses}
+          onClick={() => onClickHandler(menu)}
+        >
           {menu.icon && (
             <Icon
+              data-test="DesignSystem-Navigation-VerticalNavigation--menuIcon"
               className={menuIconClasses}
               name={menu.icon}
               appearance={getIconAppearance(activeMenuIcon, menu.disabled)}
@@ -152,6 +157,7 @@ export const VerticalNavigation = (props: VerticalNavigationProps) => {
               </span>
               {menu.subMenu && menu.subMenu.length > 0 && (
                 <Icon
+                  data-test="DesignSystem-Navigation-VerticalNavigation--expandedSubMenuIcon"
                   className="mx-4"
                   name={menuState[menu.name] ? 'keyboard_arrow_up' : 'keyboard_arrow_down'}
                   appearance="subtle"
@@ -173,7 +179,12 @@ export const VerticalNavigation = (props: VerticalNavigationProps) => {
               });
 
               return (
-                <div key={ind} className={subMenuClasses} onClick={() => onClickHandler(subMenu)}>
+                <div
+                  data-test="DesignSystem-Navigation-VerticalNavigation--subMenu"
+                  key={ind}
+                  className={subMenuClasses}
+                  onClick={() => onClickHandler(subMenu)}
+                >
                   <Text appearance={getTextAppearance(isActive, subMenu.disabled)}>{subMenu.label}</Text>
                 </div>
               );

package/core/components/organisms/navigation/__tests__/Navigation.test.tsx

@@ -0,0 +1,179 @@
+import * as React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import Navigation, { NavigationProps as Props, Align, Menu } from '../Navigation';
+import { testHelper, filterUndefined, valueHelper, testMessageHelper } from '@/utils/testHelper';
+
+const onClick = jest.fn();
+const onToggle = jest.fn();
+const align: Align[] = ['left', 'center'];
+
+const menus: Menu[] = [
+  {
+    name: 'tab1',
+    label: 'Tab #1',
+    count: 1,
+    icon: 'event',
+  },
+  {
+    name: 'tab2',
+    label: 'Tab #2',
+    count: 2,
+    subMenu: [
+      {
+        name: 'tab2child1',
+        label: 'tab2child1',
+      },
+      {
+        name: 'tab2child2',
+        label: 'tab2child2',
+      },
+    ],
+  },
+  {
+    name: 'tab3',
+    label: 'Tab #3',
+    count: 3,
+    subMenu: [
+      {
+        name: 'tab3child1',
+        label: 'tab3child1',
+      },
+    ],
+  },
+];
+
+describe('Navigation component', () => {
+  const mapper = {
+    type: valueHelper('horizontal', { required: true }),
+    align: valueHelper(align, { required: true, iterate: true }),
+    menus: valueHelper(menus, { required: true }),
+    active: valueHelper(true, { required: true }),
+    onClick: valueHelper(onClick, { required: true }),
+    onToggle: valueHelper(onToggle, { required: true }),
+  };
+
+  const testFunc = (props: Record<string, any>): void => {
+    const attr = filterUndefined(props) as Props;
+
+    it(testMessageHelper(attr), () => {
+      const tree = render(<Navigation {...attr} />);
+      expect(tree).toMatchSnapshot();
+    });
+  };
+
+  testHelper(mapper, testFunc);
+});
+
+describe('Navigation component', () => {
+  const mapper = {
+    type: valueHelper('vertical', { required: true }),
+    menus: valueHelper(menus, { required: true }),
+    autoCollapse: valueHelper(false, { required: true }),
+    expanded: valueHelper(false, { required: true }),
+    rounded: valueHelper(true, { required: true }),
+    onClick: valueHelper(onClick, { required: true }),
+    onToggle: valueHelper(onToggle, { required: true }),
+  };
+
+  const testFunc = (props: Record<string, any>): void => {
+    const attr = filterUndefined(props) as Props;
+
+    it(testMessageHelper(attr), () => {
+      const tree = render(<Navigation {...attr} />);
+      expect(tree).toMatchSnapshot();
+    });
+  };
+
+  testHelper(mapper, testFunc);
+});
+
+describe('Navigation component', () => {
+  it('render horizontal nav when no type is passed', () => {
+    const { getAllByTestId } = render(<Navigation menus={menus} />);
+    expect(getAllByTestId('DesignSystem-HorizontalNav')[0]).toHaveClass('HorizontalNav-menu');
+  });
+
+  it('renders vertical nav when vertical type is passed', () => {
+    const { getAllByTestId } = render(<Navigation menus={menus} type="vertical" />);
+    expect(getAllByTestId('DesignSystem-Navigation-VerticalNavigation--menuWrapper')).toBeTruthy();
+  });
+});
+
+describe('Navigation component', () => {
+  it('render vertical nav when active is true', () => {
+    const { container } = render(<Navigation menus={menus} type="vertical" active={{ name: 'tab1' }} />);
+    expect(container.getElementsByClassName('Navigation-menu--active').length).toBe(1);
+  });
+  it('render vertical nav when active is not passed', () => {
+    const { container } = render(<Navigation menus={menus} type="vertical" />);
+    expect(container.getElementsByClassName('Navigation-menu--active').length).toBe(0);
+  });
+});
+
+describe('VerticalNavigation component', () => {
+  it('render vertical nav when subMenu  is passed and menu tab is active', () => {
+    const { getAllByTestId } = render(<Navigation menus={menus} type="vertical" active={{ name: 'tab2' }} />);
+    expect(getAllByTestId('DesignSystem-Navigation-VerticalNavigation--expandedSubMenuIcon')[0]).toHaveTextContent(
+      'keyboard_arrow_up_round'
+    );
+    expect(getAllByTestId('DesignSystem-Navigation-VerticalNavigation--expandedSubMenuIcon')[1]).toHaveTextContent(
+      'keyboard_arrow_down_round'
+    );
+  });
+
+  it('render vertical nav when subMenu  is not passed and menu tab is active', () => {
+    const { getAllByTestId } = render(<Navigation menus={menus} type="vertical" active={{ name: 'tab1' }} />);
+    expect(getAllByTestId('DesignSystem-Navigation-VerticalNavigation--menuItem')[0]).toHaveClass(
+      'Navigation-menu--active'
+    );
+  });
+
+  it('render vertical nav menu is expanded and rounded', () => {
+    const { getAllByTestId } = render(<Navigation menus={menus} type="vertical" rounded={true} />);
+    expect(getAllByTestId('DesignSystem-Navigation-VerticalNavigation--menuItem')[0]).toHaveClass(
+      'Navigation-menu--rounded'
+    );
+  });
+
+  it('render vertical nav menu is has icon', () => {
+    const { getByTestId } = render(<Navigation menus={menus} type="vertical" />);
+    expect(getByTestId('DesignSystem-Navigation-VerticalNavigation--menuIcon')).toHaveClass('Navigation-menuIcon');
+  });
+
+  it('render vertical nav menu is has icon and menu is active', () => {
+    const { getByTestId } = render(<Navigation menus={menus} type="vertical" active={{ name: 'tab1' }} />);
+    expect(getByTestId('DesignSystem-Navigation-VerticalNavigation--menuIcon')).toHaveClass(
+      'Navigation-menuIcon--active'
+    );
+  });
+});
+
+describe('Vertical Navigation component prop: onClick', () => {
+  it('renders vertical nav  component with  onClick without submenu ', () => {
+    const { getAllByTestId } = render(<Navigation onClick={onClick} menus={menus} type="vertical" />);
+    const menuClicked = getAllByTestId('DesignSystem-Navigation-VerticalNavigation--menuItem')[0];
+    fireEvent.click(menuClicked);
+    expect(onClick).toHaveBeenCalledTimes(1);
+    expect(onClick).toHaveBeenCalledWith(menus[0]);
+  });
+
+  it('renders vertical nav  component with onClick with subMenu and expanded false', () => {
+    const { getAllByTestId } = render(<Navigation onClick={onClick} menus={menus} type="vertical" expanded={false} />);
+    const menuClicked = getAllByTestId('DesignSystem-Navigation-VerticalNavigation--menuItem')[2];
+    fireEvent.click(menuClicked);
+    expect(onClick).toHaveBeenCalled();
+    expect(onClick).toHaveBeenCalledWith({ label: 'tab3child1', name: 'tab3child1' });
+  });
+
+  it('renders vertical nav  component with onClick  on Submenu ', () => {
+    const { getAllByTestId } = render(
+      <Navigation onClick={onClick} menus={menus} type="vertical" active={{ name: 'tab3' }} autoCollapse={false} />
+    );
+    const menuClicked = getAllByTestId('DesignSystem-Navigation-VerticalNavigation--subMenu')[0];
+    fireEvent.click(menuClicked);
+    expect(onClick).toHaveBeenCalledWith({
+      name: 'tab3child1',
+      label: 'tab3child1',
+    });
+  });
+});