From 7eb5933003cd8d04c7569fbf71b308c1ebf450d8 Mon Sep 17 00:00:00 2001
From: Kyle Shike <kyle.s@userinterviews.com>
Date: Fri, 5 Apr 2024 09:15:58 -0400
Subject: [PATCH] waits for specific test assertions

---
 src/Drawer/Drawer.test.jsx       | 23 +++++++++++++----------
 src/Drawer/DrawerFooter.test.jsx |  8 +++++---
 src/Tabs/Tabs.test.tsx           | 16 +++++++++-------
 3 files changed, 27 insertions(+), 20 deletions(-)

diff --git a/src/Drawer/Drawer.test.jsx b/src/Drawer/Drawer.test.jsx
index 3eac6f99..9f4a848a 100644
--- a/src/Drawer/Drawer.test.jsx
+++ b/src/Drawer/Drawer.test.jsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import propTypes from 'prop-types';
 
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import Drawer from './Drawer';
@@ -188,14 +188,15 @@ describe('Drawer', () => {
         expect(elements.drawerOverlay.get().classList).toContain('DrawerBackgroundOverlay--active');
       });
 
-      it('calls onRequestClose when pressing ESC key', () => {
+      it('calls onRequestClose when pressing ESC key', async () => {
         const onRequestClose = jest.fn();
 
         render(<SetupDrawerWithChildren visible onRequestClose={onRequestClose} />);
 
         userEvent.keyboard('{Escape}');
-
-        expect(onRequestClose).toHaveBeenCalled();
+        await waitFor(() => {
+          expect(onRequestClose).toHaveBeenCalled();
+        });
       });
 
       it('body tag has Drawer--open', () => {
@@ -233,15 +234,16 @@ describe('Drawer', () => {
       });
 
       describe('when user clicks on drawerOne toggle visibility button', () => {
-        it('body tag does not have Drawer--open after click', () => {
+        it('body tag does not have Drawer--open after click', async () => {
           const { container } = render(<SetupMultipleDrawers drawerOneVisibleDefault />);
           const body = container.closest('body');
 
           expect(body.classList).toContain('Drawer--open');
 
           userEvent.click(elements.drawerOneToggleVisibilityButton.get());
-
-          expect(body.classList).not.toContain('Drawer--open');
+          await waitFor(() => {
+            expect(body.classList).not.toContain('Drawer--open');
+          });
         });
       });
     });
@@ -255,15 +257,16 @@ describe('Drawer', () => {
       });
 
       describe('when user clicks on drawerOne toggle visibility button', () => {
-        it('body tag has Drawer--open after click', () => {
+        it('body tag has Drawer--open after click', async () => {
           const { container } = render(<SetupMultipleDrawers />);
           const body = container.closest('body');
 
           expect(body.classList).not.toContain('Drawer--open');
 
           userEvent.click(elements.drawerOneToggleVisibilityButton.get());
-
-          expect(body.classList).toContain('Drawer--open');
+          await waitFor(() => {
+            expect(body.classList).toContain('Drawer--open');
+          });
         });
       });
     });
diff --git a/src/Drawer/DrawerFooter.test.jsx b/src/Drawer/DrawerFooter.test.jsx
index 74d268ec..ae292408 100644
--- a/src/Drawer/DrawerFooter.test.jsx
+++ b/src/Drawer/DrawerFooter.test.jsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import React from 'react';
 import userEvent from '@testing-library/user-event';
 import { DrawerFooter } from './index';
@@ -9,7 +9,7 @@ describe('DrawerFooter', () => {
   );
 
   describe('primary action button', () => {
-    it('calls the onPrimaryAction callback when clicked', () => {
+    it('calls the onPrimaryAction callback when clicked', async () => {
       const onPrimaryActionMock = jest.fn();
 
       renderDrawerFooter({
@@ -19,7 +19,9 @@ describe('DrawerFooter', () => {
 
       userEvent.click(screen.getByRole('button', { name: 'Primary Action' }));
 
-      expect(onPrimaryActionMock).toHaveBeenCalled();
+      await waitFor(() => {
+        expect(onPrimaryActionMock).toHaveBeenCalled();
+      });
     });
   });
 });
diff --git a/src/Tabs/Tabs.test.tsx b/src/Tabs/Tabs.test.tsx
index 8bcd6d9b..9b74914c 100644
--- a/src/Tabs/Tabs.test.tsx
+++ b/src/Tabs/Tabs.test.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import { Tab, Tabs } from './index';
@@ -64,7 +64,7 @@ describe('Tabs', () => {
       expect(screen.getByText(tabTwoContent)).not.toHaveClass('active');
     });
 
-    it('shows the tab content when clicked', () => {
+    it('shows the tab content when clicked', async () => {
       renderTabs(uncontrolledProps);
 
       expect(screen.getByText(tabOneContent)).toHaveClass('active');
@@ -73,8 +73,9 @@ describe('Tabs', () => {
       const tabTwoButton = screen.getByRole('tab', { name: tabTwoTitle });
 
       userEvent.click(tabTwoButton);
-
-      expect(tabTwoButton).toHaveClass('active');
+      await waitFor(() => {
+        expect(tabTwoButton).toHaveClass('active');
+      });
 
       expect(screen.getByText(tabOneContent)).not.toHaveClass('active');
       expect(screen.getByText(tabTwoContent)).toHaveClass('active');
@@ -93,7 +94,7 @@ describe('Tabs', () => {
       expect(screen.getByText(tabTwoContent)).not.toHaveClass('active');
     });
 
-    it('shows the tab content when clicked', () => {
+    it('shows the tab content when clicked', async () => {
       renderTabs(controlledProps);
 
       expect(screen.getByText(tabOneContent)).toHaveClass('active');
@@ -102,8 +103,9 @@ describe('Tabs', () => {
       const tabTwoButton = screen.getByRole('tab', { name: tabTwoTitle });
 
       userEvent.click(tabTwoButton);
-
-      expect(onSelectMock).toHaveBeenCalled();
+      await waitFor(() => {
+        expect(onSelectMock).toHaveBeenCalled();
+      });
     });
   });
 });