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

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

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

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

package/dist/Tag/__tests__/Tag.test.tsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import { render } from '../../test-utils';
+import 'jest-styled-components';
+import { Tag } from '..';
+import '@testing-library/jest-dom';
+import { COLORS, SystemIcons } from '../..';
+
+describe('<Tag />',()=>{
+    it('renders only label', async () => {
+        const{getByText} = render(
+            <Tag label='sample text'/>
+        );
+        expect(getByText('sample text')).toBeDefined();
+        expect(getByText('sample text').previousElementSibling).toBeNull();
+    });
+
+    it('renders only icon', async () => {
+        const{getByTestId} = render(
+            <Tag icon={<SystemIcons.Time/>} />
+        );
+        expect(getByTestId('iconContainer')).toBeDefined();
+        expect(getByTestId('iconContainer').previousElementSibling).toBeNull();
+    });
+
+    it('renders label and icon', async () => {
+        const{getByText} = render(
+            <Tag label='sample text' icon={<SystemIcons.Time/>} />
+        );
+        expect(getByText('sample text')).toBeDefined();
+        expect(getByText('sample text').previousElementSibling).toBeDefined();
+    });
+
+    it('renders positive background', async () => {
+        const{getByText, container } = render(
+            <Tag label='sample text' icon={<SystemIcons.Time/>} variant='positive' />
+        );
+        expect(getByText('sample text')).toBeDefined();
+        expect(getByText('sample text').previousElementSibling).toBeDefined();
+        expect(container.firstChild).toHaveClass('positive');
+    });
+
+    it('renders warning background', async () => {
+        const{getByText, container} = render(
+            <Tag label='sample text' icon={<SystemIcons.Time/>} variant='warning' />
+        );
+        expect(getByText('sample text')).toBeDefined();
+        expect(getByText('sample text').previousElementSibling).toBeDefined();
+        expect(container.firstChild).toHaveClass('warning');
+    });
+
+    it('renders critical background', async () => {
+        const{getByText, container} = render(
+            <Tag label='sample text' icon={<SystemIcons.Time/>} variant='critical' />
+        );
+        expect(getByText('sample text')).toBeDefined();
+        expect(getByText('sample text').previousElementSibling).toBeDefined();
+        expect(container.firstChild).toHaveClass('critical');
+    });
+
+    it('renders accent1 background', async () => {
+        const{getByText, container} = render(
+            <Tag label='sample text' icon={<SystemIcons.Time/>} variant='accent1' />
+        );
+        expect(getByText('sample text')).toBeDefined();
+        expect(getByText('sample text').previousElementSibling).toBeDefined();
+        expect(container.firstChild).toHaveClass('accent1');
+    });
+
+    it('renders accent2 background', async () => {
+        const{getByText, container} = render(
+            <Tag label='sample text' icon={<SystemIcons.Time/>} variant='accent2' />
+        );
+        expect(getByText('sample text')).toBeDefined();
+        expect(getByText('sample text').previousElementSibling).toBeDefined();
+        expect(container.firstChild).toHaveClass('accent2');
+    });
+
+    it('renders neutral background', async () => {
+        const{getByText, container} = render(
+            <Tag label='sample text' icon={<SystemIcons.Time/>} />
+        );
+        expect(getByText('sample text')).toBeDefined();
+        expect(getByText('sample text').previousElementSibling).toBeDefined();
+        expect(container.firstChild).toHaveClass('neutral');
+    });
+});

package/dist/Toasters/__tests__/Toast.test.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import { render } from '../../test-utils';
+import { Toast } from '../index';
+import 'jest-styled-components';
+import { ToastColor, ToastPosition } from '../../types';
+
+
+
+describe('<Toast />', () => {
+  it('Renders black toast', async () => {
+    const { queryByText, getByTestId } = render(
+      <Toast
+        key="a"
+        options={{
+          color: ToastColor.BLACK,
+          position: ToastPosition.TOPMIDDLE,
+        }}
+        remove={() => {}}
+        content="This is a warning"
+        testId="TestToast"
+      />,
+    );
+    expect(queryByText('This is a warning')).toBeDefined();
+    expect(getByTestId('TestToast').classList.contains('BLACK')).toBe(true);
+  });
+  it('Renders white toast', async () => {
+    const { queryByText, getByTestId } = render(
+      <Toast
+        key="a"
+        options={{
+          color: ToastColor.WHITE,
+          position: ToastPosition.TOPMIDDLE,
+        }}
+        remove={() => {}}
+        content="This is a warning"
+        testId="TestToast"
+      />,
+    );
+    expect(queryByText('This is a warning')).toBeDefined();
+    expect(getByTestId('TestToast').classList.contains('WHITE')).toBe(true);
+  });
+  it('Renders warning toast', async () => {
+    const { queryByText, getByTestId } = render(
+      <Toast
+        key="a"
+        options={{
+          color: ToastColor.ORANGE,
+          position: ToastPosition.TOPMIDDLE,
+        }}
+        remove={() => {}}
+        content="This is a warning"
+        testId="TestToast"
+      />,
+    );
+    expect(queryByText('This is a warning')).toBeDefined();
+    expect(getByTestId('TestToast').classList.contains('ORANGE')).toBe(true);
+  });
+  it('Renders error toast', async () => {
+    const { queryByText, getByTestId } = render(
+      <Toast
+        key="a"
+        options={{
+          color: ToastColor.RED,
+          position: ToastPosition.TOPMIDDLE,
+        }}
+        remove={() => {}}
+        content="This is a warning"
+        testId="TestToast"
+      />,
+    );
+    expect(queryByText('This is a warning')).toBeDefined();
+    expect(getByTestId('TestToast').classList.contains('RED')).toBe(true);
+  });
+});

package/dist/Toggles/__tests__/ToggleButton.test.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { fireEvent, render } from '../../test-utils';
+import '@testing-library/jest-dom';
+import { SystemIcons, ToggleButton } from '../..';
+import 'jest-styled-components';
+
+
+
+describe('<ToggleButton />', () => {
+  it('Renders ToggleButton component', async () => {
+    const { container } = render(<ToggleButton id={'toggleBtn'} active={false} defaultState={{ icon: <SystemIcons.PlayList /> }} />);
+    expect(container.querySelector('[id="toggleBtn"]')).toBeTruthy();
+  });
+
+  it('Renders ToggleButton component in active state', async () => {
+    const { container } = render(<ToggleButton id={'toggleBtn'} active={true} defaultState={{ icon: <SystemIcons.PlayList /> }} />);
+    expect(container.querySelector('[id="toggleBtn"]')).toBeTruthy();
+    //check correct state class set
+    expect(container.querySelector('[id="toggleBtn"]')!.closest('div')).toHaveClass('active');
+  });
+
+  it('Renders ToggleButton component in state-change', async () => {
+    const { container } = render(
+      <ToggleButton active={false} id={'toggleBtn'} activeState={{ icon: <SystemIcons.PlayList /> }} defaultState={{ icon: <SystemIcons.PlayList /> }} />,
+    );
+    expect(container.querySelector('[id="toggleBtn"]')).toBeTruthy();
+    //check correct state class set
+    expect(container.querySelector('[id="toggleBtn"]')!.closest('div')).toHaveClass('state-change');
+  });
+
+  it('Renders ToggleButton component in disabled state', async () => {
+    const { container } = render(<ToggleButton disabled={true} id={'toggleBtn'} active={true} defaultState={{ icon: <SystemIcons.PlayList /> }} />);
+    expect(container.querySelector('[id="toggleBtn"]')).toBeTruthy();
+    //check correct state class set
+    expect(container.querySelector('[id="toggleBtn"]')!.closest('div')).toHaveClass('disabled');
+    //check inner button is disabled
+    expect(container.querySelector('[id="toggleBtn"]') as HTMLButtonElement).toBeDisabled();
+  });
+
+  it('Check action for ToggleButton component', async () => {
+    //mock action callback
+    const handleChange = jest.fn();
+
+    const { container } = render(
+      <ToggleButton active={false} onChange={handleChange} id={'toggleBtn'} activeState={{ icon: <SystemIcons.PlayList /> }} defaultState={{ icon: <SystemIcons.PlayList /> }} />,
+    );
+    expect(container.querySelector('[id="toggleBtn"]')).toBeTruthy();
+    fireEvent.click(container.querySelector('[id="toggleBtn"]') as HTMLButtonElement);
+
+    //check callback  called
+    expect(handleChange).toHaveBeenCalledTimes(1);
+  });
+});

package/dist/Toggles/__tests__/ToggleSwitch.test.tsx

@@ -0,0 +1,87 @@
+import React from 'react';
+import { fireEvent, render } from '../../test-utils';
+import '@testing-library/jest-dom';
+import { Size, ToggleSwitch } from '../..';
+import 'jest-styled-components';
+
+
+
+describe('<ToggleSwitch />', () => {
+  it('Renders ToggleSwitch component', async () => {
+    const { getByText } = render(<ToggleSwitch label={'Test Switch label'} id="TogglerWithoutLabelNormal" onToggle={(val) => {}} selected={false} />);
+
+    //check label element rendered
+    expect(getByText('Test Switch label').closest('label')).toBeTruthy();
+    //check label text
+    expect(getByText('Test Switch label')).toBeTruthy();
+    //no size defined, medium by default
+    expect(getByText('Test Switch label').closest('div')).toHaveClass('medium');
+  });
+
+  it('Renders ToggleSwitch component without label', async () => {
+    const { container } = render(<ToggleSwitch size={Size.Large} id="TogglerWithoutLabelNormal" onToggle={(val) => {}} selected={false} />);
+
+    //check label element rendered
+    expect(container.querySelector('.label')).toBeFalsy();
+    //large size defined
+    expect(container.querySelector('[id="switchContainer"]')!.closest('div')).toHaveClass('large');
+    //should be able to focus the parent div as not disabeld
+    expect(container.querySelector('[id="switchContainer"]')!.closest('div')).toHaveAttribute('tabindex', '0');
+  });
+
+  it('Renders disabled ToggleSwitch component', async () => {
+    const { container } = render(<ToggleSwitch disabled={true} id="TogglerWithoutLabelNormal" onToggle={(val) => {}} selected={false} />);
+
+    expect(container.querySelector('[id="switchContainer"]')!.closest('div')).toHaveClass('disabled');
+    expect(container.querySelector('[id="switchContainer"]')!.closest('div')).toHaveAttribute('tabindex', '-1');
+  });
+
+  it('Renders semantic ToggleSwitch component', async () => {
+    const { container } = render(<ToggleSwitch isSemantic={true} id="TogglerWithoutLabelNormal" onToggle={(val) => {}} selected={false} />);
+
+    //semnatic class should be added
+    expect(container.querySelector('[id="switchContainer"]')!.firstElementChild).toHaveClass('semantic');
+  });
+
+  it('Check toggle click for ToggleSwitch component', async () => {
+    const handleToggle = jest.fn();
+    const { container } = render(<ToggleSwitch isSemantic={true} id="TogglerWithoutLabelNormal" onToggle={handleToggle} selected={false} />);
+
+    fireEvent(
+      container.querySelector('[id="switchContainer"]')!.closest('div') as HTMLDivElement,
+      new MouseEvent('click', {
+        bubbles: true,
+        cancelable: true,
+      }),
+    );
+
+    expect(handleToggle).toHaveBeenCalledTimes(1);
+  });
+
+  it('Check toggle click not fired when ToggleSwitch disabled', async () => {
+    const handleToggle = jest.fn();
+    const { container } = render(<ToggleSwitch disabled={true} id="TogglerWithoutLabelNormal" onToggle={handleToggle} selected={false} />);
+
+    //check disabled
+    expect(container.querySelector('[id="switchContainer"]')!.closest('div')).toHaveClass('disabled');
+    //simulate click
+    fireEvent(
+      container.querySelector('[id="switchContainer"]')!.closest('div') as HTMLDivElement,
+      new MouseEvent('click', {
+        bubbles: true,
+        cancelable: true,
+      }),
+    );
+    //check callback not called
+    expect(handleToggle).toHaveBeenCalledTimes(0);
+  });
+
+  it('Check toggle onkeydown ev for ToggleSwitch component', async () => {
+    const handleToggle = jest.fn();
+    const { container } = render(<ToggleSwitch isSemantic={true} id="TogglerWithoutLabelNormal" onToggle={handleToggle} selected={false} />);
+
+    fireEvent.keyDown(container.querySelector('[id="switchContainer"]')!.closest('div') as HTMLDivElement, { key: 'Enter', code: 'Enter', charCode: 13 });
+
+    expect(handleToggle).toHaveBeenCalledTimes(1);
+  });
+});

package/dist/Tooltips/__tests__/TooltipWrapper.test.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import {TooltipWrapper} from '../index';
+import {render} from '../../test-utils';
+
+
+
+
+describe('TooltipWrapper', () => {
+
+  it('should render', () => {
+    const wrapper = render(<TooltipWrapper label={'label'}/>);
+
+    expect(wrapper.queryByText('label')).toBeInTheDocument();
+  });
+
+});