@laerdal/life-react-components 6.0.0-dev.19.full → 6.0.0-dev.2.full

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}%;`)
-  });
-});

package/dist/List/__tests__/ListRow.test.tsx

@@ -1,18 +0,0 @@
-import React from 'react';
-import {render} from '../../test-utils';
-import {ListRow} from '../index';
-import {Size} from '../../types';
-import {SystemIcons} from '../../icons';
-
-describe('<ListRow />', () => {
-  it('Renders', async () => {
-    const {getByText} = render(
-      <ListRow
-        icon={<SystemIcons.Institute/>}
-        mainText={'Laerdal Medical AS'}
-        size={Size.Small}
-        disabled={false}/>,
-    );
-    expect(getByText('Laerdal Medical AS')).toBeDefined();
-  });
-});

package/dist/List/__tests__/ListRow.tests.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/LoadingPage/__tests__/GlobalLoadingPage.test.tsx

@@ -1,23 +0,0 @@
-import React from 'react';
-import { render } from '../../test-utils';
-import { GlobalLoadingPage } from '../index';
-import 'jest-styled-components';
-import { COLORS } from '../../styles';
-
-
-
-
-describe('<GlobalLoadingPage />', () => {
-  it('Renders GlobalLoadingPage', async () => {
-    const optionalMessage = 'This is the optional message';
-    const { queryByText, getByTestId } = render(<GlobalLoadingPage optionalMessage={optionalMessage} />);
-    expect(queryByText(optionalMessage)).toBeDefined();
-    expect(getByTestId('TestLoadingMain')).toBeDefined();
-    expect(getByTestId('TestLoadingMain')).toHaveStyleRule('background-color', COLORS.primary_20);
-    expect(getByTestId('TestLoadingMain')).toHaveStyleRule('height', '100%');
-    expect(getByTestId('TestLoadingLogoAndMessage')).toBeDefined();
-    expect(getByTestId('TestLoadingLogoAndMessage')).toHaveStyleRule('position', 'absolute');
-    expect(getByTestId('TestLoadingLogoAndMessage')).toHaveStyleRule('align-items', 'center');
-    expect(getByTestId('TestLoadingLogoAndMessage')).toHaveStyleRule('bottom', '36px');
-  });
-});

package/dist/Modals/__tests__/Modal.test.tsx

@@ -1,169 +0,0 @@
-import * as React from 'react';
-import {render} from '../../test-utils';
-import 'jest-styled-components';
-import {ModalDialog} from '..';
-import {Size, SystemIcons} from '../..';
-
-
-
-describe('<ModalDialog />', () => {
-  let mountingDiv: HTMLElement;
-
-  beforeEach(() => {
-    //being rendered as a React.Portal we need to have the 'root' div defined
-    mountingDiv = document.createElement('div');
-    mountingDiv.id = 'root';
-    document.body.appendChild(mountingDiv);
-  });
-
-  afterEach(() => {
-    document.body.removeChild(mountingDiv);
-  });
-
-  it('Check modal not rendered when isModalOpen is false', async () => {
-    const {container, getByText} = render(
-      <ModalDialog
-        key="smallModalWithoutImage"
-        title={'Header'}
-        size={Size.Small}
-        isModalOpen={false}
-        closeAction={() => {
-        }}
-        submitAction={() => {
-        }}
-      />,
-    );
-    //check modal portal not exists when modal not opened
-    expect(container.querySelector('.ReactModalPortal')).toBeNull();
-  });
-
-  it('Check modal visible, title and footer buttons displayed correctly', async () => {
-    const {container, getByText} = render(
-      <ModalDialog
-        key="smallModalWithoutImage"
-        
-        title={'Header'}
-        size={Size.Small}
-        isModalOpen={true}
-        closeAction={() => {
-        }}
-        submitAction={() => {
-        }}
-        buttons={[
-          {
-            action: () => {
-            },
-            text: 'Close',
-            variant: 'tertiary',
-          },
-          {
-            action: () => {
-            },
-            text: 'Save',
-          },
-        ]}
-      />,
-    );
-    //check modal portal defined
-    expect(container.querySelector('.ReactModalPortal')).toBeDefined();
-    //Check header and footer buttons
-    expect(getByText('Header')).toBeDefined();
-    expect(getByText('Close')).toBeDefined();
-    expect(getByText('Save')).toBeDefined();
-  });
-
-  it('Check tooltip, and link displayed without right footer buttons', async () => {
-    const {baseElement, getByText} = render(
-      <ModalDialog
-        key="smallModalWithoutImage"
-        
-        title={'Header'}
-        size={Size.Small}
-        isModalOpen={true}
-        closeAction={() => {
-        }}
-        submitAction={() => {
-        }}
-        tooltip={'some test tooltip'}
-        leftFooterAction={{
-          id: 'test-link',
-          actionType: 'hyperlink',
-          text: 'Link',
-          href: 'http://test.com',
-          icon: <></>,
-          variant: 'default'
-        }}
-      />,
-    );
-    //check tooltip displayed
-    expect(getByText('some test tooltip').textContent).toBeDefined();
-    //check footer link displayed
-    expect(getByText('Link').children).toBeDefined();
-  });
-
-  it('Check note and footer note displayed', async () => {
-    const {baseElement, getByText} = render(
-      <ModalDialog
-        key="smallModalWithoutImage"
-        
-        title={'Header'}
-        size={Size.Small}
-        isModalOpen={true}
-        closeAction={() => {
-        }}
-        submitAction={() => {
-        }}
-        leftFooterAction={{id: 'test-note', actionType: 'note', text: 'Test note', icon: <SystemIcons.Information/>}}
-        note={'Message text'}
-        state={'critical'}
-      />,
-    );
-    //check footer note text displayed
-    expect(getByText('Test note').textContent).toBeDefined();
-    //check note section added
-    expect(baseElement.querySelectorAll('section')?.length).toEqual(4);
-    //check note message displayed
-    expect(getByText('Message text').children).toBeDefined();
-  });
-
-  it('Check back button and close icon displayed', async () => {
-    const {baseElement, getByText, container} = render(
-      <ModalDialog
-        key="smallModalWithoutImage"
-        
-        title={'Header'}
-        size={Size.Small}
-        backButton={() => {
-        }}
-        isModalOpen={true}
-        closeAction={() => {
-        }}
-        submitAction={() => {
-        }}
-      />,
-    );
-    //only 2 svg elements should be found in the header of the modal
-    expect(baseElement.querySelectorAll('svg')?.length).toEqual(2);
-  });
-
-  it('Check modal body displayed', async () => {
-    const {baseElement, getByText, container} = render(
-      <ModalDialog
-        key="smallModalWithoutImage"
-        
-        title={'Header'}
-        size={Size.Small}
-        isModalOpen={true}
-        closeAction={() => {
-        }}
-        submitAction={() => {
-        }}>
-        <span>Inner modal text</span>
-      </ModalDialog>,
-    );
-    //Check all dialog sections are displayed
-    expect(baseElement.querySelectorAll('section')?.length).toEqual(3);
-    //Check that the second section (modal body) has the correct text
-    expect(baseElement.querySelectorAll('section')?.[1].textContent).toEqual('Inner modal text');
-  });
-});