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

package/dist/Card/HorizontalCard/__tests__/VerticalCard.test.tsx

@@ -0,0 +1,124 @@
+import React from 'react';
+import { fireEvent, render } from '../../../test-utils';
+import 'jest-styled-components';
+import { Card } from '../..';
+import { COLORS } from '../../../styles';
+import { SystemIcons } from '../../../icons';
+
+
+describe('<Card />',()=>{
+    it('renders top section', async () => {
+        const{getByTestId} = render(
+            <Card topSectionProps={{disabled: false}} disabled/>
+        );
+
+        expect(getByTestId('card-topSection')).toBeDefined();
+    });
+
+    it('renders middle section', async () => {
+        const{getByTestId} = render(
+            <Card middleSectionProps={{title:'title',disabled:false}} disabled/>
+        );
+
+        expect(getByTestId('card-middleSection')).toBeDefined();
+    });
+
+    it('renders bottom section', async () => {
+        const{getByTestId} = render(
+            <Card bottomSectionProps={{disabled:false}} disabled/>
+        );
+
+        expect(getByTestId('card-bottomSection')).toBeDefined();
+    });
+
+    it('fires card clicked event on click', async () => {
+        const cardClicked = jest.fn();
+        const{getByTestId} = render(
+            <Card bottomSectionProps={{disabled:false}} disabled={false} onCardClicked={cardClicked}/>
+        );
+
+        fireEvent.click(getByTestId('card-wrapper'));
+        expect(cardClicked).toBeCalledTimes(1);
+    });
+
+    it('fires card clicked event on keyDown', async () => {
+        const cardClicked = jest.fn();
+        const{getByTestId} = render(
+            <Card bottomSectionProps={{disabled:false}} disabled={false} onCardClicked={cardClicked}/>
+        );
+
+        fireEvent.keyDown(getByTestId('card-wrapper'), {key: 'Enter', code: 'Enter', charCode: 13});
+        expect(cardClicked).toBeCalledTimes(1);
+    });
+
+    it('renders tag in top section', async () => {
+        const{getByText} = render(
+            <Card topSectionProps={{disabled: false, tagLabel:'test_label'}} disabled/>
+        );
+
+        expect(getByText('test_label')).toBeDefined();
+    });
+
+    it('renders checkbox in top section', async () => {
+        const{getByTestId} = render(
+            <Card topSectionProps={{disabled: false, selected: true}} disabled/>
+        );
+
+        expect(getByTestId('card-topSection-checkbox')).toBeDefined();
+    });
+
+    it('renders highlight ribbon in top section', async () => {
+        const{getByTestId, getByText} = render(
+            <Card topSectionProps={{disabled: false, highlightRibbonText:'testRibbon', highlightRibbonBgColor:'red'}} disabled={false}/>
+        );
+
+        expect(getByText('testRibbon')).toBeDefined();
+        expect(getByTestId('card-topSection-ribbon')).toHaveStyleRule('background-color','red');
+    });
+
+    it('renders title ,description and category label in middle section', async () => {
+        const{getByText} = render(
+            <Card middleSectionProps={{title:'testTitle', disabled: false, description:'testDescription', categoryLabel:'testCatLabel'}} disabled={false}/>
+        );
+
+        expect(getByText('testTitle')).toBeDefined();
+        expect(getByText('testDescription')).toBeDefined();
+        expect(getByText('testCatLabel')).toBeDefined();
+    });
+
+    it('renders tags in middle section', async () => {
+        const{getByText} = render(
+            <Card middleSectionProps={{title:'testTitle', disabled: false, tags:[{label:'testTag'}], row2Tags:[{label:'testTag2'}]}} disabled={false}/>
+        );
+
+        expect(getByText('testTitle')).toBeDefined();
+        expect(getByText('testTag2')).toBeDefined();
+    });
+
+    it('renders note text in bottom section', async () => {
+        const{getByText} = render(
+            <Card bottomSectionProps={{disabled: false, noteLeft:'leftNote', noteRight:'rightNote'}} disabled={false}/>
+        );
+
+        expect(getByText('leftNote')).toBeDefined();
+        expect(getByText('rightNote')).toBeDefined();
+    });
+
+    it('renders author in bottom section', async () => {
+        const{getByText,getByTestId} = render(
+            <Card bottomSectionProps={{disabled: true, authorName:'testAuthor'}} disabled={true}/>
+        );
+
+        expect(getByText('testAuthor')).toBeDefined();
+        expect(getByTestId('card-bottomSection-author')).toBeDefined();
+    });
+
+    it('renders actions in bottom section', async () => {
+        const{getByText,getByTestId} = render(
+            <Card bottomSectionProps={{disabled: true, authorName:'testAuthor', actions:[{icon:<SystemIcons.Add/>,onClick:()=>{}}]}} disabled={true}/>
+        );
+
+        expect(getByText('testAuthor')).toBeDefined();
+        expect(getByTestId('card-bottomSection-author')).toBeDefined();
+    });
+})

package/dist/Card/__tests__/Card.test.tsx

@@ -0,0 +1,146 @@
+import React from 'react';
+import { fireEvent, getByRole, render } from '../../test-utils';
+import 'jest-styled-components';
+import { Card } from '../..';
+import { COLORS } from '../../styles';
+import { SystemIcons } from '../../icons';
+
+describe('<Card />',()=>{
+    it('renders top section', async () => {
+        const{getByTestId} = render(
+            <Card topSectionProps={{disabled: false}} disabled/>
+        );
+
+        expect(getByTestId('card-topSection')).toBeDefined();
+        //expect(getByTestId('card-middleSection')).toBeDefined();
+    });
+
+    it('renders middle section', async () => {
+        const{getByTestId} = render(
+            <Card middleSectionProps={{title:'title',disabled:false}} disabled/>
+        );
+
+        expect(getByTestId('card-middleSection')).toBeDefined();
+    });
+
+    it('renders bottom section', async () => {
+        const{getByTestId} = render(
+            <Card bottomSectionProps={{disabled:false}} disabled/>
+        );
+
+        expect(getByTestId('card-bottomSection')).toBeDefined();
+    });
+
+    it('fires card clicked event on click', async () => {
+        const cardClicked = jest.fn();
+        const{getByTestId} = render(
+            <Card bottomSectionProps={{disabled:false}} disabled={false} onCardClicked={cardClicked}/>
+        );
+
+        fireEvent.click(getByTestId('card-wrapper'));
+        expect(cardClicked).toBeCalledTimes(1);
+    });
+
+    it('fires card clicked event on keyDown', async () => {
+        const cardClicked = jest.fn();
+        const{getByTestId} = render(
+            <Card bottomSectionProps={{disabled:false}} disabled={false} onCardClicked={cardClicked}/>
+        );
+
+        fireEvent.keyDown(getByTestId('card-wrapper'), {key: 'Enter', code: 'Enter', charCode: 13});
+        expect(cardClicked).toBeCalledTimes(1);
+    });
+
+    it('renders tag in top section', async () => {
+        const{getByText} = render(
+            <Card topSectionProps={{disabled: false, tagLabel:'test_label'}} disabled/>
+        );
+
+        expect(getByText('test_label')).toBeDefined();
+    });
+
+    it('renders checkbox in top section', async () => {
+        const{getByTestId} = render(
+            <Card topSectionProps={{disabled: false, selected: true}} disabled/>
+        );
+
+        expect(getByTestId('card-topSection-checkbox')).toBeDefined();
+    });
+
+    it('renders highlight ribbon in top section', async () => {
+        const{getByTestId, getByText} = render(
+            <Card topSectionProps={{disabled: false, highlightRibbonText:'testRibbon', highlightRibbonBgColor:'red'}} disabled={false}/>
+        );
+
+        expect(getByText('testRibbon')).toBeDefined();
+        expect(getByTestId('card-topSection-ribbon')).toHaveStyleRule('background-color','red');
+    });
+
+    it('renders title ,description and category label in middle section', async () => {
+        const{getByText} = render(
+            <Card middleSectionProps={{title:'testTitle', disabled: false, description:'testDescription', categoryLabel:'testCatLabel'}} disabled={false}/>
+        );
+
+        expect(getByText('testTitle')).toBeDefined();
+        expect(getByText('testDescription')).toBeDefined();
+        expect(getByText('testCatLabel')).toBeDefined();
+    });
+
+    it('renders tags in middle section', async () => {
+        const{getByText} = render(
+            <Card middleSectionProps={{title:'testTitle', disabled: false, tags:[{label:'testTag'}], row2Tags:[{label:'testTag2'}]}} disabled={false}/>
+        );
+
+        expect(getByText('testTitle')).toBeDefined();
+        expect(getByText('testTag2')).toBeDefined();
+    });
+
+    it('renders note text in bottom section', async () => {
+        const{getByText} = render(
+            <Card bottomSectionProps={{disabled: false, noteLeft:'leftNote', noteRight:'rightNote'}} disabled={false}/>
+        );
+
+        expect(getByText('leftNote')).toBeDefined();
+        expect(getByText('rightNote')).toBeDefined();
+    });
+
+    it('renders author in bottom section', async () => {
+        const{getByText,getByTestId} = render(
+            <Card bottomSectionProps={{disabled: true, authorName:'testAuthor'}} disabled={true}/>
+        );
+
+        expect(getByText('testAuthor')).toBeDefined();
+        expect(getByTestId('card-bottomSection-author')).toBeDefined();
+    });
+
+    it('renders actions in bottom section', async () => {
+        const{getByText,getByTestId} = render(
+            <Card bottomSectionProps={{disabled: true, authorName:'testAuthor', actions:[{icon:<SystemIcons.Add/>,onClick:()=>{}}]}} disabled={true}/>
+        );
+
+        expect(getByText('testAuthor')).toBeDefined();
+        expect(getByTestId('card-bottomSection-author')).toBeDefined();
+    });
+
+    it('fires leftButton click event on click', async () => {
+        const leftButtonClicked = jest.fn();
+        const{getByRole} = render(
+            <Card bottomSectionProps={{disabled: true, 
+                authorName:'testAuthor', 
+                actions:[],
+                leftButton: {
+                    variant: 'tertiary',
+                    buttonText: 'button',
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      leftButtonClicked();
+                    }
+                  }
+                }} 
+            disabled={true}/>
+        );
+
+        fireEvent.click(getByRole('button'));
+        expect(leftButtonClicked).toBeCalledTimes(1);
+    });
+})

package/dist/Chips/__tests__/ActionChip.test.tsx

@@ -0,0 +1,94 @@
+import * as React from 'react';
+import {ActionChip} from '../index';
+import {act, fireEvent, render} from '../../test-utils';
+import { SystemIcons } from '../../icons';
+
+describe('ActionChip', () => {
+
+  it('should render', () => {
+    const wrapper = render(<ActionChip text={'label'}/>);
+
+    expect(wrapper.queryByText('label')).toBeInTheDocument();
+  });
+
+  it('should render icon', () => {
+    const wrapper = render(<ActionChip text={'label'} icon={<SystemIcons.Book/>}/>);
+
+    expect(wrapper.queryByLabelText('Book')).toBeInTheDocument();
+  });
+
+  it('should be focusable if it is not disabled and onClick is defined', () => {
+    const wrapper = render(<ActionChip text={'label'} icon={<SystemIcons.Book/>} onClick={jest.fn()}/>);
+
+    expect(wrapper.container.querySelector('[tabindex="0"]')).toBeInTheDocument();
+  });
+
+  it('should not be focusable if it is disabled', () => {
+    const wrapper = render(<ActionChip text={'label'} icon={<SystemIcons.Book/>} disabled={true} onClick={jest.fn()}/>);
+
+    expect(wrapper.container.querySelector('[tabindex="-1"]')).toBeInTheDocument();
+  });
+
+  it('should not be focusable if it is not interactive', () => {
+    const wrapper = render(<ActionChip text={'label'} icon={<SystemIcons.Book/>}/>);
+
+    expect(wrapper.container.querySelector('[tabindex="-1"]')).toBeInTheDocument();
+  });
+
+  it('should call onClick when its clicked', () => {
+    const onClickSpy = jest.fn();
+    const wrapper = render(<ActionChip text={'label'} icon={<SystemIcons.Book/>} onClick={onClickSpy}/>);
+
+    act(() => {
+      wrapper.getByText('label').click();
+    });
+
+    expect(onClickSpy).toHaveBeenCalled();
+  });
+
+  it('should call onClick when Enter is pressed', () => {
+    const onClickSpy = jest.fn();
+    const wrapper = render(<ActionChip text={'label'} icon={<SystemIcons.Book/>} onClick={onClickSpy}/>);
+
+    act(() => {
+      fireEvent.keyDown(wrapper.getByText('label'), {key: 'Enter', code: 'Enter'});
+    });
+
+    expect(onClickSpy).toHaveBeenCalled();
+  });
+
+  it('should call onClick when Space is pressed', () => {
+    const onClickSpy = jest.fn();
+    const wrapper = render(<ActionChip text={'label'} icon={<SystemIcons.Book/>} onClick={onClickSpy}/>);
+
+    act(() => {
+      fireEvent.keyDown(wrapper.getByText('label'), {key: ' '});
+    });
+
+    expect(onClickSpy).toHaveBeenCalled();
+  });
+
+  it('should not call onClick when its clicked if disabled', () => {
+    const onClickSpy = jest.fn();
+    const wrapper = render(<ActionChip text={'label'} icon={<SystemIcons.Book/>} disabled={true} onClick={onClickSpy}/>);
+
+    act(() => {
+      wrapper.getByText('label').click();
+    });
+
+    expect(onClickSpy).not.toHaveBeenCalled();
+  });
+
+  it('should not call onClick when Enter is pressed if disabled', () => {
+    const onClickSpy = jest.fn();
+    const wrapper = render(<ActionChip text={'label'} icon={<SystemIcons.Book/>} disabled={true} onClick={onClickSpy}/>);
+
+    act(() => {
+      fireEvent.keyDown(wrapper.getByText('label'), {key: 'Enter', code: 'Enter'});
+    });
+
+    expect(onClickSpy).not.toHaveBeenCalled();
+  });
+
+
+});

package/dist/Chips/__tests__/ChoiceChips.test.tsx

@@ -0,0 +1,79 @@
+import * as React from 'react';
+import {ChoiceChips} from '../index';
+import {render, act, fireEvent} from '../../test-utils';
+
+
+
+
+describe('ChoiceChips', () => {
+
+  it('should render chips', () => {
+
+    const wrapper = render(<ChoiceChips selected={'1'}
+                                         values={[{value: '1', label: 'label'}, {value: '2', label: 'label 2'}]}/>);
+
+    expect(wrapper.queryAllByRole('radio')).toHaveLength(2);
+    expect(wrapper.queryByText('label')).toBeInTheDocument();
+    expect(wrapper.queryByText('label 2')).toBeInTheDocument();
+  });
+
+  it('should call onClick when chip is clicked', () => {
+    const onClickSpy = jest.fn();
+
+    const wrapper = render(<ChoiceChips selected={'1'}
+                                         onClick={onClickSpy}
+                                         values={[{value: '1', label: 'label'}, {value: '2', label: 'label 2'}]}/>);
+
+    act(() => {
+      wrapper.getByText('label 2').click()
+    });
+
+    expect(onClickSpy).toHaveBeenCalledWith({value: '2', label: 'label 2'});
+  });
+
+  it('should call onClick when enter is pressed on focused chip', () => {
+    const onClickSpy = jest.fn();
+
+    const wrapper = render(<ChoiceChips selected={'1'}
+                                         onClick={onClickSpy}
+                                         values={[{value: '1', label: 'label'}, {value: '2', label: 'label 2'}]}/>);
+
+    act(() => {
+      fireEvent.keyDown(wrapper.getByText('label 2'), {key: 'Enter', code: 'Enter'});
+    });
+
+    expect(onClickSpy).toHaveBeenCalledWith({value: '2', label: 'label 2'});
+  });
+
+  it('should not call onClick when chip is clicked if its disabled', () => {
+    const onClickSpy = jest.fn();
+
+    const wrapper = render(<ChoiceChips selected={'1'}
+                                         disabled={true}
+                                         onClick={onClickSpy}
+                                         values={[{value: '1', label: 'label'}, {value: '2', label: 'label 2'}]}/>);
+
+    act(() => {
+      wrapper.getByText('label 2').click()
+    });
+
+    expect(onClickSpy).not.toHaveBeenCalled();
+  });
+
+  it('should render selected chip with default class others with outline class', () => {
+    const onClickSpy = jest.fn();
+
+    const wrapper = render(<ChoiceChips selected={'1'}
+                                         onClick={onClickSpy}
+                                         values={[{value: '1', label: 'label'}, {value: '2', label: 'label 2'}]}/>);
+
+
+    act(() => {
+      wrapper.getByText('label 2').click()
+    });
+
+    expect(wrapper.queryAllByRole('radio')[0]).toHaveClass('outline');
+    expect(wrapper.queryAllByRole('radio')[1]).toHaveClass('default')
+  });
+
+})

package/dist/Chips/__tests__/FilterChip.test.tsx

@@ -0,0 +1,95 @@
+import * as React from 'react';
+import {FilterChip} from '../index';
+import {act, fireEvent, render} from '../../test-utils';
+
+
+
+
+describe('FilterChip', () => {
+
+  it('should render', () => {
+    const wrapper = render(<FilterChip selected={false} text={'label'}/>);
+
+    expect(wrapper.queryByText('label')).toBeInTheDocument();
+  });
+
+  it('should render icon when selected', () => {
+    const wrapper = render(<FilterChip selected={true} text={'label'}/>);
+
+    expect(wrapper.queryByLabelText('Checkmark')).toBeInTheDocument();
+  });
+
+  it('should be focusable if it is not disabled and onClick is defined', () => {
+    const wrapper = render(<FilterChip selected={false} text={'label'} onClick={jest.fn()}/>);
+
+    expect(wrapper.container.querySelector('[tabindex="0"]')).toBeInTheDocument();
+  });
+
+  it('should not be focusable if it is disabled', () => {
+    const wrapper = render(<FilterChip selected={false} text={'label'} disabled={true} onClick={jest.fn()}/>);
+
+    expect(wrapper.container.querySelector('[tabindex="-1"]')).toBeInTheDocument();
+  });
+
+  it('should not be focusable if it is not interactive', () => {
+    const wrapper = render(<FilterChip selected={false} text={'label'}/>);
+
+    expect(wrapper.container.querySelector('[tabindex="-1"]')).toBeInTheDocument();
+  });
+
+  it('should call onClick when its clicked', () => {
+    const onClickSpy = jest.fn();
+    const wrapper = render(<FilterChip selected={false} text={'label'} onClick={onClickSpy}/>);
+
+    act(() => {
+      wrapper.getByText('label').click();
+    });
+
+    expect(onClickSpy).toHaveBeenCalled();
+  });
+
+  it('should call onClick when Enter is pressed', () => {
+    const onClickSpy = jest.fn();
+    const wrapper = render(<FilterChip selected={false} text={'label'} onClick={onClickSpy}/>);
+
+    act(() => {
+      fireEvent.keyDown(wrapper.getByText('label'), {key: 'Enter', code: 'Enter'});
+    });
+
+    expect(onClickSpy).toHaveBeenCalled();
+  });
+
+  it('should call onClick when Space is pressed', () => {
+    const onClickSpy = jest.fn();
+    const wrapper = render(<FilterChip selected={false} text={'label'} onClick={onClickSpy}/>);
+
+    act(() => {
+      fireEvent.keyDown(wrapper.getByText('label'), {key: ' ', code: 'Space'});
+    });
+
+    expect(onClickSpy).toHaveBeenCalled();
+  });
+
+  it('should not call onClick when its clicked if disabled', () => {
+    const onClickSpy = jest.fn();
+    const wrapper = render(<FilterChip selected={false} text={'label'} disabled={true} onClick={onClickSpy}/>);
+
+    act(() => {
+      wrapper.getByText('label').click();
+    });
+
+    expect(onClickSpy).not.toHaveBeenCalled();
+  });
+
+  it('should not call onClick when Enter is pressed if disabled', () => {
+    const onClickSpy = jest.fn();
+    const wrapper = render(<FilterChip selected={false} text={'label'} disabled={true} onClick={onClickSpy}/>);
+
+    act(() => {
+      fireEvent.keyDown(wrapper.getByText('label'), {key: 'Enter', code: 'Enter'});
+    });
+
+    expect(onClickSpy).not.toHaveBeenCalled();
+  });
+
+});