refactor: migrate to waitFor

jannikbuschke · Nov 28, 2021 · fe90175 · fe90175
1 parent 11269b2
commit fe90175
Show file tree

Hide file tree

Showing 9 changed files with 62 additions and 69 deletions.
diff --git 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,36 +32,32 @@ 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 () => {
   const { getByRole } = render(<TestAutoComplete />)
   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(<TestAutoComplete />)
   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
@@ -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,19 +29,17 @@ 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 () => {
   const { getByRole } = render(<Container initiallyChecked={true} />)
   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
@@ -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
@@ -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
@@ -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,17 +78,19 @@ 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 () => {
   const { findByTestId } = render(<PasswordContainer />)
   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
@@ -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
@@ -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
@@ -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
@@ -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,28 +63,31 @@ 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 () => {
   const { getByText, getByTestId } = render(<TestTable />)
   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 () => {
   const { getByDisplayValue, getByTestId } = render(<TestTable />)
   const uat = getByTestId('add')
   await act(async () => {
     fireEvent.click(uat)
-    await waitForDomChange()
+    await waitFor(() =>
+      expect(getByDisplayValue('new item')).toBeInTheDocument(),
+    )
   })
-  expect(getByDisplayValue('new item')).toBeInTheDocument()
 })