@laerdal/life-react-components 3.6.0-dev.1.full → 3.6.1

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');
+  });
+});