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

package/dist/Table/__tests__/Table.test.tsx

@@ -1,499 +0,0 @@
-import React from 'react';
-/**
- * Import React libraries.
- */
-import { render } from '../../test-utils';
-
-/**
- * Import custom components.
- */
-import { Table } from '../index';
-
-/**
- * Import third-party libraries.
- */
-import 'jest-styled-components';
-
-/**
- * Import custom types.
- */
-import { TableColumn } from '../TableTypes';
-import {StyledTableBodyRow, StyledTableFooterCollapseButton} from '../TableStyles';
-import { act } from "react";
-
-
-
-describe('<Table />', () => {
-  it('Renders the Table', () => {
-    const columns: TableColumn[] = [
-      {
-        key: 'column1',
-        name: 'Column 1',
-      },
-      {
-        key: 'column2',
-        name: 'Column 2',
-      },
-    ];
-    const rows: any[] = [
-      {
-        column1: 'Test content',
-        column2: 'Test content 2',
-      },
-    ];
-    const { getByTestId } = render(<Table rows={rows} columns={columns} title="Test title" />);
-    expect(getByTestId('TestTable')).toBeDefined();
-  });
-
-  describe('Table Header Row Tests', () => {
-    it('Should render table header row in case title is passed', () => {
-      const columns: TableColumn[] = [
-        {
-          key: 'column1',
-          name: 'Column 1',
-        },
-        {
-          key: 'column2',
-          name: 'Column 2',
-        },
-      ];
-      const rows: any[] = [
-        {
-          column1: 'Test content',
-          column2: 'Test content 2',
-        },
-      ];
-      const { queryByTestId } = render(<Table rows={rows} columns={columns} title="Test title" />);
-      expect(queryByTestId('TestTableHeaderRow')).not.toBeNull();
-    });
-
-    it('Should not render table header row in case title is passed', () => {
-      const columns: TableColumn[] = [
-        {
-          key: 'column1',
-          name: 'Column 1',
-        },
-        {
-          key: 'column2',
-          name: 'Column 2',
-        },
-      ];
-      const rows: any[] = [
-        {
-          column1: 'Test content',
-          column2: 'Test content 2',
-        },
-      ];
-      const { queryByTestId } = render(<Table rows={rows} columns={columns} />);
-      expect(queryByTestId('TestTableHeaderRow')).toBeNull();
-    });
-
-    describe('Table Header Row functional tests', () => {
-      it('Should have title', () => {
-        const columns: TableColumn[] = [
-          {
-            key: 'column1',
-            name: 'Column 1',
-          },
-          {
-            key: 'column2',
-            name: 'Column 2',
-          },
-        ];
-        const rows: any[] = [
-          {
-            column1: 'Test content',
-            column2: 'Test content 2',
-          },
-        ];
-        const { queryByTestId } = render(<Table rows={rows} columns={columns} title="Test Title" />);
-        const tableHeaderRow = queryByTestId('TestTableHeaderRow');
-        expect(tableHeaderRow?.children[0].children[0].textContent).toContain('Test Title');
-      });
-
-      it('Should have options menu', () => {
-        const columns: TableColumn[] = [
-          {
-            key: 'column1',
-            name: 'Column 1',
-          },
-          {
-            key: 'column2',
-            name: 'Column 2',
-          },
-        ];
-        const rows: any[] = [
-          {
-            column1: 'Test content',
-            column2: 'Test content 2',
-          },
-        ];
-        const { queryByTestId } = render(<Table rows={rows} columns={columns} title="Test Title" />);
-        expect(queryByTestId('TestTableHeaderRow')?.getElementsByTagName('svg')).not.toBeNull();
-      });
-    });
-  });
-
-  describe('Table Column Header Row Tests', () => {
-    it('Should render column header row', () => {
-      const columns: TableColumn[] = [
-        {
-          key: 'column1',
-          name: 'Column 1',
-        },
-        {
-          key: 'column2',
-          name: 'Column 2',
-        },
-      ];
-      const rows: any[] = [
-        {
-          column1: 'Test content',
-          column2: 'Test content 2',
-        },
-      ];
-      const { getByTestId } = render(<Table rows={rows} columns={columns} />);
-      expect(getByTestId('TestTableColumnHeaderRow')).not.toBeNull();
-    });
-
-    it('Should render two columns in the column header row', () => {
-      const columns: TableColumn[] = [
-        {
-          key: 'column1',
-          name: 'Column 1',
-        },
-        {
-          key: 'column2',
-          name: 'Column 2',
-        },
-      ];
-      const rows: any[] = [
-        {
-          column1: 'Test content',
-          column2: 'Test content 2',
-        },
-      ];
-      const { getByTestId } = render(<Table rows={rows} columns={columns} />);
-      expect(getByTestId('TestTableColumnHeaderRow').children.length).toEqual(2);
-    });
-
-    it('Should render correct column names in the column header row', () => {
-      const columns: TableColumn[] = [
-        {
-          key: 'column1',
-          name: 'Column 1',
-        },
-        {
-          key: 'column2',
-          name: 'Column 2',
-        },
-      ];
-      const rows: any[] = [
-        {
-          column1: 'Test content',
-          column2: 'Test content 2',
-        },
-      ];
-      const { getByTestId } = render(<Table rows={rows} columns={columns} />);
-      expect(getByTestId('TestTableColumnHeaderRow').children[0].textContent).toEqual('Column 1');
-      expect(getByTestId('TestTableColumnHeaderRow').children[1].textContent).toEqual('Column 2');
-    });
-
-    it('Should render columns without no-border class in the column header row, in case title is passed', () => {
-      const columns: TableColumn[] = [
-        {
-          key: 'column1',
-          name: 'Column 1',
-        },
-        {
-          key: 'column2',
-          name: 'Column 2',
-        },
-      ];
-      const rows: any[] = [
-        {
-          column1: 'Test content',
-          column2: 'Test content 2',
-        },
-      ];
-      const { getByTestId } = render(<Table rows={rows} columns={columns} title="test title" />);
-      expect(getByTestId('TestTableColumnHeaderRow').children[0].classList.contains('no-border')).toBe(false);
-      expect(getByTestId('TestTableColumnHeaderRow').children[1].classList.contains('no-border')).toBe(false);
-    });
-
-  });
-
-  describe('Table Body Row tests', () => {
-    it('Should not render "No Data" row in case there are rows', () => {
-      const columns: TableColumn[] = [
-        {
-          key: 'column1',
-          name: 'Column 1',
-        },
-        {
-          key: 'column2',
-          name: 'Column 2',
-        },
-      ];
-      const rows: any[] = [
-        {
-          column1: 'Test content',
-          column2: 'Test content 2',
-        },
-      ];
-      const { queryByTestId } = render(<Table rows={rows} columns={columns} />);
-      expect(queryByTestId('TestTableNoDataRow')).toBeNull();
-    });
-
-    it('Should render "No Data" row in case there are no rows', () => {
-      const columns: TableColumn[] = [
-        {
-          key: 'column1',
-          name: 'Column 1',
-        },
-        {
-          key: 'column2',
-          name: 'Column 2',
-        },
-      ];
-      const rows: any[] = [];
-      const { queryByTestId } = render(<Table rows={rows} columns={columns} />);
-      expect(queryByTestId('TestTableNoDataRow')).not.toBeNull();
-      expect(queryByTestId('TestTableNoDataRow')?.textContent).toEqual('There are no rows to display');
-    });
-
-    it('Should render a data row with correct content for each row that is passed', () => {
-      const columns: TableColumn[] = [
-        {
-          key: 'column1',
-          name: 'Column 1',
-        },
-        {
-          key: 'column2',
-          name: 'Column 2',
-        },
-      ];
-      const rows: any[] = [
-        {
-          column1: 'Test content',
-          column2: 'Test content 2',
-        },
-      ];
-      const { getByTestId } = render(<Table rows={rows} columns={columns} />);
-      expect(getByTestId('TestTableDataRow')).toBeDefined();
-      expect(getByTestId('TestTableDataRow').children.length).toEqual(2);
-      expect(getByTestId('TestTableDataRow').children[0].textContent).toEqual('Test content');
-      expect(getByTestId('TestTableDataRow').children[1].textContent).toEqual('Test content 2');
-    });
-  });
-
-  it('Should render footer row', () => {
-    const columns: TableColumn[] = [
-      {
-        key: 'column1',
-        name: 'Column 1',
-      },
-      {
-        key: 'column2',
-        name: 'Column 2',
-      },
-    ];
-    const rows: any[] = [
-      {
-        column1: 'Test content',
-        column2: 'Test content 2',
-      },
-    ];
-    const { getByTestId } = render(<Table rows={rows} columns={columns} />);
-    expect(getByTestId('TestTableFooterRow')).toBeDefined();
-  });
-
-  describe('Table Accordion tests', () => {
-    it('Should render collapse button when configured as accordion', () => {
-      const columns: TableColumn[] = [
-        {
-          key: 'column1',
-          name: 'Column 1',
-        },
-        {
-          key: 'column2',
-          name: 'Column 2',
-        },
-      ];
-      const rows: any[] = [
-        {
-          column1: 'Test content',
-          column2: 'Test content 2',
-        },
-        {
-          column1: 'Test content',
-          column2: 'Test content 2',
-        },
-        {
-          column1: 'Test content',
-          column2: 'Test content 2',
-        },
-        {
-          column1: 'Test content',
-          column2: 'Test content 2',
-        },
-      ];
-      const wrapper = render(<Table rows={rows} columns={columns} accordion={true} collapsedRows={3}/>);
-
-      expect(wrapper.container.querySelectorAll(`${StyledTableFooterCollapseButton}`)).toHaveLength(1);
-    });
-
-    it('Should not render all items when collapsed', () => {
-      const columns: TableColumn[] = [
-        {
-          key: 'column1',
-          name: 'Column 1',
-        },
-        {
-          key: 'column2',
-          name: 'Column 2',
-        },
-      ];
-      const rows: any[] = [
-        {
-          column1: 'Test content',
-          column2: 'Test content 2',
-        },
-        {
-          column1: 'Test content',
-          column2: 'Test content 2',
-        },
-        {
-          column1: 'Test content',
-          column2: 'Test content 2',
-        },
-        {
-          column1: 'Test content',
-          column2: 'Test content 2',
-        },
-      ];
-      const wrapper = render(<Table rows={rows} columns={columns} accordion={true} collapsedRows={3}/>);
-
-      expect(wrapper.container.querySelectorAll(`${StyledTableBodyRow}`)).toHaveLength(3);
-    });
-
-    it('Should render all items when not collapsed', () => {
-      const columns: TableColumn[] = [
-        {
-          key: 'column1',
-          name: 'Column 1',
-        },
-        {
-          key: 'column2',
-          name: 'Column 2',
-        },
-      ];
-      const rows: any[] = [
-        {
-          column1: 'Test content',
-          column2: 'Test content 2',
-        },
-        {
-          column1: 'Test content',
-          column2: 'Test content 2',
-        },
-        {
-          column1: 'Test content',
-          column2: 'Test content 2',
-        },
-        {
-          column1: 'Test content',
-          column2: 'Test content 2',
-        },
-      ];
-      const wrapper = render(<Table rows={rows} columns={columns} accordion={true} collapsedRows={3}
-                                    collapsed={false}/>);
-
-      expect(wrapper.container.querySelectorAll(`${StyledTableBodyRow}`)).toHaveLength(4);
-    });
-
-    it('Should expand when show more button is clicked', () => {
-      const columns: TableColumn[] = [
-        {
-          key: 'column1',
-          name: 'Column 1',
-        },
-        {
-          key: 'column2',
-          name: 'Column 2',
-        },
-      ];
-      const rows: any[] = [
-        {
-          column1: 'Test content',
-          column2: 'Test content 2',
-        },
-        {
-          column1: 'Test content',
-          column2: 'Test content 2',
-        },
-        {
-          column1: 'Test content',
-          column2: 'Test content 2',
-        },
-        {
-          column1: 'Test content',
-          column2: 'Test content 2',
-        },
-      ];
-      const wrapper = render(<Table rows={rows} columns={columns} accordion={true} collapsedRows={3}
-                                    collapsed={true}/>);
-
-      expect(wrapper.container.querySelectorAll(`${StyledTableBodyRow}`)).toHaveLength(3);
-
-      act(() => {
-        let button = wrapper.container.querySelectorAll(`${StyledTableFooterCollapseButton}`)[0] as HTMLButtonElement;
-        button.click();
-      })
-
-      expect(wrapper.container.querySelectorAll(`${StyledTableBodyRow}`)).toHaveLength(4);
-    });
-
-    it('Should collapse when show less button is clicked', () => {
-      const columns: TableColumn[] = [
-        {
-          key: 'column1',
-          name: 'Column 1',
-        },
-        {
-          key: 'column2',
-          name: 'Column 2',
-        },
-      ];
-      const rows: any[] = [
-        {
-          column1: 'Test content',
-          column2: 'Test content 2',
-        },
-        {
-          column1: 'Test content',
-          column2: 'Test content 2',
-        },
-        {
-          column1: 'Test content',
-          column2: 'Test content 2',
-        },
-        {
-          column1: 'Test content',
-          column2: 'Test content 2',
-        },
-      ];
-      const wrapper = render(<Table rows={rows} columns={columns} accordion={true} collapsedRows={3}
-                                    collapsed={false}/>);
-
-      expect(wrapper.container.querySelectorAll(`${StyledTableBodyRow}`)).toHaveLength(4);
-
-      act(() => {
-        let button = wrapper.container.querySelectorAll(`${StyledTableFooterCollapseButton}`)[0] as HTMLButtonElement;
-        button.click();
-      })
-
-      expect(wrapper.container.querySelectorAll(`${StyledTableBodyRow}`)).toHaveLength(3);
-    });
-  });
-});

package/dist/Tabs/__tests__/HorizontalTabs.test.tsx

@@ -1,95 +0,0 @@
-import React from 'react';
-import { fireEvent, render } from '../../test-utils';
-import HorizontalTabs from '../HorizontalTabs';
-import { Size } from '../../types';
-import 'jest-styled-components';
-import '@testing-library/jest-dom';
-
-const tabs = [
-  {
-    value: 'Tab1',
-    selected: false,
-    to: 'tab1',
-  },
-  {
-    value: 'Tab2',
-    selected: true,
-    to: 'tab2',
-  },
-  {
-    value: 'Tab3',
-    selected: false,
-    to: 'tab3',
-    disabled: true,
-  },
-];
-
-
-
-
-describe('<HorizontalTabs />', () => {
-  it('Renders tabs component', async () => {
-    const { queryByTestId } = render(<HorizontalTabs size={Size.Small} tabs={tabs} onTabChange={(to) => {}}></HorizontalTabs>);
-    expect(queryByTestId('horizontal-tabs-container')).toBeTruthy();
-    expect(queryByTestId('horizontal-tabs-container')?.querySelectorAll('[data-testid*="tab_"]')).toHaveLength(3);
-  });
-
-  it('Renders tabs component with side fill', async () => {
-    const { queryByTestId } = render(<HorizontalTabs size={Size.Small} sideFill={true} tabs={tabs} onTabChange={(to) => {}}></HorizontalTabs>);
-    expect(queryByTestId('horizontal-tabs-container')).toBeTruthy();
-    expect(queryByTestId('horizontal-tabs-container')?.querySelector('.fill')).toBeTruthy();
-  });
-
-  it('Renders tabs component with no tabs provided', async () => {
-    const { queryByTestId } = render(<HorizontalTabs size={Size.Small} tabs={[]} onTabChange={(to) => {}}></HorizontalTabs>);
-    expect(queryByTestId('horizontal-tabs-container')).toBeTruthy();
-    expect(queryByTestId('horizontal-tabs-container')?.querySelectorAll('[data-testid*="tab_"]')).toHaveLength(0);
-  });
-
-  it('Check disabled tabs rendered correctly', async () => {
-    const { queryByTestId } = render(<HorizontalTabs size={Size.Small} tabs={tabs} onTabChange={(to) => {}}></HorizontalTabs>);
-    const disabledTab = tabs.find((t) => t.disabled);
-    const notDisabledTab = tabs.find((t) => !t.disabled);
-    expect(queryByTestId('horizontal-tabs-container')).toBeTruthy();
-
-    const disabledTabElem = queryByTestId('horizontal-tabs-container')?.querySelector(`[data-testid="tab_${disabledTab?.value}"]`);
-    const notDisabledTabElem = queryByTestId('horizontal-tabs-container')?.querySelector(`[data-testid="tab_${notDisabledTab?.value}"]`);
-
-    //check disabled/non-disabled rendered
-    expect(disabledTabElem).toBeTruthy();
-    expect(notDisabledTabElem).toBeTruthy();
-
-    //check tab index prop set correct
-    expect(disabledTabElem).toHaveAttribute('tabindex', '-1');
-    expect(notDisabledTabElem).not.toHaveClass('disabled');
-  });
-
-  it('Check tab change callback called on tab click', async () => {
-    const tabChangeFn = jest.fn();
-    const { queryByTestId } = render(<HorizontalTabs size={Size.Small} tabs={tabs} onTabChange={tabChangeFn}></HorizontalTabs>);
-
-    const notDisabledTab = tabs.find((t) => !t.disabled);
-    const notDisabledTabElem = queryByTestId('horizontal-tabs-container')?.querySelector(`[data-testid="tab_${notDisabledTab?.value}"]`);
-
-    //fire click tab click event
-    fireEvent(
-      notDisabledTabElem as HTMLButtonElement,
-      new MouseEvent('click', {
-        bubbles: true,
-        cancelable: true,
-      }),
-    );
-
-    //check has been called
-    expect(tabChangeFn).toHaveBeenCalledTimes(1);
-  });
-
-  it('Check tab width calculed correctly when fullWidth prop set', async () => {
-    const { queryByTestId, queryByText } = render(<HorizontalTabs fullWidth={true} size={Size.Small} tabs={tabs} onTabChange={() => {}}></HorizontalTabs>);
-
-    const tabElement = queryByTestId('horizontal-tabs-container')?.querySelector(`[data-testid="tab_Tab1"]`) as HTMLButtonElement;
-
-    expect(tabElement).toBeTruthy();
-    expect(tabElement.style).toHaveProperty('width', `${100 / tabs.length}%`);
-  });
-});

package/dist/Tabs/__tests__/TabLink.test.tsx

@@ -1,40 +0,0 @@
-import React from 'react';
-import { render } from '../../test-utils';
-import { createMemoryHistory } from 'history';
-import TabLink from '../TabLink';
-import 'jest-styled-components';
-import { COLORS } from '../../styles';
-import { NavigationProvider } from '../../Navigation';
-
-describe('<TabLink />', () => {
-
-  const navProps = {
-    currentPath: '',
-    isActiveRoute: () => false,
-    navigate: (path: string, isExternal: boolean) => {}
-  };
-
-  it('Renders primary button', async () => {
-    const { queryByText, getByTestId } = render(
-      <NavigationProvider {...navProps}>
-        <TabLink requiredLine="This is a required line" onLinkClick={() => {}} href="/test" testId="TestTabLink" />
-      </NavigationProvider>,
-    );
-    expect(queryByText('This is a required line')).toBeDefined();
-    expect(getByTestId('TestTabLink')).toHaveStyle('background-color: transparent');
-    expect(getByTestId('TestTabLink')).toHaveStyle('font-size: 16px');
-
-    // Check that click takes you to correct route
-    getByTestId('TestTabLink').click();
-    //expect(history.location.pathname).toBe('/test');
-  });
-  it('Renders notification dot if defined', async () => {
-    const { queryByText, getByTestId } = render(
-      <NavigationProvider {...navProps}>
-        <TabLink requiredLine="This is a required line" onLinkClick={() => {}} href="/test" testId="TestTabLinkWithNotifcationDot" showNotificationDot={true} />
-      </NavigationProvider>,
-    );
-    expect(queryByText('This is a required line')).toBeDefined();
-    expect(getByTestId('NotificationDot')).toBeDefined();
-  });
-});

package/dist/Tabs/__tests__/Tablist.test.tsx

@@ -1,37 +0,0 @@
-import React from 'react';
-import { prettyDOM, render } from '../../test-utils';
-import Tabs from '../Tabs';
-import { Size } from '../../types';
-import 'jest-styled-components';
-import '@testing-library/jest-dom';
-
-describe('<Tabs />', () => {
-  it('Renders tabs component', async () => {
-    const { queryByRole } = render(<Tabs size={Size.Small}></Tabs>);
-    expect(queryByRole('tablist')).toBeDefined();
-    expect(queryByRole('tablist')?.children).toHaveLength(0);
-  });
-
-  it('Renders tabs component with children and medium size', async () => {
-    const renderer = render(
-      <Tabs size={Size.Medium}>
-        <a data-testid="child"><div>test tab</div><div/></a>
-      </Tabs>,
-    );
-    expect(renderer.queryByRole('tablist')).toBeTruthy();
-    expect(renderer.queryByRole('tablist')?.children).toHaveLength(1);
-    expect(renderer.queryByRole('tablist')).toHaveStyleRule('height', '56px', { modifier: 'a' });
-    expect(renderer.queryByTestId('child')?.querySelector('div')).toHaveStyle('margin: 10px 0 3px 16px');
-  });
-
-  it('Renders tabs component with children and large size', async () => {
-    const { queryByRole, queryByTestId } = render(
-      <Tabs size={Size.Large}>
-        <a data-testid="child"><div>test tab</div><div/></a>
-      </Tabs>,
-    );
-    expect(queryByRole('tablist')).toBeTruthy();
-    expect(queryByRole('tablist')).toHaveStyleRule('height', '64px', { modifier: 'a' });
-    expect(queryByTestId('child')?.querySelector('div')).toHaveStyle('margin: 12px 0 4px 16px');
-  });
-});