@laerdal/life-react-components 6.0.0-dev.20.full → 6.0.0-dev.5.full

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

@@ -1,294 +0,0 @@
-import * as React from 'react';
-import {render} from '../../../test-utils';
-import MobileMenuContent from '../MobileMenuContent';
-import {
-  DesktopMenuButtonTypes,
-  MenuNavigationItemTypeGroup,
-  MenuNavigationItemTypeItem,
-  MobileMenuButtonTypes
-} from '../../types';
-import {SystemIcons} from '../../../icons';
-import { NavigationProvider } from '../../../Navigation';
-
-const navigateSpy = jest.fn();
-const isActiveRouteSpy = jest.fn();
-
-
-jest.mock('rooks', () => ({
-  useDimensionsRef: () => [],
-  useMediaMatch: () => true
-}));
-
-describe('MobileMenuContent', () => {
-
-  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 header', () => {
-    const wrapper = render(<NavigationProvider {...navProps}><MobileMenuContent header={{header: 'header', note: 'note'}}/> </NavigationProvider>)
-
-    expect(wrapper.getByText('header')).toBeDefined();
-    expect(wrapper.getByText('note')).toBeDefined();
-  });
-
-  it('should render footer', () => {
-    const wrapper = render(<NavigationProvider {...navProps}><MobileMenuContent
-      footer={{header: 'header', note: 'note', link: {label: 'link', href: '#'}}}/></NavigationProvider>)
-
-    expect(wrapper.getByText('header')).toBeDefined();
-    expect(wrapper.getByText('note')).toBeDefined();
-    expect(wrapper.getByText('link')).toBeDefined();
-  });
-
-  it('should render action', () => {
-    const wrapper = render(<NavigationProvider {...navProps}><MobileMenuContent
-      action={{action: jest.fn(), label: 'action'}}/></NavigationProvider>)
-
-    expect(wrapper.getByText('action')).toBeDefined();
-  });
-
-  it('should render items', () => {
-    const items = [mobileNavigationSubGroup, ...mainNavigationOptions, ...mobileStickyNav]
-    const wrapper = render(<NavigationProvider {...navProps}><MobileMenuContent
-      items={items}/></NavigationProvider>)
-
-    items.forEach(item => {
-      expect(wrapper.getByText(item.label)).toBeDefined();
-    });
-  });
-
-});

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

@@ -1,195 +0,0 @@
-import * as React from 'react';
-import {act, fireEvent, render} from '../../../test-utils';
-import MobileMenuHeader, {MobileMenuHeaderActions, MobileMenuHeaderWrapper} from '../MobileMenuHeader';
-import {IconButtonStyled} from '../../../Button/Iconbutton';
-import {MobileMenuButtonTypes, ProfileMenu} from '../../types';
-import {ProfileButtonContainer} from '../../../ProfileButton/ProfileButton';
-
-
-
-
-
-describe('MobileMenuHeader', () => {
-  const backSpy = jest.fn();
-  const closeSpy = jest.fn();
-  const subMenuOpenSpy = jest.fn();
-  const profileSpy = jest.fn();
-  const buttonSpy = jest.fn();
-
-  const profileButton: MobileMenuButtonTypes = {
-    type: 'profile',
-    action: profileSpy
-  }
-
-  const subMenuButton: MobileMenuButtonTypes = {
-    type: 'submenu',
-    menu: {
-      type: 'custom',
-      custom: () => <div>custom</div>,
-    },
-    icon: <i></i>
-  }
-
-  const leftButton: MobileMenuButtonTypes = {
-    type: 'action',
-    action: buttonSpy,
-    icon: <i></i>,
-    placement: 'left'
-  };
-
-  const rightButton: MobileMenuButtonTypes = {
-    type: 'action',
-    action: buttonSpy,
-    icon: <i></i>,
-    placement: 'right'
-  };
-
-  beforeEach(() => {
-    backSpy.mockReset();
-    closeSpy.mockReset();
-    subMenuOpenSpy.mockReset();
-    buttonSpy.mockReset();
-    profileSpy.mockReset();
-  });
-
-  it('should render', () => {
-    const wrapper = render(<MobileMenuHeader onClose={closeSpy}/>)
-
-    expect(wrapper.container.querySelector(`${MobileMenuHeaderWrapper}`)).toBeDefined();
-  });
-
-  it('should render only close button', () => {
-    const wrapper = render(<MobileMenuHeader onClose={closeSpy}/>)
-
-    expect(wrapper.container.querySelectorAll(`${IconButtonStyled}`)).toHaveLength(1);
-  });
-
-  it('should render label', () => {
-    const wrapper = render(<MobileMenuHeader onClose={closeSpy} label={'label'}/>)
-
-    expect(wrapper.queryByText('label')).toBeDefined();
-  });
-
-  it('should render close button and back button', () => {
-    const wrapper = render(<MobileMenuHeader onClose={closeSpy} onGoBack={backSpy}/>)
-
-    expect(wrapper.container.querySelectorAll(`${IconButtonStyled}`)).toHaveLength(2);
-  });
-
-  it('should render profile button', () => {
-
-    const wrapper = render(<MobileMenuHeader onClose={closeSpy} profile={
-      {
-        user:{
-          firstName: "name",
-          lastName: "last",
-          email: "mail",
-        },
-        sections:[]
-      }
-    } buttons={[profileButton]}/>)
-
-    expect(wrapper.container.querySelectorAll(`${ProfileButtonContainer}`)).toHaveLength(1);
-  });
-
-  it('should render button on the left', () => {
-
-    const wrapper = render(<MobileMenuHeader onClose={closeSpy} buttons={[leftButton]}/>)
-
-    expect(wrapper.container.querySelectorAll(`${MobileMenuHeaderWrapper} ${IconButtonStyled}`)).toHaveLength(2);
-    expect(wrapper.container.querySelectorAll(`${MobileMenuHeaderActions} ${IconButtonStyled}`)).toHaveLength(1);
-  });
-
-  it('should render button on the right', () => {
-
-    const wrapper = render(<MobileMenuHeader onClose={closeSpy} buttons={[rightButton]}/>)
-
-    expect(wrapper.container.querySelectorAll(`${MobileMenuHeaderWrapper} ${IconButtonStyled}`)).toHaveLength(2);
-    expect(wrapper.container.querySelectorAll(`${MobileMenuHeaderActions} ${IconButtonStyled}`)).toHaveLength(2);
-  });
-
-  it('should call onClose function when close button is clicked', () => {
-    const wrapper = render(<MobileMenuHeader onClose={closeSpy}/>)
-
-    act(() => {
-      fireEvent.click(wrapper.container.querySelector(`${IconButtonStyled}`)!);
-    });
-
-    expect(closeSpy).toHaveBeenCalled();
-  });
-
-  it('should call onGoBack function when back button is clicked', () => {
-    const wrapper = render(<MobileMenuHeader onClose={closeSpy} onGoBack={backSpy}/>)
-
-    act(() => {
-      fireEvent.click(wrapper.container.querySelectorAll(`${IconButtonStyled}`)[0]);
-    });
-
-    expect(backSpy).toHaveBeenCalled();
-  });
-
-  it('should call onSubMenuOpen function when submenu button is clicked', () => {
-    const wrapper = render(<MobileMenuHeader onClose={closeSpy} buttons={[subMenuButton]}
-                                             onSubMenuOpen={subMenuOpenSpy}/>)
-
-    act(() => {
-      fireEvent.click(wrapper.container.querySelectorAll(`${IconButtonStyled}`)[0]);
-    });
-
-    expect(subMenuOpenSpy).toHaveBeenCalled();
-  });
-
-  it('should call action when icon button is clicked', () => {
-    const wrapper = render(<MobileMenuHeader onClose={closeSpy} buttons={[leftButton]}/>)
-
-    act(() => {
-      fireEvent.click(wrapper.container.querySelectorAll(`${IconButtonStyled}`)[0]);
-    });
-
-    expect(buttonSpy).toHaveBeenCalled();
-  });
-
-  it('should call profile button action when profile button is clicked', () => {
-
-      const wrapper = render(<MobileMenuHeader onClose={closeSpy} profile={
-        {
-          user:{
-            firstName: "name",
-            lastName: "last",
-            email: "mail",
-          },
-          sections:[]
-        }
-      } buttons={[profileButton]}/>)
-
-    act(() => {
-      fireEvent.click(wrapper.container.querySelectorAll(`${IconButtonStyled}`)[0]);
-    });
-
-    expect(profileSpy).toHaveBeenCalled();
-  });
-
-  it('should call onSubMenuOpen when profile button is clicked and action is not provided', () => {
-    const profile = {
-      label: 'profile label',
-      sections: [],
-      user: {
-        lastName: 'lastname',
-        firstName: 'firstname',
-        email: 'email@email.com'
-      },
-    } as ProfileMenu;
-    const wrapper = render(<MobileMenuHeader onClose={closeSpy}
-                                             buttons={[{...profileButton, action: undefined}]}
-                                             profile={profile}
-                                             onSubMenuOpen={subMenuOpenSpy}/>)
-
-    act(() => {
-      fireEvent.click(wrapper.container.querySelectorAll(`${IconButtonStyled}`)[0]);
-    });
-
-    expect(subMenuOpenSpy).toHaveBeenCalled();
-  });
-
-
-});

package/dist/InputFields/__tests__/NumberField.test.tsx

@@ -1,67 +0,0 @@
-import React from 'react';
-import {render} from '../../test-utils';
-import {Size, States} from '../../types';
-import 'jest-styled-components';
-import {COLORS, NumberField} from '../..';
-
-
-describe('<NumberField />', () => {
-
-    it('renders note field', async () => {
-        const { getByText } = render(
-            <NumberField type='NumberField'  note='test note' size={Size.Medium}/>
-        );
-        expect(getByText('test note')).toBeDefined();
-    });
-
-    it('renders required asterisk', async () => {
-        const { queryByTestId } = render(
-            <NumberField type='NumberField' dataTestId='numberInput' required size={Size.Medium}/>
-        );
-        expect(queryByTestId('labelIcon')).toBeDefined();
-    });
-
-    it('does not renders required asterisk', async () => {
-        const { queryByTestId } = render(
-            <NumberField type='NumberField' dataTestId='numberInput'  size={Size.Medium}/>
-        );
-        expect(queryByTestId('labelIcon')).toBeNull();
-    });
-
-    it('renders positive note and input container', async () => {
-        const { container, getByTestId } = render(
-            <NumberField type='NumberField' dataTestId='numberInput' note='test note' state={States.Valid} size={Size.Medium}/>
-        );
-        expect(container.getElementsByClassName('valid').length).toBe(1);
-    });
-
-    it('renders warning note and input container', async () => {
-        const { container, getByTestId } = render(
-            <NumberField type='NumberField' dataTestId='numberInput' note='test note' state={States.Invalid} size={Size.Medium}/>
-        );
-        expect(container.getElementsByClassName('invalid').length).toBe(1);
-    });
-
-    it('renders correct disabled input container', async () => {
-        const { getByTestId } = render(
-            <NumberField type='NumberField' dataTestId='numberInput' size={Size.Small}/>
-        );
-        expect(getByTestId('numberInput')).toHaveStyleRule('cursor', `not-allowed`, {modifier:'&.disabled'});
-    });
-
-    it('renders correct readonly input container', async () => {
-        const { getByTestId } = render(
-            <NumberField type='NumberField' dataTestId='numberInput' size={Size.Small}/>
-        );
-        expect(getByTestId('numberInput')).toHaveStyleRule('cursor', `not-allowed`, {modifier:'&.readOnly'});
-    });
-
-    it('renders operators in the input container', async () => {
-        const { getByTestId } = render(
-            <NumberField type='NumberField' dataTestId='numberInput' size={Size.Medium}/>
-        );
-        expect(getByTestId('operators').childElementCount).toBe(3);
-        expect(getByTestId('operators').firstChild).toBeDefined();
-        expect(getByTestId('operators').lastChild).toBeDefined();
-    })
-})

package/dist/InputFields/__tests__/NumberInput.test.tsx

@@ -1,68 +0,0 @@
-import React from 'react';
-import { render } from '../../test-utils';
-import {Size, States} from '../../types';
-import 'jest-styled-components';
-import { COLORS, NumberField } from '../..';
-
-
-describe('<NumberField />', () => {
-
-    it('renders note field', async () => {
-        const { getByText } = render(
-            <NumberField type='NumberInput'  note='test note' size={Size.Medium}/>
-        );
-        expect(getByText('test note')).toBeDefined();
-    });
-
-    it('renders required asterisk', async () => {
-        const { queryByTestId } = render(
-            <NumberField type='NumberInput'  required size={Size.Medium}/>
-        );
-        expect(queryByTestId('labelIcon')).toBeDefined();
-    });
-
-    it('does not renders required asterisk', async () => {
-        const { queryByTestId } = render(
-            <NumberField type='NumberInput'  size={Size.Medium}/>
-        );
-        expect(queryByTestId('labelIcon')).toBeNull();
-    });
-
-    it('renders positive note and input container', async () => {
-        const { container, getByTestId } = render(
-            <NumberField type='NumberInput' dataTestId='numberInput' note='test note' state={States.Valid} size={Size.Medium}/>
-        );
-        expect(container.getElementsByClassName('valid').length).toBe(1);
-    });
-
-    it('renders warning note and input container', async () => {
-        const { container, getByTestId } = render(
-            <NumberField type='NumberInput' dataTestId='numberInput' note='test note' state={States.Invalid} size={Size.Medium}/>
-        );
-        expect(container.getElementsByClassName('invalid').length).toBe(1);
-    });
-
-    it('renders correct disabled input container', async () => {
-        const { getByTestId } = render(
-            <NumberField type='NumberInput' dataTestId='numberInput'  size={Size.Small}/>
-        );
-        expect(getByTestId('numberInput')).toHaveStyleRule('cursor', `not-allowed`, {modifier:'&.disabled'});
-    });
-
-    it('renders correct readonly input container', async () => {
-        const { getByTestId } = render(
-            <NumberField type='NumberInput' dataTestId='numberInput'  size={Size.Small}/>
-        );
-        expect(getByTestId('numberInput')).toHaveStyleRule('cursor', `not-allowed`, {modifier:'&.readOnly'});
-    });
-
-    it('renders operators in the input container', async () => {
-        const { getByTestId } = render(
-            <NumberField type='NumberInput' size={Size.Medium}/>
-        );
-        expect(getByTestId('leftOperator')).toHaveStyleRule('left', '0');
-        expect(getByTestId('leftOperator')).toHaveStyleRule('top', '4px');
-        expect(getByTestId('rightOperator')).toHaveStyleRule('right', '0');
-        expect(getByTestId('rightOperator')).toHaveStyleRule('top', '4px');
-    })
-})

package/dist/InputFields/__tests__/QuickSearch.test.tsx

@@ -1,42 +0,0 @@
-import React from 'react';
-import { findByTestId, render } from '../../test-utils';
-import {Size} from '../../types';
-import 'jest-styled-components';
-import { QuickSearch } from '..';
-import { ThemeProvider } from 'styled-components';
-
-describe('<QuickSearch />', () => {
-
-
-  it('Renders quick search', async () => {
-    let search = '';
-    let searchEntered = false;
-    const { queryByText, getByTestId, queryAllByTestId, container } = render(
-      <ThemeProvider theme={{}}>
-      <div style={{ width: '400px' }}>
-        <QuickSearch
-          id="QuickSearch"
-          size={Size.Small}
-          enterSearch={() => {
-            searchEntered = true;
-          }}
-          removeSearch={() => {
-            search = '';
-          }}
-          setSearchTerm={(term) => {
-            search = term;
-          }}
-        />
-      </div></ThemeProvider>,
-    );
-    expect(getByTestId('QuickSearch_main').classList.contains('small')).toBeTruthy();
-    expect(getByTestId('QuickSearch_Searchbutton')).toBeDefined();
-
-    // Test click on icon and check that input field shows
-    expect(queryAllByTestId('QuickSearch').length).toBe(0);
-    (await findByTestId(container, 'QuickSearch_Searchbutton') as HTMLButtonElement)?.click();
-    expect(await findByTestId(container, 'QuickSearch_main')).toBeDefined();
-    expect(getByTestId('QuickSearch_main').classList.contains('expanded')).toBeTruthy();
-    expect(getByTestId('QuickSearch_Clearicon').parentElement).toHaveProperty('hidden');
-  });
-});

package/dist/LinearProgress/__tests__/LinearProgress.test.tsx

@@ -1,25 +0,0 @@
-import React from 'react';
-import {render} from '../../test-utils';
-import LinearProgress, {Bar, Dot, Line, LinearProgressType, LineFill} from '../LinearProgress';
-
-
-
-describe('LinearProgress', () => {
-  it('should render dots', () => {
-    const wrapper = render(<LinearProgress type={LinearProgressType.Dots} max={11} value={6}/>);
-    expect(wrapper.container.querySelectorAll(`${Dot}`)).toHaveLength(11)
-    expect(wrapper.container.querySelectorAll(`${Dot}.active`)).toHaveLength(6)
-  });
-
-  it('should render bars', () => {
-    const wrapper = render(<LinearProgress type={LinearProgressType.Bars} max={11} value={6}/>);
-    expect(wrapper.container.querySelectorAll(`${Bar}`)).toHaveLength(11)
-    expect(wrapper.container.querySelectorAll(`${Bar}.active`)).toHaveLength(6)
-  });
-
-  it('should render line', () => {
-    const wrapper = render(<LinearProgress type={LinearProgressType.Line} max={11} value={6}/>);
-    expect(wrapper.container.querySelectorAll(`${Line}`)).toHaveLength(1)
-    expect(wrapper.container.querySelectorAll(`${LineFill}`).item(0).getAttribute('style')).toEqual(`width: ${6 / 11 * 100}%;`)
-  });
-});