refactor: reset settings component

src/renderer/components/primitives/EmojiText.test.tsx

@@ -1,7 +1,7 @@
 import { render } from '@testing-library/react';
 import { EmojiText, type IEmojiText } from './EmojiText';
 
-describe('renderer/components/primitives/Emoji.tsx', () => {
+describe('renderer/components/primitives/EmojiText.tsx', () => {
   it('should render', () => {
     const props: IEmojiText = {
       text: '🍺',

src/renderer/components/settings/AppearanceSettings.test.tsx

@@ -9,7 +9,7 @@ import {
 import { AppContext } from '../../context/App';
 import { AppearanceSettings } from './AppearanceSettings';
 
-describe('renderer/routes/components/settings/AppearanceSettings.tsx', () => {
+describe('renderer/components/settings/AppearanceSettings.tsx', () => {
   const updateSetting = jest.fn();
   const zoomTimeout = () => new Promise((r) => setTimeout(r, 300));
 

src/renderer/components/settings/NotificationSettings.test.tsx

@@ -5,7 +5,7 @@ import { AppContext } from '../../context/App';
 import * as comms from '../../utils/comms';
 import { NotificationSettings } from './NotificationSettings';
 
-describe('renderer/routes/components/settings/NotificationSettings.tsx', () => {
+describe('renderer/components/settings/NotificationSettings.tsx', () => {
   const updateSetting = jest.fn();
 
   afterEach(() => {

src/renderer/components/settings/SettingsFooter.test.tsx

@@ -11,7 +11,7 @@ jest.mock('react-router-dom', () => ({
   useNavigate: () => mockNavigate,
 }));
 
-describe('renderer/routes/components/settings/SettingsFooter.tsx', () => {
+describe('renderer/components/settings/SettingsFooter.tsx', () => {
   let originalEnv: NodeJS.ProcessEnv;
 
   beforeEach(() => {

src/renderer/components/settings/SettingsReset.test.tsx

@@ -0,0 +1,63 @@
+import { act, fireEvent, render, screen } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import { mockAuth, mockSettings } from '../../__mocks__/state-mocks';
+import { AppContext } from '../../context/App';
+import { SettingsReset } from './SettingsReset';
+
+describe('renderer/components/settings/SettingsReset.tsx', () => {
+  const resetSettings = jest.fn();
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should reset default settings when `OK`', async () => {
+    window.confirm = jest.fn(() => true); // always click 'OK'
+
+    await act(async () => {
+      render(
+        <AppContext.Provider
+          value={{
+            auth: mockAuth,
+            settings: mockSettings,
+            resetSettings,
+          }}
+        >
+          <MemoryRouter>
+            <SettingsReset />
+          </MemoryRouter>
+        </AppContext.Provider>,
+      );
+    });
+
+    fireEvent.click(screen.getByTestId('settings-reset'));
+    fireEvent.click(screen.getByText('Reset'));
+
+    expect(resetSettings).toHaveBeenCalled();
+  });
+
+  it('should skip reset default settings when `cancelled`', async () => {
+    window.confirm = jest.fn(() => false); // always click 'cancel'
+
+    await act(async () => {
+      render(
+        <AppContext.Provider
+          value={{
+            auth: mockAuth,
+            settings: mockSettings,
+            resetSettings,
+          }}
+        >
+          <MemoryRouter>
+            <SettingsReset />
+          </MemoryRouter>
+        </AppContext.Provider>,
+      );
+    });
+
+    fireEvent.click(screen.getByTestId('settings-reset'));
+    fireEvent.click(screen.getByText('Cancel'));
+
+    expect(resetSettings).not.toHaveBeenCalled();
+  });
+});

src/renderer/components/settings/SettingsReset.tsx

@@ -0,0 +1,51 @@
+import { type FC, useCallback, useContext, useState } from 'react';
+
+import { Button, Stack, Text } from '@primer/react';
+import { Dialog } from '@primer/react/experimental';
+import { AppContext } from '../../context/App';
+
+export const SettingsReset: FC = () => {
+  const { resetSettings } = useContext(AppContext);
+  const [isOpen, setIsOpen] = useState(false);
+  const onDialogClose = useCallback(() => setIsOpen(false), []);
+  const onDialogProceed = useCallback(() => {
+    resetSettings();
+    setIsOpen(false);
+  }, [resetSettings]);
+
+  return (
+    <Stack align="center">
+      <Button
+        variant="danger"
+        onClick={() => setIsOpen(!isOpen)}
+        data-testid="settings-reset"
+        sx={{ width: '200px' }}
+      >
+        Reset Settings
+      </Button>
+      {isOpen && (
+        <Dialog
+          title="Reset Settings"
+          width="large"
+          onClose={onDialogClose}
+          footerButtons={[
+            {
+              buttonType: 'default',
+              content: 'Cancel',
+              onClick: onDialogClose,
+            },
+            {
+              buttonType: 'danger',
+              content: 'Reset',
+              onClick: onDialogProceed,
+            },
+          ]}
+          data-testid="reset-dialog"
+        >
+          Please confirm that you want to reset all settings to the{' '}
+          <Text as="strong">Gitify defaults</Text>
+        </Dialog>
+      )}
+    </Stack>
+  );
+};

src/renderer/components/settings/SystemSettings.test.tsx

@@ -4,7 +4,7 @@ import { mockAuth, mockSettings } from '../../__mocks__/state-mocks';
 import { AppContext } from '../../context/App';
 import { SystemSettings } from './SystemSettings';
 
-describe('renderer/routes/components/settings/SystemSettings.tsx', () => {
+describe('renderer/components/settings/SystemSettings.tsx', () => {
   const updateSetting = jest.fn();
 
   afterEach(() => {

src/renderer/routes/Settings.test.tsx

@@ -12,7 +12,6 @@ jest.mock('react-router-dom', () => ({
 
 describe('renderer/routes/Settings.tsx', () => {
   const fetchNotifications = jest.fn();
-  const resetSettings = jest.fn();
 
   afterEach(() => {
     jest.clearAllMocks();
@@ -53,54 +52,4 @@ describe('renderer/routes/Settings.tsx', () => {
     expect(fetchNotifications).toHaveBeenCalledTimes(1);
     expect(mockNavigate).toHaveBeenNthCalledWith(1, -1);
   });
-
-  it('should reset default settings when `OK`', async () => {
-    window.confirm = jest.fn(() => true); // always click 'OK'
-
-    await act(async () => {
-      render(
-        <AppContext.Provider
-          value={{
-            auth: mockAuth,
-            settings: mockSettings,
-            resetSettings,
-          }}
-        >
-          <MemoryRouter>
-            <SettingsRoute />
-          </MemoryRouter>
-        </AppContext.Provider>,
-      );
-    });
-
-    fireEvent.click(screen.getByTestId('settings-reset'));
-    fireEvent.click(screen.getByText('Reset'));
-
-    expect(resetSettings).toHaveBeenCalled();
-  });
-
-  it('should skip reset default settings when `cancelled`', async () => {
-    window.confirm = jest.fn(() => false); // always click 'cancel'
-
-    await act(async () => {
-      render(
-        <AppContext.Provider
-          value={{
-            auth: mockAuth,
-            settings: mockSettings,
-            resetSettings,
-          }}
-        >
-          <MemoryRouter>
-            <SettingsRoute />
-          </MemoryRouter>
-        </AppContext.Provider>,
-      );
-    });
-
-    fireEvent.click(screen.getByTestId('settings-reset'));
-    fireEvent.click(screen.getByText('Cancel'));
-
-    expect(resetSettings).not.toHaveBeenCalled();
-  });
 });

src/renderer/routes/Settings.tsx

@@ -1,27 +1,18 @@
-import { type FC, useCallback, useContext, useState } from 'react';
+import type { FC } from 'react';
 
 import { GearIcon } from '@primer/octicons-react';
-import { Button, Stack, Text } from '@primer/react';
-import { Dialog } from '@primer/react/experimental';
+import { Stack } from '@primer/react';
 
 import { Contents } from '../components/layout/Contents';
 import { Page } from '../components/layout/Page';
 import { Header } from '../components/primitives/Header';
 import { AppearanceSettings } from '../components/settings/AppearanceSettings';
 import { NotificationSettings } from '../components/settings/NotificationSettings';
 import { SettingsFooter } from '../components/settings/SettingsFooter';
+import { SettingsReset } from '../components/settings/SettingsReset';
 import { SystemSettings } from '../components/settings/SystemSettings';
-import { AppContext } from '../context/App';
 
 export const SettingsRoute: FC = () => {
-  const { resetSettings } = useContext(AppContext);
-  const [isOpen, setIsOpen] = useState(false);
-  const onDialogClose = useCallback(() => setIsOpen(false), []);
-  const onDialogProceed = useCallback(() => {
-    resetSettings();
-    setIsOpen(false);
-  }, [resetSettings]);
-
   return (
     <Page id="settings">
       <Header fetchOnBack icon={GearIcon}>
@@ -33,40 +24,7 @@ export const SettingsRoute: FC = () => {
           <AppearanceSettings />
           <NotificationSettings />
           <SystemSettings />
-        </Stack>
-
-        <Stack align="center" padding="spacious">
-          <Button
-            variant="danger"
-            onClick={() => setIsOpen(!isOpen)}
-            data-testid="settings-reset"
-            sx={{ width: '200px' }}
-          >
-            Reset Settings
-          </Button>
-          {isOpen && (
-            <Dialog
-              title="Reset Settings"
-              width="large"
-              onClose={onDialogClose}
-              footerButtons={[
-                {
-                  buttonType: 'default',
-                  content: 'Cancel',
-                  onClick: onDialogClose,
-                },
-                {
-                  buttonType: 'danger',
-                  content: 'Reset',
-                  onClick: onDialogProceed,
-                },
-              ]}
-              data-testid="reset-dialog"
-            >
-              Please confirm that you want to reset all settings to the{' '}
-              <Text as="strong">Gitify defaults</Text>
-            </Dialog>
-          )}
+          <SettingsReset />
         </Stack>
       </Contents>