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

package/dist/SegmentControl/__tests__/SegmentControl.test.tsx

@@ -0,0 +1,145 @@
+import React from 'react';
+import {SegmentControlItemWrapper, SegmentControlWrapper} from '../SegmentControl';
+import {render} from '../../test-utils';
+import {SegmentControl} from '../index';
+import {SystemIcons} from '../../icons';
+import {fireEvent} from '@testing-library/react';
+import { act } from "react";
+
+
+
+
+describe('SegmentControl', () => {
+
+  const items = [
+    {key: 'item1', content: 'Item 1', disabled: false,},
+    {key: 'item2', content: 'Item 2', disabled: false,},
+    {key: 'item3', content: 'Item 3', disabled: false,},
+    {key: 'item4', content: 'Item 4', disabled: false,},
+    {key: 'item5', content: 'Item 5', disabled: false,},
+    {key: 'item6', content: 'Item 6', disabled: true,}
+  ];
+
+  const icons = [
+    {key: 'icon1', content: <SystemIcons.Legend3Star size={'20'}/>, disabled: false,},
+    {key: 'icon2', content: <SystemIcons.Legend4Square size={'20'}/>, disabled: false,},
+    {key: 'icon3', content: <SystemIcons.Legend5Diamond size={'20'}/>, disabled: false,},
+    {key: 'icon4', content: <SystemIcons.Legend6Nabla size={'20'}/>, disabled: false,},
+    {key: 'icon5', content: <SystemIcons.Legend7Pentagon size={'20'}/>, disabled: false,},
+    {key: 'icon6', content: <SystemIcons.Legend8Rectangle size={'20'}/>, disabled: true,}
+  ]
+
+  it('should render a segment control with items', () => {
+    const wrapper = render(
+      <SegmentControl items={items}
+                      selected={items[0].key}
+                      onChange={jest.fn()}/>
+    );
+
+    expect(wrapper.container.querySelectorAll(`${SegmentControlWrapper}`)).toHaveLength(1);
+    expect(wrapper.container.querySelectorAll(`${SegmentControlItemWrapper}`)).toHaveLength(6);
+  });
+
+  it('should render items with correct labels', () => {
+    const wrapper = render(
+      <SegmentControl items={items}
+                      selected={items[0].key}
+                      onChange={jest.fn()}/>
+    );
+
+    for (let item of items) {
+      expect(wrapper.getByText(item.content)).toBeTruthy();
+    }
+  });
+
+  it('should render items with icons', () => {
+    const wrapper = render(
+      <SegmentControl items={icons}
+                      selected={icons[0].key}
+                      onChange={jest.fn()}/>
+    );
+
+    expect(wrapper.container.querySelectorAll(`${SegmentControlWrapper}`)).toHaveLength(1);
+    expect(wrapper.container.querySelectorAll(`${SegmentControlItemWrapper}`)).toHaveLength(6);
+  });
+
+  it('should render correct item as selected', () => {
+    const wrapper = render(
+      <SegmentControl items={items}
+                      selected={items[2].key}
+                      onChange={jest.fn()}/>
+    );
+
+    expect(wrapper.container.querySelectorAll(`${SegmentControlItemWrapper}.selected`)).toHaveLength(1);
+    expect(wrapper.container.querySelectorAll(`${SegmentControlItemWrapper}`)[2].classList).toContain('selected');
+  });
+
+  it('should render correct item as disabled', () => {
+    const wrapper = render(
+      <SegmentControl items={items}
+                      selected={items[2].key}
+                      onChange={jest.fn()}/>
+    );
+
+    expect(wrapper.container.querySelectorAll(`${SegmentControlItemWrapper}.disabled`)).toHaveLength(1);
+    expect(wrapper.container.querySelectorAll(`${SegmentControlItemWrapper}`)[5].classList).toContain('disabled');
+  });
+
+  it('should call on change function on item click', () => {
+    const onChange = jest.fn();
+    const wrapper = render(
+      <SegmentControl items={items}
+                      selected={items[2].key}
+                      onChange={onChange}/>
+    );
+    act(() => {
+      wrapper.getByText(items[0].content).dispatchEvent(new MouseEvent('click', {bubbles: true}));
+    })
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith(items[0].key);
+  });
+
+  it('should call on change function on item key press', () => {
+    const onChange = jest.fn();
+    const wrapper = render(
+      <SegmentControl items={items}
+                      selected={items[2].key}
+                      onChange={onChange}/>
+    );
+    act(() => {
+      fireEvent.keyPress(wrapper.getByText(items[0].content), {key: 'Enter', keyCode: 13, which: 13});
+    })
+
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith(items[0].key);
+  });
+
+  it('should not call on change function on disabled item click', () => {
+    const onChange = jest.fn();
+    const wrapper = render(
+      <SegmentControl items={items}
+                      selected={items[2].key}
+                      onChange={onChange}/>
+    );
+    act(() => {
+      wrapper.getByText(items[5].content).dispatchEvent(new MouseEvent('click', {bubbles: true}));
+    })
+    expect(onChange).toHaveBeenCalledTimes(0);
+  });
+
+  it('should not call on change function on disabled item key press', () => {
+    const onChange = jest.fn();
+    const wrapper = render(
+      <SegmentControl items={items}
+                      selected={items[2].key}
+                      onChange={onChange}/>
+    );
+    act(() => {
+      fireEvent.keyPress(wrapper.getByText(items[5].content), {key: 'Enter', keyCode: 13, which: 13});
+    })
+
+    expect(onChange).toHaveBeenCalledTimes(0);
+  });
+
+
+});

package/dist/SideMenu/__tests__/SideMenu.test.tsx

@@ -0,0 +1,99 @@
+import * as React from 'react';
+import {SideMenu} from '../index';
+import {act, render} from '../../test-utils';
+
+
+
+describe('SideMenu', () => {
+
+  it('should render content', () => {
+    const wrapper = render(<SideMenu onClose={jest.fn()}>content</SideMenu>);
+
+    expect(wrapper.getByText('content')).toBeDefined();
+  });
+
+  it('should call onClose when close button is clicked', () => {
+    const onClose = jest.fn();
+    const wrapper = render(<SideMenu onClose={onClose}>content</SideMenu>);
+
+    act(() => {
+      wrapper.getByRole('button').click();
+    });
+
+    expect(onClose).toHaveBeenCalled();
+  });
+
+
+  it('should call onClose when close button is clicked', () => {
+    const onClose = jest.fn();
+    const wrapper = render(<SideMenu onClose={onClose}>content</SideMenu>);
+
+    act(() => {
+      wrapper.getByRole('button').click();
+    });
+
+    expect(onClose).toHaveBeenCalled();
+  });
+
+  it('should render label', () => {
+    const onClose = jest.fn();
+    const wrapper = render(<SideMenu onClose={onClose} header={{label: 'label'}}>content</SideMenu>);
+
+    expect(wrapper.getByText('label')).toBeDefined();
+  });
+
+  it('should render header icon buttons ', () => {
+    const onClose = jest.fn();
+    const wrapper = render(<SideMenu onClose={onClose} header={{
+      label: 'label', actions: [{
+        action: () => {
+        }, icon: <></>
+      }, {
+        action: () => {
+        }, icon: <></>
+      }]
+    }}>content</SideMenu>);
+
+    expect(wrapper.getAllByRole('button')).toHaveLength(3);
+  });
+
+  it('should render footer note', () => {
+    const onClose = jest.fn();
+    const wrapper = render(<SideMenu onClose={onClose} footer={{note: 'note'}}>content</SideMenu>);
+
+    expect(wrapper.getByText('note')).toBeDefined();
+  });
+
+  it('should render footer buttons', () => {
+    const onClose = jest.fn();
+    const wrapper = render(<SideMenu onClose={onClose} footer={{
+      buttons: [{
+        variant: 'primary', label: 'label', onClick: () => {
+        }
+      }]
+    }}>content</SideMenu>);
+
+    expect(wrapper.getAllByRole('button')).toHaveLength(2);
+  });
+
+  it('should render footer menu items', () => {
+    const onClose = jest.fn();
+    const wrapper = render(<SideMenu onClose={onClose} footer={{
+      items: [{
+        id: '1',
+        active: false,
+        onClickHandler: () => {},
+        item: {displayLabel: 'label 1', value: '1'}
+      }, {
+        id: '2',
+        active: false,
+        onClickHandler: () => {},
+        item: {displayLabel: 'label 2', value: '2'}
+      }]
+    }}>content</SideMenu>);
+
+    expect(wrapper.getByText('label 1')).toBeDefined();
+    expect(wrapper.getByText('label 2')).toBeDefined();
+  });
+
+});

package/dist/Switcher/__tests__/SwitcherMenuItem.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { SwitcherMenuItem } from '../index';
+import 'jest-styled-components';
+import { COLORS } from '../../styles';
+
+describe('<SwitcherMenuItem />', () => {
+  it('Renders SwitcherMenuItem', async () => {
+    const { queryByText, getByTestId } = render(<SwitcherMenuItem label="TestLabel" url="/test" testId="TestSwitcherMenuItem" />);
+    expect(queryByText('TestLabel')).toBeDefined();
+
+    const testMenuItem = getByTestId('TestSwitcherMenuItem');
+  });
+});