From fe90175bb92af1adfbaaf43917f1212a5627893d Mon Sep 17 00:00:00 2001 From: Jannik Buschke Date: Sun, 28 Nov 2021 21:12:32 +0100 Subject: [PATCH] refactor: migrate to waitFor --- src/auto-complete/index.test.tsx | 18 +++++++----------- src/checkbox/index.test.tsx | 11 ++++------- src/field/index.test.tsx | 8 +++++--- src/form-item/index.test.tsx | 23 +++++++++++------------ src/input/index.test.tsx | 17 ++++++++++------- src/mentions/index.test.tsx | 7 ++++--- src/mentions/index.tsx | 4 ---- src/radio/index.test.tsx | 24 ++++++++++-------------- src/table/index.test.tsx | 19 +++++++++++-------- 9 files changed, 62 insertions(+), 69 deletions(-) diff --git a/src/auto-complete/index.test.tsx b/src/auto-complete/index.test.tsx index 9cd293e..12eab35 100644 --- a/src/auto-complete/index.test.tsx +++ b/src/auto-complete/index.test.tsx @@ -1,7 +1,7 @@ import '@testing-library/jest-dom/extend-expect' -import React, { ReactNode } from 'react' +import React from 'react' import { Formik } from 'formik' -import { render, fireEvent, waitForDomChange } from '@testing-library/react' +import { render, fireEvent, waitFor } from '@testing-library/react' import Form from '../form/form' import AutoComplete from './index' import { act } from 'react-dom/test-utils' @@ -32,9 +32,8 @@ test('sets input value', async () => { await act(async () => { uat.focus() fireEvent.change(uat, { target: { name: 'field', value: 'world' } }) - await waitForDomChange() + await waitFor(() => expect(uat).toHaveValue('world')) }) - expect(uat).toHaveValue('world') }) test('sets key as input to key value', async () => { @@ -42,26 +41,23 @@ test('sets key as input to key value', async () => { const uat = getByRole('combobox') await act(async () => { fireEvent.change(uat, { target: { name: 'field', value: '1' } }) - await waitForDomChange() + await waitFor(() => expect(uat).toHaveValue('1')) }) - expect(uat).toHaveValue('1') }) // somehow the 'sets key as input to key value' and 'reset value' tests intefere. // we skip one of them to please the pipeline -test.skip('resets value', async () => { +test('resets value', async () => { const { getByRole, getByTestId } = render() const uat = getByRole('combobox') await act(async () => { fireEvent.change(uat, { target: { name: 'field', value: 'search value' } }) - await waitForDomChange() + await waitFor(() => expect(uat).toHaveValue('search value')) }) expect(uat).toHaveValue('search value') await act(async () => { fireEvent.click(getByTestId('reset')) - await waitForDomChange() + await waitFor(() => expect(uat).toHaveValue('hello')) }) - - expect(uat).toHaveValue('hello') }) diff --git a/src/checkbox/index.test.tsx b/src/checkbox/index.test.tsx index 8068240..d798a81 100644 --- a/src/checkbox/index.test.tsx +++ b/src/checkbox/index.test.tsx @@ -1,7 +1,7 @@ import '@testing-library/jest-dom/extend-expect' import React from 'react' import { Formik } from 'formik' -import { render, fireEvent, waitForDomChange } from '@testing-library/react' +import { render, fireEvent, waitFor } from '@testing-library/react' import Form from '../form/form' import Checkbox from './index' import { act } from 'react-dom/test-utils' @@ -29,9 +29,8 @@ test('should check', async () => { const uat = getByRole('checkbox') await act(async () => { fireEvent.click(uat, { target: 'field', checked: true }) - await waitForDomChange() + await waitFor(() => expect(uat).toBeChecked()) }) - expect(uat).toBeChecked() }) test('should uncheck', async () => { @@ -39,9 +38,8 @@ test('should uncheck', async () => { const uat = getByRole('checkbox') await act(async () => { fireEvent.click(uat, { target: 'field', checked: false }) - await waitForDomChange() + await waitFor(() => expect(uat).not.toBeChecked()) }) - expect(uat).not.toBeChecked() }) test('should validate once per click', async () => { @@ -54,7 +52,6 @@ test('should validate once per click', async () => { await act(async () => { uat.focus() fireEvent.click(uat, { target: 'field', checked: true }) - await waitForDomChange() + await waitFor(() => expect(validate).toBeCalledTimes(1)) }) - expect(validate).toBeCalledTimes(1) }) diff --git a/src/field/index.test.tsx b/src/field/index.test.tsx index be0c9e4..721f46b 100644 --- a/src/field/index.test.tsx +++ b/src/field/index.test.tsx @@ -1,10 +1,11 @@ import '@testing-library/jest-dom/extend-expect' import React from 'react' import { Formik } from 'formik' -import { render, fireEvent, waitForDomChange } from '@testing-library/react' +import { render, fireEvent } from '@testing-library/react' import Form from '../form/form' import Input from '../input' import { act } from 'react-dom/test-utils' +import { waitFor } from '@testing-library/dom' const Container = ({ fast }: { fast: boolean }) => { return ( @@ -37,8 +38,9 @@ describe('should change', () => { const uat = await findByTestId('uat') await act(async () => { fireEvent.change(uat, { target: { value: 'new value' } }) - await waitForDomChange() + await waitFor(async () => + expect(await findByTestId('uat')).toHaveValue('new value'), + ) }) - expect(await findByTestId('uat')).toHaveValue('new value') }) }) diff --git a/src/form-item/index.test.tsx b/src/form-item/index.test.tsx index 792999d..7b47032 100644 --- a/src/form-item/index.test.tsx +++ b/src/form-item/index.test.tsx @@ -47,8 +47,7 @@ test('displays validation result', async () => { target: { name: 'test', value: 'test' }, }) fireEvent.click(getByTestId('submit')) - await waitForDomChange() - expect(queryByText('error')).toBeInTheDocument() + await waitFor(() => expect(queryByText('error')).toBeInTheDocument()) }) test('displayes initial error', async () => { @@ -92,9 +91,10 @@ test('displayes error instead of initialError after touched when showInitialErro }) fireEvent.blur(getByTestId('input')) fireEvent.click(getByTestId('submit')) - await waitForDomChange() - expect(queryByText('error')).toBeInTheDocument() - expect(queryByText('initialError')).not.toBeInTheDocument() + await waitFor(() => { + expect(queryByText('error')).toBeInTheDocument() + expect(queryByText('initialError')).not.toBeInTheDocument() + }) }) test('displayes initialError with error after touched when showInitialErrorAfterTouched is true', async () => { @@ -124,9 +124,10 @@ test('displayes initialError with error after touched when showInitialErrorAfter }) fireEvent.blur(getByTestId('input')) fireEvent.click(getByTestId('submit')) - await waitForDomChange() - expect(queryByText('error')).toBeInTheDocument() - expect(queryByText('initialError')).toBeInTheDocument() + await waitFor(() => { + expect(queryByText('error')).toBeInTheDocument() + expect(queryByText('initialError')).toBeInTheDocument() + }) }) test('should not display help if no display is required', async () => { @@ -193,8 +194,7 @@ test('handles changes on multiselect with array field error', async () => { ) expect(queryByText('error')).not.toBeInTheDocument() fireEvent.click(getByTestId('submit')) - await waitForDomChange() - expect(queryByText('error')).toBeInTheDocument() + await waitFor(() => expect(queryByText('error')).toBeInTheDocument()) }) test('displays validation result on nested input', async () => { @@ -215,8 +215,7 @@ test('displays validation result on nested input', async () => { }) fireEvent.blur(getByTestId('input')) fireEvent.click(getByTestId('submit')) - await waitForDomChange() - expect(queryByText('error')).toBeInTheDocument() + await waitFor(() => expect(queryByText('error')).toBeInTheDocument()) }) test('displays validation success ', async () => { diff --git a/src/input/index.test.tsx b/src/input/index.test.tsx index e9e4cc4..a028c96 100644 --- a/src/input/index.test.tsx +++ b/src/input/index.test.tsx @@ -1,7 +1,7 @@ import '@testing-library/jest-dom/extend-expect' import React from 'react' import { Formik } from 'formik' -import { render, fireEvent, waitForDomChange } from '@testing-library/react' +import { render, fireEvent, waitFor } from '@testing-library/react' import Form from '../form/form' import Input from './index' import { act } from 'react-dom/test-utils' @@ -61,9 +61,10 @@ describe('should change', () => { const uat = await findByTestId('uat') await act(async () => { fireEvent.change(uat, { target: { value: 'new value' } }) - await waitForDomChange() + await waitFor(async () => + expect(await findByTestId('uat')).toHaveValue('new value'), + ) }) - expect(await findByTestId('uat')).toHaveValue('new value') }) }) @@ -77,9 +78,10 @@ test('TextArea should display default value', async () => { const uat = await findByTestId('uat') await act(async () => { fireEvent.change(uat, { target: { value: 'defaultvalue' } }) - await waitForDomChange() + await waitFor(async () => + expect(await findByTestId('uat')).toHaveValue('defaultvalue'), + ) }) - expect(await findByTestId('uat')).toHaveValue('defaultvalue') }) test('Password should display default value', async () => { @@ -87,7 +89,8 @@ test('Password should display default value', async () => { const uat = await findByTestId('uat') await act(async () => { fireEvent.change(uat, { target: { value: 'defaultvalue' } }) - await waitForDomChange() + await waitFor(async () => + expect(await findByTestId('uat')).toHaveValue('defaultvalue'), + ) }) - expect(await findByTestId('uat')).toHaveValue('defaultvalue') }) diff --git a/src/mentions/index.test.tsx b/src/mentions/index.test.tsx index 5fb0975..a57324c 100644 --- a/src/mentions/index.test.tsx +++ b/src/mentions/index.test.tsx @@ -1,7 +1,7 @@ import '@testing-library/jest-dom/extend-expect' import React from 'react' import { Formik } from 'formik' -import { render, fireEvent, waitForDomChange } from '@testing-library/react' +import { render, fireEvent, waitFor } from '@testing-library/react' import Form from '../form/form' import Mentions from './index' import { act } from 'react-dom/test-utils' @@ -37,8 +37,9 @@ describe('should change', () => { const uat = await findByTestId('uat') await act(async () => { fireEvent.change(uat, { target: { value: 'new value' } }) - await waitForDomChange() + await waitFor(async () => + expect(await findByTestId('uat')).toHaveValue('new value'), + ) }) - expect(await findByTestId('uat')).toHaveValue('new value') }) }) diff --git a/src/mentions/index.tsx b/src/mentions/index.tsx index 6a9fa24..731390f 100644 --- a/src/mentions/index.tsx +++ b/src/mentions/index.tsx @@ -28,10 +28,6 @@ export const Mentions = ({ onBlur(name) $onBlur && $onBlur(e) }} - // onBlur={(event) => { - // onBlur(event) - // $onBlur && $onBlur(event) - // }} {...restProps} /> )} diff --git a/src/radio/index.test.tsx b/src/radio/index.test.tsx index 8748fb8..54bdcb8 100644 --- a/src/radio/index.test.tsx +++ b/src/radio/index.test.tsx @@ -1,12 +1,7 @@ import '@testing-library/jest-dom/extend-expect' import React from 'react' import { Formik } from 'formik' -import { - render, - fireEvent, - waitForDomChange, - waitFor, -} from '@testing-library/react' +import { render, fireEvent, waitFor } from '@testing-library/react' import Form from '../form/form' import Radio from './index' import { act } from 'react-dom/test-utils' @@ -56,10 +51,11 @@ test.skip('should change', async () => { expect(radio2).not.toBeChecked() await act(async () => { fireEvent.click(radio2, { checked: true }) - await waitForDomChange() + await waitFor(() => { + expect(radio2).toBeChecked() + expect(radio1).not.toBeChecked() + }) }) - expect(radio2).toBeChecked() - expect(radio1).not.toBeChecked() }) test.skip('should change', async () => { @@ -70,10 +66,11 @@ test.skip('should change', async () => { expect(radio2).not.toBeChecked() await act(async () => { fireEvent.click(radio2, { checked: true }) - await waitForDomChange() + await waitFor(() => { + expect(radio2).toBeChecked() + expect(radio1).not.toBeChecked() + }) }) - expect(radio2).toBeChecked() - expect(radio1).not.toBeChecked() }) test.skip('should validate once per click', async () => { @@ -86,7 +83,6 @@ test.skip('should validate once per click', async () => { await act(async () => { fireEvent.click(radio2, { checked: true }) - await waitForDomChange() + await waitFor(() => expect(validate).toBeCalledTimes(1)) }) - expect(validate).toBeCalledTimes(1) }) diff --git a/src/table/index.test.tsx b/src/table/index.test.tsx index e993f23..1022593 100644 --- a/src/table/index.test.tsx +++ b/src/table/index.test.tsx @@ -1,7 +1,7 @@ import '@testing-library/jest-dom/extend-expect' import React from 'react' import { Formik } from 'formik' -import { render, fireEvent, waitForDomChange } from '@testing-library/react' +import { render, fireEvent, waitFor } from '@testing-library/react' import Form from '../form/form' import Table from './index' import { act } from 'react-dom/test-utils' @@ -63,10 +63,11 @@ test('changes row', async () => { const uat = getByRole('textbox') await act(async () => { fireEvent.change(uat, { target: { value: '1' } }) - await waitForDomChange() + await waitFor(() => { + expect(uat).toHaveValue('1') + expect(getByDisplayValue('1')).toBeInTheDocument() + }) }) - expect(uat).toHaveValue('1') - expect(getByDisplayValue('1')).toBeInTheDocument() }) test('deletes row', async () => { @@ -74,9 +75,10 @@ test('deletes row', async () => { const uat = getByTestId('remove') await act(async () => { fireEvent.click(uat) - await waitForDomChange() + await waitFor(() => { + expect(getByText('No Data')).toBeInTheDocument() + }) }) - expect(getByText('No Data')).toBeInTheDocument() }) test('adds row', async () => { @@ -84,7 +86,8 @@ test('adds row', async () => { const uat = getByTestId('add') await act(async () => { fireEvent.click(uat) - await waitForDomChange() + await waitFor(() => + expect(getByDisplayValue('new item')).toBeInTheDocument(), + ) }) - expect(getByDisplayValue('new item')).toBeInTheDocument() })