diff --git a/src/renderer/app.tsx b/src/renderer/app.tsx index b443913cae..f4255ab935 100644 --- a/src/renderer/app.tsx +++ b/src/renderer/app.tsx @@ -173,26 +173,20 @@ export class App { if (this.state.isUsingSystemTheme) { window.ElectronFiddle.setNativeTheme('system'); - if (!!window.matchMedia) { - const { matches } = window.matchMedia( - '(prefers-color-scheme: dark)', - ); - setSystemTheme(matches); - } + const { matches } = window.matchMedia('(prefers-color-scheme: dark)'); + setSystemTheme(matches); } }, ); // change theme when system theme changes - if (!!window.matchMedia) { - window - .matchMedia('(prefers-color-scheme: dark)') - .addEventListener('change', ({ matches }) => { - if (this.state.isUsingSystemTheme) { - setSystemTheme(matches); - } - }); - } + window + .matchMedia('(prefers-color-scheme: dark)') + .addEventListener('change', ({ matches }) => { + if (this.state.isUsingSystemTheme) { + setSystemTheme(matches); + } + }); } /** diff --git a/tests/renderer/app-spec.tsx b/tests/renderer/app-spec.tsx index b0d5e473db..1a9f7e60c4 100644 --- a/tests/renderer/app-spec.tsx +++ b/tests/renderer/app-spec.tsx @@ -273,24 +273,6 @@ describe('App component', () => { }); describe('setupThemeListeners()', () => { - const addEventListenerMock = jest.fn(); - beforeEach(() => { - // matchMedia mock - Object.defineProperty(window, 'matchMedia', { - writable: true, - value: jest.fn().mockImplementation((query) => ({ - matches: false, - media: query, - onchange: null, - addListener: jest.fn(), // Deprecated - removeListener: jest.fn(), // Deprecated - addEventListener: addEventListenerMock, - removeEventListener: jest.fn(), - dispatchEvent: jest.fn(), - })), - }); - }); - describe('isUsingSystemTheme reaction', () => { beforeEach(() => { window.ElectronFiddle.setNativeTheme = jest.fn(); @@ -336,32 +318,40 @@ describe('App component', () => { describe('prefers-color-scheme event listener', () => { it('adds an event listener to the "change" event', () => { + const spy = jest.spyOn(window, 'matchMedia'); app.setupThemeListeners(); - expect(addEventListenerMock).toHaveBeenCalledWith( + const { addEventListener } = spy.mock.results[0].value; + expect(addEventListener).toHaveBeenCalledWith( 'change', expect.anything(), ); }); it('does nothing if not isUsingSystemTheme', () => { + const spy = jest.spyOn(window, 'matchMedia'); app.setupThemeListeners(); - const callback = addEventListenerMock.mock.calls[0][1]; + const { addEventListener } = spy.mock.results[0].value; + const callback = addEventListener.mock.calls[0][1]; app.state.isUsingSystemTheme = false; callback({ matches: true }); expect(app.state.setTheme).not.toHaveBeenCalled(); }); it('sets dark theme if isUsingSystemTheme and prefers dark', () => { + const spy = jest.spyOn(window, 'matchMedia'); app.setupThemeListeners(); - const callback = addEventListenerMock.mock.calls[0][1]; + const { addEventListener } = spy.mock.results[0].value; + const callback = addEventListener.mock.calls[0][1]; app.state.isUsingSystemTheme = true; callback({ matches: true }); expect(app.state.setTheme).toHaveBeenCalledWith(defaultDark.file); }); it('sets light theme if isUsingSystemTheme and not prefers dark', () => { + const spy = jest.spyOn(window, 'matchMedia'); app.setupThemeListeners(); - const callback = addEventListenerMock.mock.calls[0][1]; + const { addEventListener } = spy.mock.results[0].value; + const callback = addEventListener.mock.calls[0][1]; app.state.isUsingSystemTheme = true; callback({ matches: false }); expect(app.state.setTheme).toHaveBeenCalledWith(defaultLight.file); diff --git a/tests/setup.ts b/tests/setup.ts index d54f3a446d..2992ef2661 100644 --- a/tests/setup.ts +++ b/tests/setup.ts @@ -104,4 +104,14 @@ beforeEach(() => { mocked(window.localStorage.getItem).mockReset(); mocked(window.localStorage.removeItem).mockReset(); mocked(window.open).mockReset(); + window.matchMedia = jest.fn((query) => ({ + matches: false, + media: query, + onchange: null, + addListener: jest.fn(), + removeListener: jest.fn(), + addEventListener: jest.fn(), + removeEventListener: jest.fn(), + dispatchEvent: jest.fn(), + })); });