From caf5f120df460d5da985e0d4dfc1dcc470bd891c Mon Sep 17 00:00:00 2001 From: shervinchen Date: Wed, 24 Apr 2024 23:50:59 +0300 Subject: [PATCH] test: add missing tests --- packages/Modal/__tests__/Modal.test.tsx | 33 +++-- packages/Popover/Popover.tsx | 4 +- packages/Popover/__tests__/Popover.test.tsx | 48 ++----- packages/Popup/__tests__/Popup.test.tsx | 31 ++-- packages/Select/Select.tsx | 14 +- packages/Select/Select.types.ts | 1 - packages/Select/SelectDropdown.tsx | 1 + packages/Select/SelectOption.tsx | 9 +- packages/Select/SelectTag.tsx | 6 +- packages/Select/__tests__/Select.test.tsx | 150 +++++++++++++++++++- packages/Tooltip/__tests__/Tooltip.test.tsx | 11 +- 11 files changed, 210 insertions(+), 98 deletions(-) diff --git a/packages/Modal/__tests__/Modal.test.tsx b/packages/Modal/__tests__/Modal.test.tsx index 60f6d21..523c7d5 100644 --- a/packages/Modal/__tests__/Modal.test.tsx +++ b/packages/Modal/__tests__/Modal.test.tsx @@ -1,5 +1,5 @@ import React, { useState } from 'react'; -import { act, render, screen } from '@testing-library/react'; +import { render, waitFor } from '@testing-library/react'; import { Button, Modal, ModalProps } from '../..'; import userEvent from '@testing-library/user-event'; @@ -89,15 +89,19 @@ describe('Modal', () => { test('should open modal and close modal when click target', async () => { jest.useFakeTimers(); const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime }); - const { getByTestId } = render(); + const { getByTestId, findByTestId, queryByTestId } = render( + + ); await user.click(getByTestId('openModal')); - const modalContainer = screen.getByTestId('modalContainer'); + const modalContainer = await findByTestId('modalContainer'); expect(modalContainer).toBeInTheDocument(); await user.click(modalContainer); - act(() => { - jest.runAllTimers(); + // act(() => { + // jest.runAllTimers(); + // }); + await waitFor(() => { + expect(queryByTestId('modalContainer')).not.toBeInTheDocument(); }); - expect(modalContainer).not.toBeInTheDocument(); expect(closeHandler).toHaveBeenCalledTimes(1); jest.useRealTimers(); }); @@ -105,9 +109,11 @@ describe('Modal', () => { test('should not close modal when disabled overlay clicked', async () => { jest.useFakeTimers(); const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime }); - const { getByTestId } = render(); + const { getByTestId, findByTestId } = render( + + ); await user.click(getByTestId('openModal')); - await user.click(getByTestId('modalContainer')); + await user.click(await findByTestId('modalContainer')); expect(closeHandler).toHaveBeenCalledTimes(0); jest.useRealTimers(); }); @@ -115,12 +121,13 @@ describe('Modal', () => { test('should not propagate the click event', async () => { jest.useFakeTimers(); const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime }); - const { getByTestId } = render(); + const { getByTestId, findByTestId } = render( + + ); await user.click(getByTestId('openModal')); - const modalWrapper = getByTestId('modalWrapper'); - expect(getByTestId('modalContainer')).toBeInTheDocument(); - await user.click(modalWrapper); - expect(getByTestId('modalContainer')).toBeInTheDocument(); + expect(await findByTestId('modalContainer')).toBeInTheDocument(); + await user.click(await findByTestId('modalWrapper')); + expect(await findByTestId('modalContainer')).toBeInTheDocument(); expect(closeHandler).toHaveBeenCalledTimes(0); jest.useRealTimers(); }); diff --git a/packages/Popover/Popover.tsx b/packages/Popover/Popover.tsx index 8ee771c..a2b82c6 100644 --- a/packages/Popover/Popover.tsx +++ b/packages/Popover/Popover.tsx @@ -39,9 +39,7 @@ const Popover: FC> = ({ useClickAway( ref, () => { - if (internalValue) { - setInternalValue(false); - } + setInternalValue(false); }, ['click'] ); diff --git a/packages/Popover/__tests__/Popover.test.tsx b/packages/Popover/__tests__/Popover.test.tsx index ae4edcd..827c420 100644 --- a/packages/Popover/__tests__/Popover.test.tsx +++ b/packages/Popover/__tests__/Popover.test.tsx @@ -1,9 +1,8 @@ import React, { useState } from 'react'; -import { render, act, screen, waitFor } from '@testing-library/react'; +import { render, screen, waitFor } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import Popover from '..'; import { PopoverProps } from '../Popover.types'; -import * as useControlled from '../../utils/hooks/useControlled'; describe('Popover', () => { test('should match the snapshot', () => { @@ -24,25 +23,21 @@ describe('Popover', () => { test('should show popover when click target', async () => { const user = userEvent.setup(); - const { getByTestId } = render( + const { getByTestId, findByTestId } = render( Click me ); await user.click(getByTestId('popoverTarget')); - await waitFor(() => { - expect(screen.getByTestId('popoverContent')).toBeInTheDocument(); - }); + expect(await findByTestId('popoverContent')).toBeInTheDocument(); }); test('should switch whether or not popover is visible when click target', async () => { const user = userEvent.setup(); - const { getByTestId } = render( + const { getByTestId, findByTestId } = render( Click me ); const target = getByTestId('popoverTarget'); await user.click(target); - await waitFor(() => { - expect(screen.getByTestId('popoverContent')).toBeInTheDocument(); - }); + expect(await findByTestId('popoverContent')).toBeInTheDocument(); await user.click(target); await waitFor(() => { expect(screen.queryByTestId('popoverContent')).not.toBeInTheDocument(); @@ -51,36 +46,17 @@ describe('Popover', () => { test('should hide popover when click outside', async () => { const user = userEvent.setup(); - const { getByTestId } = render( + const { getByTestId, findByTestId } = render( Click me ); await user.click(getByTestId('popoverTarget')); - await waitFor(() => { - expect(screen.getByTestId('popoverContent')).toBeInTheDocument(); - }); - act(() => { - document.dispatchEvent(new MouseEvent('click')); - }); + expect(await findByTestId('popoverContent')).toBeInTheDocument(); + await user.click(document.body); await waitFor(() => { expect(screen.queryByTestId('popoverContent')).not.toBeInTheDocument(); }); }); - test('should not trigger click outside logic when popover is invisible', async () => { - const mockSetValueFunc = jest.fn(); - jest - .spyOn(useControlled, 'useControlled') - .mockImplementation(() => [false, mockSetValueFunc]); - render(Click me); - act(() => { - document.dispatchEvent(new MouseEvent('click')); - }); - await waitFor(() => { - expect(mockSetValueFunc).toHaveBeenCalledTimes(0); - }); - (useControlled.useControlled as jest.Mock).mockRestore(); - }); - test('should support disabled popover', async () => { const user = userEvent.setup(); const { getByTestId } = render( @@ -114,13 +90,11 @@ describe('Popover', () => { ); }; - const { getByTestId } = render( + const { getByTestId, findByTestId } = render( ); await user.click(getByTestId('popoverTarget')); - await waitFor(() => { - expect(screen.getByTestId('popoverContent')).toBeInTheDocument(); - expect(onChange).toHaveBeenCalledTimes(1); - }); + expect(await findByTestId('popoverContent')).toBeInTheDocument(); + expect(onChange).toHaveBeenCalledTimes(1); }); }); diff --git a/packages/Popup/__tests__/Popup.test.tsx b/packages/Popup/__tests__/Popup.test.tsx index 7e01b19..856e391 100644 --- a/packages/Popup/__tests__/Popup.test.tsx +++ b/packages/Popup/__tests__/Popup.test.tsx @@ -1,4 +1,4 @@ -import { act, render, screen } from '@testing-library/react'; +import { fireEvent, render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import Popup from '..'; import { MutableRefObject, useRef } from 'react'; @@ -103,13 +103,12 @@ describe('Popup', () => { /> ); expect(mockGetPopupPosition).toHaveBeenCalledTimes(1); - act(() => { - window.dispatchEvent(new Event('resize')); - }); + fireEvent(window, new Event('resize')); expect(mockGetPopupPosition).toHaveBeenCalledTimes(2); }); - test('should update popup position when document click', () => { + test('should update popup position when document click', async () => { + const user = userEvent.setup(); render( { /> ); expect(mockGetPopupPosition).toHaveBeenCalledTimes(1); - act(() => { - document.dispatchEvent(new MouseEvent('click')); - }); + await user.click(document.body); expect(mockGetPopupPosition).toHaveBeenCalledTimes(2); }); - test('should update popup position when mouse over', () => { + test('should update popup position when mouse over', async () => { render( { /> ); expect(mockGetPopupPosition).toHaveBeenCalledTimes(1); - act(() => { - targetRefMock.current.dispatchEvent(new Event('mouseenter')); - }); + await userEvent.hover(targetRefMock.current); expect(mockGetPopupPosition).toHaveBeenCalledTimes(2); }); @@ -178,16 +173,14 @@ describe('Popup', () => { expect(popup).toBeInTheDocument(); }); - test('should not trigger mouse over event when target is empty', () => { + test('should not trigger mouse over event when target is empty', async () => { render(); expect(mockGetPopupPosition).toHaveBeenCalledTimes(1); - act(() => { - targetRefMock.current.dispatchEvent(new Event('mouseenter')); - }); + await userEvent.hover(targetRefMock.current); expect(mockGetPopupPosition).toHaveBeenCalledTimes(1); }); - test('should not trigger mouse over event when event is removed', () => { + test('should not trigger mouse over event when event is removed', async () => { const { unmount } = render( { ); expect(mockGetPopupPosition).toHaveBeenCalledTimes(1); unmount(); - act(() => { - targetRefMock.current.dispatchEvent(new Event('mouseenter')); - }); + await userEvent.hover(targetRefMock.current); expect(mockGetPopupPosition).toHaveBeenCalledTimes(1); }); }); diff --git a/packages/Select/Select.tsx b/packages/Select/Select.tsx index 2cf38bd..2079a2f 100644 --- a/packages/Select/Select.tsx +++ b/packages/Select/Select.tsx @@ -155,9 +155,7 @@ const Select = forwardRef>( useClickAway( selectRef, () => { - if (dropdownVisible) { - setDropdownVisible(false); - } + setDropdownVisible(false); }, ['mousedown'] ); @@ -167,20 +165,20 @@ const Select = forwardRef>( () => ({ focus: () => inputRef.current?.focus(), blur: () => inputRef.current?.blur(), - scrollTo: (options) => dropdownRef.current?.scrollTo(options), }), - [inputRef, dropdownRef] + [inputRef] ); const SelectContent = (): ReactElement => { - if (internalValue === undefined) + if (internalValue === undefined) { return {placeholder}; + } const selectedOptions = getValidChildren(children).filter((option) => { if (Array.isArray(internalValue)) { - return multiple ? internalValue.includes(option.props.value) : false; + return internalValue.includes(option.props.value); } else { - return multiple ? false : internalValue === option.props.value; + return internalValue === option.props.value; } }); diff --git a/packages/Select/Select.types.ts b/packages/Select/Select.types.ts index 18262ba..20ac190 100644 --- a/packages/Select/Select.types.ts +++ b/packages/Select/Select.types.ts @@ -32,7 +32,6 @@ export type SelectProps = BaseSelectProps & NativeSelectProps; export type SelectRef = { focus: () => void; blur: () => void; - scrollTo?: (options?: ScrollToOptions) => void; }; export interface SelectConfig { diff --git a/packages/Select/SelectDropdown.tsx b/packages/Select/SelectDropdown.tsx index e8d5b4e..2461dee 100644 --- a/packages/Select/SelectDropdown.tsx +++ b/packages/Select/SelectDropdown.tsx @@ -51,6 +51,7 @@ const SelectDropdown = forwardRef< getPopupContainer={getPopupContainer} >
> = ({ const isDisabled = selectDisabled || disabled; const isSelected = useMemo(() => { if (Array.isArray(selectValue)) { - return multiple ? selectValue.includes(value) : false; + return selectValue.includes(value); } else { return multiple ? false : selectValue === value; } @@ -33,7 +33,12 @@ const SelectOption: FC> = ({ }; return ( -
+
{children} {isSelected && ( diff --git a/packages/Select/SelectTag.tsx b/packages/Select/SelectTag.tsx index 3a4e1b2..315b763 100644 --- a/packages/Select/SelectTag.tsx +++ b/packages/Select/SelectTag.tsx @@ -24,7 +24,11 @@ const SelectTag: FC> = ({ return (
{children}
-
+