@moda/om 15.11.3 → 16.1.0

package/src/components/Select/Select.test.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import wait from 'waait';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
@@ -21,18 +20,18 @@ describe('Select', () => {
     );
   });
 
-  it('expands when clicked', () => {
+  it('expands when clicked', async () => {
     const { container } = render(
       <Select idRef='1' name='name-1' label='Sort by' options={options} />
     );
     const button = container.querySelector('#Select__value--1')!;
-    userEvent.click(button);
+    await userEvent.click(button);
     expect(container.innerHTML).toEqual(
       '<div id="Select--1" class="Select"><input id="1" name="name-1" type="hidden" value=""><button id="Select__value--1" aria-haspopup="listbox" aria-expanded="true" aria-labelledby="Select__label--1 Select__value--1" type="button" title="Select" class="Clickable Select__value"><label id="Select__label--1">Sort by</label><span class="Select__icon"></span></button><div class="SelectOptions Select__options Select__options--down"><ul class="SelectOptions__list" tabindex="-1" role="listbox" aria-labelledby="Select__label--1" aria-activedescendant="SelectOption--foo-1"><li class="SelectOption SelectOption--active" aria-label="Foo" aria-selected="false" role="option">Foo</li><li class="SelectOption" aria-label="Bar" aria-selected="false" role="option">Bar</li><li class="SelectOption SelectOption--disabled" aria-label="Baz" aria-selected="false" role="option">Baz</li></ul></div></div>'
     );
   });
 
-  it('does not expand on click when disabled', () => {
+  it('does not expand on click when disabled', async () => {
     const { container } = render(
       <Select
         defaultValue={undefined}
@@ -44,7 +43,7 @@ describe('Select', () => {
       />
     );
     const button = container.querySelector('#Select__value--1')!;
-    userEvent.click(button);
+    await userEvent.click(button);
     expect(container.innerHTML).toEqual(
       '<div id="Select--1" class="Select Select--disabled"><input id="1" name="name-1" type="hidden" value=""><button id="Select__value--1" aria-haspopup="listbox" aria-expanded="false" aria-labelledby="Select__label--1 Select__value--1" type="button" title="Select" class="Clickable Clickable--disabled Select__value" disabled=""><label id="Select__label--1">Sort by</label><span class="Select__icon"></span></button></div>'
     );
@@ -63,10 +62,9 @@ describe('Select', () => {
       />
     );
     const button = container.querySelector('#Select__value--1')!;
-    userEvent.click(button);
+    await userEvent.click(button);
     const option = screen.getByLabelText('Bar');
-    userEvent.click(option);
-    await wait(0);
+    await userEvent.click(option);
     expect(onChange).toBeCalledWith('bar');
   });
 
@@ -83,10 +81,9 @@ describe('Select', () => {
       />
     );
     const button = container.querySelector('#Select__value--1')!;
-    userEvent.click(button);
+    await userEvent.click(button);
     const option = screen.getByLabelText('Baz');
-    userEvent.click(option);
-    await wait(0);
+    await userEvent.click(option);
     expect(onChange).not.toBeCalled();
   });
 
@@ -95,10 +92,9 @@ describe('Select', () => {
       <Select idRef='1' name='name-1' label='Sort by' options={options} />
     );
     const button = container.querySelector('#Select__value--1')!;
-    userEvent.click(button);
+    await userEvent.click(button);
     const option = screen.getByLabelText('Bar');
-    userEvent.click(option);
-    await wait(0);
+    await userEvent.click(option);
     expect(container.innerHTML).toEqual(
       '<div id="Select--1" class="Select"><input id="1" name="name-1" type="hidden" value="bar"><button id="Select__value--1" aria-haspopup="listbox" aria-expanded="false" aria-labelledby="Select__label--1 Select__value--1" type="button" title="Select" class="Clickable Select__value"><label id="Select__label--1">Sort by: </label>Bar<span class="Select__icon"></span></button></div>'
     );
@@ -107,10 +103,9 @@ describe('Select', () => {
   it('renders correctly when there is no label', async () => {
     const { container } = render(<Select idRef='1' name='name-1' options={options} />);
     const button = container.querySelector('#Select__value--1')!;
-    userEvent.click(button);
+    await userEvent.click(button);
     const option = screen.getByLabelText('Bar');
-    userEvent.click(option);
-    await wait(0);
+    await userEvent.click(option);
     expect(container.innerHTML).toEqual(
       '<div id="Select--1" class="Select"><input id="1" name="name-1" type="hidden" value="bar"><button id="Select__value--1" aria-haspopup="listbox" aria-expanded="false" aria-labelledby="Select__label--1 Select__value--1" type="button" title="Select" class="Clickable Select__value">Bar<span class="Select__icon"></span></button></div>'
     );

package/src/components/Select/Select.tsx

@@ -73,7 +73,7 @@ export const Select: React.FC<SelectProps> = ({
   );
 
   const handleAutofill = useCallback(
-    value => {
+    (value: string) => {
       value && dispatch({ type: 'SELECT', payload: { value } });
     },
     [dispatch]

package/src/components/Select/SelectOption.tsx

@@ -21,7 +21,7 @@ export const SelectOption: React.FC<SelectOptionProps> = ({
   const ref = useRef<HTMLLIElement>(null);
 
   const handleClick = useCallback(
-    event => {
+    (event: React.MouseEvent<HTMLLIElement>) => {
       event.preventDefault();
       !option.disabled && onClick(option);
     },

package/src/components/Tag/Tag.test.tsx

@@ -4,13 +4,13 @@ import userEvent from '@testing-library/user-event';
 import { Tag } from './Tag';
 
 describe('Tag', () => {
-  it('works correctly', () => {
+  it('works correctly', async () => {
     const onRemove = jest.fn();
     render(<Tag onRemove={onRemove}>Hello</Tag>);
 
     expect(screen.getByText('Hello')).toBeTruthy();
 
-    userEvent.click(screen.getByRole('button'));
+    await userEvent.click(screen.getByRole('button'));
     expect(onRemove).toBeCalled();
   });
 });

package/src/components/Toast/Toast.test.tsx

@@ -4,7 +4,7 @@ import userEvent from '@testing-library/user-event';
 import { Toast } from './Toast';
 
 describe('Toast', () => {
-  it('works correctly', () => {
+  it('works correctly', async () => {
     const onRemove = jest.fn();
     render(
       <Toast theme='success' onRemove={onRemove}>
@@ -14,7 +14,7 @@ describe('Toast', () => {
 
     expect(screen.getByText('Hello')).toBeTruthy();
 
-    userEvent.click(screen.getByRole('button', { name: 'Remove' }));
+    await userEvent.click(screen.getByRole('button', { name: 'Remove' }));
     expect(onRemove).toBeCalled();
   });
 });

package/src/hooks/useClickOutside.ts

@@ -2,8 +2,8 @@ import React, { useEffect, useCallback } from 'react';
 
 export const useClickOutside = (ref: React.RefObject<HTMLElement>, onClickOutside: () => void) => {
   const handleClickOutside = useCallback(
-    event => {
-      if (ref.current && !ref.current.contains(event.target)) onClickOutside();
+    (event: MouseEvent) => {
+      if (ref.current && !ref.current.contains(event.target as Node)) onClickOutside();
     },
     [onClickOutside, ref]
   );

package/src/hooks/useKeyboardListNavigation.spec.ts

@@ -1,4 +1,4 @@
-import { renderHook, act } from '@testing-library/react-hooks';
+import { renderHook, act } from '@testing-library/react';
 import { fireEvent } from '@testing-library/react';
 import { useKeyboardListNavigation } from './useKeyboardListNavigation';
 import { useRef } from 'react';