test: refactor to use userEvents

src/main/menu.test.ts

@@ -1,5 +1,6 @@
 import { Menu, MenuItem } from 'electron';
 import type { Menubar } from 'menubar';
+
 import MenuBuilder from './menu';
 
 jest.mock('electron', () => ({

src/renderer/components/AllRead.test.tsx

@@ -1,5 +1,6 @@
 import { render } from '@testing-library/react';
 import { MemoryRouter } from 'react-router-dom';
+
 import { mockSettings } from '../__mocks__/state-mocks';
 import { ensureStableEmojis } from '../__mocks__/utils';
 import { AppContext } from '../context/App';

src/renderer/components/Oops.test.tsx

@@ -1,4 +1,5 @@
 import { render } from '@testing-library/react';
+
 import { ensureStableEmojis } from '../__mocks__/utils';
 import { Oops } from './Oops';
 

src/renderer/components/Sidebar.test.tsx

@@ -1,5 +1,7 @@
-import { fireEvent, render, screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { MemoryRouter } from 'react-router-dom';
+
 import { mockAccountNotifications } from '../__mocks__/notifications-mocks';
 import { mockAuth, mockSettings } from '../__mocks__/state-mocks';
 import { AppContext } from '../context/App';
@@ -59,7 +61,7 @@ describe('renderer/components/Sidebar.tsx', () => {
     expect(tree).toMatchSnapshot();
   });
 
-  it('should navigate home when clicking the gitify logo', () => {
+  it('should navigate home when clicking the gitify logo', async () => {
     render(
       <AppContext.Provider
         value={{
@@ -75,12 +77,13 @@ describe('renderer/components/Sidebar.tsx', () => {
       </AppContext.Provider>,
     );
 
-    fireEvent.click(screen.getByTestId('sidebar-home'));
+    await userEvent.click(screen.getByTestId('sidebar-home'));
+
     expect(mockNavigate).toHaveBeenNthCalledWith(1, '/', { replace: true });
   });
 
   describe('notifications icon', () => {
-    it('opens notifications home when clicked', () => {
+    it('opens notifications home when clicked', async () => {
       render(
         <AppContext.Provider
           value={{
@@ -96,7 +99,7 @@ describe('renderer/components/Sidebar.tsx', () => {
         </AppContext.Provider>,
       );
 
-      fireEvent.click(screen.getByTestId('sidebar-notifications'));
+      await userEvent.click(screen.getByTestId('sidebar-notifications'));
 
       expect(openExternalLinkMock).toHaveBeenCalledTimes(1);
       expect(openExternalLinkMock).toHaveBeenCalledWith(
@@ -144,7 +147,7 @@ describe('renderer/components/Sidebar.tsx', () => {
   });
 
   describe('Filter notifications', () => {
-    it('go to the filters route', () => {
+    it('go to the filters route', async () => {
       render(
         <AppContext.Provider
           value={{
@@ -160,12 +163,12 @@ describe('renderer/components/Sidebar.tsx', () => {
         </AppContext.Provider>,
       );
 
-      fireEvent.click(screen.getByTestId('sidebar-filter-notifications'));
+      await userEvent.click(screen.getByTestId('sidebar-filter-notifications'));
 
       expect(mockNavigate).toHaveBeenNthCalledWith(1, '/filters');
     });
 
-    it('go to the home if filters path already shown', () => {
+    it('go to the home if filters path already shown', async () => {
       render(
         <AppContext.Provider
           value={{
@@ -181,14 +184,14 @@ describe('renderer/components/Sidebar.tsx', () => {
         </AppContext.Provider>,
       );
 
-      fireEvent.click(screen.getByTestId('sidebar-filter-notifications'));
+      await userEvent.click(screen.getByTestId('sidebar-filter-notifications'));
 
       expect(mockNavigate).toHaveBeenNthCalledWith(1, '/', { replace: true });
     });
   });
 
   describe('quick links', () => {
-    it('opens my github issues page', () => {
+    it('opens my github issues page', async () => {
       render(
         <AppContext.Provider
           value={{
@@ -204,15 +207,15 @@ describe('renderer/components/Sidebar.tsx', () => {
         </AppContext.Provider>,
       );
 
-      fireEvent.click(screen.getByTestId('sidebar-my-issues'));
+      await userEvent.click(screen.getByTestId('sidebar-my-issues'));
 
       expect(openExternalLinkMock).toHaveBeenCalledTimes(1);
       expect(openExternalLinkMock).toHaveBeenCalledWith(
         'https://github.com/issues',
       );
     });
 
-    it('opens my github pull requests page', () => {
+    it('opens my github pull requests page', async () => {
       render(
         <AppContext.Provider
           value={{
@@ -228,7 +231,7 @@ describe('renderer/components/Sidebar.tsx', () => {
         </AppContext.Provider>,
       );
 
-      fireEvent.click(screen.getByTestId('sidebar-my-pull-requests'));
+      await userEvent.click(screen.getByTestId('sidebar-my-pull-requests'));
 
       expect(openExternalLinkMock).toHaveBeenCalledTimes(1);
       expect(openExternalLinkMock).toHaveBeenCalledWith(
@@ -238,7 +241,7 @@ describe('renderer/components/Sidebar.tsx', () => {
   });
 
   describe('Refresh Notifications', () => {
-    it('should refresh the notifications when status is not loading', () => {
+    it('should refresh the notifications when status is not loading', async () => {
       render(
         <AppContext.Provider
           value={{
@@ -256,12 +259,12 @@ describe('renderer/components/Sidebar.tsx', () => {
         </AppContext.Provider>,
       );
 
-      fireEvent.click(screen.getByTestId('sidebar-refresh'));
+      await userEvent.click(screen.getByTestId('sidebar-refresh'));
 
       expect(fetchNotifications).toHaveBeenCalledTimes(1);
     });
 
-    it('should not refresh the notifications when status is loading', () => {
+    it('should not refresh the notifications when status is loading', async () => {
       render(
         <AppContext.Provider
           value={{
@@ -279,14 +282,14 @@ describe('renderer/components/Sidebar.tsx', () => {
         </AppContext.Provider>,
       );
 
-      fireEvent.click(screen.getByTestId('sidebar-refresh'));
+      await userEvent.click(screen.getByTestId('sidebar-refresh'));
 
       expect(fetchNotifications).not.toHaveBeenCalled();
     });
   });
 
   describe('Settings', () => {
-    it('go to the settings route', () => {
+    it('go to the settings route', async () => {
       render(
         <AppContext.Provider
           value={{
@@ -302,12 +305,12 @@ describe('renderer/components/Sidebar.tsx', () => {
         </AppContext.Provider>,
       );
 
-      fireEvent.click(screen.getByTestId('sidebar-settings'));
+      await userEvent.click(screen.getByTestId('sidebar-settings'));
 
       expect(mockNavigate).toHaveBeenNthCalledWith(1, '/settings');
     });
 
-    it('go to the home if settings path already shown', () => {
+    it('go to the home if settings path already shown', async () => {
       render(
         <AppContext.Provider
           value={{
@@ -324,14 +327,14 @@ describe('renderer/components/Sidebar.tsx', () => {
         </AppContext.Provider>,
       );
 
-      fireEvent.click(screen.getByTestId('sidebar-settings'));
+      await userEvent.click(screen.getByTestId('sidebar-settings'));
 
       expect(fetchNotifications).toHaveBeenCalledTimes(1);
       expect(mockNavigate).toHaveBeenNthCalledWith(1, '/', { replace: true });
     });
   });
 
-  it('should quit the app', () => {
+  it('should quit the app', async () => {
     const quitAppMock = jest.spyOn(comms, 'quitApp');
 
     render(
@@ -349,7 +352,7 @@ describe('renderer/components/Sidebar.tsx', () => {
       </AppContext.Provider>,
     );
 
-    fireEvent.click(screen.getByTestId('sidebar-quit'));
+    await userEvent.click(screen.getByTestId('sidebar-quit'));
 
     expect(quitAppMock).toHaveBeenCalledTimes(1);
   });

src/renderer/components/fields/Checkbox.test.tsx

@@ -1,4 +1,5 @@
 import { render } from '@testing-library/react';
+
 import { Checkbox, type ICheckbox } from './Checkbox';
 
 describe('renderer/components/fields/Checkbox.tsx', () => {

src/renderer/components/fields/FieldLabel.test.tsx

@@ -1,4 +1,5 @@
 import { render } from '@testing-library/react';
+
 import { FieldLabel, type IFieldLabel } from './FieldLabel';
 
 describe('renderer/components/fields/FieldLabel.tsx', () => {

src/renderer/components/fields/RadioGroup.test.tsx

@@ -1,4 +1,5 @@
 import { render } from '@testing-library/react';
+
 import { type IRadioGroup, RadioGroup } from './RadioGroup';
 
 describe('renderer/components/fields/RadioGroup.tsx', () => {

src/renderer/components/fields/Tooltip.test.tsx

@@ -1,4 +1,6 @@
-import { fireEvent, render, screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
 import { type ITooltip, Tooltip } from './Tooltip';
 
 describe('renderer/components/fields/Tooltip.tsx', () => {
@@ -12,15 +14,15 @@ describe('renderer/components/fields/Tooltip.tsx', () => {
     expect(tree).toMatchSnapshot();
   });
 
-  it('should display on mouse enter / leave', () => {
+  it('should display on mouse enter / leave', async () => {
     render(<Tooltip {...props} />);
 
     const tooltipElement = screen.getByTestId('tooltip-test');
 
-    fireEvent.mouseEnter(tooltipElement);
+    await userEvent.hover(tooltipElement);
     expect(tooltipElement).toMatchSnapshot();
 
-    fireEvent.mouseLeave(tooltipElement);
+    await userEvent.unhover(tooltipElement);
     expect(tooltipElement).toMatchSnapshot();
   });
 });

src/renderer/components/filters/FilterSection.test.tsx

@@ -1,6 +1,8 @@
 import { MarkGithubIcon } from '@primer/octicons-react';
-import { act, fireEvent, render, screen } from '@testing-library/react';
+import { act, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { MemoryRouter } from 'react-router-dom';
+
 import { mockAccountNotifications } from '../../__mocks__/notifications-mocks';
 import { mockSettings } from '../../__mocks__/state-mocks';
 import { AppContext } from '../../context/App';
@@ -98,7 +100,7 @@ describe('renderer/components/filters/FilterSection.tsx', () => {
       );
     });
 
-    fireEvent.click(screen.getByLabelText('Open'));
+    await userEvent.click(screen.getByLabelText('Open'));
 
     expect(updateFilter).toHaveBeenCalledWith(mockFilterSetting, 'open', true);
 
@@ -133,7 +135,7 @@ describe('renderer/components/filters/FilterSection.tsx', () => {
       );
     });
 
-    fireEvent.click(screen.getByLabelText('Closed'));
+    await userEvent.click(screen.getByLabelText('Closed'));
 
     expect(updateFilter).toHaveBeenCalledWith(
       mockFilterSetting,

src/renderer/components/filters/ReasonFilter.test.tsx

@@ -1,5 +1,6 @@
 import { render } from '@testing-library/react';
 import { MemoryRouter } from 'react-router-dom';
+
 import { mockAccountNotifications } from '../../__mocks__/notifications-mocks';
 import { mockSettings } from '../../__mocks__/state-mocks';
 import { AppContext } from '../../context/App';

src/renderer/components/filters/RequiresDetailedNotificationsWarning.test.tsx

@@ -1,5 +1,6 @@
 import { render } from '@testing-library/react';
 import { MemoryRouter } from 'react-router-dom';
+
 import { mockAccountNotifications } from '../../__mocks__/notifications-mocks';
 import { mockSettings } from '../../__mocks__/state-mocks';
 import { AppContext } from '../../context/App';

src/renderer/components/filters/StateFilter.test.tsx

@@ -1,5 +1,6 @@
 import { render } from '@testing-library/react';
 import { MemoryRouter } from 'react-router-dom';
+
 import { mockAccountNotifications } from '../../__mocks__/notifications-mocks';
 import { mockSettings } from '../../__mocks__/state-mocks';
 import { AppContext } from '../../context/App';

src/renderer/components/filters/SubjectTypeFilter.test.tsx

@@ -1,5 +1,6 @@
 import { render } from '@testing-library/react';
 import { MemoryRouter } from 'react-router-dom';
+
 import { mockAccountNotifications } from '../../__mocks__/notifications-mocks';
 import { mockSettings } from '../../__mocks__/state-mocks';
 import { AppContext } from '../../context/App';

src/renderer/components/filters/UserHandleFilter.test.tsx

@@ -1,5 +1,7 @@
-import { act, fireEvent, render, screen } from '@testing-library/react';
+import { act, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { MemoryRouter } from 'react-router-dom';
+
 import { mockAccountNotifications } from '../../__mocks__/notifications-mocks';
 import { mockSettings } from '../../__mocks__/state-mocks';
 import { AppContext } from '../../context/App';
@@ -76,14 +78,10 @@ describe('renderer/components/filters/UserHandleFilter.tsx', () => {
         );
       });
 
-      fireEvent.change(screen.getByTitle('Include handles'), {
-        target: { value: 'github-user' },
-      });
-
-      fireEvent.keyDown(screen.getByTitle('Include handles'), {
-        key: 'Enter',
-        code: 'Enter',
-      });
+      await userEvent.type(
+        screen.getByTitle('Include handles'),
+        'github-user{enter}',
+      );
 
       expect(updateFilter).toHaveBeenCalledWith(
         'filterIncludeHandles',
@@ -112,14 +110,10 @@ describe('renderer/components/filters/UserHandleFilter.tsx', () => {
         );
       });
 
-      fireEvent.change(screen.getByTitle('Include handles'), {
-        target: { value: 'github-user' },
-      });
-
-      fireEvent.keyDown(screen.getByTitle('Include handles'), {
-        key: 'Enter',
-        code: 'Enter',
-      });
+      await userEvent.type(
+        screen.getByTitle('Include handles'),
+        'github-user{enter}',
+      );
 
       expect(updateFilter).toHaveBeenCalledTimes(0);
     });
@@ -146,14 +140,10 @@ describe('renderer/components/filters/UserHandleFilter.tsx', () => {
         );
       });
 
-      fireEvent.change(screen.getByTitle('Exclude handles'), {
-        target: { value: 'github-user' },
-      });
-
-      fireEvent.keyDown(screen.getByTitle('Exclude handles'), {
-        key: 'Enter',
-        code: 'Enter',
-      });
+      await userEvent.type(
+        screen.getByTitle('Exclude handles'),
+        'github-user{enter}',
+      );
 
       expect(updateFilter).toHaveBeenCalledWith(
         'filterExcludeHandles',
@@ -182,14 +172,10 @@ describe('renderer/components/filters/UserHandleFilter.tsx', () => {
         );
       });
 
-      fireEvent.change(screen.getByTitle('Exclude handles'), {
-        target: { value: 'github-user' },
-      });
-
-      fireEvent.keyDown(screen.getByTitle('Exclude handles'), {
-        key: 'Enter',
-        code: 'Enter',
-      });
+      await userEvent.type(
+        screen.getByTitle('Exclude handles'),
+        'github-user{enter}',
+      );
 
       expect(updateFilter).toHaveBeenCalledTimes(0);
     });