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

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

@@ -0,0 +1,155 @@
+import * as React from 'react';
+import {InputChip} from '../index';
+import {act, fireEvent, render} from '../../test-utils';
+import {States} from '../../types';
+import { SystemIcons } from '../../icons';
+
+
+
+
+describe('InputChip', () => {
+
+  it('should render', () => {
+    const wrapper = render(<InputChip variant={States.Default} onRemove={jest.fn()} text={'label'}/>);
+
+    expect(wrapper.queryByText('label')).toBeInTheDocument();
+  });
+
+  it('should render icon', () => {
+    const wrapper = render(<InputChip variant={States.Default} onRemove={jest.fn()} 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(<InputChip variant={States.Default} onRemove={jest.fn()} 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(<InputChip variant={States.Default} onRemove={jest.fn()} text={'label'} icon={<SystemIcons.Book/>}
+                                       disabled={true} onClick={jest.fn()}/>);
+
+    expect(wrapper.container.querySelector('[tabindex="-1"]')).toBeInTheDocument();
+  });
+
+  it('should call onClick when its clicked', () => {
+    const onClickSpy = jest.fn();
+    const wrapper = render(<InputChip variant={States.Default} onRemove={jest.fn()} 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(<InputChip variant={States.Default} onRemove={jest.fn()} 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(<InputChip variant={States.Default} onRemove={jest.fn()} text={'label'} icon={<SystemIcons.Book/>}
+                                       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(<InputChip variant={States.Default} onRemove={jest.fn()} 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(<InputChip variant={States.Default} onRemove={jest.fn()} text={'label'} icon={<SystemIcons.Book/>}
+                                       disabled={true} onClick={onClickSpy}/>);
+
+    act(() => {
+      fireEvent.keyDown(wrapper.getByText('label'), {key: 'Enter', code: 'Enter'});
+    });
+
+    expect(onClickSpy).not.toHaveBeenCalled();
+  });
+
+  it('should call onRemove when remove is clicked', () => {
+    const onRemoveSpy = jest.fn();
+    const wrapper = render(<InputChip variant={States.Default} onRemove={onRemoveSpy} text={'label'} icon={<SystemIcons.Book/>}/>);
+
+    act(() => {
+      fireEvent.click(wrapper.getByLabelText('Close'));
+    });
+
+    expect(onRemoveSpy).toHaveBeenCalled();
+  });
+
+  it('should call onRemove when Enter is pressed on remove button', () => {
+    const onRemoveSpy = jest.fn();
+    const wrapper = render(<InputChip variant={States.Default} onRemove={onRemoveSpy} text={'label'} icon={<SystemIcons.Book/>}/>);
+
+    act(() => {
+      fireEvent.keyDown(wrapper.getByLabelText('Close'), {key: 'Enter', code: 'Enter'});
+    });
+
+    expect(onRemoveSpy).toHaveBeenCalled();
+  });
+
+  it('should call onRemove when Space is pressed on remove button', () => {
+    const onRemoveSpy = jest.fn();
+    const wrapper = render(<InputChip variant={States.Default} onRemove={onRemoveSpy} text={'label'} icon={<SystemIcons.Book/>}/>);
+
+    act(() => {
+      fireEvent.keyDown(wrapper.getByLabelText('Close'), {key: ' ', code: 'Space'});
+    });
+
+    expect(onRemoveSpy).toHaveBeenCalled();
+  });
+
+  it('should not call onRemove when remove is clicked and its disabled', () => {
+    const onRemoveSpy = jest.fn();
+    const wrapper = render(<InputChip variant={States.Default} onRemove={onRemoveSpy} disabled={true} text={'label'}
+                                      icon={<SystemIcons.Book/>}/>);
+
+    act(() => {
+      fireEvent.click(wrapper.getByLabelText('Close'));
+    });
+
+    expect(onRemoveSpy).not.toHaveBeenCalled();
+  });
+
+  it('should not call onRemove when Enter is pressed on remove button and it disabled', () => {
+    const onRemoveSpy = jest.fn();
+    const wrapper = render(<InputChip variant={States.Default} onRemove={onRemoveSpy} disabled={true} text={'label'}
+                                      icon={<SystemIcons.Book/>}/>);
+
+    act(() => {
+      fireEvent.keyDown(wrapper.getByLabelText('Close'), {key: 'Enter', code: 'Enter'});
+    });
+
+    expect(onRemoveSpy).not.toHaveBeenCalled();
+  });
+
+});

package/dist/ChipsInput/__tests__/ChipDropdownInput.test.tsx

@@ -0,0 +1,100 @@
+import React from 'react';
+import {act, fireEvent, render, RenderResult} from '../../test-utils';
+import {ChipDropdownInput} from '../..';
+import '../../../jest.setup';
+
+const list = ['Contact', 'About', 'Base', 'Blog', 'Custom', 'Support', 'Tools'];
+
+
+
+describe('<ChipDropdownInput />', () => {
+  it('Renders with no default values and no items available', async () => {
+    let componentResult: RenderResult;
+
+    //initial values are determined by using multiple hooks (useEffect)
+    //in order to be sure we get the last rendered version of the component, we need to wait for it
+    await act(async () => {
+      componentResult = render(
+        <ChipDropdownInput inputId="test_chip" list={[]} values={[]} onValueChange={(input) => {
+        }} placeholder="Search" altPlaceholder="" messageOnNoResults="No results found"/>,
+      );
+    });
+    //check correct placeholder displayed
+    expect(componentResult!.getByPlaceholderText('Search') as HTMLInputElement).toBeTruthy();
+    //check chip input with provided id rendered
+    expect(componentResult!.container.querySelector('input[id="test_chip"]')).toBeTruthy();
+    //check no initial value displayed
+    expect((componentResult!.getByPlaceholderText('Search') as HTMLInputElement).value).toBe('');
+  });
+
+  it('Renders with default values and items available', async () => {
+    let componentResult: RenderResult;
+    await act(async () => {
+      componentResult = render(
+        <ChipDropdownInput
+          inputId="test_chip"
+          list={list}
+          values={['Support']}
+          onValueChange={(input) => {
+          }}
+          placeholder="Search"
+          altPlaceholder="Type to search"
+          messageOnNoResults="No results found"
+        />,
+      );
+    });
+    //check alt placeholder displayed when list values
+    expect(componentResult!.getByPlaceholderText('Type to search') as HTMLInputElement).toBeTruthy();
+    //check correct initial value displayed
+    expect(componentResult!.getByText('Support')).toBeTruthy();
+  });
+
+  it('Renders dropdown on input click', async () => {
+    const wrapper = render(
+      <ChipDropdownInput
+        inputId="test_chip"
+        list={list}
+        values={['Support']}
+        onValueChange={(input) => {
+        }}
+        placeholder="Search"
+        altPlaceholder="Type to search"
+        messageOnNoResults="No results found"
+      />,
+    );
+
+    act(() => {
+      fireEvent.click(wrapper.getByPlaceholderText('Type to search'));
+    });
+
+    expect(wrapper.container.querySelector('.show')).toBeInTheDocument();
+  });
+
+  it('Renders dropdown and items are filtered by search criteria', () => {
+    const changeMock = jest.fn();
+
+    const wrapper = render(
+      <ChipDropdownInput
+        inputId="test_chip"
+        list={list}
+        values={[]}
+        onValueChange={changeMock}
+        placeholder="Search"
+        altPlaceholder="Type to search"
+        messageOnNoResults="No results found"
+      />,
+    );
+
+    act(() => {
+      fireEvent.change(wrapper.getByPlaceholderText('Search'), {target: {value: 'b'}});
+    });
+
+    list.filter((item) => item.toLowerCase().includes('b')).forEach((item) => {
+      expect(wrapper.queryByText(item)).toBeInTheDocument();
+    });
+
+    list.filter((item) => !item.toLowerCase().includes('b')).forEach((item) => {
+      expect(wrapper.queryByText(item)).not.toBeInTheDocument();
+    });
+  });
+});

package/dist/ChipsInput/__tests__/ChipInputFields.test.tsx

@@ -0,0 +1,155 @@
+import React from 'react';
+import { act, fireEvent, render, RenderResult } from '../../test-utils';
+import { ChipInput, Size } from '../..';
+import '../../../jest.setup';
+
+const list = ['Contact', 'About', 'Base', 'Blog', 'Custom', 'Support', 'Tools'];
+
+
+
+describe('<ChipInput />', () => {
+  it('Render component correctly', async () => {
+    let componentResult: RenderResult;
+
+    //initial values are determined by using multiple hooks (useEffect)
+    //in order to be sure we get the last rendered version of the component, we need to wait for it
+    await act(async () => {
+      componentResult = render(
+        <ChipInput size={Size.Medium} inputId="utest" values={[list[0]]} onValueChange={() => {}} placeholder="Plchd label" altPlaceholder="Alt plchd label" />,
+      );
+    });
+    //check element wrapper component rendered
+    expect(componentResult!.getByTestId('chip-input-container')).toBeTruthy();
+    //check correct placeholder displayed
+    expect(componentResult!.getByPlaceholderText('Alt plchd label') as HTMLInputElement).toBeTruthy();
+    //check chip input with provided id rendered
+    expect(componentResult!.container.querySelector('input[id="utest"]')).toBeTruthy();
+  });
+
+  it('Render component with correct size', async () => {
+    let componentResult: RenderResult;
+
+    await act(async () => {
+      componentResult = render(
+        <ChipInput size={Size.Small} inputId="utest" values={[list[0]]} onValueChange={() => {}} placeholder="Plchd label" altPlaceholder="Alt plchd label" />,
+      );
+    });
+    //check element wrapper component rendered
+    expect(componentResult!.getByTestId('chip-input-container')).toBeTruthy();
+
+    //check element has correct class size present
+    expect(componentResult!.getByTestId('chip-input-container')).toHaveClass('small');
+  });
+
+  it('Test component focused on click', async () => {
+    let componentResult: RenderResult;
+
+    //initial values are determined by using multiple hooks (useEffect)
+    //in order to be sure we get the last rendered version of the component, we need to wait for it
+    await act(async () => {
+      componentResult = render(
+        <ChipInput size={Size.Small} inputId="utest" values={[list[0]]} onValueChange={() => {}} placeholder="Plchd label" altPlaceholder="Alt plchd label" />,
+      );
+    });
+    //check element wrapper component rendered
+    expect(componentResult!.getByTestId('chip-input-container')).toBeTruthy();
+
+    //check focus not present
+    expect(componentResult!.getByPlaceholderText('Alt plchd label') as HTMLInputElement).not.toHaveFocus();
+
+    //trigger click for chip input
+    fireEvent.click(componentResult!.getByTestId('chip-input-container'));
+
+    //check focus present
+    expect(componentResult!.getByPlaceholderText('Alt plchd label') as HTMLInputElement).toHaveFocus();
+  });
+
+  it('Test component callbacks', async () => {
+    const onValueChange = jest.fn();
+    let componentResult: RenderResult;
+
+    //initial values are determined by using multiple hooks (useEffect)
+    //in order to be sure we get the last rendered version of the component, we need to wait for it
+    await act(async () => {
+      componentResult = render(
+        <ChipInput size={Size.Small} inputId="utest" values={[list[0]]} onValueChange={onValueChange} placeholder="Plchd label" altPlaceholder="Alt plchd label" />,
+      );
+    });
+
+    //mock scrollIntoView otherwise test will fail when selecting an item
+    window.HTMLElement.prototype.scrollIntoView = function () {};
+
+    const inputElem = componentResult!.getByPlaceholderText('Alt plchd label') as HTMLInputElement;
+
+    //check element wrapper component rendered
+    expect(componentResult!.getByTestId('chip-input-container')).toBeTruthy();
+
+    //trigger click for chip input
+    fireEvent.click(componentResult!.getByTestId('chip-input-container'));
+
+    //trigger value change
+    fireEvent.change(inputElem, { target: { value: list[1] } });
+
+    //pressing enter will automatically select the found item
+    fireEvent.keyDown(inputElem, { key: 'Enter', code: 'Enter', charCode: 13 });
+
+    expect(onValueChange).toHaveBeenCalledTimes(1);
+
+    //two items present, default and the new selected one
+    expect(componentResult!.container.querySelectorAll('.chip-icon')).toHaveLength(2);
+
+    //pressing on the x button, the item will be removed from selection
+    const removeItemElem = componentResult!.getByTestId('chip-input-container').querySelector('div.chip-icon') as HTMLDivElement;
+
+    fireEvent.click(removeItemElem);
+
+    //change callback should be called
+    expect(onValueChange).toHaveBeenCalledTimes(2);
+    //only one item should be present at the moment
+    expect(componentResult!.container.querySelectorAll('.chip-icon')).toHaveLength(1);
+
+    //expect that on pressing backspace the added item will be deleted
+    fireEvent.keyDown(inputElem, { key: 'Backspace', charCode: 8 });
+
+    //no item should be present at the moment
+    expect(componentResult!.container.querySelectorAll('.chip-icon')).toHaveLength(0);
+  });
+
+  it('Test component chips are removed when clear all button toggled', async () => {
+    const onValueChange = jest.fn();
+    let componentResult: RenderResult;
+
+    //initial values are determined by using multiple hooks (useEffect)
+    //in order to be sure we get the last rendered version of the component, we need to wait for it
+    await act(async () => {
+      componentResult = render(
+        <ChipInput size={Size.Small} inputId="utest" values={[list[0]]} onValueChange={onValueChange} placeholder="Plchd label" altPlaceholder="Alt plchd label" />,
+      );
+    });
+
+    //check element wrapper component rendered
+    expect(componentResult!.getByTestId('chip-input-container')).toBeTruthy();
+
+    //one item present, the default one
+    expect(componentResult!.container.querySelectorAll('.chip-icon')).toHaveLength(1);
+    const input = componentResult!.getByPlaceholderText('Alt plchd label') as HTMLInputElement;
+
+    const mockInputData = 'mock data';
+    //trigger value change
+    fireEvent.change(input, { target: { value: mockInputData } });
+
+    expect(input).toHaveValue(mockInputData);
+
+    //expect clear button to be displayed
+    expect(componentResult!.getByTestId('clear-btn-utest')).toBeTruthy();
+
+    //press on clear button
+    fireEvent.click(componentResult!.getByTestId('clear-btn-utest'));
+
+    //expect input to have no value
+    expect(input).toHaveValue('');
+
+    //one chip selected
+    expect(componentResult!.container.querySelectorAll('.chip-icon')).toHaveLength(1);
+  });
+});

package/dist/Dropdown/__tests__/DropdownFilter.test.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { render } from '../../test-utils';
+import { DropdownFilter } from '../index';
+
+jest.mock('react-resize-detector', () => ({
+  // @ts-ignore
+    ...jest.requireActual('react-resize-detector'),
+    useResizeDetector: (object: any) => ({ height: 100, width: 120})
+  }));
+
+
+
+
+const list = [{value: 'Contact'},
+  {value: 'About'},
+  {value: 'Base'},
+  {value: 'Blog'},
+  {value: 'Contact 3'},
+  {value: 'Custom'},
+  {value: 'Support'},
+  {value: 'Tools'}];
+
+describe('<DropdownFilter />', () => {
+  it('Renders with no default value', async () => {
+    const { getByPlaceholderText } = render(<DropdownFilter id="Dropdown" list={list} placeholder="Placeholder" />);
+    expect((getByPlaceholderText('Placeholder') as HTMLInputElement).value).toBe('');
+  });
+
+  it('Renders with required input if specified', async () => {
+    const { getByPlaceholderText } = render(<DropdownFilter id="Dropdown" list={list} placeholder="Placeholder" required />);
+    expect((getByPlaceholderText('Placeholder') as HTMLInputElement).required).toBe(true);
+  });
+
+  it('Renders with inital value if specified', async () => {
+    const initialValue = 'Contact';
+    const { getByPlaceholderText } = render(<DropdownFilter id="Dropdown" list={list} placeholder="Placeholder" value={initialValue} />);
+    expect((getByPlaceholderText('Placeholder') as HTMLInputElement).value).toBe(initialValue);
+  });
+});

package/dist/Footer/__tests__/Footer.test.tsx

@@ -0,0 +1,182 @@
+import React from 'react';
+import { fireEvent, render } from '../../test-utils';
+import 'jest-styled-components';
+import Footer from '../Footer';
+import { COLORS } from '../../styles';
+import SiteFooter from '../SiteFooter';
+import FooterDropdownLinks from '../Components/FooterDropdownLinks';
+
+const animate = require('animated-scroll-to');
+
+jest.mock('react-resize-detector', () => ({
+    // @ts-ignore
+      ...jest.requireActual('react-resize-detector'),
+      useResizeDetector: (object: any) => ({ height: 100, width: 120})
+    }));
+      
+const scrollSpy = jest.fn()
+animate.default = scrollSpy;
+
+describe('<Footer />',()=>{
+    beforeEach(()=>scrollSpy.mockReset());
+
+    it('renders footer', async () => {
+        const{getByText} = render(
+            <Footer>
+                <div>Test Footer</div>
+            </Footer>
+        );
+
+        expect(getByText('Test Footer')).toBeDefined();
+    })
+
+    it('renders footer global content', async () => {
+        const{getByTestId} = render(
+            <Footer>
+                <div>Test Footer</div>
+            </Footer>
+        );
+
+        expect(getByTestId('footer-content')).toBeDefined();
+        expect(getByTestId('footer-content')).toHaveStyleRule('background-color',COLORS.primary_700);
+        expect(getByTestId('footer-content')).toHaveStyleRule('min-height','8px');
+        expect(getByTestId('footer-content')).toHaveStyleRule('color','white');
+    })
+
+    it('renders site footer', async () => {
+        const{getByTestId} = render(
+                <SiteFooter id='testFooter' toTopText='Scroll To Top'/>
+        );
+
+        expect(getByTestId('footer-container')).toBeDefined();
+        expect(getByTestId('footer-container')).toHaveStyleRule('background-color', COLORS.neutral_800);
+        expect(getByTestId('footer-container')).toHaveStyleRule('border-top', `8px solid ${COLORS.neutral_200}`);
+    })
+
+    it('renders site footer to top text', async () => {
+        const{getByText} = render(
+            
+                <SiteFooter id='testFooter' toTopText='Scroll To Top'/>
+            
+        );
+
+        expect(getByText('Scroll To Top')).toBeDefined();
+    })
+
+    it('performs navigation on click', async () => {
+        const{getByTestId} = render(
+            
+                <SiteFooter id='testFooter' toTopText='Scroll To Top'/>
+            
+        );
+
+        fireEvent.click(getByTestId('toTopNavigation'));
+        expect(scrollSpy).toHaveBeenCalledWith(0);
+    })
+
+    it('performs navigation on enter', async () => {
+        const{getByTestId} = render(
+                            
+                <SiteFooter id='testFooter' toTopText='Scroll To Top'/>
+            
+        );
+        
+        fireEvent.keyDown(getByTestId('toTopNavigation'), {key: 'Enter', code: 'Enter', charCode: 13});
+        expect(scrollSpy).toHaveBeenCalledWith(0);
+    })
+
+    it('does not performs navigation on key other than enter', async () => {
+        const{getByTestId} = render(
+            
+                <SiteFooter id='testFooter' toTopText='Scroll To Top'/>
+            
+        );
+
+        fireEvent.keyDown(getByTestId('toTopNavigation'), {key: 'A', code: 'KeyA'});
+        expect(scrollSpy).not.toHaveBeenCalled();
+    })
+
+    it('renders site footer copyright', async () => {
+        const{getByText} = render(
+            
+                <SiteFooter id='testFooter' toTopText='Scroll To Top' copyrightText='this is copyright'/>
+            
+        );
+
+        expect(getByText('this is copyright')).toBeDefined();
+    })
+
+    it('renders site footer links', async () => {
+        const{getByText} = render(
+            
+                <SiteFooter id='testFooter' toTopText='Scroll To Top' bottomLinks={[{label:'testLabel', to:'target'}]}/>
+            
+        );
+
+        expect(getByText('testLabel')).toBeDefined();
+    })
+
+    it('renders site footer nav section', async () => {
+        const{getByText} = render(
+            
+                <SiteFooter id='testFooter' toTopText='Scroll To Top' navOptions={{sections:[{header:'headerText',links:[{label:'labelText',to:'target'}]}]}}/>
+            
+        );
+
+        expect(getByText('headerText')).toBeDefined();
+        expect(getByText('labelText')).toBeDefined();
+    })
+
+    it('renders site footer newsletter and social section', async () => {
+        const signUpFn = jest.fn();
+
+        const{getByText, getByTestId, getByPlaceholderText} = render(
+            
+                <SiteFooter id='testFooter' toTopText='Scroll To Top' includeNewsletterAndSocialSection={true}
+                    placeholderEmailField='a@a.com' newsletterLabel='new news' 
+                    onNewsletterSignup={(e)=>signUpFn(e)}/>
+            
+        );
+
+        expect(getByPlaceholderText('a@a.com')).toBeDefined();
+        expect(getByText('new news')).toBeDefined();
+
+        fireEvent.click(getByTestId('newsBtn'));
+        expect(signUpFn).toBeCalledTimes(1);
+    })
+
+    it('updates newsletter email', async () => {
+        const{getByText, getByPlaceholderText} = render(
+            
+                <SiteFooter id='testFooter' toTopText='Scroll To Top' includeNewsletterAndSocialSection={true}
+                    placeholderEmailField='a@a.com' newsletterLabel='new news' />
+            
+        );
+
+        expect(getByPlaceholderText('a@a.com')).toBeDefined();
+        expect(getByText('new news')).toBeDefined();
+        fireEvent.change(getByPlaceholderText('a@a.com'), {target: {value: 'abc'}});
+        expect((getByPlaceholderText('a@a.com') as HTMLInputElement).value).toBe('abc');
+    })
+
+    it('renders site footer dropdown links', async () => {
+        const{getByText} = render(
+            <FooterDropdownLinks navSection={{header:'sample header', links:[{label:'labelText', to:'labelTarget'}]}} width={200}/>
+        );
+
+        expect(getByText('sample header')).toBeDefined();
+        expect(getByText('labelText')).toBeDefined();        
+    })
+
+    it('opens dropdown links on mouse click', async () => {
+        const{getByRole} = render(
+            <FooterDropdownLinks navSection={{header:'sample header', links:[{label:'labelText', to:'labelTarget'}]}} width={200}/>
+        );
+
+        expect(getByRole('button')).toBeDefined();
+        fireEvent.click(getByRole('button'));
+        expect(getByRole('button').classList.contains('open')).toBe(true);
+        fireEvent.click(getByRole('button'));
+        expect(getByRole('button').classList.contains('open')).toBe(false);
+    })
+})

package/dist/GlobalNavigationBar/__tests__/Logo.test.tsx

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import {act, fireEvent, render} from '../../test-utils';
+import Logo from '../Logo';
+import { NavigationProvider } from '../../Navigation';
+
+describe('Logo', () => {
+
+  const navProps = {
+    currentPath: '',
+    isActiveRoute: () => false,
+    navigate: (path: string, isExternal: boolean) => {}
+  };
+
+
+  it('should render Laerdal logo', () => {
+    const wrapper = render(<NavigationProvider {...navProps}><Logo name={'name'}/></NavigationProvider>);
+
+    expect(wrapper.getByText('name')).toBeDefined();
+    expect(wrapper.getByText('Laerdal logo')).toBeDefined();
+  });
+
+  it('should render beta tag', () => {
+    const wrapper = render(<NavigationProvider {...navProps}><Logo name={'name'} showBetaTag={true}/></NavigationProvider>);
+
+    expect(wrapper.getByText('BETA')).toBeDefined();
+  });
+
+  it('should call onClick when logo is clicked', () => {
+    const onClickSpy = jest.fn();
+    const wrapper = render(<NavigationProvider {...navProps}><Logo name={'name'} onClick={onClickSpy}/></NavigationProvider>);
+
+    act(() => {
+      fireEvent.click(wrapper.container.querySelector('a')!);
+    });
+
+    expect(onClickSpy).toHaveBeenCalled();
+  });
+
+});