diff --git a/src/renderer/components/settings/AppearanceSettings.test.tsx b/src/renderer/components/settings/AppearanceSettings.test.tsx
index 77dd401a9..dc05973f9 100644
--- a/src/renderer/components/settings/AppearanceSettings.test.tsx
+++ b/src/renderer/components/settings/AppearanceSettings.test.tsx
@@ -1,13 +1,13 @@
-import { act, fireEvent, screen } from '@testing-library/react';
+import { act, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { renderWithAppContext } from '../../__helpers__/test-utils';
import { mockGitHubAppAccount } from '../../__mocks__/account-mocks';
+import * as zoom from '../../utils/zoom';
import { AppearanceSettings } from './AppearanceSettings';
describe('renderer/components/settings/AppearanceSettings.tsx', () => {
const updateSettingMock = jest.fn();
- const zoomTimeout = () => new Promise((r) => setTimeout(r, 300));
afterEach(() => {
jest.clearAllMocks();
@@ -45,28 +45,12 @@ describe('renderer/components/settings/AppearanceSettings.tsx', () => {
expect(updateSettingMock).toHaveBeenCalledWith('increaseContrast', true);
});
- it('should update the zoom value when using CMD + and CMD -', async () => {
- window.gitify.zoom.getLevel = jest.fn().mockReturnValue(-1);
-
- await act(async () => {
- renderWithAppContext(, {
- updateSetting: updateSettingMock,
- });
- });
-
- fireEvent(window, new Event('resize'));
- await zoomTimeout();
-
- expect(updateSettingMock).toHaveBeenCalledTimes(1);
- expect(updateSettingMock).toHaveBeenCalledWith('zoomPercentage', 50);
- });
-
it('should update the zoom values when using the zoom buttons', async () => {
- window.gitify.zoom.getLevel = jest.fn().mockReturnValue(0);
- window.gitify.zoom.setLevel = jest.fn().mockImplementation((level) => {
- window.gitify.zoom.getLevel = jest.fn().mockReturnValue(level);
- fireEvent(window, new Event('resize'));
- });
+ const zoomOutSpy = jest.spyOn(zoom, 'decreaseZoom').mockImplementation();
+ const zoomInSpy = jest.spyOn(zoom, 'increaseZoom').mockImplementation();
+ const zoomResetSpy = jest
+ .spyOn(zoom, 'resetZoomLevel')
+ .mockImplementation();
await act(async () => {
renderWithAppContext(, {
@@ -75,55 +59,19 @@ describe('renderer/components/settings/AppearanceSettings.tsx', () => {
});
// Zoom Out
- await act(async () => {
- await userEvent.click(screen.getByTestId('settings-zoom-out'));
- await zoomTimeout();
-
- expect(updateSettingMock).toHaveBeenCalledTimes(1);
- expect(updateSettingMock).toHaveBeenNthCalledWith(
- 1,
- 'zoomPercentage',
- 90,
- );
- });
+ await userEvent.click(screen.getByTestId('settings-zoom-out'));
+ expect(zoomOutSpy).toHaveBeenCalledTimes(1);
- await act(async () => {
- await userEvent.click(screen.getByTestId('settings-zoom-out'));
- await zoomTimeout();
-
- expect(updateSettingMock).toHaveBeenCalledTimes(2);
- expect(updateSettingMock).toHaveBeenNthCalledWith(
- 2,
- 'zoomPercentage',
- 80,
- );
- });
+ await userEvent.click(screen.getByTestId('settings-zoom-out'));
+ expect(zoomOutSpy).toHaveBeenCalledTimes(2);
// Zoom In
- await act(async () => {
- await userEvent.click(screen.getByTestId('settings-zoom-in'));
- await zoomTimeout();
-
- expect(updateSettingMock).toHaveBeenCalledTimes(3);
- expect(updateSettingMock).toHaveBeenNthCalledWith(
- 3,
- 'zoomPercentage',
- 90,
- );
- });
+ await userEvent.click(screen.getByTestId('settings-zoom-in'));
+ expect(zoomInSpy).toHaveBeenCalledTimes(1);
// Zoom Reset
- await act(async () => {
- await userEvent.click(screen.getByTestId('settings-zoom-reset'));
- await zoomTimeout();
-
- expect(updateSettingMock).toHaveBeenCalledTimes(4);
- expect(updateSettingMock).toHaveBeenNthCalledWith(
- 4,
- 'zoomPercentage',
- 100,
- );
- });
+ await userEvent.click(screen.getByTestId('settings-zoom-reset'));
+ expect(zoomResetSpy).toHaveBeenCalledTimes(1);
});
it('should toggle account header checkbox', async () => {
diff --git a/src/renderer/components/settings/AppearanceSettings.tsx b/src/renderer/components/settings/AppearanceSettings.tsx
index 6cb966974..393e8d83d 100644
--- a/src/renderer/components/settings/AppearanceSettings.tsx
+++ b/src/renderer/components/settings/AppearanceSettings.tsx
@@ -1,4 +1,4 @@
-import { type FC, useContext, useState } from 'react';
+import { type FC, useContext } from 'react';
import {
PaintbrushIcon,
@@ -23,33 +23,16 @@ import {
canIncreaseZoom,
decreaseZoom,
increaseZoom,
+ resetZoomLevel,
zoomLevelToPercentage,
} from '../../utils/zoom';
import { Checkbox } from '../fields/Checkbox';
import { FieldLabel } from '../fields/FieldLabel';
import { Title } from '../primitives/Title';
-let timeout: NodeJS.Timeout;
-const DELAY = 200;
-
export const AppearanceSettings: FC = () => {
const { auth, settings, updateSetting } = useContext(AppContext);
- const [zoomPercentage, setZoomPercentage] = useState(
- zoomLevelToPercentage(window.gitify.zoom.getLevel()),
- );
-
- window.addEventListener('resize', () => {
- // clear the timeout
- clearTimeout(timeout);
- // start timing for event "completion"
- timeout = setTimeout(() => {
- const zoomPercentage = zoomLevelToPercentage(
- window.gitify.zoom.getLevel(),
- );
- setZoomPercentage(zoomPercentage);
- updateSetting('zoomPercentage', zoomPercentage);
- }, DELAY);
- });
+ const zoomPercentage = zoomLevelToPercentage(window.gitify.zoom.getLevel());
return (