@onewelcome/react-lib-components 0.1.7-alpha → 0.1.8-alpha

package/src/Form/Select/Select.test.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef } from 'react';
 import { Select as SelectComponent, Props } from './Select';
-import { render } from '@testing-library/react';
+import { render, waitFor } from '@testing-library/react';
 import { Option } from './Option';
 import userEvent from '@testing-library/user-event';
 
@@ -25,7 +25,10 @@ const defaultParams: Props = {
     <Option value="option16">Test16</Option>,
     <Option value="option17">Test17</Option>,
   ],
-  value: '',
+  value: 'option1',
+  searchInputProps: { 'data-testid': 'search-input' },
+  // @ts-ignore it does exist Typescript, pls.
+  selectButtonProps: { 'data-testid': 'select-button' },
 };
 
 const createSelect = (params?: (defaultParams: Props) => Props) => {
@@ -35,7 +38,7 @@ const createSelect = (params?: (defaultParams: Props) => Props) => {
   }
   const queries = render(<SelectComponent {...parameters} data-testid="select" />);
   const select = queries.getByTestId('select');
-  const button = select.querySelector('button');
+  const button = queries.getByTestId('select-button');
   const list = select.querySelector('ul[role="listbox"]');
   const dropdownWrapper = select.querySelector('.list-wrapper');
 
@@ -60,6 +63,7 @@ describe('Select should render', () => {
         <Option value="option5">Test5</Option>,
       ],
       placeholder: 'Placeholder',
+      value: '',
     }));
 
     if (button) {
@@ -126,20 +130,20 @@ describe('ref should work', () => {
 
 describe('Select should render with search', () => {
   it('shows the search and filtering works', () => {
-    const { select, list, button, dropdownWrapper } = createSelect();
+    const { select, list, button, getByTestId } = createSelect();
+
+    const searchInput = getByTestId('search-input');
 
     if (button) {
       userEvent.click(button);
     }
 
-    const search = dropdownWrapper?.querySelector('input');
-
     expect(select).toBeTruthy();
-    expect(search).toBeTruthy();
+    expect(searchInput).toBeTruthy();
     expect(list?.querySelectorAll("li[role='option']").length).toBe(17);
 
-    if (search) {
-      userEvent.type(search, '17');
+    if (searchInput) {
+      userEvent.type(searchInput, '17');
     }
 
     expect(list?.querySelectorAll("li[role='option']").length).toBe(1);
@@ -148,32 +152,51 @@ describe('Select should render with search', () => {
 });
 
 describe('Selecting options using keyboard', () => {
-  it('should focus through list items and select on enterpress', () => {
-    const { select, button, list } = createSelect();
+  it('should focus through list items and select on enterpress', async () => {
+    const onChangeHandler = jest.fn();
+    const { select, button } = createSelect((defaultParams) => ({
+      ...defaultParams,
+      onChange: onChangeHandler,
+    }));
 
-    if (button) {
-      userEvent.click(button);
-    }
+    userEvent.click(button);
 
-    userEvent.tab();
-    userEvent.tab();
-    expect(list?.querySelectorAll('li')[0]).toHaveFocus();
-    userEvent.tab();
-    expect(list?.querySelectorAll('li')[1]).toHaveFocus();
-    userEvent.tab();
-    expect(list?.querySelectorAll('li')[2]).toHaveFocus();
-    userEvent.tab();
-    expect(list?.querySelectorAll('li')[3]).toHaveFocus();
-    userEvent.tab();
-    expect(list?.querySelectorAll('li')[4]).toHaveFocus();
-    userEvent.tab();
-    expect(list?.querySelectorAll('li')[5]).toHaveFocus();
+    expect(button).toHaveAttribute('aria-expanded', 'true');
 
+    userEvent.keyboard('{arrowdown}');
+    userEvent.keyboard('{arrowdown}');
     userEvent.keyboard('{enter}');
 
-    setTimeout(() => {
-      expect(select.querySelector('button > span > span')?.innerHTML).toBe('Test5');
-    }, 50);
+    expect(button).toHaveAttribute('aria-expanded', 'false');
+
+    expect(onChangeHandler).toHaveBeenCalled();
+
+    userEvent.keyboard('{enter}');
+
+    expect(button).toHaveAttribute('aria-expanded', 'true');
+
+    userEvent.keyboard('{arrowdown}');
+
+    expect(select.querySelector('li[data-value="option3"]')).toHaveFocus();
+
+    userEvent.keyboard('{arrowup}');
+    userEvent.keyboard('{arrowup}');
+    userEvent.keyboard('{arrowup}');
+    userEvent.keyboard('{arrowup}');
+
+    expect(select.querySelector('li[data-value="option16"]')).toHaveFocus();
+    userEvent.keyboard('{arrowup}');
+    expect(select.querySelector('li[data-value="option15"]')).toHaveFocus();
+
+    userEvent.keyboard('{arrowdown}');
+    userEvent.keyboard('{arrowdown}');
+    userEvent.keyboard('{arrowdown}');
+
+    expect(select.querySelector('li[data-value="option1"]')).toHaveFocus();
+
+    userEvent.keyboard('{escape}');
+
+    expect(button).toHaveAttribute('aria-expanded', 'false');
   });
 });
 
@@ -193,7 +216,7 @@ describe('Expanded should be false whenever we click the body', () => {
 
 describe('List expansion', () => {
   it('should expand upwards', () => {
-    const { select, button } = createSelect();
+    const { select, button, dropdownWrapper } = createSelect();
 
     Object.defineProperty(window, 'innerHeight', { value: 500, writable: true });
 
@@ -213,16 +236,13 @@ describe('List expansion', () => {
       userEvent.click(button);
     }
 
-    const listWrapper = select.querySelector('.list-wrapper');
-
-    expect(listWrapper).toHaveStyle({ bottom: '0px' });
+    expect(dropdownWrapper).toHaveStyle({ bottom: '0px' });
   });
 
   it('should expand downwards with a max height set', () => {
-    const { select, getByRole } = createSelect();
-    const listWrapper = select.querySelector('.list-wrapper');
+    const { select, getByRole, dropdownWrapper } = createSelect();
 
-    listWrapper!.getBoundingClientRect = () => ({
+    dropdownWrapper!.getBoundingClientRect = () => ({
       x: 50,
       y: 50,
       width: 500,
@@ -252,39 +272,198 @@ describe('List expansion', () => {
     const button = getByRole('button');
     userEvent.click(button);
 
-    expect(listWrapper).toHaveStyle({ maxHeight: '474px' });
-    expect(listWrapper).toHaveStyle({ top: '0px' });
+    expect(dropdownWrapper).toHaveStyle({ maxHeight: '474px' });
+    expect(dropdownWrapper).toHaveStyle({ top: '0px' });
   });
 });
 
 describe('onClear method', () => {
-  it('should show a cross and fire the passed onClear function', async () => {
+  it('should show a cross and fire the passed onClear function with enter', async () => {
     const onClearHandler = jest.fn();
-    const onChangeHandler = jest.fn();
 
-    const { button, container } = createSelect((defaultParams) => ({
+    const { select, button } = createSelect((defaultParams) => ({
+      ...defaultParams,
+      onClear: onClearHandler,
+      value: 'option4',
+    }));
+
+    button.focus();
+    const clearButton = select.querySelector('[data-clear]');
+
+    userEvent.tab();
+
+    expect(clearButton).toHaveFocus();
+
+    userEvent.keyboard('{enter}');
+
+    expect(onClearHandler).toHaveBeenCalled();
+    expect(button?.getAttribute('aria-expanded')).toBe('false');
+  });
+
+  it('should show a cross and fire the passed onClear function with enter', async () => {
+    const onClearHandler = jest.fn();
+
+    const { select, button } = createSelect((defaultParams) => ({
       ...defaultParams,
       onClear: onClearHandler,
-      onChange: onChangeHandler,
       value: 'option4',
     }));
 
-    if (button) {
-      userEvent.click(button);
-    }
+    button.focus();
+    const clearButton = select.querySelector('[data-clear]');
+    expect(document.querySelector('[data-display-inner]')).toBeInTheDocument();
 
-    const optionToClick = container.querySelector('li[data-value="option5"]')!;
-    const onClearButton = container.querySelector('[data-clear]')!;
+    userEvent.tab();
 
-    userEvent.click(optionToClick);
-    userEvent.click(onClearButton);
+    expect(clearButton).toHaveFocus();
+
+    userEvent.keyboard('{space}');
 
     expect(onClearHandler).toHaveBeenCalled();
-    expect(onClearButton).toBeInTheDocument();
-    expect(container.querySelector('li[aria-selected="true"]')).toHaveTextContent('Test4');
-    expect(container.querySelector('.selected-option')).toHaveTextContent('Test4');
-    expect(onChangeHandler).toBeCalledWith(
-      expect.objectContaining({ target: expect.objectContaining({ value: 'option5' }) })
-    );
+    expect(button?.getAttribute('aria-expanded')).toBe('false');
+  });
+
+  it('should not show cross', () => {
+    createSelect((defaultParams) => ({
+      ...defaultParams,
+      value: '',
+    }));
+
+    expect(document.querySelector('[data-clear]')).not.toBeInTheDocument();
+    expect(document.querySelector('[data-display-inner]')).not.toBeInTheDocument();
+  });
+});
+
+describe('previously selected item', () => {
+  it('should have focus', () => {
+    const { select, button } = createSelect((defaultParams) => ({
+      ...defaultParams,
+      value: 'option4',
+    }));
+
+    button.focus();
+
+    const option2 = select.querySelector('li[data-value="option2"]')!;
+
+    userEvent.keyboard('{enter}');
+    expect(button).toHaveAttribute('aria-expanded', 'true');
+    userEvent.keyboard('{arrowdown}');
+    userEvent.keyboard('{arrowdown}');
+    userEvent.keyboard('{space}');
+
+    userEvent.click(button);
+
+    expect(document.activeElement).toBe(option2);
+  });
+});
+
+describe('search input', () => {
+  it('listens to different keyboard inputs', async () => {
+    const { button, select } = createSelect();
+
+    const searchInput = document.querySelector('.select-search')!;
+
+    userEvent.click(button);
+    (searchInput as HTMLElement).focus();
+
+    userEvent.keyboard('{arrowup}');
+    expect(select.querySelector('li[data-value="option17"]')).toHaveFocus();
+  });
+
+  it('move focus with arrowdown', async () => {
+    const { button, select } = createSelect();
+
+    const searchInput = document.querySelector('.select-search')!;
+
+    userEvent.click(button);
+    (searchInput as HTMLElement).focus();
+
+    userEvent.keyboard('{arrowdown}');
+    expect(select.querySelector('li[data-value="option1"]')).toHaveFocus();
+  });
+
+  it('select with enter', async () => {
+    const { button, select } = createSelect();
+
+    const searchInput = document.querySelector('.select-search')!;
+
+    userEvent.click(button);
+    (searchInput as HTMLElement).focus();
+
+    userEvent.keyboard('{enter}');
+    expect(select.querySelector('li[data-value="option1"]')).toHaveFocus();
+  });
+
+  it('expand list with arrowdown', async () => {
+    const { button } = createSelect();
+
+    button.focus();
+    userEvent.keyboard('{arrowdown}');
+
+    expect(button).toHaveAttribute('aria-expanded', 'true');
+  });
+
+  it('expand list with space', async () => {
+    const { button } = createSelect();
+
+    button.focus();
+    userEvent.keyboard('{space}');
+
+    expect(button).toHaveAttribute('aria-expanded', 'true');
+  });
+
+  it('closes on escape', async () => {
+    const { button } = createSelect();
+
+    const searchInput = document.querySelector('.select-search')!;
+
+    userEvent.click(button);
+    userEvent.tab();
+
+    await waitFor(() => expect(searchInput).toHaveFocus());
+
+    userEvent.keyboard('{escape}');
+
+    expect(button).toHaveAttribute('aria-expanded', 'false');
+  });
+
+  it('closes on tab', async () => {
+    const { button } = createSelect();
+
+    const searchInput = document.querySelector('.select-search')!;
+
+    userEvent.click(button);
+    userEvent.tab();
+    expect(searchInput).toHaveFocus();
+    userEvent.tab();
+  });
+});
+
+describe('home and end keys work', () => {
+  it('goes to home and end', () => {
+    const { button } = createSelect();
+
+    userEvent.click(button);
+
+    const firstOption = document.querySelector('li[data-value="option1"]');
+    const lastOption = document.querySelector('li[data-value="option17"]');
+
+    userEvent.keyboard('{end}');
+
+    expect(lastOption).toHaveFocus();
+    userEvent.keyboard('{home}');
+
+    expect(firstOption).toHaveFocus();
+  });
+});
+
+describe('search input props work', () => {
+  it('adds a classname', () => {
+    createSelect((defaultParams) => ({
+      ...defaultParams,
+      searchInputProps: { wrapperProps: { className: 'test-wrapper-classname' } },
+    }));
+
+    expect(document.querySelector('.test-wrapper-classname')).toBeInTheDocument();
   });
 });