Replace fireEvent with userEvent in Jest tests (#20)

uhawaii-system-its-ti-iam · May 30, 2024 · 93302f4 · 93302f4
1 parent 62b78d3
commit 93302f4
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 17 deletions.
diff --git a/ui/package.json b/ui/package.json
@@ -34,8 +34,10 @@
   "devDependencies": {
     "@stylistic/eslint-plugin": "^1.6.1",
     "@swc/core": "^1.3.106",
+    "@testing-library/dom": "^10.1.0",
     "@testing-library/jest-dom": "^6.3.0",
     "@testing-library/react": "^14.1.2",
+    "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^29.5.11",
     "@types/node": "^20",
     "@types/react": "^18",

diff --git a/ui/tests/app/(index)/_components/LoginButton.test.tsx b/ui/tests/app/(index)/_components/LoginButton.test.tsx
@@ -1,4 +1,5 @@
-import { render, screen, fireEvent } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { redirect } from 'next/navigation';
 import User, { AnonymousUser } from '@/access/User';
 import Role from '@/access/Role';
@@ -16,11 +17,11 @@ describe('LoginButton Component', () => {
 
             expect(screen.getByRole('button', {name: 'Login Here'})).toBeInTheDocument;
         });
-        it('should visit the CAS login url on click', () => {
+        it('should visit the CAS login url on click', async() => {
             render(<LoginButton currentUser={AnonymousUser}/>);
 
             const casLoginUrl = `${casUrl}/login?service=${encodeURIComponent(`${baseUrl}/api/cas/login`)}`;
-            fireEvent.click(screen.getByRole('button', {name: 'Login Here'}));
+            await userEvent.click(screen.getByRole('button', {name: 'Login Here'}));
             expect(redirect).toHaveBeenCalledWith(casLoginUrl);
         });
     });
@@ -36,11 +37,11 @@ describe('LoginButton Component', () => {
             expect(screen.getByRole('button', {name: 'Logout'})).toBeInTheDocument;
         });
 
-        it('should visit the CAS logout url on click', () => {
+        it('should visit the CAS logout url on click', async () => {
             render(<LoginButton currentUser={testUser}/>);
 
             const casLogoutUrl = `${casUrl}/logout?service=${encodeURIComponent(`${baseUrl}/api/cas/logout`)}`;
-            fireEvent.click(screen.getByRole('button', {name: 'Logout'}));
+            await userEvent.click(screen.getByRole('button', {name: 'Logout'}));
             expect(redirect).toHaveBeenCalledWith(casLogoutUrl);
         });
     });

diff --git a/ui/tests/components/layout/navbar/LoginButton.test.tsx b/ui/tests/components/layout/navbar/LoginButton.test.tsx
@@ -1,4 +1,5 @@
-import { render, screen, fireEvent } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import Login from '@/components/layout/navbar/LoginButton';
 import { redirect } from 'next/navigation';
 import User, { AnonymousUser } from '@/access/User';
@@ -18,11 +19,11 @@ describe('Login', () => {
             expect(screen.getByRole('button', { name: 'Login' })).toBeInTheDocument;
         });
 
-        it('should visit the CAS login url on click', () => {
+        it('should visit the CAS login url on click', async() => {
             render(<Login currentUser={AnonymousUser} />);
 
             const casLoginUrl = `${casUrl}/login?service=${encodeURIComponent(`${baseUrl}/api/cas/login`)}`;
-            fireEvent.click(screen.getByRole('button', { name: 'Login' }));
+            await userEvent.click(screen.getByRole('button', { name: 'Login' }));
             expect(redirect).toHaveBeenCalledWith(casLoginUrl);
         });
 
@@ -40,11 +41,11 @@ describe('Login', () => {
             expect(screen.getByRole('button', { name: `Logout (${testUser.uid})` })).toBeInTheDocument;
         });
 
-        it('should visit the CAS logout url on click', () => {
+        it('should visit the CAS logout url on click', async () => {
             render(<Login currentUser={testUser} />);
 
             const casLogoutUrl = `${casUrl}/logout?service=${encodeURIComponent(`${baseUrl}/api/cas/logout`)}`;
-            fireEvent.click(screen.getByRole('button', { name: `Logout (${testUser.uid})` }));
+            await userEvent.click(screen.getByRole('button', { name: `Logout (${testUser.uid})` }));
             expect(redirect).toHaveBeenCalledWith(casLogoutUrl);
         });
 

diff --git a/ui/tests/components/layout/navbar/MobileNavbar.test.tsx b/ui/tests/components/layout/navbar/MobileNavbar.test.tsx
@@ -1,7 +1,8 @@
 import Role from '@/access/Role';
 import User, { AnonymousUser } from '@/access/User';
 import MobileNavbar from '@/components/layout/navbar/MobileNavbar';
-import { fireEvent, render, screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 const testUser: User = JSON.parse(process.env.TEST_USER_A as string);
 
@@ -13,10 +14,10 @@ describe('MobileNavbar', () => {
         expect(screen.queryByRole('navigation')).not.toBeInTheDocument();
     });
 
-    it('should open the drawer on click', () => {
+    it('should open the drawer on click', async () => {
         render(<MobileNavbar currentUser={AnonymousUser} />);
 
-        fireEvent.click(screen.getByRole('button', { name: 'Open navigation menu' }));
+        await userEvent.click(screen.getByRole('button', { name: 'Open navigation menu' }));
         expect(screen.getByRole('navigation')).toBeInTheDocument();
     });
 
@@ -25,7 +26,7 @@ describe('MobileNavbar', () => {
         it('should render the navbar with only the link to /about', async () => {
             render(<MobileNavbar currentUser={AnonymousUser} />);
 
-            fireEvent.click(screen.getByRole('button', { name: 'Open navigation menu' }));
+            await userEvent.click(screen.getByRole('button', { name: 'Open navigation menu' }));
             expect(screen.getByRole('navigation')).toBeInTheDocument();
             expect(screen.queryByRole('link', { name: 'Admin' })).not.toBeInTheDocument();
             expect(screen.queryByRole('link', { name: 'Memberships' })).not.toBeInTheDocument();
@@ -46,7 +47,7 @@ describe('MobileNavbar', () => {
             testUser.roles.push(Role.UH);
             render(<MobileNavbar currentUser={testUser} />);
 
-            fireEvent.click(screen.getByRole('button', { name: 'Open navigation menu' }));
+            await userEvent.click(screen.getByRole('button', { name: 'Open navigation menu' }));
             expect(screen.getByRole('navigation')).toBeInTheDocument();
             expect(screen.queryByRole('link', { name: 'Admin' })).not.toBeInTheDocument();
             expect(screen.getByRole('link', { name: 'Memberships' })).toHaveAttribute('href', '/memberships');
@@ -59,7 +60,7 @@ describe('MobileNavbar', () => {
             testUser.roles.push(Role.OWNER, Role.UH);
             render(<MobileNavbar currentUser={testUser} />);
 
-            fireEvent.click(screen.getByRole('button', { name: 'Open navigation menu' }));
+            await userEvent.click(screen.getByRole('button', { name: 'Open navigation menu' }));
             expect(screen.getByRole('navigation')).toBeInTheDocument();
             expect(screen.queryByRole('link', { name: 'Admin' })).not.toBeInTheDocument();
             expect(screen.getByRole('link', { name: 'Memberships' })).toHaveAttribute('href', '/memberships');
@@ -72,7 +73,7 @@ describe('MobileNavbar', () => {
             testUser.roles.push(Role.ADMIN, Role.UH);
             render(<MobileNavbar currentUser={testUser} />);
 
-            fireEvent.click(screen.getByRole('button', { name: 'Open navigation menu' }));
+            await userEvent.click(screen.getByRole('button', { name: 'Open navigation menu' }));
             expect(screen.getByRole('navigation')).toBeInTheDocument();
             expect(screen.getByRole('link', { name: 'Admin' })).toHaveAttribute('href', '/admin');
             expect(screen.getByRole('link', { name: 'Memberships' })).toHaveAttribute('href', '/memberships');