Refactor to use globalThis for matchMedia across theme helpers and tests

Author: OscarFava

frontend/src/Context/Theme/helpers/getTokensByMode.ts

@@ -17,7 +17,7 @@ const getTokensByMode = (mode: 'light' | 'dark') => {
         let key = originalKey;
 
         if (key.includes('-')) {
-          key = key.replace(/-([a-z])/g, (_, char) => char.toUpperCase());
+          key = key.replaceAll(/-([a-z])/g, (_, char) => char.toUpperCase());
         }
 
         acc[key as ColorKey] = colors[originalKey as keyof typeof colors].value;

frontend/src/Context/Theme/helpers/isDarkMode.ts

@@ -1,5 +1,5 @@
 function isDarkMode(): boolean {
-  return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+  return globalThis.matchMedia && globalThis.matchMedia('(prefers-color-scheme: dark)').matches;
 }
 
 export default isDarkMode;

frontend/src/Context/Theme/hooks/useSynchronizeThemeAndMedia.ts

@@ -11,7 +11,7 @@ const useSynchronizeThemeAndMedia = ({
   const modeRef = useStableRef(() => (isDarkMode() ? 'dark' : 'light'), [{}]);
 
   useEffect(() => {
-    const isMatchMediaSupported = !!window.matchMedia;
+    const isMatchMediaSupported = !!globalThis.matchMedia;
 
     if (!isMatchMediaSupported) {
       return;
@@ -30,7 +30,7 @@ const useSynchronizeThemeAndMedia = ({
 
     const subscribeToMediaChanges = () => {
       const abort = new AbortController();
-      const media = window.matchMedia('(prefers-color-scheme: dark)');
+      const media = globalThis.matchMedia('(prefers-color-scheme: dark)');
 
       media.addEventListener('change', toggleTheme);
 

frontend/src/components/GoodBye/GoodbyeMessage/GoodbyeMessage.spec.tsx

@@ -26,14 +26,14 @@ const matchMediaCommon = {
 };
 
 describe('GoodbyeMessage', () => {
-  const originalMatchMedia = window.matchMedia;
+  const originalMatchMedia = globalThis.matchMedia;
 
   beforeEach(() => {
     (useNavigate as Mock).mockReturnValue(mockNavigate);
   });
 
   afterAll(() => {
-    window.matchMedia = originalMatchMedia;
+    globalThis.matchMedia = originalMatchMedia;
   });
 
   it('renders the header', () => {
@@ -70,7 +70,7 @@ describe('GoodbyeMessage', () => {
   });
 
   it('renders correctly on screen less than SMALL_VIEWPORT', () => {
-    window.matchMedia = vi.fn().mockImplementation((query) => ({
+    globalThis.matchMedia = vi.fn().mockImplementation((query) => ({
       matches: new RegExp(`\\(max-width:\\s*${SMALL_VIEWPORT}px\\)`).test(query),
       media: query,
       ...matchMediaCommon,
@@ -88,7 +88,7 @@ describe('GoodbyeMessage', () => {
   });
 
   it('renders correctly on screen greater than SMALL_VIEWPORT', () => {
-    window.matchMedia = vi.fn().mockImplementation((query) => ({
+    globalThis.matchMedia = vi.fn().mockImplementation((query) => ({
       matches: new RegExp(`\\(min-width:\\s*${SMALL_VIEWPORT + 1}px\\)`).test(query),
       media: query,
       ...matchMediaCommon,

frontend/src/hooks/tests/useIsSmallViewport.spec.tsx

@@ -12,18 +12,18 @@ const matchMediaCommon = {
 };
 
 describe('useIsSmallViewport', () => {
-  const originalMatchMedia = window.matchMedia;
+  const originalMatchMedia = globalThis.matchMedia;
 
   beforeEach(() => {
-    window.matchMedia = vi.fn().mockImplementation((query) => ({
+    globalThis.matchMedia = vi.fn().mockImplementation((query) => ({
       matches: new RegExp(`\\(max-width:\\s*${SMALL_VIEWPORT + 1}px\\)`).test(query),
       media: query,
       ...matchMediaCommon,
     }));
   });
 
   afterAll(() => {
-    window.matchMedia = originalMatchMedia;
+    globalThis.matchMedia = originalMatchMedia;
   });
 
   it('should return false when window width is greater than 768px', () => {
@@ -33,7 +33,7 @@ describe('useIsSmallViewport', () => {
   });
 
   it('should return true when window width is less than or equal to 768px', () => {
-    window.matchMedia = vi.fn().mockImplementation((query) => ({
+    globalThis.matchMedia = vi.fn().mockImplementation((query) => ({
       matches: new RegExp(`\\(max-width:\\s*${SMALL_VIEWPORT}px\\)`).test(query),
       media: query,
       ...matchMediaCommon,

frontend/src/hooks/tests/useIsTabletViewport.spec.tsx

@@ -12,28 +12,28 @@ const matchMediaCommon = {
 };
 
 describe('useIsTabletViewport', () => {
-  const originalMatchMedia = window.matchMedia;
+  const originalMatchMedia = globalThis.matchMedia;
 
   beforeEach(() => {
-    window.matchMedia = vi.fn().mockImplementation((query) => ({
+    globalThis.matchMedia = vi.fn().mockImplementation((query) => ({
       matches: new RegExp(`\\(max-width:\\s*${TABLET_VIEWPORT + 1}px\\)`).test(query),
       media: query,
       ...matchMediaCommon,
     }));
   });
 
   afterAll(() => {
-    window.matchMedia = originalMatchMedia;
+    globalThis.matchMedia = originalMatchMedia;
   });
 
-  it('should return false when window width is greater than 899px', () => {
+  it('should return false when globalThis width is greater than 899px', () => {
     const { result } = renderHook(() => useIsTabletViewport());
 
     expect(result.current).toBe(false);
   });
 
-  it('should return true when window width is less than or equal to 899px', () => {
-    window.matchMedia = vi.fn().mockImplementation((query) => ({
+  it('should return true when globalThis width is less than or equal to 899px', () => {
+    globalThis.matchMedia = vi.fn().mockImplementation((query) => ({
       matches: new RegExp(`\\(max-width:\\s*${TABLET_VIEWPORT}px\\)`).test(query),
       media: query,
       ...matchMediaCommon,