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

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

@@ -0,0 +1,18 @@
+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/LoadingPage/__tests__/GlobalLoadingPage.test.tsx

@@ -0,0 +1,23 @@
+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

@@ -0,0 +1,169 @@
+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');
+  });
+});

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

@@ -0,0 +1,77 @@
+import * as React from 'react';
+import {ModalContainer} from '../index';
+import {act, fireEvent, render} from '../../test-utils';
+
+
+
+describe('ModalContainer', () => {
+
+  let mountingDiv: HTMLElement;
+  const scrollToSpy = jest.fn();
+
+  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);
+    window.scrollTo = scrollToSpy;
+    document.body.style.position = '';
+    document.body.style.left = '';
+    document.body.style.top = '';
+    document.body.style.right = '';
+
+  });
+
+  afterEach(() => {
+    document.body.removeChild(mountingDiv);
+    scrollToSpy.mockReset();
+  });
+
+  it('should not render content', () => {
+    const wrapper = render(<ModalContainer showModal={false} closeModal={jest.fn()} children={'text'}/>);
+
+    expect(wrapper.queryByText('text')).not.toBeInTheDocument();
+  });
+
+  it('should render children inside react modal', () => {
+    const wrapper = render(<ModalContainer showModal={true} closeModal={jest.fn()} children={'text'}/>);
+
+    expect(wrapper.queryByText('text')).toBeInTheDocument();
+  });
+
+  it('should call onClose when react modal closes', () => {
+    const onClose = jest.fn();
+    const wrapper = render(<ModalContainer showModal={true} closeModal={onClose} children={'text'}/>);
+
+    act(() => {
+      fireEvent.click(document.querySelector('.ReactModal__Overlay')!);
+    });
+
+    expect(onClose).toHaveBeenCalled();
+  });
+
+  it('should append custom styles when modal is mounted', () => {
+    const wrapper = render(<ModalContainer showModal={false} closeModal={jest.fn()} children={'text'}/>);
+
+    expect(document.querySelectorAll('[modal-custom-styling="active"]')).toHaveLength(1);
+  });
+
+  it('should prevent scroll when modal is open', () => {
+    Object.defineProperty(window, 'scrollY', {value: 5, writable: true});
+
+    const wrapper = render(<ModalContainer showModal={true} closeModal={jest.fn()} children={'text'}/>);
+
+    expect(document.body.style.top).toEqual('-5px');
+    expect(document.body.style.position).toEqual('fixed');
+  });
+
+  it('should not touch scroll if modal was not opened yet', async () => {
+    Object.defineProperty(window, 'scrollY', {value: 5, writable: true});
+
+    const wrapper = render(<ModalContainer showModal={false} closeModal={jest.fn()} children={'text'}/>);
+
+    expect(document.body.style.top).toBeFalsy();
+    expect(document.body.style.position).toBeFalsy();
+  });
+
+});

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

@@ -0,0 +1,126 @@
+import React from 'react';
+import { render } from '../../test-utils';
+import 'jest-styled-components';
+import { ModalContent } from '..';
+import { Size, SystemIcons } from '../..';
+
+
+
+describe('<ModalContent />', () => {
+  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(
+      <ModalContent
+        key="smallModalWithoutImage"
+        title={'Header'}
+        size={Size.Small}
+        isModalOpen={false}
+        closeAction={() => {}}
+      />,
+    );
+    //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(
+      <ModalContent
+        key="smallModalWithoutImage"
+        title={'Header'}
+        size={Size.Small}
+        isModalOpen={true}
+        closeAction={() => {}}
+        footerActions={[
+          {
+            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(
+      <ModalContent
+        key="smallModalWithoutImage"
+        title={'Header'}
+        size={Size.Small}
+        isModalOpen={true}
+        closeAction={() => {}}
+        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(
+      <ModalContent
+        key="smallModalWithoutImage"
+        title={'Header'}
+        size={Size.Small}
+        isModalOpen={true}
+        closeAction={() => {}}
+        leftFooterAction={{ id: 'test-note', actionType: 'note', text: 'Test note', icon: <SystemIcons.Information /> }}
+        note={'Message text'}
+      />,
+    );
+    expect(getByText('Test note').textContent).toBeDefined();
+    expect(getByText('Message text').children).toBeDefined();
+  });
+
+  it('Check close button is displayed', async () => {
+    const {getByTestId } = render(
+      <ModalContent
+        key="smallModalWithoutImage"
+        title={'Header'}
+        size={Size.Small}
+        isModalOpen={true}
+        closeAction={() => {}}
+      />,
+    );
+    expect(getByTestId('content-modal-close-button')).toBeDefined();
+  });
+
+  it('Check modal body displayed', async () => {
+    const { baseElement, getByText, container } = render(
+      <ModalContent
+        key="smallModalWithoutImage"
+        title={'Header'}
+        size={Size.Small}
+        isModalOpen={true}
+        closeAction={() => {}}>
+        <span>Inner modal text</span>
+      </ModalContent>,
+    );
+    expect(getByText('Inner modal text')).toBeDefined();
+  });
+});

package/dist/NavItem/__tests__/NavItem.test.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import styled from 'styled-components';
+
+test('it works', () => {
+  expect(true).toBe(true);
+});

package/dist/NotificationDot/__tests__/NotificationDot.test.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { render } from '../../test-utils';
+import 'jest-styled-components';
+import { NotificationDot } from '..';
+import { Size } from '../../types';
+import COLORS from '../../styles/colors';
+
+  
+describe('<NotificationDot />',()=>{
+    it('renders positive small notification dot', async () => {
+        const{getByTestId} = render(
+            <NotificationDot variant='positive' size={Size.Small} testId='testId'/>
+        );
+        expect(getByTestId('testId')).toHaveStyleRule('background-color',COLORS.bg_fill_positive);
+        expect(getByTestId('testId')).toHaveStyleRule('border', '2px solid ' + COLORS.bg_surface_default);
+    });
+
+    it('renders critical large notification dot', async () => {
+        const{getByTestId} = render(
+            <NotificationDot variant='critical' size={Size.Large} testId='testId'/>
+        );
+        expect(getByTestId('testId')).toHaveStyleRule('background-color',COLORS.bg_fill_critical);
+        expect(getByTestId('testId')).toHaveStyleRule('border', '3px solid ' + COLORS.bg_surface_default);
+    });
+
+    it('renders critical medium notification dot', async () => {
+        const{getByTestId} = render(
+            <NotificationDot variant='critical' testId='testId'/>
+        );
+        expect(getByTestId('testId')).toHaveStyleRule('background-color',COLORS.bg_fill_critical);
+        expect(getByTestId('testId')).toHaveStyleRule('border', '2px solid ' + COLORS.bg_surface_default);
+    });
+});

package/dist/Paginator/__tests__/Paginator.test.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { render } from '../../test-utils';
+import { Paginator } from '../index';
+import { createMemoryHistory } from 'history';
+import 'jest-styled-components';
+
+
+
+describe('<Paginator />', () => {
+
+  const navProps = {
+    currentPath: '',
+    isActiveRoute: () => false,
+    navigate: (path: string, isExternal: boolean) => {}
+  };
+
+  it('Renders Paginator', async () => {
+    const history = createMemoryHistory();
+    const route = '/1';
+    history.push(route);
+    let curPage = 1;
+    const { queryByText, container } = render(
+        <Paginator pageCount={6} currentPage={1} baseUrl="" onPageChange={(page) => { curPage = page; }} />
+    );
+
+    expect(queryByText('1')).toBeDefined();
+    expect(container.querySelector('#paginator-left')).toBeDefined();
+    expect(container.querySelector('#paginator-right')).toBeDefined();
+    expect(queryByText('6')).toBeDefined();
+
+    // Click on stepper to the right. Expect to be taken from 1 to 2
+    (container.querySelector('#paginator-right') as HTMLElement)?.click();
+    expect(curPage).toBe(2);
+
+    // Click directly on 6. Expect to be taken to /6
+    queryByText('6')?.click();
+    expect(curPage).toBe(6);
+  });
+});

package/dist/Popover/__tests__/Popover.test.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { render } from '../../test-utils';
+import 'jest-styled-components';
+import { Popover } from '../..';
+import { SystemIcons } from '../../icons';
+import { Position } from '../../types';
+
+  
+describe('<Popover />',()=>{
+    it('renders title', async () => {
+        const{getByText, queryByTestId} = render(
+            <Popover position={Position.Bottom} topSectionProps={{text:'sample title'}} mainContent={<></>} showOnClick={false}>
+                <></>
+            </Popover>
+        );
+
+        expect(getByText('sample title')).toBeDefined();
+        expect(queryByTestId('closeBtn')).toBeNull();
+    })
+
+    it('renders note and title', async () => {
+        const{getByText, queryByTestId} = render(
+            <Popover position={Position.Left} topSectionProps={{text:'sample title', note:'sample note'}} mainContent={<></>} showOnClick={false}>
+                <></>
+            </Popover>
+        );
+
+        expect(getByText('sample title')).toBeDefined();
+        expect(getByText('sample note')).toBeDefined();
+        expect(queryByTestId('closeBtn')).toBeNull();
+    })
+
+    it('renders close button', async () => {
+        const{getByTestId} = render(
+            <Popover position={Position.Bottom} topSectionProps={{text:'sample title'}} mainContent={<></>} showOnClick={true}>
+                <></>
+            </Popover>
+        );
+
+        expect(getByTestId('closeBtn')).toBeDefined();
+    })
+
+    it('renders text button', async () => {
+        const{getByTestId} = render(
+            <Popover position={Position.Right} bottomSectionProps={{textButton:{label:'sample button', icon:<SystemIcons.OpenNewWindow />, action:()=>{}}}} mainContent={<></>} showOnClick={true}>
+                <></>
+            </Popover>
+        );
+
+        expect(getByTestId('textBtn')).toBeDefined();
+        expect(getByTestId('iconBtn').children).toHaveLength(0);
+    })
+
+    it('renders icon button', async () => {
+        const{getByTestId, queryByTestId} = render(
+            <Popover position={Position.Right} bottomSectionProps={{iconButtons:[{label:'sample button', icon:<SystemIcons.OpenNewWindow />, action:()=>{}}]}} mainContent={<></>} showOnClick={true}>
+                <></>
+            </Popover>
+        );
+
+        expect(queryByTestId('textBtn')).toBeNull();
+        expect(getByTestId('iconBtn').children).toHaveLength(1);
+    })
+})

package/dist/ProfileButton/__tests__/ProfileButton.test.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import {ProfileButton} from '../index';
+import {render} from '../../test-utils';
+
+
+
+describe('ProfileButton', () => {
+
+  it('should render', () => {
+    const wrapper = render(<ProfileButton onClick={jest.fn()} initials={'initials'}/>);
+
+    expect(wrapper.queryByText('initials')).toBeInTheDocument();
+  });
+
+  it('should render image if portraitSrc is provided', () => {
+    const wrapper = render(<ProfileButton portraitSrc={'#'} onClick={jest.fn()}/>);
+
+
+    expect(wrapper.container.querySelector(`img`)).toBeInTheDocument();
+    expect(wrapper.queryByText('initials')).not.toBeInTheDocument();
+  });
+
+  it('should render initials if portraitSrc is not provided and initials are', () => {
+    const wrapper = render(<ProfileButton initials={'initials'} onClick={jest.fn()}/>);
+
+
+    expect(wrapper.container.querySelector(`img`)).not.toBeInTheDocument();
+    expect(wrapper.queryByText('initials')).toBeInTheDocument();
+  });
+
+});

package/dist/QuizButton/__tests__/QuizButton.test.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { render } from '../../test-utils';
+import 'jest-styled-components';
+import { QuizButton } from '..';
+import { Size } from '../../types';
+import COLORS from '../../styles/colors';
+import '@testing-library/jest-dom';
+
+
+describe('<QuizButton />',()=>{
+    it('renders correct quiz button', async () => {
+        const{getByText, getByTestId} = render(
+            <QuizButton size={Size.Small} resultType={'correct'} text={'this is sample text'} type={'radio'} id={'1'}/>
+        );
+        expect(getByTestId('txtContainer')).toHaveTextContent('this is sample text');
+        expect(getByTestId('txtContainer')).toHaveClass('quiz-button-text');
+        expect(getByTestId('btnContainer')).toHaveClass('quiz-button-icon');
+    });
+
+    it('renders incorrect quiz button', async () => {
+        const{getByText, getByTestId} = render(
+            <QuizButton size={Size.Small} resultType={'incorrect'} text={'this is sample text'} type={'checkbox'} id={'1'}/>
+        );
+        expect(getByTestId('txtContainer')).toHaveTextContent('this is sample text');
+        expect(getByTestId('txtContainer')).toHaveClass('quiz-button-text');
+        expect(getByTestId('btnContainer')).toHaveClass('quiz-button-icon');
+    });
+
+    it('renders partial quiz button', async () => {
+        const{getByText, getByTestId} = render(
+            <QuizButton size={Size.Small} resultType={'partial'} text={'this is sample text'} type={'radio'} id={'1'}/>
+        );
+        expect(getByTestId('txtContainer')).toHaveTextContent('this is sample text');
+        expect(getByTestId('txtContainer')).toHaveClass('quiz-button-text');
+        expect(getByTestId('btnContainer')).toHaveClass('quiz-button-icon');
+    });
+
+    it('renders quiz button', async () => {
+        const{getByText, getByTestId} = render(
+            <QuizButton size={Size.Small} text={'this is sample text'} type={'checkbox'} id={'1'}/>
+        );
+        expect(getByText('this is sample text')).toHaveTextContent('this is sample text');
+        expect(getByTestId('txtContainer')).toHaveStyleRule('background',COLORS.accent1_20);
+        expect(getByTestId('btnContainer')).toHaveStyleRule('background',COLORS.accent1_100);
+    });
+
+    it('renders selected quiz button', async () => {
+        const{getByText} = render(
+            <QuizButton size={Size.Small} text={'this is sample text'} selected={true} type={'radio'} id={'1'}/>
+        );
+        expect(getByText('this is sample text')).toHaveTextContent('this is sample text');
+    });
+});