From f4dc5f587067de315662e3f9037e77e95f1c0481 Mon Sep 17 00:00:00 2001 From: Byron Wall Date: Thu, 9 Jan 2025 11:02:55 -0500 Subject: [PATCH] chore(async fire event): use async fireEvent methods instead of act on blur and focus in all relevant files --- .../dropdown-menu/src/dropdown-menu.spec.tsx | 4 ++-- .../src/async-creatable-select-field.spec.js | 8 ++++---- .../src/async-select-field.spec.js | 8 ++++---- .../src/creatable-select-field.spec.js | 8 ++++---- .../fields/date-field/src/date-field.spec.js | 8 ++++---- .../date-range-field/src/date-range-field.spec.js | 8 ++++---- .../date-time-field/src/date-time-field.spec.js | 8 ++++---- .../src/localized-multiline-text-field.spec.js | 8 ++++---- .../fields/money-field/src/money-field.spec.js | 14 +++++++------- .../src/multiline-text-field.spec.js | 8 ++++---- .../src/search-select-field.spec.js | 8 ++++---- .../fields/select-field/src/select-field.spec.js | 8 ++++---- .../src/async-creatable-select-input.spec.js | 8 ++++---- .../src/async-select-input.spec.js | 8 ++++---- .../src/creatable-select-input.spec.js | 8 ++++---- .../inputs/date-input/src/date-input.spec.js | 8 ++++---- .../date-range-input/src/date-range-input.spec.js | 8 ++++---- .../date-time-input/src/date-time-input.spec.js | 10 +++++----- .../src/localized-money-input.spec.js | 6 +++--- .../src/localized-multiline-text-input.spec.js | 8 ++++---- .../src/localized-text-input.spec.js | 8 ++++---- .../src/multiline-text-input.spec.js | 8 ++++---- .../src/search-select-input.spec.js | 8 ++++---- .../inputs/select-input/src/select-input.spec.js | 8 ++++---- .../src/selectable-search-input.spec.tsx | 4 ++-- .../components/pagination/src/pagination.spec.js | 3 +-- 26 files changed, 100 insertions(+), 101 deletions(-) diff --git a/packages/components/dropdowns/dropdown-menu/src/dropdown-menu.spec.tsx b/packages/components/dropdowns/dropdown-menu/src/dropdown-menu.spec.tsx index 4341d29607..cebaff5ccb 100644 --- a/packages/components/dropdowns/dropdown-menu/src/dropdown-menu.spec.tsx +++ b/packages/components/dropdowns/dropdown-menu/src/dropdown-menu.spec.tsx @@ -1,6 +1,6 @@ +import { act } from 'react'; import SecondaryButton from '@commercetools-uikit/secondary-button'; - -import { act, screen, render, fireEvent } from '../../../../../test/test-utils'; +import { screen, render, fireEvent } from '../../../../../test/test-utils'; import DropdownMenu from './dropdown-menu'; describe('DropdownMenu', () => { diff --git a/packages/components/fields/async-creatable-select-field/src/async-creatable-select-field.spec.js b/packages/components/fields/async-creatable-select-field/src/async-creatable-select-field.spec.js index 44640f390c..0abcbcf2cc 100644 --- a/packages/components/fields/async-creatable-select-field/src/async-creatable-select-field.spec.js +++ b/packages/components/fields/async-creatable-select-field/src/async-creatable-select-field.spec.js @@ -1,4 +1,4 @@ -import { Component, act } from 'react'; +import { Component } from 'react'; import PropTypes from 'prop-types'; import { render, fireEvent, waitFor } from '../../../../../test/test-utils'; import AsyncCreatableSelectField from './async-creatable-select-field'; @@ -94,7 +94,7 @@ it('should call onFocus when the input is focused', async () => { const asyncCreatableSelectField = await findByLabelText( 'AsyncCreatableSelectField' ); - await act(async () => asyncCreatableSelectField.focus()); + fireEvent.asyncFocus(asyncCreatableSelectField); expect(asyncCreatableSelectField).toHaveFocus(); expect(onFocus).toHaveBeenCalled(); }); @@ -105,9 +105,9 @@ it('should call onBlur when input loses focus', async () => { const asyncCreatableSelectField = await findByLabelText( 'AsyncCreatableSelectField' ); - await act(async () => asyncCreatableSelectField.focus()); + fireEvent.asyncFocus(asyncCreatableSelectField); expect(asyncCreatableSelectField).toHaveFocus(); - await act(async () => asyncCreatableSelectField.blur()); + fireEvent.asyncBlur(asyncCreatableSelectField); expect(asyncCreatableSelectField).not.toHaveFocus(); expect(onBlur).toHaveBeenCalled(); }); diff --git a/packages/components/fields/async-select-field/src/async-select-field.spec.js b/packages/components/fields/async-select-field/src/async-select-field.spec.js index c3ae5fb2b0..a43f8d02f9 100644 --- a/packages/components/fields/async-select-field/src/async-select-field.spec.js +++ b/packages/components/fields/async-select-field/src/async-select-field.spec.js @@ -1,4 +1,4 @@ -import { Component, act } from 'react'; +import { Component } from 'react'; import PropTypes from 'prop-types'; import { render, fireEvent, waitFor } from '../../../../../test/test-utils'; import AsyncSelectField from './async-select-field'; @@ -87,7 +87,7 @@ it('should call onFocus when the input is focused', async () => { const onFocus = jest.fn(); const { findByLabelText } = renderAsyncSelectField({ onFocus }); const asyncSelectField = await findByLabelText('AsyncSelectField'); - await act(async () => asyncSelectField.focus()); + fireEvent.asyncFocus(asyncSelectField); expect(asyncSelectField).toHaveFocus(); expect(onFocus).toHaveBeenCalled(); }); @@ -96,9 +96,9 @@ it('should call onBlur when input loses focus', async () => { const onBlur = jest.fn(); const { findByLabelText } = renderAsyncSelectField({ onBlur }); const asyncSelectField = await findByLabelText('AsyncSelectField'); - await act(async () => asyncSelectField.focus()); + fireEvent.asyncFocus(asyncSelectField); expect(asyncSelectField).toHaveFocus(); - await act(async () => asyncSelectField.blur()); + fireEvent.asyncBlur(asyncSelectField.blur()); expect(asyncSelectField).not.toHaveFocus(); expect(onBlur).toHaveBeenCalled(); }); diff --git a/packages/components/fields/creatable-select-field/src/creatable-select-field.spec.js b/packages/components/fields/creatable-select-field/src/creatable-select-field.spec.js index 599ed89508..cc93c8f4b4 100644 --- a/packages/components/fields/creatable-select-field/src/creatable-select-field.spec.js +++ b/packages/components/fields/creatable-select-field/src/creatable-select-field.spec.js @@ -1,4 +1,4 @@ -import { Component, act } from 'react'; +import { Component } from 'react'; import PropTypes from 'prop-types'; import { render, fireEvent } from '../../../../../test/test-utils'; import CreatableSelectField from './creatable-select-field'; @@ -77,7 +77,7 @@ it('should have an HTML name', () => { it('should call onFocus when the input is focused', async () => { const onFocus = jest.fn(); const { getByLabelText } = renderCreatableSelectField({ onFocus }); - await act(async () => getByLabelText('CreatableSelectField').focus()); + fireEvent.asyncFocus(getByLabelText('CreatableSelectField')); expect(getByLabelText('CreatableSelectField')).toHaveFocus(); expect(onFocus).toHaveBeenCalled(); }); @@ -85,9 +85,9 @@ it('should call onFocus when the input is focused', async () => { it('should call onBlur when input loses focus', async () => { const onBlur = jest.fn(); const { getByLabelText } = renderCreatableSelectField({ onBlur }); - await act(async () => getByLabelText('CreatableSelectField').focus()); + fireEvent.asyncFocus(getByLabelText('CreatableSelectField')); expect(getByLabelText('CreatableSelectField')).toHaveFocus(); - await act(async () => getByLabelText('CreatableSelectField').blur()); + fireEvent.asyncBlur(getByLabelText('CreatableSelectField')); expect(getByLabelText('CreatableSelectField')).not.toHaveFocus(); expect(onBlur).toHaveBeenCalled(); }); diff --git a/packages/components/fields/date-field/src/date-field.spec.js b/packages/components/fields/date-field/src/date-field.spec.js index 522d3914b0..76f89a8fa3 100644 --- a/packages/components/fields/date-field/src/date-field.spec.js +++ b/packages/components/fields/date-field/src/date-field.spec.js @@ -1,4 +1,4 @@ -import { Component, act } from 'react'; +import { Component } from 'react'; import PropTypes from 'prop-types'; import { render, fireEvent } from '../../../../../test/test-utils'; import DateField from './date-field'; @@ -69,7 +69,7 @@ it('should have an HTML name', () => { it('should call onFocus when the input is focused', async () => { const onFocus = jest.fn(); const { getByLabelText } = renderDateField({ onFocus }); - await act(async () => getByLabelText('DateField').focus()); + fireEvent.asyncFocus(getByLabelText('DateField')); expect(getByLabelText('DateField')).toHaveFocus(); expect(onFocus).toHaveBeenCalled(); }); @@ -77,9 +77,9 @@ it('should call onFocus when the input is focused', async () => { it('should call onBlur when input loses focus', async () => { const onBlur = jest.fn(); const { getByLabelText } = renderDateField({ onBlur }); - await act(async () => getByLabelText('DateField').focus()); + fireEvent.asyncFocus(getByLabelText('DateField')); expect(getByLabelText('DateField')).toHaveFocus(); - await act(async () => getByLabelText('DateField').blur()); + fireEvent.asyncBlur(getByLabelText('DateField')); expect(getByLabelText('DateField')).not.toHaveFocus(); expect(onBlur).toHaveBeenCalled(); }); diff --git a/packages/components/fields/date-range-field/src/date-range-field.spec.js b/packages/components/fields/date-range-field/src/date-range-field.spec.js index e94a15bd67..61e24a9d8b 100644 --- a/packages/components/fields/date-range-field/src/date-range-field.spec.js +++ b/packages/components/fields/date-range-field/src/date-range-field.spec.js @@ -1,4 +1,4 @@ -import { Component, act } from 'react'; +import { Component } from 'react'; import PropTypes from 'prop-types'; import { render, fireEvent } from '../../../../../test/test-utils'; import DateRangeField from './date-range-field'; @@ -69,7 +69,7 @@ it('should have an HTML name', () => { it('should call onFocus when the input is focused', async () => { const onFocus = jest.fn(); const { getByLabelText } = renderDateRangeField({ onFocus }); - await act(async () => getByLabelText('DateRangeField').focus()); + fireEvent.asyncFocus(getByLabelText('DateRangeField')); expect(getByLabelText('DateRangeField')).toHaveFocus(); expect(onFocus).toHaveBeenCalled(); }); @@ -77,9 +77,9 @@ it('should call onFocus when the input is focused', async () => { it('should call onBlur when input loses focus', async () => { const onBlur = jest.fn(); const { getByLabelText } = renderDateRangeField({ onBlur }); - await act(async () => getByLabelText('DateRangeField').focus()); + fireEvent.asyncFocus(getByLabelText('DateRangeField')); expect(getByLabelText('DateRangeField')).toHaveFocus(); - await act(async () => getByLabelText('DateRangeField').blur()); + fireEvent.asyncBlur(getByLabelText('DateRangeField')); expect(getByLabelText('DateRangeField')).not.toHaveFocus(); expect(onBlur).toHaveBeenCalled(); }); diff --git a/packages/components/fields/date-time-field/src/date-time-field.spec.js b/packages/components/fields/date-time-field/src/date-time-field.spec.js index 797c354861..4efccea4a6 100644 --- a/packages/components/fields/date-time-field/src/date-time-field.spec.js +++ b/packages/components/fields/date-time-field/src/date-time-field.spec.js @@ -1,4 +1,4 @@ -import { Component, act } from 'react'; +import { Component } from 'react'; import PropTypes from 'prop-types'; import { render, fireEvent } from '../../../../../test/test-utils'; import DateTimeField from './date-time-field'; @@ -70,7 +70,7 @@ it('should have an HTML name', () => { it('should call onFocus when the input is focused', async () => { const onFocus = jest.fn(); const { getByLabelText } = renderDateTimeField({ onFocus }); - await act(async () => getByLabelText('DateTimeField').focus()); + fireEvent.asyncFocus(getByLabelText('DateTimeField')); expect(getByLabelText('DateTimeField')).toHaveFocus(); expect(onFocus).toHaveBeenCalled(); }); @@ -78,9 +78,9 @@ it('should call onFocus when the input is focused', async () => { it('should call onBlur when input loses focus', async () => { const onBlur = jest.fn(); const { getByLabelText } = renderDateTimeField({ onBlur }); - await act(async () => getByLabelText('DateTimeField').focus()); + fireEvent.asyncFocus(getByLabelText('DateTimeField')); expect(getByLabelText('DateTimeField')).toHaveFocus(); - await act(async () => getByLabelText('DateTimeField').blur()); + fireEvent.asyncBlur(getByLabelText('DateTimeField')); expect(getByLabelText('DateTimeField')).not.toHaveFocus(); expect(onBlur).toHaveBeenCalled(); }); diff --git a/packages/components/fields/localized-multiline-text-field/src/localized-multiline-text-field.spec.js b/packages/components/fields/localized-multiline-text-field/src/localized-multiline-text-field.spec.js index 4443b66bcd..be2c211c02 100644 --- a/packages/components/fields/localized-multiline-text-field/src/localized-multiline-text-field.spec.js +++ b/packages/components/fields/localized-multiline-text-field/src/localized-multiline-text-field.spec.js @@ -1,4 +1,4 @@ -import { Component, act } from 'react'; +import { Component } from 'react'; import PropTypes from 'prop-types'; import { render, fireEvent } from '../../../../../test/test-utils'; import LocalizedMultilineTextField from './localized-multiline-text-field'; @@ -99,7 +99,7 @@ it('should have an HTML name for every input when all inputs are visible', () => it('should call onFocus when the input is focused', async () => { const onFocus = jest.fn(); const { getByLabelText } = renderLocalizedMultilineTextField({ onFocus }); - await act(async () => getByLabelText('EN').focus()); + fireEvent.asyncFocus(getByLabelText('EN')); expect(getByLabelText('EN')).toHaveFocus(); expect(onFocus).toHaveBeenCalled(); }); @@ -107,9 +107,9 @@ it('should call onFocus when the input is focused', async () => { it('should call onBlur when input loses focus', async () => { const onBlur = jest.fn(); const { getByLabelText } = renderLocalizedMultilineTextField({ onBlur }); - await act(async () => getByLabelText('EN').focus()); + fireEvent.asyncFocus(getByLabelText('EN')); expect(getByLabelText('EN')).toHaveFocus(); - await act(async () => getByLabelText('EN').blur()); + fireEvent.asyncBlur(getByLabelText('EN')); expect(getByLabelText('EN')).not.toHaveFocus(); expect(onBlur).toHaveBeenCalled(); }); diff --git a/packages/components/fields/money-field/src/money-field.spec.js b/packages/components/fields/money-field/src/money-field.spec.js index a3ed2f319e..b5d5752f15 100644 --- a/packages/components/fields/money-field/src/money-field.spec.js +++ b/packages/components/fields/money-field/src/money-field.spec.js @@ -1,4 +1,4 @@ -import { Component, act } from 'react'; +import { Component } from 'react'; import PropTypes from 'prop-types'; import { render, fireEvent } from '../../../../../test/test-utils'; import MoneyField from './money-field'; @@ -91,7 +91,7 @@ it('should pass autocomplete', () => { it('should call onFocus when amount input is focused', async () => { const onFocus = jest.fn(); const { getByLabelText } = renderMoneyField({ onFocus }); - await act(async () => getByLabelText('Amount').focus()); + fireEvent.asyncFocus(getByLabelText('Amount')); expect(getByLabelText('Amount')).toHaveFocus(); expect(onFocus).toHaveBeenCalled(); }); @@ -99,7 +99,7 @@ it('should call onFocus when amount input is focused', async () => { it('should call onFocus when currency select is focused', async () => { const onFocus = jest.fn(); const { getByLabelText } = renderMoneyField({ onFocus }); - await act(async () => getByLabelText('EUR').focus()); + fireEvent.asyncFocus(getByLabelText('EUR')); expect(getByLabelText('EUR')).toHaveFocus(); expect(onFocus).toHaveBeenCalled(); }); @@ -107,9 +107,9 @@ it('should call onFocus when currency select is focused', async () => { it('should call onBlur when amount input loses focus', async () => { const onBlur = jest.fn(); const { getByLabelText } = renderMoneyField({ onBlur }); - await act(async () => getByLabelText('Amount').focus()); + fireEvent.asyncFocus(getByLabelText('Amount')); expect(getByLabelText('Amount')).toHaveFocus(); - await act(async () => getByLabelText('Amount').blur()); + fireEvent.asyncBlur(getByLabelText('Amount')); expect(getByLabelText('Amount')).not.toHaveFocus(); expect(onBlur).toHaveBeenCalled(); }); @@ -117,9 +117,9 @@ it('should call onBlur when amount input loses focus', async () => { it('should call onBlur when currency select loses focus', async () => { const onBlur = jest.fn(); const { getByLabelText } = renderMoneyField({ onBlur }); - await act(async () => getByLabelText('EUR').focus()); + fireEvent.asyncFocus(getByLabelText('EUR')); expect(getByLabelText('EUR')).toHaveFocus(); - await act(async () => getByLabelText('EUR').blur()); + fireEvent.asyncBlur(getByLabelText('EUR')); expect(getByLabelText('EUR')).not.toHaveFocus(); expect(onBlur).toHaveBeenCalled(); }); diff --git a/packages/components/fields/multiline-text-field/src/multiline-text-field.spec.js b/packages/components/fields/multiline-text-field/src/multiline-text-field.spec.js index 1fc0bd6089..d2646d20d1 100644 --- a/packages/components/fields/multiline-text-field/src/multiline-text-field.spec.js +++ b/packages/components/fields/multiline-text-field/src/multiline-text-field.spec.js @@ -1,4 +1,4 @@ -import { Component, act } from 'react'; +import { Component } from 'react'; import PropTypes from 'prop-types'; import { render, fireEvent } from '../../../../../test/test-utils'; import MultilineTextField from './multiline-text-field'; @@ -68,7 +68,7 @@ it('should have an HTML name', () => { it('should call onFocus when the input is focused', async () => { const onFocus = jest.fn(); const { getByLabelText } = renderMultilineTextField({ onFocus }); - await act(async () => getByLabelText('MultilineTextField').focus()); + fireEvent.asyncFocus(getByLabelText('MultilineTextField')); expect(getByLabelText('MultilineTextField')).toHaveFocus(); expect(onFocus).toHaveBeenCalled(); }); @@ -76,9 +76,9 @@ it('should call onFocus when the input is focused', async () => { it('should call onBlur when input loses focus', async () => { const onBlur = jest.fn(); const { getByLabelText } = renderMultilineTextField({ onBlur }); - await act(async () => getByLabelText('MultilineTextField').focus()); + fireEvent.asyncFocus(getByLabelText('MultilineTextField')); expect(getByLabelText('MultilineTextField')).toHaveFocus(); - await act(async () => getByLabelText('MultilineTextField').blur()); + fireEvent.asyncBlur(getByLabelText('MultilineTextField')); expect(getByLabelText('MultilineTextField')).not.toHaveFocus(); expect(onBlur).toHaveBeenCalled(); }); diff --git a/packages/components/fields/search-select-field/src/search-select-field.spec.js b/packages/components/fields/search-select-field/src/search-select-field.spec.js index ab59c149a6..3d059c3165 100644 --- a/packages/components/fields/search-select-field/src/search-select-field.spec.js +++ b/packages/components/fields/search-select-field/src/search-select-field.spec.js @@ -1,4 +1,4 @@ -import { Component, act } from 'react'; +import { Component } from 'react'; import PropTypes from 'prop-types'; import { render, @@ -84,7 +84,7 @@ it('should have an HTML name', () => { it('should call onFocus when the input is focused', async () => { const onFocus = jest.fn(); renderSearchSelectField({ onFocus }); - await act(async () => screen.getByLabelText('SearchSelectField').focus()); + fireEvent.asyncFocus(screen.getByLabelText('SearchSelectField')); expect(screen.getByLabelText('SearchSelectField')).toHaveFocus(); expect(onFocus).toHaveBeenCalled(); }); @@ -92,9 +92,9 @@ it('should call onFocus when the input is focused', async () => { it('should call onBlur when input loses focus', async () => { const onBlur = jest.fn(); renderSearchSelectField({ onBlur }); - await act(async () => screen.getByLabelText('SearchSelectField').focus()); + fireEvent.asyncFocus(screen.getByLabelText('SearchSelectField')); expect(screen.getByLabelText('SearchSelectField')).toHaveFocus(); - await act(async () => screen.getByLabelText('SearchSelectField').blur()); + fireEvent.asyncBlur(screen.getByLabelText('SearchSelectField')); expect(screen.getByLabelText('SearchSelectField')).not.toHaveFocus(); expect(onBlur).toHaveBeenCalled(); }); diff --git a/packages/components/fields/select-field/src/select-field.spec.js b/packages/components/fields/select-field/src/select-field.spec.js index 647cc19925..edccaf1de0 100644 --- a/packages/components/fields/select-field/src/select-field.spec.js +++ b/packages/components/fields/select-field/src/select-field.spec.js @@ -1,4 +1,4 @@ -import { Component, act } from 'react'; +import { Component } from 'react'; import PropTypes from 'prop-types'; import { render, fireEvent } from '../../../../../test/test-utils'; import SelectField from './select-field'; @@ -79,7 +79,7 @@ it('should have an HTML name', () => { it('should call onFocus when the input is focused', async () => { const onFocus = jest.fn(); const { getByLabelText } = renderSelectField({ onFocus }); - await act(async () => getByLabelText('SelectField').focus()); + fireEvent.asyncFocus(getByLabelText('SelectField')); expect(getByLabelText('SelectField')).toHaveFocus(); expect(onFocus).toHaveBeenCalled(); }); @@ -87,9 +87,9 @@ it('should call onFocus when the input is focused', async () => { it('should call onBlur when input loses focus', async () => { const onBlur = jest.fn(); const { getByLabelText } = renderSelectField({ onBlur }); - await act(async () => getByLabelText('SelectField').focus()); + fireEvent.asyncFocus(getByLabelText('SelectField')); expect(getByLabelText('SelectField')).toHaveFocus(); - await act(async () => getByLabelText('SelectField').blur()); + fireEvent.asyncBlur(getByLabelText('SelectField')); expect(getByLabelText('SelectField')).not.toHaveFocus(); expect(onBlur).toHaveBeenCalled(); }); diff --git a/packages/components/inputs/async-creatable-select-input/src/async-creatable-select-input.spec.js b/packages/components/inputs/async-creatable-select-input/src/async-creatable-select-input.spec.js index ba7b7d469f..253b30c98c 100644 --- a/packages/components/inputs/async-creatable-select-input/src/async-creatable-select-input.spec.js +++ b/packages/components/inputs/async-creatable-select-input/src/async-creatable-select-input.spec.js @@ -1,4 +1,4 @@ -import { Component, act } from 'react'; +import { Component } from 'react'; import PropTypes from 'prop-types'; import { render, fireEvent, waitFor } from '../../../../../test/test-utils'; import AsyncCreatableSelectInput from './async-creatable-select-input'; @@ -91,7 +91,7 @@ it('should call onFocus when the input is focused', async () => { const onFocus = jest.fn(); const { findByLabelText } = renderInput({ onFocus }); const input = await findByLabelText('Fruit'); - await act(async () => input.focus()); + fireEvent.asyncFocus(input); expect(input).toHaveFocus(); expect(onFocus).toHaveBeenCalled(); }); @@ -100,9 +100,9 @@ it('should call onBlur when input loses focus', async () => { const onBlur = jest.fn(); const { findByLabelText } = renderInput({ onBlur }); const input = await findByLabelText('Fruit'); - await act(async () => input.focus()); + fireEvent.asyncFocus(input); expect(input).toHaveFocus(); - await act(async () => input.blur()); + fireEvent.asyncBlur(input); expect(input).not.toHaveFocus(); expect(onBlur).toHaveBeenCalled(); }); diff --git a/packages/components/inputs/async-select-input/src/async-select-input.spec.js b/packages/components/inputs/async-select-input/src/async-select-input.spec.js index 090e9e1b6b..cc4e0f25f5 100644 --- a/packages/components/inputs/async-select-input/src/async-select-input.spec.js +++ b/packages/components/inputs/async-select-input/src/async-select-input.spec.js @@ -1,4 +1,4 @@ -import { Component, act } from 'react'; +import { Component } from 'react'; import PropTypes from 'prop-types'; import { render, @@ -108,7 +108,7 @@ it('should call onFocus when the input is focused', async () => { const onFocus = jest.fn(); const { findByLabelText } = renderInput({ onFocus }); const input = await findByLabelText('Fruit'); - await act(async () => input.focus()); + fireEvent.asyncFocus(input); expect(input).toHaveFocus(); expect(onFocus).toHaveBeenCalled(); }); @@ -117,9 +117,9 @@ it('should call onBlur when input loses focus', async () => { const onBlur = jest.fn(); const { findByLabelText } = renderInput({ onBlur }); const input = await findByLabelText('Fruit'); - await act(async () => input.focus()); + fireEvent.asyncFocus(input); expect(input).toHaveFocus(); - await act(async () => input.blur()); + fireEvent.asyncBlur(input); expect(input).not.toHaveFocus(); expect(onBlur).toHaveBeenCalled(); }); diff --git a/packages/components/inputs/creatable-select-input/src/creatable-select-input.spec.js b/packages/components/inputs/creatable-select-input/src/creatable-select-input.spec.js index 5d6d5a5a18..cecbdf3224 100644 --- a/packages/components/inputs/creatable-select-input/src/creatable-select-input.spec.js +++ b/packages/components/inputs/creatable-select-input/src/creatable-select-input.spec.js @@ -1,4 +1,4 @@ -import { Component, act } from 'react'; +import { Component } from 'react'; import PropTypes from 'prop-types'; import { render, fireEvent } from '../../../../../test/test-utils'; import CreatableSelectInput from './creatable-select-input'; @@ -86,7 +86,7 @@ it('should call onFocus when the input is focused', async () => { const onFocus = jest.fn(); const { findByLabelText } = renderInput({ onFocus }); const input = await findByLabelText('Fruit'); - await act(async () => input.focus()); + fireEvent.asyncFocus(input); expect(input).toHaveFocus(); expect(onFocus).toHaveBeenCalled(); }); @@ -95,9 +95,9 @@ it('should call onBlur when input loses focus', async () => { const onBlur = jest.fn(); const { findByLabelText } = renderInput({ onBlur }); const input = await findByLabelText('Fruit'); - await act(async () => input.focus()); + fireEvent.asyncFocus(input); expect(input).toHaveFocus(); - await act(async () => input.blur()); + fireEvent.asyncBlur(input); expect(input).not.toHaveFocus(); expect(onBlur).toHaveBeenCalled(); }); diff --git a/packages/components/inputs/date-input/src/date-input.spec.js b/packages/components/inputs/date-input/src/date-input.spec.js index bb963c4004..e17b993907 100644 --- a/packages/components/inputs/date-input/src/date-input.spec.js +++ b/packages/components/inputs/date-input/src/date-input.spec.js @@ -1,4 +1,4 @@ -import { Component, act } from 'react'; +import { Component } from 'react'; import PropTypes from 'prop-types'; import { screen, @@ -67,7 +67,7 @@ it('should have an HTML name', () => { it('should call onFocus when the input is focused', async () => { const onFocus = jest.fn(); const { container } = renderDateInput({ onFocus }); - await act(async () => container.querySelector('input').focus()); + fireEvent.asyncFocus(container.querySelector('input')); expect(container.querySelector('input')).toHaveFocus(); expect(onFocus).toHaveBeenCalled(); }); @@ -75,9 +75,9 @@ it('should call onFocus when the input is focused', async () => { it('should call onBlur when input loses focus', async () => { const onBlur = jest.fn(); const { container } = renderDateInput({ onBlur }); - await act(async () => container.querySelector('input').focus()); + fireEvent.asyncFocus(container.querySelector('input')); expect(container.querySelector('input')).toHaveFocus(); - await act(async () => container.querySelector('input').blur()); + fireEvent.asyncBlur(container.querySelector('input')); expect(container.querySelector('input')).not.toHaveFocus(); expect(onBlur).toHaveBeenCalled(); }); diff --git a/packages/components/inputs/date-range-input/src/date-range-input.spec.js b/packages/components/inputs/date-range-input/src/date-range-input.spec.js index 06197bb942..58d48fbff5 100644 --- a/packages/components/inputs/date-range-input/src/date-range-input.spec.js +++ b/packages/components/inputs/date-range-input/src/date-range-input.spec.js @@ -1,4 +1,4 @@ -import { Component, act } from 'react'; +import { Component } from 'react'; import PropTypes from 'prop-types'; import { screen, render, fireEvent } from '../../../../../test/test-utils'; import DateRangeInput from './date-range-input'; @@ -72,7 +72,7 @@ it('should have an HTML name', async () => { it('should call onFocus when the input is focused', async () => { const onFocus = jest.fn(); const { container } = renderDateRangeInput({ onFocus }); - await act(async () => container.querySelector('input').focus()); + fireEvent.asyncFocus(container.querySelector('input')); expect(container.querySelector('input')).toHaveFocus(); expect(onFocus).toHaveBeenCalled(); }); @@ -80,9 +80,9 @@ it('should call onFocus when the input is focused', async () => { it('should call onBlur when input loses focus', async () => { const onBlur = jest.fn(); const { container } = renderDateRangeInput({ onBlur }); - await act(async () => container.querySelector('input').focus()); + fireEvent.asyncFocus(container.querySelector('input')); expect(container.querySelector('input')).toHaveFocus(); - await act(async () => container.querySelector('input').blur()); + fireEvent.asyncBlur(container.querySelector('input')); expect(container.querySelector('input')).not.toHaveFocus(); expect(onBlur).toHaveBeenCalled(); }); diff --git a/packages/components/inputs/date-time-input/src/date-time-input.spec.js b/packages/components/inputs/date-time-input/src/date-time-input.spec.js index e79d5a18e6..157063fa27 100644 --- a/packages/components/inputs/date-time-input/src/date-time-input.spec.js +++ b/packages/components/inputs/date-time-input/src/date-time-input.spec.js @@ -1,4 +1,4 @@ -import { Component, act } from 'react'; +import { Component } from 'react'; import PropTypes from 'prop-types'; import { screen, @@ -68,7 +68,7 @@ it('should have an HTML name', () => { it('should call onFocus when the input is focused', async () => { const onFocus = jest.fn(); const { container } = renderDateTimeInput({ onFocus }); - await act(async () => container.querySelector('input').focus()); + fireEvent.asyncFocus(container.querySelector('input')); expect(container.querySelector('input')).toHaveFocus(); expect(onFocus).toHaveBeenCalled(); }); @@ -76,9 +76,9 @@ it('should call onFocus when the input is focused', async () => { it('should call onBlur when input loses focus', async () => { const onBlur = jest.fn(); const { container } = renderDateTimeInput({ onBlur }); - await act(async () => container.querySelector('input').focus()); + fireEvent.asyncFocus(container.querySelector('input')); expect(container.querySelector('input')).toHaveFocus(); - await act(async () => container.querySelector('input').blur()); + fireEvent.asyncBlur(container.querySelector('input')); expect(container.querySelector('input')).not.toHaveFocus(); expect(onBlur).toHaveBeenCalled(); }); @@ -176,7 +176,7 @@ describe('date picker keyboard navigation', () => { expect(screen.getByText('September')).toBeInTheDocument(); - await act(async () => dateInput.focus()); + fireEvent.asyncFocus(dateInput); // ArrowUp fireEvent.keyDown(dateInput, { keyCode: 38 }); diff --git a/packages/components/inputs/localized-money-input/src/localized-money-input.spec.js b/packages/components/inputs/localized-money-input/src/localized-money-input.spec.js index 7715944fa0..3bd7237f84 100644 --- a/packages/components/inputs/localized-money-input/src/localized-money-input.spec.js +++ b/packages/components/inputs/localized-money-input/src/localized-money-input.spec.js @@ -1,4 +1,4 @@ -import { Component, act } from 'react'; +import { Component } from 'react'; import PropTypes from 'prop-types'; import { render, fireEvent } from '../../../../../test/test-utils'; import LocalizedMoneyInput from './localized-money-input'; @@ -102,9 +102,9 @@ it('should call onBlur when input loses focus', async () => { onBlur, }); const input = getByLabelText('CAD'); - await act(async () => input.focus()); + fireEvent.asyncFocus(input); expect(input).toHaveFocus(); - await act(async () => input.blur()); + fireEvent.asyncBlur(input); expect(input).not.toHaveFocus(); }); diff --git a/packages/components/inputs/localized-multiline-text-input/src/localized-multiline-text-input.spec.js b/packages/components/inputs/localized-multiline-text-input/src/localized-multiline-text-input.spec.js index 0771b55000..c741f29115 100644 --- a/packages/components/inputs/localized-multiline-text-input/src/localized-multiline-text-input.spec.js +++ b/packages/components/inputs/localized-multiline-text-input/src/localized-multiline-text-input.spec.js @@ -1,4 +1,4 @@ -import { Component, act } from 'react'; +import { Component } from 'react'; import PropTypes from 'prop-types'; import { render, fireEvent } from '../../../../../test/test-utils'; import LocalizedMultilineTextInput from './localized-multiline-text-input'; @@ -93,7 +93,7 @@ it('should call onFocus when the input is focused', async () => { const onFocus = jest.fn(); const { getByLabelText } = renderLocalizedMultilineTextInput({ onFocus }); const input = getByLabelText('EN'); - await act(async () => input.focus()); + fireEvent.asyncFocus(input); expect(input).toHaveFocus(); expect(onFocus).toHaveBeenCalled(); }); @@ -102,9 +102,9 @@ it('should call onBlur when input loses focus', async () => { const onBlur = jest.fn(); const { getByLabelText } = renderLocalizedMultilineTextInput({ onBlur }); const input = getByLabelText('EN'); - await act(async () => input.focus()); + fireEvent.asyncFocus(input); expect(input).toHaveFocus(); - await act(async () => input.blur()); + fireEvent.asyncBlur(input); expect(input).not.toHaveFocus(); expect(onBlur).toHaveBeenCalled(); }); diff --git a/packages/components/inputs/localized-text-input/src/localized-text-input.spec.js b/packages/components/inputs/localized-text-input/src/localized-text-input.spec.js index 9268159052..ff904da699 100644 --- a/packages/components/inputs/localized-text-input/src/localized-text-input.spec.js +++ b/packages/components/inputs/localized-text-input/src/localized-text-input.spec.js @@ -1,4 +1,4 @@ -import { Component, act } from 'react'; +import { Component } from 'react'; import PropTypes from 'prop-types'; import { render, fireEvent } from '../../../../../test/test-utils'; import LocalizedTextInput from './localized-text-input'; @@ -86,7 +86,7 @@ it('should call onFocus when the input is focused', async () => { const onFocus = jest.fn(); const { getByLabelText } = renderLocalizedTextInput({ onFocus }); const input = getByLabelText('EN'); - await act(async () => input.focus()); + fireEvent.asyncFocus(input); expect(input).toHaveFocus(); expect(onFocus).toHaveBeenCalled(); }); @@ -95,9 +95,9 @@ it('should call onBlur when input loses focus', async () => { const onBlur = jest.fn(); const { getByLabelText } = renderLocalizedTextInput({ onBlur }); const input = getByLabelText('EN'); - await act(async () => input.focus()); + fireEvent.asyncFocus(input); expect(input).toHaveFocus(); - await act(async () => input.blur()); + fireEvent.asyncBlur(input); expect(input).not.toHaveFocus(); expect(onBlur).toHaveBeenCalled(); }); diff --git a/packages/components/inputs/multiline-text-input/src/multiline-text-input.spec.js b/packages/components/inputs/multiline-text-input/src/multiline-text-input.spec.js index 0e70463036..1f36e07e34 100644 --- a/packages/components/inputs/multiline-text-input/src/multiline-text-input.spec.js +++ b/packages/components/inputs/multiline-text-input/src/multiline-text-input.spec.js @@ -1,4 +1,4 @@ -import { Component, act } from 'react'; +import { Component } from 'react'; import PropTypes from 'prop-types'; import { screen, render, fireEvent } from '../../../../../test/test-utils'; import MultilineTextInput from './multiline-text-input'; @@ -143,7 +143,7 @@ describe('MultilineTextInput', () => { const onFocus = jest.fn(); render(); const textArea = screen.getByLabelText('Description'); - await act(async () => textArea.focus()); + fireEvent.asyncFocus(textArea); expect(textArea).toHaveFocus(); expect(onFocus).toHaveBeenCalled(); }); @@ -152,9 +152,9 @@ describe('MultilineTextInput', () => { const onBlur = jest.fn(); render(); const textArea = screen.getByLabelText('Description'); - await act(async () => textArea.focus()); + fireEvent.asyncFocus(textArea); expect(textArea).toHaveFocus(); - await act(async () => textArea.blur()); + fireEvent.asyncBlur(textArea); expect(onBlur).toHaveBeenCalled(); }); diff --git a/packages/components/inputs/search-select-input/src/search-select-input.spec.js b/packages/components/inputs/search-select-input/src/search-select-input.spec.js index be992ba92d..4e366b60cd 100644 --- a/packages/components/inputs/search-select-input/src/search-select-input.spec.js +++ b/packages/components/inputs/search-select-input/src/search-select-input.spec.js @@ -1,4 +1,4 @@ -import { Component, act } from 'react'; +import { Component } from 'react'; import PropTypes from 'prop-types'; import { render, fireEvent, screen } from '../../../../../test/test-utils'; import SearchSelectInput from './search-select-input'; @@ -82,7 +82,7 @@ it('should call onFocus when the input is focused', async () => { const onFocus = jest.fn(); renderInput({ onFocus }); const input = screen.getByLabelText('Fruit'); - await act(async () => input.focus()); + fireEvent.asyncFocus(input); expect(input).toHaveFocus(); expect(onFocus).toHaveBeenCalled(); }); @@ -91,9 +91,9 @@ it('should call onBlur when input loses focus', async () => { const onBlur = jest.fn(); renderInput({ onBlur }); const input = screen.getByLabelText('Fruit'); - await act(async () => input.focus()); + fireEvent.asyncFocus(input); expect(input).toHaveFocus(); - await act(async () => input.blur()); + fireEvent.asyncBlur(input); expect(input).not.toHaveFocus(); expect(onBlur).toHaveBeenCalled(); }); diff --git a/packages/components/inputs/select-input/src/select-input.spec.js b/packages/components/inputs/select-input/src/select-input.spec.js index 229a273652..8d3fa8b105 100644 --- a/packages/components/inputs/select-input/src/select-input.spec.js +++ b/packages/components/inputs/select-input/src/select-input.spec.js @@ -1,4 +1,4 @@ -import { Component, act } from 'react'; +import { Component } from 'react'; import PropTypes from 'prop-types'; import { render, fireEvent, within } from '../../../../../test/test-utils'; import SelectInput from './select-input'; @@ -98,7 +98,7 @@ it('should call onFocus when the input is focused', async () => { const onFocus = jest.fn(); const { findByLabelText } = renderInput({ onFocus }); const input = await findByLabelText('Fruit'); - await act(async () => input.focus()); + fireEvent.asyncFocus(input); expect(input).toHaveFocus(); expect(onFocus).toHaveBeenCalled(); }); @@ -107,9 +107,9 @@ it('should call onBlur when input loses focus', async () => { const onBlur = jest.fn(); const { findByLabelText } = renderInput({ onBlur }); const input = await findByLabelText('Fruit'); - await act(async () => input.focus()); + fireEvent.asyncFocus(input); expect(input).toHaveFocus(); - await act(async () => input.blur()); + fireEvent.asyncBlur(input); expect(input).not.toHaveFocus(); expect(onBlur).toHaveBeenCalled(); }); diff --git a/packages/components/inputs/selectable-search-input/src/selectable-search-input.spec.tsx b/packages/components/inputs/selectable-search-input/src/selectable-search-input.spec.tsx index a905d6712e..3bbbdb0bbd 100644 --- a/packages/components/inputs/selectable-search-input/src/selectable-search-input.spec.tsx +++ b/packages/components/inputs/selectable-search-input/src/selectable-search-input.spec.tsx @@ -1,4 +1,4 @@ -import { useState, act } from 'react'; +import { useState } from 'react'; import SelectableSearchInput, { type TSelectableSearchInputProps, type TCustomEvent, @@ -191,7 +191,7 @@ describe('SelectableSearchInput', () => { /> ); - await act(async () => screen.getByLabelText('Bar').focus()); + fireEvent.asyncFocus(screen.getByLabelText('Bar')); expect(onFocus).toHaveBeenCalledWith({ target: { id: 'test-id.dropdown', diff --git a/packages/components/pagination/src/pagination.spec.js b/packages/components/pagination/src/pagination.spec.js index 7bf9f5f38b..82532df349 100644 --- a/packages/components/pagination/src/pagination.spec.js +++ b/packages/components/pagination/src/pagination.spec.js @@ -1,4 +1,3 @@ -import { act } from 'react'; import { screen, render, fireEvent } from '../../../../test/test-utils'; import Pagination from './pagination'; @@ -121,7 +120,7 @@ describe('per page selector interaction', () => { const perPageSelector = await screen.findByLabelText(/Items per page/); - await act(async () => perPageSelector.focus()); + fireEvent.asyncFocus(perPageSelector); fireEvent.keyDown(perPageSelector, { key: 'ArrowDown' }); fireEvent.click(screen.getByText('50')); expect(onPerPageChange).toHaveBeenCalledWith(50);