Skip to content

Commit 489a865

Browse files
setchysetchy
authored
refactor: reset settings component (#1791)
* refactor: reset settings component Signed-off-by: Adam Setch <[email protected]> * refactor: reset settings component Signed-off-by: Adam Setch <[email protected]> --------- Signed-off-by: Adam Setch <[email protected]>
1 parent 3c3c5cc commit 489a865

File tree

12 files changed

+150
-129
lines changed

12 files changed

+150
-129
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { render } from '@testing-library/react';
22
import { EmojiText, type IEmojiText } from './EmojiText';
33

4-
describe('renderer/components/primitives/Emoji.tsx', () => {
4+
describe('renderer/components/primitives/EmojiText.tsx', () => {
55
it('should render', () => {
66
const props: IEmojiText = {
77
text: '🍺',

‎src/renderer/components/primitives/__snapshots__/EmojiText.test.tsx.snap

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import {
99
import { AppContext } from '../../context/App';
1010
import { AppearanceSettings } from './AppearanceSettings';
1111

12-
describe('renderer/routes/components/settings/AppearanceSettings.tsx', () => {
12+
describe('renderer/components/settings/AppearanceSettings.tsx', () => {
1313
const updateSetting = jest.fn();
1414
const zoomTimeout = () => new Promise((r) => setTimeout(r, 300));
1515

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { AppContext } from '../../context/App';
55
import * as comms from '../../utils/comms';
66
import { NotificationSettings } from './NotificationSettings';
77

8-
describe('renderer/routes/components/settings/NotificationSettings.tsx', () => {
8+
describe('renderer/components/settings/NotificationSettings.tsx', () => {
99
const updateSetting = jest.fn();
1010

1111
afterEach(() => {

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ jest.mock('react-router-dom', () => ({
1111
useNavigate: () => mockNavigate,
1212
}));
1313

14-
describe('renderer/routes/components/settings/SettingsFooter.tsx', () => {
14+
describe('renderer/components/settings/SettingsFooter.tsx', () => {
1515
let originalEnv: NodeJS.ProcessEnv;
1616

1717
beforeEach(() => {

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

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
import { act, fireEvent, render, screen } from '@testing-library/react';
2+
import { MemoryRouter } from 'react-router-dom';
3+
import { mockAuth, mockSettings } from '../../__mocks__/state-mocks';
4+
import { AppContext } from '../../context/App';
5+
import { SettingsReset } from './SettingsReset';
6+
7+
describe('renderer/components/settings/SettingsReset.tsx', () => {
8+
const resetSettings = jest.fn();
9+
10+
afterEach(() => {
11+
jest.clearAllMocks();
12+
});
13+
14+
it('should reset default settings when `OK`', async () => {
15+
window.confirm = jest.fn(() => true); // always click 'OK'
16+
17+
await act(async () => {
18+
render(
19+
<AppContext.Provider
20+
value={{
21+
auth: mockAuth,
22+
settings: mockSettings,
23+
resetSettings,
24+
}}
25+
>
26+
<MemoryRouter>
27+
<SettingsReset />
28+
</MemoryRouter>
29+
</AppContext.Provider>,
30+
);
31+
});
32+
33+
fireEvent.click(screen.getByTestId('settings-reset'));
34+
fireEvent.click(screen.getByText('Reset'));
35+
36+
expect(resetSettings).toHaveBeenCalled();
37+
});
38+
39+
it('should skip reset default settings when `cancelled`', async () => {
40+
window.confirm = jest.fn(() => false); // always click 'cancel'
41+
42+
await act(async () => {
43+
render(
44+
<AppContext.Provider
45+
value={{
46+
auth: mockAuth,
47+
settings: mockSettings,
48+
resetSettings,
49+
}}
50+
>
51+
<MemoryRouter>
52+
<SettingsReset />
53+
</MemoryRouter>
54+
</AppContext.Provider>,
55+
);
56+
});
57+
58+
fireEvent.click(screen.getByTestId('settings-reset'));
59+
fireEvent.click(screen.getByText('Cancel'));
60+
61+
expect(resetSettings).not.toHaveBeenCalled();
62+
});
63+
});

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

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import { type FC, useCallback, useContext, useState } from 'react';
2+
3+
import { Button, Stack, Text } from '@primer/react';
4+
import { Dialog } from '@primer/react/experimental';
5+
import { AppContext } from '../../context/App';
6+
7+
export const SettingsReset: FC = () => {
8+
const { resetSettings } = useContext(AppContext);
9+
const [isOpen, setIsOpen] = useState(false);
10+
const onDialogClose = useCallback(() => setIsOpen(false), []);
11+
const onDialogProceed = useCallback(() => {
12+
resetSettings();
13+
setIsOpen(false);
14+
}, [resetSettings]);
15+
16+
return (
17+
<Stack align="center">
18+
<Button
19+
variant="danger"
20+
onClick={() => setIsOpen(!isOpen)}
21+
data-testid="settings-reset"
22+
sx={{ width: '200px' }}
23+
>
24+
Reset Settings
25+
</Button>
26+
{isOpen && (
27+
<Dialog
28+
title="Reset Settings"
29+
width="large"
30+
onClose={onDialogClose}
31+
footerButtons={[
32+
{
33+
buttonType: 'default',
34+
content: 'Cancel',
35+
onClick: onDialogClose,
36+
},
37+
{
38+
buttonType: 'danger',
39+
content: 'Reset',
40+
onClick: onDialogProceed,
41+
},
42+
]}
43+
data-testid="reset-dialog"
44+
>
45+
Please confirm that you want to reset all settings to the{' '}
46+
<Text as="strong">Gitify defaults</Text>
47+
</Dialog>
48+
)}
49+
</Stack>
50+
);
51+
};

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { mockAuth, mockSettings } from '../../__mocks__/state-mocks';
44
import { AppContext } from '../../context/App';
55
import { SystemSettings } from './SystemSettings';
66

7-
describe('renderer/routes/components/settings/SystemSettings.tsx', () => {
7+
describe('renderer/components/settings/SystemSettings.tsx', () => {
88
const updateSetting = jest.fn();
99

1010
afterEach(() => {

‎src/renderer/components/settings/__snapshots__/SettingsFooter.test.tsx.snap

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/renderer/routes/Settings.test.tsx

Lines changed: 0 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@ jest.mock('react-router-dom', () => ({
1212

1313
describe('renderer/routes/Settings.tsx', () => {
1414
const fetchNotifications = jest.fn();
15-
const resetSettings = jest.fn();
1615

1716
afterEach(() => {
1817
jest.clearAllMocks();
@@ -53,54 +52,4 @@ describe('renderer/routes/Settings.tsx', () => {
5352
expect(fetchNotifications).toHaveBeenCalledTimes(1);
5453
expect(mockNavigate).toHaveBeenNthCalledWith(1, -1);
5554
});
56-
57-
it('should reset default settings when `OK`', async () => {
58-
window.confirm = jest.fn(() => true); // always click 'OK'
59-
60-
await act(async () => {
61-
render(
62-
<AppContext.Provider
63-
value={{
64-
auth: mockAuth,
65-
settings: mockSettings,
66-
resetSettings,
67-
}}
68-
>
69-
<MemoryRouter>
70-
<SettingsRoute />
71-
</MemoryRouter>
72-
</AppContext.Provider>,
73-
);
74-
});
75-
76-
fireEvent.click(screen.getByTestId('settings-reset'));
77-
fireEvent.click(screen.getByText('Reset'));
78-
79-
expect(resetSettings).toHaveBeenCalled();
80-
});
81-
82-
it('should skip reset default settings when `cancelled`', async () => {
83-
window.confirm = jest.fn(() => false); // always click 'cancel'
84-
85-
await act(async () => {
86-
render(
87-
<AppContext.Provider
88-
value={{
89-
auth: mockAuth,
90-
settings: mockSettings,
91-
resetSettings,
92-
}}
93-
>
94-
<MemoryRouter>
95-
<SettingsRoute />
96-
</MemoryRouter>
97-
</AppContext.Provider>,
98-
);
99-
});
100-
101-
fireEvent.click(screen.getByTestId('settings-reset'));
102-
fireEvent.click(screen.getByText('Cancel'));
103-
104-
expect(resetSettings).not.toHaveBeenCalled();
105-
});
10655
});

‎src/renderer/routes/Settings.tsx

Lines changed: 4 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,18 @@
1-
import { type FC, useCallback, useContext, useState } from 'react';
1+
import type { FC } from 'react';
22

33
import { GearIcon } from '@primer/octicons-react';
4-
import { Button, Stack, Text } from '@primer/react';
5-
import { Dialog } from '@primer/react/experimental';
4+
import { Stack } from '@primer/react';
65

76
import { Contents } from '../components/layout/Contents';
87
import { Page } from '../components/layout/Page';
98
import { Header } from '../components/primitives/Header';
109
import { AppearanceSettings } from '../components/settings/AppearanceSettings';
1110
import { NotificationSettings } from '../components/settings/NotificationSettings';
1211
import { SettingsFooter } from '../components/settings/SettingsFooter';
12+
import { SettingsReset } from '../components/settings/SettingsReset';
1313
import { SystemSettings } from '../components/settings/SystemSettings';
14-
import { AppContext } from '../context/App';
1514

1615
export const SettingsRoute: FC = () => {
17-
const { resetSettings } = useContext(AppContext);
18-
const [isOpen, setIsOpen] = useState(false);
19-
const onDialogClose = useCallback(() => setIsOpen(false), []);
20-
const onDialogProceed = useCallback(() => {
21-
resetSettings();
22-
setIsOpen(false);
23-
}, [resetSettings]);
24-
2516
return (
2617
<Page id="settings">
2718
<Header fetchOnBack icon={GearIcon}>
@@ -33,40 +24,7 @@ export const SettingsRoute: FC = () => {
3324
<AppearanceSettings />
3425
<NotificationSettings />
3526
<SystemSettings />
36-
</Stack>
37-
38-
<Stack align="center" padding="spacious">
39-
<Button
40-
variant="danger"
41-
onClick={() => setIsOpen(!isOpen)}
42-
data-testid="settings-reset"
43-
sx={{ width: '200px' }}
44-
>
45-
Reset Settings
46-
</Button>
47-
{isOpen && (
48-
<Dialog
49-
title="Reset Settings"
50-
width="large"
51-
onClose={onDialogClose}
52-
footerButtons={[
53-
{
54-
buttonType: 'default',
55-
content: 'Cancel',
56-
onClick: onDialogClose,
57-
},
58-
{
59-
buttonType: 'danger',
60-
content: 'Reset',
61-
onClick: onDialogProceed,
62-
},
63-
]}
64-
data-testid="reset-dialog"
65-
>
66-
Please confirm that you want to reset all settings to the{' '}
67-
<Text as="strong">Gitify defaults</Text>
68-
</Dialog>
69-
)}
27+
<SettingsReset />
7028
</Stack>
7129
</Contents>
7230

‎src/renderer/routes/__snapshots__/Settings.test.tsx.snap

Lines changed: 24 additions & 24 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)