@laerdal/life-react-components 6.0.0-dev.10.full → 6.0.0-dev.12.full

package/dist/GlobalNavigationBar/desktop/__tests__/DesktopActions.test.tsx

@@ -0,0 +1,108 @@
+import * as React from 'react';
+import DesktopActions, {DesktopActionsRef} from '../DesktopActions';
+import {act, render} from '../../../test-utils';
+import {DesktopMenuButtonTypes} from '../../types';
+import {SystemIcons} from '../../../icons';
+import {IconButtonStyled} from '../../../Button/Iconbutton';
+import {ProfileButtonContainer} from '../../../ProfileButton/ProfileButton';
+
+describe('DesktopActions', () => {
+  const profileSpy = jest.fn();
+  const actionSpy = jest.fn();
+  const switcherSpy = jest.fn();
+  const showSubMenuSpy = jest.fn();
+
+  const profile: DesktopMenuButtonTypes = {
+    type: 'profile',
+    action: profileSpy,
+  };
+
+  const action: DesktopMenuButtonTypes = {
+    type: 'action',
+    action: actionSpy,
+    icon: <SystemIcons.Search/>,
+  };
+
+  const switcher: DesktopMenuButtonTypes = {
+    type: 'switcher',
+    action: switcherSpy,
+  };
+
+
+  it('should render profile button', () => {
+    const wrapper = render(<DesktopActions buttons={[profile]} onShowUserMenu={showSubMenuSpy}/>)
+
+    expect(wrapper.container.querySelectorAll(`${ProfileButtonContainer}`)).toHaveLength(1);
+  });
+
+  it('should render action button', () => {
+    const wrapper = render(<DesktopActions buttons={[action]} onShowUserMenu={showSubMenuSpy}/>)
+
+    expect(wrapper.container.querySelectorAll(`${IconButtonStyled}`)).toHaveLength(1);
+  });
+
+  it('should render switcher button', () => {
+    const wrapper = render(<DesktopActions buttons={[switcher]} onShowUserMenu={showSubMenuSpy}/>)
+
+    expect(wrapper.container.querySelectorAll(`#globalNavAppsButton`)).toHaveLength(1);
+  });
+
+  it('should call profile action on profile button click', () => {
+    const wrapper = render(<DesktopActions buttons={[profile]} onShowUserMenu={showSubMenuSpy}/>)
+
+    act(() => {
+      wrapper.container.querySelector('button')!.click();
+    });
+
+    expect(profileSpy).toHaveBeenCalled();
+  });
+
+  it('should call on sub menu open when action is not specified on profile button click', () => {
+    const wrapper = render(<DesktopActions buttons={[{...profile, action: undefined}]}
+                                           onShowUserMenu={showSubMenuSpy}/>)
+
+    act(() => {
+      wrapper.container.querySelector('button')!.click();
+    });
+
+    expect(showSubMenuSpy).toHaveBeenCalled();
+  });
+
+  it('should call action on action button click', () => {
+    const wrapper = render(<DesktopActions buttons={[action]} onShowUserMenu={showSubMenuSpy}/>)
+
+    act(() => {
+      wrapper.container.querySelector('button')!.click();
+    });
+
+    expect(actionSpy).toHaveBeenCalled();
+  });
+
+  it('should call switcher action on switcher button click', () => {
+    const wrapper = render(<DesktopActions buttons={[switcher]} onShowUserMenu={showSubMenuSpy}/>)
+
+    act(() => {
+      wrapper.container.querySelector('button')!.click();
+    });
+
+    expect(switcherSpy).toHaveBeenCalled();
+  });
+
+
+  it('should not throw exceptions when buttons are removed', async () => {
+    const actionsRef = React.createRef<DesktopActionsRef>();
+
+    const wrapper = render(<DesktopActions ref={actionsRef}
+                                          buttons={[switcher, profile, action]}
+                                          onShowUserMenu={showSubMenuSpy}/>)
+
+    wrapper.rerender(<DesktopActions ref={actionsRef}
+                                     buttons={[]}
+                                     onShowUserMenu={showSubMenuSpy}/>)
+
+    expect(wrapper.container.querySelectorAll(`#globalNavAppsButton`)).toHaveLength(0);
+    expect(wrapper.container.querySelectorAll(`${ProfileButtonContainer}`)).toHaveLength(0);
+    expect(wrapper.container.querySelectorAll(`${IconButtonStyled}`)).toHaveLength(0);
+  });
+
+});

package/dist/GlobalNavigationBar/desktop/__tests__/ExtendedMainMenu.test.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import {MenuNavigationItemTypeItem} from '../../types';
+import {render} from '../../../test-utils';
+import ExtendedMainMenu from '../ExtendedMainMenu';
+import { NavigationProvider } from '../../../Navigation';
+
+describe('ExtendedMainMenu', () => {
+  const menuClickSpy = jest.fn();
+  const items = [{
+    label: 'item1',
+    to: '#1'
+  },
+    {
+      label: 'item2',
+      to: '#2'
+    }] as MenuNavigationItemTypeItem[];
+
+  it('should render items', () => {
+    
+    const wrapper = render(
+        <NavigationProvider currentPath='' isActiveRoute={() => false} navigate={(path: string, isExternal: boolean) => {}}>
+          <ExtendedMainMenu clickMenuAction={menuClickSpy} navigationOptions={items}/>
+        </NavigationProvider>);
+
+    expect(wrapper.getByText('item1')).toBeDefined();
+    expect(wrapper.getByText('item2')).toBeDefined();
+  });
+});

package/dist/GlobalNavigationBar/desktop/__tests__/MainMenu.test.tsx

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import {MenuNavigationItemTypeItem} from '../../types';
+import {fireEvent, render} from '../../../test-utils';
+import {IconButtonStyled} from '../../../Button/Iconbutton';
+import MainMenu from '../MainMenu';
+import { act } from "react";
+import { NavigationProvider } from '../../../Navigation';
+
+
+describe('MainMenu', () => {
+  const menuClickSpy = jest.fn();
+  const navProps = {
+    currentPath: '',
+    isActiveRoute: () => false,
+    navigate: (path: string, isExternal: boolean) => {}
+  };
+
+  const items = [{
+    label: 'item1',
+    to: '#1'
+  },
+    {
+      label: 'item2',
+      to: '#2'
+    }] as MenuNavigationItemTypeItem[];
+
+  it('should render items', () => {
+    const wrapper = render(<NavigationProvider {...navProps}><MainMenu rightSideRef={{current: {offsetLeft: 10000}} as any} items={items}/></NavigationProvider>);
+
+    expect(wrapper.getByText('item1')).toBeDefined();
+    expect(wrapper.getByText('item2')).toBeDefined();
+  });
+
+  it('should not show extended menu if width is enough', () => {
+    const wrapper = render(
+      <NavigationProvider {...navProps}>
+        <MainMenu items={items}  rightSideRef={{current: {offsetLeft: 10000}} as any}/>
+      </NavigationProvider>
+    );
+
+    act(() => {
+      global.dispatchEvent(new Event('resize'));
+    })
+
+    expect(wrapper.container.querySelectorAll(`${IconButtonStyled}`)).toHaveLength(0);
+  });
+
+  it('should show extended menu if width is not enough', () => {
+    const wrapper = render(<NavigationProvider {...navProps}><MainMenu rightSideRef={{current: {offsetLeft: 0}} as any}
+                                                   items={items}/></NavigationProvider>);
+
+    expect(wrapper.container.querySelectorAll(`${IconButtonStyled}`)).toHaveLength(1);
+  });
+
+});

package/dist/GlobalNavigationBar/desktop/__tests__/RightSideNav.test.tsx

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import {MenuNavigationItemTypeItem} from '../../types';
+import {render} from '../../../test-utils';
+import ExtendedMainMenu from '../ExtendedMainMenu';
+import {IconButtonStyled} from '../../../Button/Iconbutton';
+import MainMenu from '../MainMenu';
+import RightSideNav from '../RightSideNav';
+import { NavigationProvider } from '../../../Navigation';
+
+describe('RightSideNav', () => {
+  
+  const navProps = {
+    currentPath: '',
+    isActiveRoute: () => false,
+    navigate: (path: string, isExternal: boolean) => {}
+  };
+
+
+  const items = [{
+    label: 'item1',
+    to: '#1'
+  },
+    {
+      label: 'item2',
+      to: '#2'
+    }] as MenuNavigationItemTypeItem[];
+
+  it('should render items', () => {
+    const wrapper = render(<NavigationProvider {...navProps}><RightSideNav items={items}/></NavigationProvider>);
+
+    expect(wrapper.getByText('item1')).toBeDefined();
+    expect(wrapper.getByText('item2')).toBeDefined();
+  });
+
+  it('should render action', () => {
+    const wrapper = render(
+      <NavigationProvider {...navProps}>
+        <RightSideNav items={[]}
+                      action={{label: 'label', action: jest.fn()}}/>
+      </NavigationProvider>);
+
+    expect(wrapper.getByText('label')).toBeDefined();
+  });
+
+});

package/dist/GlobalNavigationBar/desktop/__tests__/UserMenu.test.tsx

@@ -0,0 +1,125 @@
+import * as React from 'react';
+import UserMenu from '../UserMenu';
+import {act, fireEvent, render} from '../../../test-utils';
+import {ProfileMenu} from '../../types';
+import {ProfileButtonContainer} from '../../../ProfileButton/ProfileButton';
+import { NavigationProvider } from '../../../Navigation/NavigationProvider';
+
+
+
+describe('UserMenu', () => {
+
+  const navProps = {
+    currentPath: '',
+    isActiveRoute: () => false,
+    navigate: (path: string, isExternal: boolean) => {}
+  };
+
+  it('should render profile icon', function () {
+    const props: ProfileMenu = {
+      user: {
+        firstName: 'John',
+        lastName: 'Doe',
+        email: 'email'
+      },
+      sections: []
+    }
+    const wrapper = render(<NavigationProvider {...navProps}><UserMenu {...props} onHideUserMenu={jest.fn()}/></NavigationProvider>);
+
+    expect(wrapper.container.querySelectorAll(`${ProfileButtonContainer}`)).toHaveLength(1);
+
+    wrapper.unmount();
+  });
+
+  it('should render label', function () {
+    const props: ProfileMenu = {
+      user: {
+        firstName: 'John',
+        lastName: 'Doe',
+        email: 'email'
+      },
+      sections: [],
+      label: 'label'
+    }
+    const wrapper = render(<NavigationProvider {...navProps}><UserMenu {...props} onHideUserMenu={jest.fn()}/></NavigationProvider>);
+
+    expect(wrapper.findByText('label')).toBeDefined();
+
+    wrapper.unmount();
+  });
+
+  it('should render sign out button', function () {
+    const props: ProfileMenu = {
+      user: {
+        firstName: 'John',
+        lastName: 'Doe',
+        email: 'email'
+      },
+      sections: [],
+      signOut: {
+        action: jest.fn(),
+        label: 'sign out'
+      }
+    }
+    const wrapper = render(<NavigationProvider {...navProps}><UserMenu {...props} onHideUserMenu={jest.fn()}/></NavigationProvider>);
+
+    expect(wrapper.findByText('sign out')).toBeDefined();
+
+    wrapper.unmount();
+  });
+
+  it('should render sections', function () {
+    const props: ProfileMenu = {
+      user: {
+        firstName: 'John',
+        lastName: 'Doe',
+        email: 'email'
+      },
+      sections: [{
+        label: 'label',
+        items: [{
+          label: 'item1',
+          to: '#'
+        }]
+      }],
+    }
+    const wrapper = render(<NavigationProvider {...navProps}>
+      <UserMenu {...props} onHideUserMenu={jest.fn()}/>
+    </NavigationProvider>);
+
+    expect(wrapper.getByText('item1')).toBeDefined();
+    expect(wrapper.getByText('label')).toBeDefined();
+
+    wrapper.unmount();
+  });
+
+  it('should close when item is clicked', async function () {
+    const props: ProfileMenu = {
+      user: {
+        firstName: 'John',
+        lastName: 'Doe',
+        email: 'email'
+      },
+      sections: [{
+        label: 'label',
+        items: [{
+          label: 'item1',
+          to: 'http://localhost',
+          external: true
+        }]
+      }],
+    };
+
+    const onClose = jest.fn();
+    const wrapper = render(<NavigationProvider {...navProps}> <UserMenu {...props} onHideUserMenu={onClose}/> </NavigationProvider>);
+
+    act(() => {
+      fireEvent.click(wrapper.getByText('item1'));
+    })
+
+    expect(onClose).toHaveBeenCalled();
+
+    wrapper.unmount();
+  });
+
+});

package/dist/GlobalNavigationBar/mobile/__tests__/MobileMenu.test.tsx

@@ -0,0 +1,317 @@
+import * as React from 'react';
+import {act, render, waitFor} from '../../../test-utils';
+import {
+  DesktopMenuButtonTypes,
+  MenuNavigationItemTypeGroup,
+  MenuNavigationItemTypeItem,
+  MobileMenuButtonTypes
+} from '../../types';
+import {SystemIcons} from '../../../icons';
+import MobileMenu from '../MobileMenu';
+import { NavigationProvider } from '../../../Navigation';
+
+const navigateSpy = jest.fn();
+const isActiveRouteSpy = jest.fn();
+
+jest.mock('rooks', () => ({
+  useDimensionsRef: () => [],
+  useMediaMatch: () => true
+
+}));
+
+
+
+describe('MobileMenu', () => {
+
+
+  const navProps = {
+    currentPath: '',
+    isActiveRoute: () => false,
+    navigate: (path: string, isExternal: boolean) => {}
+  };
+
+
+  const mainNavigationOptions = [
+    {
+      label: 'Overview',
+      to: '/',
+      exact: true,
+      onClick: () => {
+        console.log('Clicked on overview page');
+      },
+    },
+    {
+      label: 'Services',
+      to: '/services',
+    },
+    {
+      label: 'Products',
+      to: '/products',
+    },
+  ];
+
+  const secondaryNavigationOptions = [
+    {
+      label: 'Pinned Tab',
+      to: 'pinned',
+      pinned: true
+    },
+  ];
+
+  const headerActions: DesktopMenuButtonTypes[] = [
+    {
+      type: 'action',
+      action: (e) => {
+        console.log('search');
+      },
+      icon: <SystemIcons.Search/>,
+    },
+    {
+      type: 'action',
+      action: (e) => {
+        console.log('notifications');
+      },
+      icon: <SystemIcons.Notification/>,
+    },
+    {
+      type: 'action',
+      action: (e) => {
+        console.log('language');
+      },
+      icon: <SystemIcons.Language/>,
+    },
+    {
+      type: 'action',
+      action: (e) => {
+        console.log('settings');
+      },
+      icon: <SystemIcons.GearSettings/>,
+    },
+    {
+      type: 'profile',
+    },
+    {
+      type: 'action',
+      action: (e) => {
+        console.log('shop');
+      },
+      icon: <SystemIcons.ShoppingCart/>,
+    },
+    {
+      type: 'switcher',
+      action: (e) => {
+        // @ts-ignore
+        window.portalNav.toggle();
+        console.log('switcher')
+      },
+    }
+  ];
+
+  const notifications: MenuNavigationItemTypeItem[] = [
+    {
+      label: 'First',
+      note: 'This is a note',
+      to: '/n7',
+    },
+    {
+      label: 'Second',
+      note: 'This is a note',
+      to: '/n6',
+    },
+    {
+      label: 'Third',
+      note: 'This is a note',
+      to: '/n5',
+    },
+    {
+      label: 'Fourth',
+      note: 'This is a note',
+      to: '/n4',
+    },
+    {
+      label: 'Fifth',
+      note: 'This is a note',
+      to: '/n3',
+    },
+    {
+      label: 'Sixth',
+      note: 'This is a note',
+      to: '/n2',
+    },
+    {
+      label: 'Seventh',
+      note: 'This is a note',
+      to: '/n1',
+    },
+  ];
+
+  const mobileActions: MobileMenuButtonTypes[] = [
+    {
+      type: 'submenu',
+      menu: {
+        type: 'custom',
+        label: 'Search',
+        custom: () => 'custom'
+      },
+      icon: <SystemIcons.Search/>,
+    },
+    {
+      type: 'submenu',
+      menu: {
+        type: 'group',
+        label: 'Notifications',
+        items: notifications
+      },
+      icon: <SystemIcons.Notification/>,
+    },
+    {
+      type: 'action',
+      action: (e) => {
+        console.log('language');
+        return true;
+      },
+      icon: <SystemIcons.Language/>,
+    },
+    {
+      type: 'profile',
+      placement: 'left'
+    },
+    {
+      type: 'switcher',
+      action: (e) => {
+        // @ts-ignore
+        window.portalNav.toggle();
+        console.log('switcher')
+      },
+    }
+  ];
+
+  const mobileStickyNav = [
+    {
+      label: 'Help',
+      to: '/help',
+      pinned: true,
+      icon: <SystemIcons.Help/>,
+    },
+    {
+      label: 'Support',
+      to: '/support',
+      pinned: true,
+      icon: <SystemIcons.Support/>,
+    },
+  ];
+
+  const accountSection = [
+    {label: 'My Account', to: '/account/myaccount', icon: <SystemIcons.User/>, external: false},
+    {label: 'Language & Region', to: '/account/language', icon: <SystemIcons.Language/>, external: false},
+    {label: 'Settings', to: '/account/settings', icon: <SystemIcons.GearSettings/>, external: false},
+  ];
+
+  const organizationSection = [
+    {
+      label: 'Organization details',
+      to: '/organization/myorganization',
+      icon: <SystemIcons.Institute/>,
+      external: false
+    },
+    {label: 'People', to: '/organization/user-management', icon: <SystemIcons.Team/>, external: false},
+  ];
+
+  const supportSection = [
+    {
+      label: 'Help',
+      to: 'https://laerdal.force.com/HelpCenter',
+      icon: <SystemIcons.Help/>,
+      external: true,
+      pinned: true
+    },
+    {
+      label: 'Support',
+      to: 'https://www.laerdal.com/support/',
+      icon: <SystemIcons.Support/>,
+      external: true,
+      pinned: true
+    },
+  ];
+
+  const mobileNavigationSubGroup = {
+    type: 'group',
+    items: [...organizationSection, ...supportSection],
+    note: 'This is a note',
+    header: {
+      header: 'Title',
+      note: 'Note Text'
+    },
+    footer: {
+      header: 'Title',
+      note: 'Note text',
+      link: {
+        label: 'Link text',
+        href: '#',
+        external: false
+      }
+    },
+    action: {
+      label: 'Sign out',
+      action: () => {
+        console.log('Sign out');
+      },
+      icon: <SystemIcons.Logout/>
+    },
+    label: 'Organization',
+    icon: <SystemIcons.Institute/>,
+  } as MenuNavigationItemTypeGroup;
+
+  it('should render label', () => {
+    const wrapper = render(<NavigationProvider {...navProps}><MobileMenu show={true} label={'label'} onClose={jest.fn()}/></NavigationProvider>)
+
+    expect(wrapper.findByText('label')).toBeDefined();
+  });
+
+  it('should render header', () => {
+    const wrapper = render(<NavigationProvider {...navProps}><MobileMenu show={true} header={{header: 'header', note: 'note'}} onClose={jest.fn()}/></NavigationProvider>)
+
+    expect(wrapper.findByText('header')).toBeDefined();
+    expect(wrapper.findByText('note')).toBeDefined();
+  });
+
+  it('should render footer', () => {
+    const wrapper = render(<NavigationProvider {...navProps}><MobileMenu
+      onClose={jest.fn()}
+      show={true}
+      footer={{header: 'header', note: 'note', link: {label: 'link', href: '#'}}}/></NavigationProvider>)
+
+    expect(wrapper.findByText('header')).toBeDefined();
+    expect(wrapper.findByText('note')).toBeDefined();
+    expect(wrapper.findByText('link')).toBeDefined();
+  });
+
+  it('should render action', () => {
+    const wrapper = render(<NavigationProvider {...navProps}><MobileMenu
+      onClose={jest.fn()}
+      show={true}
+      action={{action: jest.fn(), label: 'action'}}/></NavigationProvider>)
+
+    expect(wrapper.findByText('action')).toBeDefined();
+  });
+
+  it('should render items', () => {
+    const items = [mobileNavigationSubGroup, ...mainNavigationOptions, ...mobileStickyNav]
+    const wrapper = render(<NavigationProvider {...navProps}><MobileMenu show={true} onClose={jest.fn()} items={items}/></NavigationProvider>)
+
+    items.forEach(item => {
+      expect(wrapper.findByText(item.label)).toBeDefined();
+    });
+  });
+
+  it('should call on close when close button is clicked', () => {
+    const close = jest.fn();
+    const wrapper = render(<NavigationProvider {...navProps}><MobileMenu show={true} label={'label'} onClose={close}/></NavigationProvider>)
+
+    act(() => {
+      wrapper.container.querySelector('button')!.click();
+    });
+    expect(close).toHaveBeenCalled();
+  });
+
+});