From bb293ccf1175f823c4b9afe9a9593bca6e9d1fae Mon Sep 17 00:00:00 2001
From: Carlos Cortizas <carlos.martines@commercetools.com>
Date: Thu, 9 Jan 2025 13:37:53 +0100
Subject: [PATCH] refactor(money-input): custom aync events demo

---
 .../money-input/src/money-input.spec.js       | 25 +++++++++----------
 test/test-utils.js                            | 15 +++++++++--
 2 files changed, 25 insertions(+), 15 deletions(-)

diff --git a/packages/components/inputs/money-input/src/money-input.spec.js b/packages/components/inputs/money-input/src/money-input.spec.js
index f9d6feb7b6..2e22dab9ab 100644
--- a/packages/components/inputs/money-input/src/money-input.spec.js
+++ b/packages/components/inputs/money-input/src/money-input.spec.js
@@ -1,4 +1,4 @@
-import { Component, act } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import MoneyInput from './money-input';
 import { screen, render, fireEvent } from '../../../../../test/test-utils';
@@ -482,7 +482,7 @@ describe('MoneyInput', () => {
         onFocus={onFocus}
       />
     );
-    await act(async () => screen.getByLabelText('EUR').focus());
+    await fireEvent.asyncFocus(screen.getByLabelText('EUR'));
     expect(screen.getByLabelText('EUR')).toHaveFocus();
     expect(onFocus).toHaveBeenCalledWith({
       target: { id: 'some-id.currencyCode', name: 'some-name.currencyCode' },
@@ -497,9 +497,9 @@ describe('MoneyInput', () => {
         onBlur={onBlur}
       />
     );
-    await act(async () => screen.getByLabelText('Amount').focus());
+    await fireEvent.asyncFocus(screen.getByLabelText('Amount'));
     expect(screen.getByLabelText('Amount')).toHaveFocus();
-    await act(async () => screen.getByLabelText('Amount').blur());
+    await fireEvent.asyncBlur(screen.getByLabelText('Amount'));
     expect(screen.getByLabelText('Amount')).not.toHaveFocus();
 
     // onBlur should be called twice as we want to mark both,
@@ -521,9 +521,9 @@ describe('MoneyInput', () => {
         onBlur={onBlur}
       />
     );
-    await act(async () => screen.getByLabelText('EUR').focus());
+    await fireEvent.asyncFocus(screen.getByLabelText('EUR'));
     expect(screen.getByLabelText('EUR')).toHaveFocus();
-    await act(async () => screen.getByLabelText('EUR').blur());
+    await fireEvent.asyncBlur(screen.getByLabelText('EUR'));
     expect(screen.getByLabelText('EUR')).not.toHaveFocus();
 
     // onBlur should be called twice as we want to mark both,
@@ -545,10 +545,10 @@ describe('MoneyInput', () => {
         onBlur={onBlur}
       />
     );
-    await act(async () => screen.getByLabelText('EUR').focus());
+    await fireEvent.asyncFocus(screen.getByLabelText('EUR'));
     expect(screen.getByLabelText('EUR')).toHaveFocus();
 
-    await act(async () => screen.getByLabelText('Amount').focus());
+    await fireEvent.asyncFocus(screen.getByLabelText('Amount'));
     expect(screen.getByLabelText('EUR')).not.toHaveFocus();
     expect(screen.getByLabelText('Amount')).toHaveFocus();
 
@@ -564,10 +564,10 @@ describe('MoneyInput', () => {
       />
     );
 
-    await act(async () => screen.getByLabelText('Amount').focus());
+    await fireEvent.asyncFocus(screen.getByLabelText('Amount'));
     expect(screen.getByLabelText('Amount')).toHaveFocus();
 
-    await act(async () => screen.getByLabelText('EUR').focus());
+    await fireEvent.asyncFocus(screen.getByLabelText('EUR'));
     expect(screen.getByLabelText('EUR')).toHaveFocus();
     expect(screen.getByLabelText('Amount')).not.toHaveFocus();
 
@@ -706,8 +706,7 @@ describe('MoneyInput', () => {
         { locale: 'en' }
       );
 
-      //
-      await act(async () => screen.getByLabelText('Amount').focus());
+      await fireEvent.asyncFocus(screen.getByLabelText('Amount'));
       fireEvent.blur(screen.getByLabelText('Amount'));
 
       // We can't use .toHaveAttribute() as the attribute
@@ -742,7 +741,7 @@ describe('MoneyInput', () => {
         />
       );
       const input = screen.getByLabelText('EUR');
-      await act(async () => input.focus());
+      await fireEvent.asyncFocus(input);
       expect(input).toHaveFocus();
       expect(onFocus).toHaveBeenCalledWith({
         target: { id: 'some-id.amount', name: 'some-name.amount' },
diff --git a/test/test-utils.js b/test/test-utils.js
index 1d14302dca..f95543b627 100644
--- a/test/test-utils.js
+++ b/test/test-utils.js
@@ -1,6 +1,7 @@
 /* eslint-disable global-require */
 
-import { render } from '@testing-library/react';
+import { act } from 'react';
+import { fireEvent as originalFireEvent, render } from '@testing-library/react';
 import { IntlProvider } from 'react-intl';
 import { Router } from 'react-router-dom';
 import { createMemoryHistory } from 'history';
@@ -44,7 +45,7 @@ const customRender = (
 // re-export everything
 export {
   act,
-  fireEvent,
+  // fireEvent,
   screen,
   waitFor,
   waitForElementToBeRemoved,
@@ -53,3 +54,13 @@ export {
 
 // override render method
 export { customRender as render };
+
+// Custom events for async focus and blur.
+// This helps abstractinv the act() call from the tests.
+originalFireEvent.asyncFocus = (element) => {
+  return act(async () => element.focus());
+};
+originalFireEvent.asyncBlur = (element) => {
+  return act(async () => element.blur());
+};
+export { originalFireEvent as fireEvent };