feat(settings): open links in foreground or background (#1376)

* feat(settings): open links in foreground or background * feat(settings): open links in foreground or background * Merge branch 'main' into feature/system-setting-open-preference * Merge branch 'main' into feature/system-setting-open-preference
gitify-app · Jul 15, 2024 · e9c7a64 · e9c7a64
1 parent f51f908
commit e9c7a64
Show file tree

Hide file tree

Showing 22 changed files with 202 additions and 52 deletions.
diff --git a/src/__mocks__/state-mocks.ts b/src/__mocks__/state-mocks.ts
@@ -5,6 +5,7 @@ import {
   type GitifyUser,
   GroupBy,
   type Hostname,
+  OpenPreference,
   type SettingsState,
   Theme,
   type Token,
@@ -88,6 +89,7 @@ const mockNotificationSettings = {
 };
 
 const mockSystemSettings = {
+  openLinks: OpenPreference.FOREGROUND,
   keyboardShortcut: true,
   showNotificationsCountInTray: false,
   showNotifications: true,

diff --git a/src/components/AccountNotifications.test.tsx b/src/components/AccountNotifications.test.tsx
@@ -61,7 +61,9 @@ describe('components/AccountNotifications.tsx', () => {
   });
 
   it('should open profile when clicked', async () => {
-    const openAccountProfileMock = jest.spyOn(links, 'openAccountProfile');
+    const openAccountProfileMock = jest
+      .spyOn(links, 'openAccountProfile')
+      .mockImplementation();
 
     const props = {
       account: mockGitHubCloudAccount,

diff --git a/src/components/NotificationRow.test.tsx b/src/components/NotificationRow.test.tsx
@@ -13,9 +13,8 @@ import * as links from '../utils/links';
 import { NotificationRow } from './NotificationRow';
 
 describe('components/NotificationRow.tsx', () => {
-  beforeEach(() => {
-    jest.spyOn(links, 'openNotification');
-  });
+  jest.spyOn(links, 'openNotification');
+  jest.spyOn(comms, 'openExternalLink').mockImplementation();
 
   afterEach(() => {
     jest.clearAllMocks();

diff --git a/src/components/RepositoryNotifications.test.tsx b/src/components/RepositoryNotifications.test.tsx
@@ -37,7 +37,9 @@ describe('components/Repository.tsx', () => {
   });
 
   it('should open the browser when clicking on the repo name', () => {
-    const openExternalLinkMock = jest.spyOn(comms, 'openExternalLink');
+    const openExternalLinkMock = jest
+      .spyOn(comms, 'openExternalLink')
+      .mockImplementation();
 
     render(
       <AppContext.Provider value={{}}>

diff --git a/src/components/Sidebar.test.tsx b/src/components/Sidebar.test.tsx
@@ -15,8 +15,9 @@ jest.mock('react-router-dom', () => ({
 
 describe('components/Sidebar.tsx', () => {
   const fetchNotifications = jest.fn();
-
-  const openExternalLinkMock = jest.spyOn(comms, 'openExternalLink');
+  const openExternalLinkMock = jest
+    .spyOn(comms, 'openExternalLink')
+    .mockImplementation();
 
   afterEach(() => {
     jest.clearAllMocks();

diff --git a/src/components/buttons/Button.test.tsx b/src/components/buttons/Button.test.tsx
@@ -1,11 +1,13 @@
 import { MarkGithubIcon } from '@primer/octicons-react';
 import { fireEvent, render, screen } from '@testing-library/react';
-import { shell } from 'electron';
 import type { Link } from '../../types';
+import * as comms from '../../utils/comms';
 import { Button, type IButton } from './Button';
 
 describe('components/buttons/Button.tsx', () => {
-  const openExternalMock = jest.spyOn(shell, 'openExternal');
+  const openExternalLinkMock = jest
+    .spyOn(comms, 'openExternalLink')
+    .mockImplementation();
 
   const props: IButton = {
     label: 'button',
@@ -39,6 +41,6 @@ describe('components/buttons/Button.tsx', () => {
     const buttonElement = screen.getByLabelText('button');
 
     fireEvent.click(buttonElement);
-    expect(openExternalMock).toHaveBeenCalledTimes(1);
+    expect(openExternalLinkMock).toHaveBeenCalledTimes(1);
   });
 });
diff --git a/src/components/notification/NotificationFooter.test.tsx b/src/components/notification/NotificationFooter.test.tsx
@@ -8,14 +8,9 @@ import { GroupBy, type Link } from '../../types';
 import type { UserType } from '../../typesGitHub';
 import { mockSingleNotification } from '../../utils/api/__mocks__/response-mocks';
 import * as comms from '../../utils/comms';
-import * as links from '../../utils/links';
 import { NotificationFooter } from './NotificationFooter';
 
 describe('components/notification/NotificationFooter.tsx', () => {
-  beforeEach(() => {
-    jest.spyOn(links, 'openNotification');
-  });
-
   afterEach(() => {
     jest.clearAllMocks();
   });
@@ -122,7 +117,9 @@ describe('components/notification/NotificationFooter.tsx', () => {
   });
 
   it('should open notification user profile', () => {
-    const openExternalLinkMock = jest.spyOn(comms, 'openExternalLink');
+    const openExternalLinkMock = jest
+      .spyOn(comms, 'openExternalLink')
+      .mockImplementation();
 
     const props = {
       notification: {

diff --git a/src/components/notification/NotificationHeader.test.tsx b/src/components/notification/NotificationHeader.test.tsx
@@ -7,6 +7,10 @@ import * as comms from '../../utils/comms';
 import { NotificationHeader } from './NotificationHeader';
 
 describe('components/notification/NotificationHeader.tsx', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
   it('should render itself & its children - group by repositories', async () => {
     const props = {
       notification: mockSingleNotification,
@@ -38,7 +42,9 @@ describe('components/notification/NotificationHeader.tsx', () => {
   });
 
   it('should open notification user profile - group by date', () => {
-    const openExternalLinkMock = jest.spyOn(comms, 'openExternalLink');
+    const openExternalLinkMock = jest
+      .spyOn(comms, 'openExternalLink')
+      .mockImplementation();
 
     const props = {
       notification: mockSingleNotification,

diff --git a/src/components/settings/NotificationSettings.test.tsx b/src/components/settings/NotificationSettings.test.tsx
@@ -60,7 +60,9 @@ describe('routes/components/settings/NotificationSettings.tsx', () => {
   });
 
   it('should open official docs for showOnlyParticipating tooltip', async () => {
-    const openExternalLinkMock = jest.spyOn(comms, 'openExternalLink');
+    const openExternalLinkMock = jest
+      .spyOn(comms, 'openExternalLink')
+      .mockImplementation();
 
     await act(async () => {
       render(

diff --git a/src/components/settings/SettingsFooter.test.tsx b/src/components/settings/SettingsFooter.test.tsx
@@ -81,7 +81,9 @@ describe('routes/components/settings/SettingsFooter.tsx', () => {
       ...originalEnv,
       NODE_ENV: 'production',
     };
-    const openExternalLinkMock = jest.spyOn(comms, 'openExternalLink');
+    const openExternalLinkMock = jest
+      .spyOn(comms, 'openExternalLink')
+      .mockImplementation();
 
     await act(async () => {
       render(

diff --git a/src/components/settings/SystemSettings.test.tsx b/src/components/settings/SystemSettings.test.tsx
@@ -11,6 +11,29 @@ describe('routes/components/settings/SystemSettings.tsx', () => {
     jest.clearAllMocks();
   });
 
+  it('should change the open links radio group', async () => {
+    await act(async () => {
+      render(
+        <AppContext.Provider
+          value={{
+            auth: mockAuth,
+            settings: mockSettings,
+            updateSetting,
+          }}
+        >
+          <MemoryRouter>
+            <SystemSettings />
+          </MemoryRouter>
+        </AppContext.Provider>,
+      );
+    });
+
+    fireEvent.click(screen.getByLabelText('Background'));
+
+    expect(updateSetting).toHaveBeenCalledTimes(1);
+    expect(updateSetting).toHaveBeenCalledWith('openLinks', 'BACKGROUND');
+  });
+
   it('should toggle the keyboardShortcut checkbox', async () => {
     await act(async () => {
       render(

diff --git a/src/components/settings/SystemSettings.tsx b/src/components/settings/SystemSettings.tsx
@@ -1,9 +1,11 @@
 import { DeviceDesktopIcon } from '@primer/octicons-react';
 import { type FC, useContext } from 'react';
 import { AppContext } from '../../context/App';
+import type { OpenPreference } from '../../types';
 import Constants from '../../utils/constants';
 import { isLinux, isMacOS } from '../../utils/platform';
 import { Checkbox } from '../fields/Checkbox';
+import { RadioGroup } from '../fields/RadioGroup';
 import { Legend } from './Legend';
 
 export const SystemSettings: FC = () => {
@@ -12,6 +14,18 @@ export const SystemSettings: FC = () => {
   return (
     <fieldset>
       <Legend icon={DeviceDesktopIcon}>System</Legend>
+      <RadioGroup
+        name="openLinks"
+        label="Open Links:"
+        value={settings.openLinks}
+        options={[
+          { label: 'Foreground', value: 'FOREGROUND' },
+          { label: 'Background', value: 'BACKGROUND' },
+        ]}
+        onChange={(evt) => {
+          updateSetting('openLinks', evt.target.value as OpenPreference);
+        }}
+      />
       <Checkbox
         name="keyboardShortcutEnabled"
         label="Enable keyboard shortcut"

diff --git a/src/context/App.test.tsx b/src/context/App.test.tsx
@@ -384,6 +384,7 @@ describe('context/App.tsx', () => {
           groupBy: 'REPOSITORY',
           filterReasons: [],
           zoomPercentage: 100,
+          openLinks: 'FOREGROUND',
         } as SettingsState,
       });
     });
@@ -440,6 +441,7 @@ describe('context/App.tsx', () => {
           groupBy: 'REPOSITORY',
           filterReasons: [],
           zoomPercentage: 100,
+          openLinks: 'FOREGROUND',
         } as SettingsState,
       });
     });

diff --git a/src/context/App.tsx b/src/context/App.tsx
@@ -15,6 +15,7 @@ import {
   type AuthState,
   type GitifyError,
   GroupBy,
+  OpenPreference,
   type SettingsState,
   type SettingsValue,
   type Status,
@@ -69,6 +70,7 @@ const defaultNotificationSettings = {
 };
 
 const defaultSystemSettings = {
+  openLinks: OpenPreference.FOREGROUND,
   keyboardShortcut: true,
   showNotificationsCountInTray: false,
   showNotifications: true,

diff --git a/src/routes/Accounts.test.tsx b/src/routes/Accounts.test.tsx
@@ -73,7 +73,9 @@ describe('routes/Accounts.tsx', () => {
 
   describe('Account interactions', () => {
     it('open profile in external browser', async () => {
-      const openAccountProfileMock = jest.spyOn(links, 'openAccountProfile');
+      const openAccountProfileMock = jest
+        .spyOn(links, 'openAccountProfile')
+        .mockImplementation();
 
       await act(async () => {
         render(
@@ -101,7 +103,9 @@ describe('routes/Accounts.tsx', () => {
     });
 
     it('open host in external browser', async () => {
-      const openExternalLinkMock = jest.spyOn(comms, 'openExternalLink');
+      const openExternalLinkMock = jest
+        .spyOn(comms, 'openExternalLink')
+        .mockImplementation();
 
       await act(async () => {
         render(
@@ -127,7 +131,9 @@ describe('routes/Accounts.tsx', () => {
     });
 
     it('open developer settings in external browser', async () => {
-      const openExternalLinkMock = jest.spyOn(comms, 'openExternalLink');
+      const openExternalLinkMock = jest
+        .spyOn(comms, 'openExternalLink')
+        .mockImplementation();
 
       await act(async () => {
         render(

diff --git a/src/routes/LoginWithOAuthApp.test.tsx b/src/routes/LoginWithOAuthApp.test.tsx
@@ -1,8 +1,8 @@
 import { fireEvent, render, screen } from '@testing-library/react';
-import { shell } from 'electron';
 import { MemoryRouter } from 'react-router-dom';
 import { AppContext } from '../context/App';
 import type { AuthState, ClientID, ClientSecret, Hostname } from '../types';
+import * as comms from '../utils/comms';
 import { LoginWithOAuthApp, validate } from './LoginWithOAuthApp';
 
 const mockNavigate = jest.fn();
@@ -12,7 +12,9 @@ jest.mock('react-router-dom', () => ({
 }));
 
 describe('routes/LoginWithOAuthApp.tsx', () => {
-  const openExternalMock = jest.spyOn(shell, 'openExternal');
+  const openExternalLinkMock = jest
+    .spyOn(comms, 'openExternalLink')
+    .mockImplementation();
 
   const mockAuth: AuthState = {
     accounts: [],
@@ -84,7 +86,7 @@ describe('routes/LoginWithOAuthApp.tsx', () => {
 
       fireEvent.click(screen.getByText('Create new OAuth App'));
 
-      expect(openExternalMock).toHaveBeenCalledTimes(0);
+      expect(openExternalLinkMock).toHaveBeenCalledTimes(0);
     });
 
     it('should open in browser if hostname configured', async () => {
@@ -102,7 +104,7 @@ describe('routes/LoginWithOAuthApp.tsx', () => {
 
       fireEvent.click(screen.getByText('Create new OAuth App'));
 
-      expect(openExternalMock).toHaveBeenCalledTimes(1);
+      expect(openExternalLinkMock).toHaveBeenCalledTimes(1);
     });
   });
 
@@ -143,6 +145,6 @@ describe('routes/LoginWithOAuthApp.tsx', () => {
 
     fireEvent.click(screen.getByLabelText('GitHub Docs'));
 
-    expect(openExternalMock).toHaveBeenCalledTimes(1);
+    expect(openExternalLinkMock).toHaveBeenCalledTimes(1);
   });
 });
diff --git a/src/routes/LoginWithPersonalAccessToken.test.tsx b/src/routes/LoginWithPersonalAccessToken.test.tsx
@@ -5,9 +5,9 @@ import {
   screen,
   waitFor,
 } from '@testing-library/react';
-import { shell } from 'electron';
 import { MemoryRouter } from 'react-router-dom';
 import { AppContext } from '../context/App';
+import * as comms from '../utils/comms';
 import {
   LoginWithPersonalAccessToken,
   validate,
@@ -20,9 +20,10 @@ jest.mock('react-router-dom', () => ({
 }));
 
 describe('routes/LoginWithPersonalAccessToken.tsx', () => {
-  const openExternalMock = jest.spyOn(shell, 'openExternal');
-
   const mockValidateToken = jest.fn();
+  const openExternalLinkMock = jest
+    .spyOn(comms, 'openExternalLink')
+    .mockImplementation();
 
   afterEach(() => {
     jest.clearAllMocks();
@@ -88,7 +89,7 @@ describe('routes/LoginWithPersonalAccessToken.tsx', () => {
 
       fireEvent.click(screen.getByText('Generate a PAT'));
 
-      expect(openExternalMock).toHaveBeenCalledTimes(0);
+      expect(openExternalLinkMock).toHaveBeenCalledTimes(0);
     });
 
     it('should open in browser if hostname configured', async () => {
@@ -104,7 +105,7 @@ describe('routes/LoginWithPersonalAccessToken.tsx', () => {
 
       fireEvent.click(screen.getByText('Generate a PAT'));
 
-      expect(openExternalMock).toHaveBeenCalledTimes(1);
+      expect(openExternalLinkMock).toHaveBeenCalledTimes(1);
     });
   });
 
@@ -198,6 +199,6 @@ describe('routes/LoginWithPersonalAccessToken.tsx', () => {
 
     fireEvent.click(screen.getByLabelText('GitHub Docs'));
 
-    expect(openExternalMock).toHaveBeenCalledTimes(1);
+    expect(openExternalLinkMock).toHaveBeenCalledTimes(1);
   });
 });