From 6303fe61e3487ee25b6d26dee29013bb0b86c18c Mon Sep 17 00:00:00 2001
From: Eric Peterson <ericpeterson@spotify.com>
Date: Fri, 1 Apr 2022 16:39:13 +0200
Subject: [PATCH] Fix SearchBar fake timer tests for latest user-event.

Signed-off-by: Eric Peterson <ericpeterson@spotify.com>
Signed-off-by: Johan Haals <johan.haals@gmail.com>
---
 .../components/SearchBar/SearchBar.test.tsx   | 28 +++++++++++++------
 1 file changed, 19 insertions(+), 9 deletions(-)

diff --git a/plugins/search/src/components/SearchBar/SearchBar.test.tsx b/plugins/search/src/components/SearchBar/SearchBar.test.tsx
index 6530c523d2..030f9b1361 100644
--- a/plugins/search/src/components/SearchBar/SearchBar.test.tsx
+++ b/plugins/search/src/components/SearchBar/SearchBar.test.tsx
@@ -108,6 +108,7 @@ describe('SearchBar', () => {
   });
 
   it('Updates term state when text is entered', async () => {
+    const user = userEvent.setup({ delay: null });
     jest.useFakeTimers();
     const defaultDebounceTime = 200;
 
@@ -124,7 +125,7 @@ describe('SearchBar', () => {
 
     const value = 'value';
 
-    await userEvent.type(textbox, value);
+    await user.type(textbox, value);
 
     act(() => {
       jest.advanceTimersByTime(defaultDebounceTime);
@@ -137,6 +138,7 @@ describe('SearchBar', () => {
     expect(query).toHaveBeenLastCalledWith(
       expect.objectContaining({ term: value }),
     );
+    jest.useRealTimers();
   });
 
   it('Clear button clears term state', async () => {
@@ -172,12 +174,15 @@ describe('SearchBar', () => {
       </ApiProvider>,
     );
 
-    expect(
-      screen.queryByRole('button', { name: 'Clear' }),
-    ).not.toBeInTheDocument();
+    await waitFor(() => {
+      expect(
+        screen.queryByRole('button', { name: 'Clear' }),
+      ).not.toBeInTheDocument();
+    });
   });
 
   it('Adheres to provided debounceTime', async () => {
+    const user = userEvent.setup({ delay: null });
     jest.useFakeTimers();
 
     const debounceTime = 600;
@@ -199,7 +204,7 @@ describe('SearchBar', () => {
 
     const value = 'value';
 
-    await userEvent.type(textbox, value);
+    await user.type(textbox, value);
 
     expect(query).not.toHaveBeenLastCalledWith(
       expect.objectContaining({ term: value }),
@@ -216,9 +221,11 @@ describe('SearchBar', () => {
     expect(query).toHaveBeenLastCalledWith(
       expect.objectContaining({ term: value }),
     );
+    jest.useRealTimers();
   });
 
   it('does not capture analytics event if not enabled in app', async () => {
+    const user = userEvent.setup({ delay: null });
     jest.useFakeTimers();
 
     const debounceTime = 600;
@@ -240,7 +247,7 @@ describe('SearchBar', () => {
 
     const value = 'value';
 
-    await userEvent.type(textbox, value);
+    await user.type(textbox, value);
 
     act(() => {
       jest.advanceTimersByTime(debounceTime);
@@ -249,9 +256,11 @@ describe('SearchBar', () => {
     await waitFor(() => expect(textbox).toHaveValue(value));
 
     expect(analyticsApiSpy.getEvents()).toHaveLength(0);
+    jest.useRealTimers();
   });
 
   it('captures analytics events if enabled in app', async () => {
+    const user = userEvent.setup({ delay: null });
     jest.useFakeTimers();
 
     const debounceTime = 600;
@@ -296,7 +305,7 @@ describe('SearchBar', () => {
 
     const value = 'value';
 
-    await userEvent.type(textbox, value);
+    await user.type(textbox, value);
 
     expect(analyticsApiSpy.getEvents()).toHaveLength(0);
 
@@ -318,10 +327,10 @@ describe('SearchBar', () => {
       subject: 'value',
     });
 
-    userEvent.clear(textbox);
+    await user.clear(textbox);
 
     // make sure new term is captured
-    await userEvent.type(textbox, 'new value');
+    await user.type(textbox, 'new value');
 
     act(() => {
       jest.advanceTimersByTime(debounceTime);
@@ -340,5 +349,6 @@ describe('SearchBar', () => {
       },
       subject: 'new value',
     });
+    jest.useRealTimers();
   });
 });