chore(async fire event): use async fireEvent methods instead of act o…

…n blur and focus in all relevant files

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', () => {

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();
 });

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();
 });

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,17 +77,17 @@ 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();
 });
 
 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();
 });

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,17 +69,17 @@ 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();
 });
 
 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();
 });

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,17 +69,17 @@ 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();
 });
 
 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();
 });

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,17 +70,17 @@ 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();
 });
 
 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();
 });

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,17 +99,17 @@ 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();
 });
 
 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();
 });

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,35 +91,35 @@ 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();
 });
 
 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();
 });
 
 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();
 });
 
 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();
 });

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,17 +68,17 @@ 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();
 });
 
 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();
 });

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,17 +84,17 @@ 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();
 });
 
 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();
 });

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,17 +79,17 @@ 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();
 });
 
 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();
 });

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();
 });

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();
 });