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

package/dist/Breadcrumb/__tests__/Breadcrumb.test.tsx

@@ -1,78 +0,0 @@
-import React from 'react';
-import { render } from '../../test-utils';
-import { Breadcrumb } from '../index';
-import '@testing-library/jest-dom';
-import { Size } from '../../types';
-
-const items = [
-  { label: 'test1', url: 'http://laerdal_test.com', callback: (id?: string) => {} },
-  { label: 'test2', url: 'http://laerdal_test1.com', callback: (id?: string) => {} },
-  { label: 'test3', url: 'http://laerdal_test2.com', callback: (id?: string) => {} },
-  { label: 'test4', url: 'http://laerdal_test3.com', callback: (id?: string) => {} },
-];
-
-
-
-describe('<Breadcrumb />', () => {
-  it('Renders with no values', async () => {
-    const { getByTestId, container } = render(<Breadcrumb items={[]} />);
-    //main container is displayed
-    expect(getByTestId('breacrumbContainer')).toBeDefined();
-    //home link is displayed
-    expect(container.querySelector('[id="homelink"]')).toBeDefined();
-  });
-
-  it('Renders with home icon and no values', async () => {
-    const { getByTestId, container } = render(<Breadcrumb items={[]} homeIcon={true} />);
-    expect(getByTestId('breacrumbContainer')).toBeDefined();
-    //home icon is displayed
-    expect(container.querySelector('[id="homeIcon"]')).toBeDefined();
-
-    //because a size was not provided, small icons width will be set (20px)
-    const svg = container.querySelector('svg');
-    expect(svg).toHaveAttribute('width', '20px');
-  });
-
-  it('Render breadcrumb with two values ', async () => {
-    const options = items.slice(0, 2);
-    const { getByTestId, container } = render(<Breadcrumb lastItemAsLabel={true} items={options} size={Size.Medium} />);
-    expect(getByTestId('breacrumbContainer')).toBeDefined();
-    //check breadcrumbs displayed correctly - only one link defined for this scenario
-    const linkItem = container.querySelector('a[id*="link-item"]');
-    expect(linkItem).toBeDefined();
-    expect(linkItem).toHaveTextContent(options[0].label);
-
-    //query breadcrumb chrevron separators
-    const breadcrumbSeparators = container.querySelectorAll('.chevronicon');
-    expect(breadcrumbSeparators).toBeDefined();
-    expect(breadcrumbSeparators).toHaveLength(2);
-
-    //medium size provided
-    const svg = container.querySelector('svg');
-    expect(svg).toHaveAttribute('width', '24px');
-
-    const lastItem = container.querySelector('label');
-    expect(lastItem).toBeDefined();
-    expect(lastItem).toHaveTextContent(options[options.length - 1].label);
-  });
-
-  it('Render more than 3 items', async () => {
-    const { container, getByText } = render(<Breadcrumb lastItemAsLabel={true} items={items} size={Size.XSmall} />);
-
-    //having more than 2 item show more dropdown selector should be displayed
-    //because home page button is not provided, only one button should be rendered
-    const showMoreBtn = container.querySelector('button');
-    expect(showMoreBtn).toBeDefined();
-    //in this scenario, first option label is not displayed, so only one link item available
-    const linkItem = container.querySelectorAll('a[id*="link-item"]');
-    expect(linkItem).toHaveLength(1);
-
-    //links not displayed for first two items, but these are defined as dropdown options
-    expect(getByText(items[0].label)).toBeDefined();
-    expect(getByText(items[1].label)).toBeDefined();
-
-    //xs size provided
-    const svg = container.querySelector('svg');
-    expect(svg).toHaveAttribute('width', '16px');
-  });
-});

package/dist/Button/__tests__/BackButton.test.tsx

@@ -1,32 +0,0 @@
-import React from 'react';
-import {act, render} from '../../test-utils';
-import {BackButton} from '../index';
-import {Size} from '../../types'
-import 'jest-styled-components';
-
-
-
-
-describe('<BackButton />', () => {
-  it('should render back button', function () {
-    const {queryByText} = render(<BackButton size={Size.Small}>Back Button</BackButton>);
-    expect(queryByText('Back Button')).toBeDefined();
-  });
-  it('should call action on click', function () {
-    const clickMock = jest.fn(() => {});
-    const component = render(<BackButton size={Size.Small} onClick={clickMock}>Back Button</BackButton>);
-    act(() => {
-      component.getByText('Back Button').click();
-    });
-    expect(clickMock).toBeCalled();
-  });
-  it('should not call action on click when disabled', function () {
-    const clickMock = jest.fn(() => {});
-    const component = render(<BackButton size={Size.Small} disabled={true} onClick={clickMock}>Back Button</BackButton>);
-    act(() => {
-      component.getByText('Back Button').click();
-    });
-    expect(clickMock).toBeCalledTimes(0);
-  });
-
-});

package/dist/Button/__tests__/Button.test.tsx

@@ -1,45 +0,0 @@
-import React from 'react';
-import { render } from '../../test-utils';
-import { Button } from '../index';
-import 'jest-styled-components';
-import { COLORS } from '../../styles';
-import { Size } from '../..';
-
-
-
-
-describe('<Button />', () => {
-  it('Renders primary button', async () => {
-    const { queryByText, getByTestId } = render(
-      <Button variant="primary" testId="TestButton" size={Size.Large}>
-        TestButton
-      </Button>,
-    );
-    expect(queryByText('TestButton')).toBeDefined();
-    /*expect(getByTestId('TestButton')).toHaveStyleRule('background-color', COLORS.primary);
-    expect(getByTestId('TestButton')).toHaveStyleRule('cursor', 'pointer');
-    expect(getByTestId('TestButton')).toHaveStyleRule('color', 'white');*/
-  });
-  it('Renders secondary button', async () => {
-    const { queryByText, getByTestId } = render(
-      <Button variant="secondary" testId="TestButton">
-        TestButton
-      </Button>,
-    );
-    expect(queryByText('TestButton')).toBeDefined();
-    /*expect(getByTestId('TestButton')).toHaveStyleRule('color', COLORS.primary);
-    expect(getByTestId('TestButton')).toHaveStyleRule('border-color', COLORS.primary);
-    expect(getByTestId('TestButton')).toHaveStyleRule('background-color', 'white');*/
-  });
-  it('Renders tertiary button', async () => {
-    const { queryByText, getByTestId } = render(
-      <Button variant="tertiary" testId="TestButton">
-        TestButton
-      </Button>,
-    );
-    expect(queryByText('TestButton')).toBeDefined();
-    /*expect(getByTestId('TestButton')).toHaveStyleRule('background-color', 'white');
-    expect(getByTestId('TestButton')).toHaveStyleRule('border-color', COLORS.neutral_100);
-    expect(getByTestId('TestButton')).toHaveStyleRule('color', COLORS.primary);*/
-  });
-});

package/dist/Button/__tests__/DualButton.test.tsx

@@ -1,119 +0,0 @@
-import React from 'react';
-import { fireEvent, render } from '../../test-utils';
-import { DualFunctionButton } from '../index';
-import '@testing-library/jest-dom';
-import { Size, SystemIcons } from '../..';
-import 'jest-styled-components';
-
-
-
-
-describe('<DualButton />', () => {
-  it('Renders checkbox button', async () => {
-    const dropdownItems = [
-      { value: 'Item 1', icon: undefined },
-      { value: 'Item 2', icon: undefined, disabled: true },
-    ];
-    const { getByText, container, getByTestId } = render(
-      <DualFunctionButton
-        dropdownCustomizationProps={{
-          items: dropdownItems,
-          itemsType: 'checkbox',
-          multiSelect: true,
-          pinTopItem: true,
-          actionLabel: 'Custom Action',
-          action: () => {},
-          onValueUpdate: (vals) => {},
-          scrollable: true,
-        }}
-        id="test"
-        size={Size.Small}
-        variant="primary">
-        Dual button checkbox test
-      </DualFunctionButton>,
-    );
-    //expect button name defined
-    expect(getByText('Dual button checkbox test')).toBeTruthy();
-    //expect all items displayed
-    expect(getByText('Item 1')).toBeTruthy();
-    expect(getByText('Item 2')).toBeTruthy();
-
-    //check that checkbox controls are displayed
-    expect(getByText('Item 1').closest('label')).toHaveClass('checkbox-label');
-    expect(getByText('Item 2').closest('label')).toHaveClass('checkbox-label');
-
-    //expect item 2 to be disabled
-    expect(getByText('Item 2').closest('div')).toHaveAttribute('disabled');
-
-    //expect the toggle button to be defined
-    expect(getByTestId('options_toggleBtn')).toBeTruthy();
-
-    //expect select all displayed as pin top item is set as "true"
-    expect(document.body.querySelector('[id*="checkbox_selectall"]')).toBeTruthy();
-  });
-
-  it('Renders normal dual button', async () => {
-    const dropdownItems = [
-      { value: 'Item 1', icon: undefined },
-      { value: 'Item 2', icon: undefined },
-    ];
-    const { getByText, container, getByTestId } = render(
-      <DualFunctionButton
-        dropdownCustomizationProps={{
-          items: dropdownItems,
-          itemsType: 'normal',
-          multiSelect: true,
-          action: () => {},
-          onValueUpdate: (vals) => {},
-          scrollable: true,
-        }}
-        id="test"
-        size={Size.Small}
-        variant="primary">
-        Dual button test
-      </DualFunctionButton>,
-    );
-    //check that the dual button text defined
-    expect(getByText('Dual button test')).toBeTruthy();
-    expect(getByText('Item 1')).toBeTruthy();
-    expect(getByText('Item 2')).toBeTruthy();
-    //check that none of the items disabled
-    expect(getByText('Item 1').closest('div')).not.toHaveAttribute('disabled');
-    expect(getByText('Item 2').closest('div')).not.toHaveAttribute('disabled');
-    expect(getByTestId('options_toggleBtn')).toBeTruthy();
-
-    //two options available
-    expect(document.body.querySelectorAll('button[tabindex="-1"]')).toHaveLength(2);
-  });
-
-  it('Renders radio-button type dual button', async () => {
-    const dropdownItems = [
-      { value: 'Item 1', icon: undefined, disabled: true },
-      { value: 'Item 2', icon: undefined, disabled: true },
-    ];
-    const { getByText, container, getByTestId } = render(
-      <DualFunctionButton
-        dropdownCustomizationProps={{
-          items: dropdownItems,
-          itemsType: 'radio',
-          multiSelect: true,
-          action: () => {},
-          onValueUpdate: (vals) => {},
-          scrollable: true,
-        }}
-        id="test"
-        size={Size.Small}
-        variant="primary">
-        Dual button test radio
-      </DualFunctionButton>,
-    );
-    //check that the dual button text defined
-    expect(getByText('Dual button test radio')).toBeTruthy();
-    expect(getByText('Item 1')).toBeTruthy();
-    expect(getByText('Item 2')).toBeTruthy();
-
-    //check that radio buttons displayed
-    expect(getByText('Item 1').closest('div')).toHaveClass('radio-button-label');
-    expect(getByText('Item 2').closest('div')).toHaveClass('radio-button-label');
-  });
-});

package/dist/Card/HorizontalCard/__tests__/HorizontalCard.test.tsx

@@ -1,71 +0,0 @@
-import React from 'react';
-import {act, render} from '../../../test-utils';
-import {
-  HorizontalCard,
-  HorizontalCardDropdownButton,
-  HorizontalCardIconButton, HorizontalCardLinearProgression, HorizontalCardTag,
-  HorizontalCardToggleButton
-} from '../index';
-import {SystemIcons} from '../../../icons';
-
-
-
-describe('HorizontalCard', () => {
-  const action = jest.fn();
-
-  const actions: (HorizontalCardIconButton | HorizontalCardToggleButton | HorizontalCardDropdownButton)[] = [
-    {componentType: 'icon', action: action, icon: <SystemIcons.Share/>},
-    {componentType: 'icon', action: action, icon: <SystemIcons.OpenNewWindow/>}
-  ]
-
-  const tags: HorizontalCardTag[] = [{label: 'label 1'}, {label: 'label 2'}, {label: 'label 3'}];
-
-  const progress: HorizontalCardLinearProgression = {max: 100, value: 30};
-
-  beforeEach(() => {
-    action.mockReset();
-  });
-
-  it('should render title', async () => {
-    const {queryByText} = render(<HorizontalCard title={'title'}/>)
-
-    expect(queryByText('title')).toBeDefined()
-  });
-
-  it('should render tags', async () => {
-
-    const {queryByText} = render(<HorizontalCard title={'title'} tags={tags}/>)
-
-    expect(queryByText('label 1')).toBeDefined()
-    expect(queryByText('label 2')).toBeDefined()
-    expect(queryByText('label 3')).toBeDefined()
-  });
-
-  it('should render actions', async () => {
-    const {container} = render(<HorizontalCard title={'title'} actions={actions}/>)
-
-    expect(container.querySelectorAll('button')).toHaveLength(2)
-  });
-
-  it('should call action on component click', async () => {
-    const {container} = render(<HorizontalCard title={'title'} action={action}/>)
-
-    act(() => {
-      // @ts-ignore
-      container.querySelector('.clickable').click();
-    });
-
-    expect(action).toHaveBeenCalled()
-  });
-
-  it('should call action on button press', async () => {
-    const {container} = render(<HorizontalCard title={'title'} actions={actions}/>)
-
-    act(() => {
-      container.querySelectorAll('button').forEach(a => a.click());
-    });
-
-    expect(action).toHaveBeenCalledTimes(2)
-  });
-
-});

package/dist/Card/HorizontalCard/__tests__/VerticalCard.test.tsx

@@ -1,124 +0,0 @@
-import React from 'react';
-import { fireEvent, render } from '../../../test-utils';
-import 'jest-styled-components';
-import { Card } from '../..';
-import { COLORS } from '../../../styles';
-import { SystemIcons } from '../../../icons';
-
-
-describe('<Card />',()=>{
-    it('renders top section', async () => {
-        const{getByTestId} = render(
-            <Card topSectionProps={{disabled: false}} disabled/>
-        );
-
-        expect(getByTestId('card-topSection')).toBeDefined();
-    });
-
-    it('renders middle section', async () => {
-        const{getByTestId} = render(
-            <Card middleSectionProps={{title:'title',disabled:false}} disabled/>
-        );
-
-        expect(getByTestId('card-middleSection')).toBeDefined();
-    });
-
-    it('renders bottom section', async () => {
-        const{getByTestId} = render(
-            <Card bottomSectionProps={{disabled:false}} disabled/>
-        );
-
-        expect(getByTestId('card-bottomSection')).toBeDefined();
-    });
-
-    it('fires card clicked event on click', async () => {
-        const cardClicked = jest.fn();
-        const{getByTestId} = render(
-            <Card bottomSectionProps={{disabled:false}} disabled={false} onCardClicked={cardClicked}/>
-        );
-
-        fireEvent.click(getByTestId('card-wrapper'));
-        expect(cardClicked).toBeCalledTimes(1);
-    });
-
-    it('fires card clicked event on keyDown', async () => {
-        const cardClicked = jest.fn();
-        const{getByTestId} = render(
-            <Card bottomSectionProps={{disabled:false}} disabled={false} onCardClicked={cardClicked}/>
-        );
-
-        fireEvent.keyDown(getByTestId('card-wrapper'), {key: 'Enter', code: 'Enter', charCode: 13});
-        expect(cardClicked).toBeCalledTimes(1);
-    });
-
-    it('renders tag in top section', async () => {
-        const{getByText} = render(
-            <Card topSectionProps={{disabled: false, tagLabel:'test_label'}} disabled/>
-        );
-
-        expect(getByText('test_label')).toBeDefined();
-    });
-
-    it('renders checkbox in top section', async () => {
-        const{getByTestId} = render(
-            <Card topSectionProps={{disabled: false, selected: true}} disabled/>
-        );
-
-        expect(getByTestId('card-topSection-checkbox')).toBeDefined();
-    });
-
-    it('renders highlight ribbon in top section', async () => {
-        const{getByTestId, getByText} = render(
-            <Card topSectionProps={{disabled: false, highlightRibbonText:'testRibbon', highlightRibbonBgColor:'red'}} disabled={false}/>
-        );
-
-        expect(getByText('testRibbon')).toBeDefined();
-        expect(getByTestId('card-topSection-ribbon')).toHaveStyleRule('background-color','red');
-    });
-
-    it('renders title ,description and category label in middle section', async () => {
-        const{getByText} = render(
-            <Card middleSectionProps={{title:'testTitle', disabled: false, description:'testDescription', categoryLabel:'testCatLabel'}} disabled={false}/>
-        );
-
-        expect(getByText('testTitle')).toBeDefined();
-        expect(getByText('testDescription')).toBeDefined();
-        expect(getByText('testCatLabel')).toBeDefined();
-    });
-
-    it('renders tags in middle section', async () => {
-        const{getByText} = render(
-            <Card middleSectionProps={{title:'testTitle', disabled: false, tags:[{label:'testTag'}], row2Tags:[{label:'testTag2'}]}} disabled={false}/>
-        );
-
-        expect(getByText('testTitle')).toBeDefined();
-        expect(getByText('testTag2')).toBeDefined();
-    });
-
-    it('renders note text in bottom section', async () => {
-        const{getByText} = render(
-            <Card bottomSectionProps={{disabled: false, noteLeft:'leftNote', noteRight:'rightNote'}} disabled={false}/>
-        );
-
-        expect(getByText('leftNote')).toBeDefined();
-        expect(getByText('rightNote')).toBeDefined();
-    });
-
-    it('renders author in bottom section', async () => {
-        const{getByText,getByTestId} = render(
-            <Card bottomSectionProps={{disabled: true, authorName:'testAuthor'}} disabled={true}/>
-        );
-
-        expect(getByText('testAuthor')).toBeDefined();
-        expect(getByTestId('card-bottomSection-author')).toBeDefined();
-    });
-
-    it('renders actions in bottom section', async () => {
-        const{getByText,getByTestId} = render(
-            <Card bottomSectionProps={{disabled: true, authorName:'testAuthor', actions:[{icon:<SystemIcons.Add/>,onClick:()=>{}}]}} disabled={true}/>
-        );
-
-        expect(getByText('testAuthor')).toBeDefined();
-        expect(getByTestId('card-bottomSection-author')).toBeDefined();
-    });
-})

package/dist/Card/__tests__/Card.test.tsx

@@ -1,146 +0,0 @@
-import React from 'react';
-import { fireEvent, getByRole, render } from '../../test-utils';
-import 'jest-styled-components';
-import { Card } from '../..';
-import { COLORS } from '../../styles';
-import { SystemIcons } from '../../icons';
-
-describe('<Card />',()=>{
-    it('renders top section', async () => {
-        const{getByTestId} = render(
-            <Card topSectionProps={{disabled: false}} disabled/>
-        );
-
-        expect(getByTestId('card-topSection')).toBeDefined();
-        //expect(getByTestId('card-middleSection')).toBeDefined();
-    });
-
-    it('renders middle section', async () => {
-        const{getByTestId} = render(
-            <Card middleSectionProps={{title:'title',disabled:false}} disabled/>
-        );
-
-        expect(getByTestId('card-middleSection')).toBeDefined();
-    });
-
-    it('renders bottom section', async () => {
-        const{getByTestId} = render(
-            <Card bottomSectionProps={{disabled:false}} disabled/>
-        );
-
-        expect(getByTestId('card-bottomSection')).toBeDefined();
-    });
-
-    it('fires card clicked event on click', async () => {
-        const cardClicked = jest.fn();
-        const{getByTestId} = render(
-            <Card bottomSectionProps={{disabled:false}} disabled={false} onCardClicked={cardClicked}/>
-        );
-
-        fireEvent.click(getByTestId('card-wrapper'));
-        expect(cardClicked).toBeCalledTimes(1);
-    });
-
-    it('fires card clicked event on keyDown', async () => {
-        const cardClicked = jest.fn();
-        const{getByTestId} = render(
-            <Card bottomSectionProps={{disabled:false}} disabled={false} onCardClicked={cardClicked}/>
-        );
-
-        fireEvent.keyDown(getByTestId('card-wrapper'), {key: 'Enter', code: 'Enter', charCode: 13});
-        expect(cardClicked).toBeCalledTimes(1);
-    });
-
-    it('renders tag in top section', async () => {
-        const{getByText} = render(
-            <Card topSectionProps={{disabled: false, tagLabel:'test_label'}} disabled/>
-        );
-
-        expect(getByText('test_label')).toBeDefined();
-    });
-
-    it('renders checkbox in top section', async () => {
-        const{getByTestId} = render(
-            <Card topSectionProps={{disabled: false, selected: true}} disabled/>
-        );
-
-        expect(getByTestId('card-topSection-checkbox')).toBeDefined();
-    });
-
-    it('renders highlight ribbon in top section', async () => {
-        const{getByTestId, getByText} = render(
-            <Card topSectionProps={{disabled: false, highlightRibbonText:'testRibbon', highlightRibbonBgColor:'red'}} disabled={false}/>
-        );
-
-        expect(getByText('testRibbon')).toBeDefined();
-        expect(getByTestId('card-topSection-ribbon')).toHaveStyleRule('background-color','red');
-    });
-
-    it('renders title ,description and category label in middle section', async () => {
-        const{getByText} = render(
-            <Card middleSectionProps={{title:'testTitle', disabled: false, description:'testDescription', categoryLabel:'testCatLabel'}} disabled={false}/>
-        );
-
-        expect(getByText('testTitle')).toBeDefined();
-        expect(getByText('testDescription')).toBeDefined();
-        expect(getByText('testCatLabel')).toBeDefined();
-    });
-
-    it('renders tags in middle section', async () => {
-        const{getByText} = render(
-            <Card middleSectionProps={{title:'testTitle', disabled: false, tags:[{label:'testTag'}], row2Tags:[{label:'testTag2'}]}} disabled={false}/>
-        );
-
-        expect(getByText('testTitle')).toBeDefined();
-        expect(getByText('testTag2')).toBeDefined();
-    });
-
-    it('renders note text in bottom section', async () => {
-        const{getByText} = render(
-            <Card bottomSectionProps={{disabled: false, noteLeft:'leftNote', noteRight:'rightNote'}} disabled={false}/>
-        );
-
-        expect(getByText('leftNote')).toBeDefined();
-        expect(getByText('rightNote')).toBeDefined();
-    });
-
-    it('renders author in bottom section', async () => {
-        const{getByText,getByTestId} = render(
-            <Card bottomSectionProps={{disabled: true, authorName:'testAuthor'}} disabled={true}/>
-        );
-
-        expect(getByText('testAuthor')).toBeDefined();
-        expect(getByTestId('card-bottomSection-author')).toBeDefined();
-    });
-
-    it('renders actions in bottom section', async () => {
-        const{getByText,getByTestId} = render(
-            <Card bottomSectionProps={{disabled: true, authorName:'testAuthor', actions:[{icon:<SystemIcons.Add/>,onClick:()=>{}}]}} disabled={true}/>
-        );
-
-        expect(getByText('testAuthor')).toBeDefined();
-        expect(getByTestId('card-bottomSection-author')).toBeDefined();
-    });
-
-    it('fires leftButton click event on click', async () => {
-        const leftButtonClicked = jest.fn();
-        const{getByRole} = render(
-            <Card bottomSectionProps={{disabled: true, 
-                authorName:'testAuthor', 
-                actions:[],
-                leftButton: {
-                    variant: 'tertiary',
-                    buttonText: 'button',
-                    onClick: (e) => {
-                      e.stopPropagation();
-                      leftButtonClicked();
-                    }
-                  }
-                }} 
-            disabled={true}/>
-        );
-
-        fireEvent.click(getByRole('button'));
-        expect(leftButtonClicked).toBeCalledTimes(1);
-    });
-})