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

package/dist/Accordion/__tests__/AccordionMenu.test.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { render } from '../../test-utils';
+import 'jest-styled-components';
+import { COLORS } from '../../styles';
+import AccordionMenu from '../AccordionMenu';
+
+const accordionItems = [
+  {
+    id: 'test1_id',
+    title: 'Item label with text 1',
+    children: <div>content test1</div>,
+  },
+  {
+    id: 'test2_id',
+    title: 'Item label with text 2',
+    children: <div>content test2</div>,
+  },
+];
+
+describe('<AccordionMenu />', () => {
+  it('Check correct text placed on labels', async () => {
+    const { queryByText } = render(<AccordionMenu items={accordionItems} onSelect={() => {}}></AccordionMenu>);
+    expect(queryByText('Item label with text 1')).toBeDefined();
+    expect(queryByText('Item label with text 2')).toBeDefined();
+    expect(queryByText('content test1')).toBeNull();
+  });
+
+  it('Check item label element color and label', async () => {
+    const { container } = render(<AccordionMenu items={accordionItems} onSelect={() => {}}></AccordionMenu>);
+    const headerItem = container.querySelector('#test2_id');
+    expect(headerItem).toBeDefined();
+    expect(headerItem?.textContent).toContain('Item label with text 2');
+  });
+
+  it('Check expanded item text', async () => {
+    const { container } = render(<AccordionMenu items={accordionItems} onSelect={() => {}} selectedItems={['test1_id']}></AccordionMenu>);
+    const headerItem = container.querySelector('#test1_id');
+    //check item expanded
+    expect(headerItem?.children[1]).toBeDefined();
+    expect(headerItem?.children[1]?.textContent).toContain('content test1');
+  });
+});

package/dist/Accordion/__tests__/ContentAccordion.test.tsx

@@ -0,0 +1,150 @@
+import React from 'react';
+import ContentAccordion, {
+  ContentAccordionItem,
+  ContentAccordionItemContentBody, ContentAccordionItemContentFooter,
+  ContentAccordionItemContentHeader, ContentAccordionItemHeader, ContentAccordionWrapper
+} from '../ContentAccordion';
+import {fireEvent, render} from '../../test-utils';
+import {Size} from '../../types';
+
+describe('ContentAccordion', () => {
+  const contentAccordionItemsWithBody = [
+    {
+      id: '1',
+      title: 'Item 1',
+      body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
+    },
+    {
+      id: '2',
+      title: 'Item 2',
+      body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+      active: true
+    },
+    {
+      id: '3',
+      title: 'Item 3',
+      body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+      disabled: true
+    },
+    {
+      id: '4',
+      title: 'Item 4',
+      body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
+    }
+  ];
+
+  const contentAccordionItemsWithBodyAndHeaderAndFooter = [
+    {
+      id: '1',
+      title: 'Item 1',
+      body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+      header: 'Header 1',
+      footer: <span/>,
+    },
+    {
+      id: '2',
+      title: 'Item 2',
+      body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+      header: 'Header 2',
+      footer: <span/>,
+    },
+    {
+      id: '3',
+      title: 'Item 3',
+      body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+      header: 'Header 3',
+      footer: <span/>,
+      disabled: true
+    },
+    {
+      id: '4',
+      title: 'Item 4',
+      body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+      header: 'Header 4',
+      footer: <span/>,
+    }
+  ];
+
+  it('should render items in correct state', () => {
+    const wrapper = render(<ContentAccordion items={contentAccordionItemsWithBody}/>);
+
+    expect(wrapper.container.querySelectorAll(`${ContentAccordionItem}`).length).toBe(4);
+    expect(wrapper.container.querySelectorAll(`${ContentAccordionItem}.disabled`).length).toBe(1);
+    expect(wrapper.container.querySelectorAll(`${ContentAccordionItem}.disabled`)[0].id).toBe('item_3');
+    expect(wrapper.container.querySelectorAll(`${ContentAccordionItem}.active`).length).toBe(1);
+    expect(wrapper.container.querySelectorAll(`${ContentAccordionItem}.active`)[0].id).toBe('item_2');
+  });
+
+  it('should not render header if not provided', () => {
+    const wrapper = render(<ContentAccordion items={contentAccordionItemsWithBody}/>);
+
+    expect(wrapper.container.querySelectorAll(`${ContentAccordionItemContentBody}`).length).toBe(4);
+    expect(wrapper.container.querySelectorAll(`${ContentAccordionItemContentHeader}`).length).toBe(0);
+  });
+
+  it('should not render footer if not provided', () => {
+    const wrapper = render(<ContentAccordion items={contentAccordionItemsWithBody}/>);
+
+    expect(wrapper.container.querySelectorAll(`${ContentAccordionItemContentBody}`).length).toBe(4);
+    expect(wrapper.container.querySelectorAll(`${ContentAccordionItemContentFooter}`).length).toBe(0);
+  });
+
+  it('should render body, header, and footer if all are provided', () => {
+    const wrapper = render(<ContentAccordion items={contentAccordionItemsWithBodyAndHeaderAndFooter}/>);
+
+    expect(wrapper.container.querySelectorAll(`${ContentAccordionItem}`).length).toBe(4);
+    expect(wrapper.container.querySelectorAll(`${ContentAccordionItemContentBody}`).length).toBe(4);
+    expect(wrapper.container.querySelectorAll(`${ContentAccordionItemContentHeader}`).length).toBe(4);
+    expect(wrapper.container.querySelectorAll(`${ContentAccordionItemContentFooter}`).length).toBe(4);
+  });
+
+  it('should set correct size class name for small accordion', () => {
+    const wrapper = render(<ContentAccordion items={contentAccordionItemsWithBodyAndHeaderAndFooter}
+                                             size={Size.Small}/>);
+    expect(wrapper.container.querySelectorAll(`${ContentAccordionWrapper}.small`).length).toBe(1);
+  });
+
+  it('should set correct size class name for medium accordion', () => {
+    const wrapper = render(<ContentAccordion items={contentAccordionItemsWithBodyAndHeaderAndFooter}
+                                             size={Size.Medium}/>);
+    expect(wrapper.container.querySelectorAll(`${ContentAccordionWrapper}.medium`).length).toBe(1);
+  });
+
+  it('should set correct size class name for large accordion', () => {
+    const wrapper = render(<ContentAccordion items={contentAccordionItemsWithBodyAndHeaderAndFooter}
+                                             size={Size.Large}/>);
+    expect(wrapper.container.querySelectorAll(`${ContentAccordionWrapper}.large`).length).toBe(1);
+  });
+
+  it('should change active state when item header is clicked', () => {
+    const wrapper = render(<ContentAccordion items={contentAccordionItemsWithBody} multi={false}/>);
+    const itemHeader = wrapper.container.querySelectorAll(`${ContentAccordionItemHeader}`)[3];
+
+    fireEvent.click(itemHeader);
+
+    expect(wrapper.container.querySelectorAll(`${ContentAccordionItem}.active`).length).toBe(1);
+    expect(wrapper.container.querySelectorAll(`${ContentAccordionItem}.active`)[0].id).toBe('item_4');
+  });
+
+  it('should not change active state when disabled item header is clicked', () => {
+    const wrapper = render(<ContentAccordion items={contentAccordionItemsWithBody} multi={false}/>);
+    const itemHeader = wrapper.container.querySelectorAll(`${ContentAccordionItemHeader}`)[2];
+
+    fireEvent.click(itemHeader);
+
+    expect(wrapper.container.querySelectorAll(`${ContentAccordionItem}.active`).length).toBe(1);
+    expect(wrapper.container.querySelectorAll(`${ContentAccordionItem}.active`)[0].id).toBe('item_2');
+  });
+
+  it('should append active items if multi property is true', () => {
+    const wrapper = render(<ContentAccordion items={contentAccordionItemsWithBody} multi={true}/>);
+    const itemHeader = wrapper.container.querySelectorAll(`${ContentAccordionItemHeader}`)[3];
+
+    fireEvent.click(itemHeader);
+
+    expect(wrapper.container.querySelectorAll(`${ContentAccordionItem}.active`).length).toBe(2);
+    expect(wrapper.container.querySelectorAll(`${ContentAccordionItem}.active`)[0].id).toBe('item_2');
+    expect(wrapper.container.querySelectorAll(`${ContentAccordionItem}.active`)[1].id).toBe('item_4');
+  });
+
+});

package/dist/AuthPage/__tests__/AuthPage.test.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { render } from '../../test-utils';
+import '@testing-library/jest-dom';
+import { AuthPage, Size, SystemIcons } from '../..';
+import 'jest-styled-components';
+
+
+
+
+describe('<AuthPage />', () => {
+  it('Renders AuthPage component', async () => {
+    const { getByText, container, getByTestId } = render(
+      <AuthPage
+        screenSetsContainerId="gigya_test"
+        panel={{
+          title: 'Sign in header',
+          content: 'Sign in information',
+        }}
+      />,
+    );
+    //expect gygia container displayed
+    expect(container.querySelector('[id="gigya_test"]')).toBeTruthy();
+    //expect sign in header and info text displayed
+    expect(getByText('Sign in header')).toBeTruthy();
+    expect(getByText('Sign in information')).toBeTruthy();
+  });
+});

package/dist/Banners/__tests__/Banner.test.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { render } from '../../test-utils';
+import { Banner } from '../index';
+import 'jest-styled-components';
+import { COLORS } from '../../styles';
+
+
+
+
+describe('<Banner />', () => {
+  it('Renders warning banner', async () => {
+    const { queryByText, getByTestId } = render(
+      <Banner type="warning" testId="TestBanner">
+        <h2>TestBanner</h2>
+      </Banner>,
+    );
+    expect(queryByText('TestHeader')).toBeDefined();
+    expect(getByTestId('TestBanner')).toHaveStyleRule('background', COLORS.bg_surface_warning);
+  });
+  it('Renders critial banner', async () => {
+    const { queryByText, getByTestId } = render(
+      <Banner type="critical" testId="TestBanner">
+        <h2>TestBanner</h2>
+      </Banner>,
+    );
+    expect(queryByText('TestHeader')).toBeDefined();
+    expect(getByTestId('TestBanner')).toHaveStyleRule('background', COLORS.bg_surface_critical);
+  });
+  it('Renders positive banner', async () => {
+    const { queryByText, getByTestId } = render(
+      <Banner type="positive" testId="TestBanner">
+        <h2>TestBanner</h2>
+      </Banner>,
+    );
+    expect(queryByText('TestHeader')).toBeDefined();
+    expect(getByTestId('TestBanner')).toHaveStyleRule('background', COLORS.bg_surface_positive);
+  });
+  it('Renders default banner', async () => {
+    const { queryByText, getByTestId } = render(
+      <Banner testId="TestBanner">
+        <h2>TestBanner</h2>
+      </Banner>,
+    );
+    expect(queryByText('TestHeader')).toBeDefined();
+    expect(getByTestId('TestBanner')).toHaveStyleRule('background', COLORS.bg_surface_primary);
+  });
+});

package/dist/Banners/__tests__/OverviewBanner.test.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { render } from '../../test-utils';
+import { OverviewBanner } from '../index';
+import 'jest-styled-components';
+import { COLORS } from '../../styles';
+
+
+
+
+describe('<OverviewBanner />', () => {
+  it('Renders', async () => {
+    const { queryByText, getByTestId } = render(
+      <OverviewBanner testId="TestBanner">
+        <h2>TestHeader</h2>
+      </OverviewBanner>,
+    );
+    expect(queryByText('TestHeader')).toBeDefined();
+    expect(getByTestId('TestBanner')).toHaveStyleRule('background-color', COLORS.primary_20);
+  });
+});

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

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

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

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

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

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