test: run all pending timers and add all missing tests

jest-setup.ts

@@ -1,6 +1,8 @@
 import '@testing-library/jest-dom';
+import { act } from '@testing-library/react';
 
 beforeEach(() => {
+  jest.useFakeTimers();
   let time = 0;
   jest.spyOn(window, 'requestAnimationFrame').mockImplementation((callback) => {
     setTimeout(() => {
@@ -13,4 +15,8 @@ beforeEach(() => {
 
 afterEach(() => {
   (window.requestAnimationFrame as jest.Mock).mockRestore();
+  act(() => {
+    jest.runOnlyPendingTimers();
+  });
+  jest.useRealTimers();
 });

jest.config.ts

@@ -28,9 +28,10 @@ const config: Config = {
   coverageDirectory: 'coverage',
 
   // An array of regexp pattern strings used to skip coverage collection
-  // coveragePathIgnorePatterns: [
-  //   "/node_modules/"
-  // ],
+  coveragePathIgnorePatterns: [
+    '<rootDir>/node_modules/',
+    '<rootDir>/packages/utils/',
+  ],
 
   // Indicates which provider should be used to instrument code for coverage
   // coverageProvider: "babel",

packages/Button/__tests__/Button.test.tsx

@@ -23,6 +23,8 @@ const sizeHeightMap = {
   lg: '46px',
 };
 
+const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
+
 describe('Button', () => {
   test('should match the snapshot', () => {
     const { asFragment } = render(<Button>Default</Button>);
@@ -47,7 +49,7 @@ describe('Button', () => {
     const clickHandler = jest.fn();
     const { container } = render(<Button onClick={clickHandler}>Text</Button>);
     const button = container.firstChild;
-    await userEvent.click(button as Element);
+    await user.click(button as Element);
     expect(clickHandler).toHaveBeenCalledTimes(1);
   });
 
@@ -367,7 +369,7 @@ describe('Button', () => {
     );
     const button = container.firstChild;
     expect(button).toHaveClass('raw-loading-button');
-    await userEvent.click(button as Element);
+    await user.click(button as Element);
     expect(clickHandler).toHaveBeenCalledTimes(0);
   });
 

packages/Checkbox/__tests__/Checkbox.test.tsx

@@ -28,6 +28,8 @@ const optionsData = [
   },
 ];
 
+const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
+
 describe('Checkbox', () => {
   test('should match the snapshot', () => {
     const { asFragment } = render(<Checkbox />);
@@ -43,7 +45,7 @@ describe('Checkbox', () => {
     const clickHandler = jest.fn();
     const { container } = render(<Checkbox onClick={clickHandler} />);
     const checkbox = container.firstChild;
-    await userEvent.click(checkbox as Element);
+    await user.click(checkbox as Element);
     expect(clickHandler).toHaveBeenCalledTimes(1);
   });
 
@@ -71,7 +73,7 @@ describe('Checkbox', () => {
     const checkbox = container.firstChild;
     const checkboxInput = container.querySelector('.raw-checkbox-input');
     expect(checkboxInput).toBeDisabled();
-    await userEvent.click(checkbox as Element);
+    await user.click(checkbox as Element);
     expect(checkboxInput).not.toBeChecked();
   });
 
@@ -97,7 +99,7 @@ describe('Checkbox', () => {
     const checkbox = container.firstChild;
     const checkboxInput = container.querySelector('.raw-checkbox-input');
     expect(checkboxInput).not.toBeChecked();
-    await userEvent.click(checkbox as Element);
+    await user.click(checkbox as Element);
     expect(checkboxInput).toBeChecked();
     expect(onChange).toHaveBeenCalledTimes(1);
   });
@@ -107,7 +109,7 @@ describe('Checkbox', () => {
     const checkbox = container.firstChild;
     const checkboxInput = container.querySelector('.raw-checkbox-input');
     expect(checkboxInput).toBePartiallyChecked();
-    await userEvent.click(checkbox as Element);
+    await user.click(checkbox as Element);
     expect(checkboxInput).toBePartiallyChecked();
   });
 
@@ -130,9 +132,9 @@ describe('Checkbox', () => {
     expect(checkboxTwo).toBeChecked();
     expect(checkboxThree).not.toBeChecked();
     expect(checkboxFour).not.toBeChecked();
-    await userEvent.click(checkboxTwo);
-    await userEvent.click(checkboxThree);
-    await userEvent.click(checkboxFour);
+    await user.click(checkboxTwo);
+    await user.click(checkboxThree);
+    await user.click(checkboxFour);
     expect(checkboxOne).toBeChecked();
     expect(checkboxTwo).not.toBeChecked();
     expect(checkboxThree).toBeChecked();
@@ -169,9 +171,9 @@ describe('Checkbox', () => {
     expect(checkboxThree).not.toBeChecked();
     expect(checkboxFour).not.toBeChecked();
 
-    await userEvent.click(checkboxThree);
+    await user.click(checkboxThree);
     rerender(<Component value={checked} onChange={onChange} />);
-    await userEvent.click(checkboxFour);
+    await user.click(checkboxFour);
     rerender(<Component value={checked} onChange={onChange} />);
 
     expect(onChange).toHaveBeenCalledTimes(2);
@@ -200,10 +202,10 @@ describe('Checkbox', () => {
     expect(checkboxThree).toBeDisabled();
     expect(checkboxFour).toBeDisabled();
 
-    await userEvent.click(checkboxOne);
-    await userEvent.click(checkboxTwo);
-    await userEvent.click(checkboxThree);
-    await userEvent.click(checkboxFour);
+    await user.click(checkboxOne);
+    await user.click(checkboxTwo);
+    await user.click(checkboxThree);
+    await user.click(checkboxFour);
 
     expect(checkboxOne).not.toBeChecked();
     expect(checkboxTwo).not.toBeChecked();

packages/Input/__tests__/Input.test.tsx

@@ -18,6 +18,8 @@ const sizeHeightMap = {
   lg: '48px',
 };
 
+const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
+
 describe('Input', () => {
   test('should match the snapshot', () => {
     const { asFragment } = render(<Input />);
@@ -39,7 +41,7 @@ describe('Input', () => {
   test('should support type text', async () => {
     const { container } = render(<Input />);
     const input = container.firstChild as Element;
-    await userEvent.type(input, 'test text');
+    await user.type(input, 'test text');
     expect(input).toHaveValue('test text');
   });
 
@@ -91,7 +93,7 @@ describe('Input', () => {
     const { container } = render(<Component onChange={onChange} />);
     const input = container.firstChild as Element;
     expect(input).toHaveValue('');
-    await userEvent.type(input, 'test text');
+    await user.type(input, 'test text');
     expect(input).toHaveValue('test text');
     expect(onChange).toHaveBeenCalledTimes(9);
   });
@@ -126,7 +128,7 @@ describe('Input', () => {
     const input = container.firstChild as Element;
     expect(input).toBeDisabled();
     expect(input).toHaveValue('');
-    await userEvent.type(input, 'test text');
+    await user.type(input, 'test text');
     expect(input).toHaveValue('');
     expect(onChange).toHaveBeenCalledTimes(0);
   });
@@ -137,7 +139,7 @@ describe('Input', () => {
     const input = container.firstChild as Element;
     expect(input).toHaveAttribute('readonly');
     expect(input).toHaveValue('');
-    await userEvent.type(input, 'test text');
+    await user.type(input, 'test text');
     expect(input).toHaveValue('');
     expect(onChange).toHaveBeenCalledTimes(0);
   });

packages/Modal/__tests__/Modal.test.tsx

@@ -3,6 +3,8 @@ import { render, waitFor } from '@testing-library/react';
 import { Button, Modal, ModalProps } from '../..';
 import userEvent from '@testing-library/user-event';
 
+const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
+
 describe('Modal', () => {
   const closeHandler = jest.fn();
 
@@ -87,8 +89,6 @@ describe('Modal', () => {
   });
 
   test('should open modal and close modal when click target', async () => {
-    jest.useFakeTimers();
-    const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
     const { getByTestId, findByTestId, queryByTestId } = render(
       <Component closeOnOverlayClick={true} />
     );
@@ -103,24 +103,18 @@ describe('Modal', () => {
       expect(queryByTestId('modalContainer')).not.toBeInTheDocument();
     });
     expect(closeHandler).toHaveBeenCalledTimes(1);
-    jest.useRealTimers();
   });
 
   test('should not close modal when disabled overlay clicked', async () => {
-    jest.useFakeTimers();
-    const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
     const { getByTestId, findByTestId } = render(
       <Component closeOnOverlayClick={false} />
     );
     await user.click(getByTestId('openModal'));
     await user.click(await findByTestId('modalContainer'));
     expect(closeHandler).toHaveBeenCalledTimes(0);
-    jest.useRealTimers();
   });
 
   test('should not propagate the click event', async () => {
-    jest.useFakeTimers();
-    const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
     const { getByTestId, findByTestId } = render(
       <Component closeOnOverlayClick={true} />
     );
@@ -129,6 +123,5 @@ describe('Modal', () => {
     await user.click(await findByTestId('modalWrapper'));
     expect(await findByTestId('modalContainer')).toBeInTheDocument();
     expect(closeHandler).toHaveBeenCalledTimes(0);
-    jest.useRealTimers();
   });
 });

packages/Overlay/__tests__/Overlay.test.tsx

@@ -3,6 +3,8 @@ import { render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import Overlay from '..';
 
+const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
+
 describe('Overlay', () => {
   test('should match the snapshot', () => {
     const { asFragment } = render(<Overlay visible />);
@@ -12,7 +14,7 @@ describe('Overlay', () => {
   test('should trigger click event', async () => {
     const mockClickFn = jest.fn();
     const { getByTestId } = render(<Overlay visible onClick={mockClickFn} />);
-    await userEvent.click(getByTestId('overlay'));
+    await user.click(getByTestId('overlay'));
     expect(mockClickFn).toHaveBeenCalledTimes(1);
   });
 });

packages/Popover/__tests__/Popover.test.tsx

@@ -4,6 +4,8 @@ import userEvent from '@testing-library/user-event';
 import Popover from '..';
 import { PopoverProps } from '../Popover.types';
 
+const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
+
 describe('Popover', () => {
   test('should match the snapshot', () => {
     const { asFragment } = render(
@@ -12,6 +14,15 @@ describe('Popover', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
+  test('should show popover when default value is true', async () => {
+    const { findByTestId } = render(
+      <Popover defaultValue content="I am a popover">
+        Click me
+      </Popover>
+    );
+    expect(await findByTestId('popoverContent')).toBeInTheDocument();
+  });
+
   test('should support custom class name', () => {
     const { container } = render(
       <Popover content="I am a popover" className="custom-popover">
@@ -22,7 +33,6 @@ describe('Popover', () => {
   });
 
   test('should show popover when click target', async () => {
-    const user = userEvent.setup();
     const { getByTestId, findByTestId } = render(
       <Popover content="I am a popover">Click me</Popover>
     );
@@ -31,7 +41,6 @@ describe('Popover', () => {
   });
 
   test('should switch whether or not popover is visible when click target', async () => {
-    const user = userEvent.setup();
     const { getByTestId, findByTestId } = render(
       <Popover content="I am a popover">Click me</Popover>
     );
@@ -45,7 +54,6 @@ describe('Popover', () => {
   });
 
   test('should hide popover when click outside', async () => {
-    const user = userEvent.setup();
     const { getByTestId, findByTestId } = render(
       <Popover content="I am a popover">Click me</Popover>
     );
@@ -58,7 +66,6 @@ describe('Popover', () => {
   });
 
   test('should support disabled popover', async () => {
-    const user = userEvent.setup();
     const { getByTestId } = render(
       <Popover content="I am a popover" disabled>
         Click me
@@ -71,7 +78,6 @@ describe('Popover', () => {
   });
 
   test('should support controlled value', async () => {
-    const user = userEvent.setup();
     const onChange = jest.fn();
 
     const Component = (props: PopoverProps) => {
@@ -97,4 +103,25 @@ describe('Popover', () => {
     expect(await findByTestId('popoverContent')).toBeInTheDocument();
     expect(onChange).toHaveBeenCalledTimes(1);
   });
+
+  test('should support set parent container element', () => {
+    render(
+      <div
+        id="parentElement"
+        style={{
+          position: 'relative',
+          overflowY: 'auto',
+          width: '400px',
+          height: '200px',
+        }}
+      >
+        <Popover
+          content="I am a popover"
+          getPopupContainer={() => document.querySelector('#parentElement')}
+        >
+          Click me
+        </Popover>
+      </div>
+    );
+  });
 });

packages/Popup/PopupArrow.tsx

@@ -11,7 +11,7 @@ const PopupArrow: FC<PopupArrowProps> = ({
   targetRef,
   placement,
   withBorder,
-  className = '',
+  className,
 }) => {
   const arrowOffset = useMemo<PopupArrowOffset>(() => {
     const { width, height } = getTargetRect(targetRef);