test(theme): increase coverage (#1079)

Author: setchy

src/utils/theme.test.ts

@@ -1,34 +1,32 @@
 import { Theme } from '../types';
-import { setTheme } from './theme';
+import { getTheme, setTheme } from './theme';
 
-import * as appearanceHelpers from './theme';
-
-describe('utils/appearance.ts', () => {
-  beforeAll(() => {
-    jest.spyOn(appearanceHelpers, 'setLightMode');
-    jest.spyOn(appearanceHelpers, 'setDarkMode');
-  });
+describe('utils/theme.ts', () => {
+  const htmlElement = document.createElement('html');
 
   beforeEach(() => {
-    // @ts-ignore
-    appearanceHelpers.setLightMode.mockReset();
-    // @ts-ignore
-    appearanceHelpers.setDarkMode.mockReset();
+    document.querySelector = jest.fn(() => htmlElement);
   });
 
   it('should change to light mode', () => {
     setTheme(Theme.LIGHT);
-    expect(appearanceHelpers.setLightMode).toHaveBeenCalledTimes(1);
+    expect(getTheme()).toBe(Theme.LIGHT);
   });
 
   it('should change to dark mode', () => {
     setTheme(Theme.DARK);
-    expect(appearanceHelpers.setDarkMode).toHaveBeenCalledTimes(1);
+    expect(getTheme()).toBe(Theme.DARK);
   });
 
   it("should use the system's mode - light", () => {
+    Object.defineProperty(window, 'matchMedia', {
+      writable: true,
+      value: jest.fn().mockImplementation((query) => ({
+        matches: false,
+      })),
+    });
     setTheme();
-    expect(appearanceHelpers.setLightMode).toHaveBeenCalledTimes(1);
+    expect(getTheme()).toBe(Theme.LIGHT);
   });
 
   it("should use the system's mode - dark", () => {
@@ -39,6 +37,6 @@ describe('utils/appearance.ts', () => {
       })),
     });
     setTheme();
-    expect(appearanceHelpers.setDarkMode).toHaveBeenCalledTimes(1);
+    expect(getTheme()).toBe(Theme.DARK);
   });
 });

src/utils/theme.ts

@@ -8,11 +8,13 @@ export function getTheme(): Theme {
   return Theme.LIGHT;
 }
 
-export const setLightMode = () =>
+export const setLightMode = () => {
   document.querySelector('html').classList.remove('dark');
+};
 
-export const setDarkMode = () =>
+export const setDarkMode = () => {
   document.querySelector('html').classList.add('dark');
+};
 
 export const setTheme = (mode?: Theme) => {
   switch (mode) {