VIDSOL-211-fixing unit test isolation

Unit tests were not isolated, tests were unstable, and reliability was compromised.

Author: johnny-quesada-developer

frontend/src/App.spec.tsx

@@ -1,5 +1,5 @@
 import { render, screen } from '@testing-library/react';
-import { describe, it, expect, vi, afterEach } from 'vitest';
+import { describe, it, expect, vi } from 'vitest';
 import { PropsWithChildren } from 'react';
 import App from './App';
 
@@ -36,10 +36,6 @@ vi.mock('./Context/ConfigProvider', () => ({
   default: ({ children }: PropsWithChildren) => children,
 }));
 
-afterEach(() => {
-  vi.clearAllMocks();
-});
-
 describe('App routing', () => {
   it('renders LandingPage on unknown route', () => {
     window.history.pushState({}, '', '/unknown');

frontend/src/Context/BackgroundPublisherProvider/useBackgroundPublisher/useBackgroundPublisher.spec.tsx

@@ -1,38 +1,21 @@
 import { act, cleanup, renderHook } from '@testing-library/react';
 import { afterAll, afterEach, beforeEach, describe, expect, it, Mock, vi } from 'vitest';
-import {
-  hasMediaProcessorSupport,
-  initPublisher,
-  Publisher,
-  PublisherProperties,
-} from '@vonage/client-sdk-video';
+import { hasMediaProcessorSupport, initPublisher, Publisher } from '@vonage/client-sdk-video';
 import EventEmitter from 'events';
-import useBackgroundPublisher from './useBackgroundPublisher';
+import useUserContext from '@hooks/useUserContext';
+import usePermissions from '@hooks/usePermissions';
+import useDevices from '@hooks/useDevices';
+import { allMediaDevices, defaultAudioDevice, defaultVideoDevice } from '@utils/mockData/device';
+import { DEVICE_ACCESS_STATUS } from '@utils/constants';
 import { UserContextType } from '../../user';
-import useUserContext from '../../../hooks/useUserContext';
-import usePermissions, { PermissionsHookType } from '../../../hooks/usePermissions';
-import useDevices from '../../../hooks/useDevices';
-import { AllMediaDevices } from '../../../types';
-import {
-  allMediaDevices,
-  defaultAudioDevice,
-  defaultVideoDevice,
-} from '../../../utils/mockData/device';
-import { DEVICE_ACCESS_STATUS } from '../../../utils/constants';
+import useBackgroundPublisher from './useBackgroundPublisher';
 import usePublisherOptions from '../../PublisherProvider/usePublisherOptions';
 
 vi.mock('@vonage/client-sdk-video');
-vi.mock('../../../hooks/useUserContext.tsx');
-vi.mock('../../../hooks/usePermissions.tsx');
-vi.mock('../../../hooks/useDevices.tsx');
+vi.mock('@hooks/useUserContext.tsx');
+vi.mock('@hooks/usePermissions.tsx');
+vi.mock('@hooks/useDevices.tsx');
 vi.mock('../../PublisherProvider/usePublisherOptions');
-const mockUseUserContext = useUserContext as Mock<[], UserContextType>;
-const mockUsePermissions = usePermissions as Mock<[], PermissionsHookType>;
-const mockUseDevices = useDevices as Mock<
-  [],
-  { allMediaDevices: AllMediaDevices; getAllMediaDevices: () => void }
->;
-const mockUsePublisherOptions = usePublisherOptions as Mock<[], PublisherProperties>;
 
 const defaultSettings = {
   publishAudio: false,
@@ -56,25 +39,25 @@ describe('useBackgroundPublisher', () => {
     applyVideoFilter: vi.fn(),
     clearVideoFilter: vi.fn(),
   }) as unknown as Publisher;
+
   const mockedInitPublisher = vi.fn();
   const mockedHasMediaProcessorSupport = vi.fn();
-  const consoleErrorSpy = vi.spyOn(console, 'error');
   const mockSetAccessStatus = vi.fn();
 
   beforeEach(() => {
-    vi.resetAllMocks();
-    mockUseUserContext.mockImplementation(() => mockUserContextWithDefaultSettings);
+    vi.spyOn(console, 'error');
+    vi.mocked(useUserContext).mockImplementation(() => mockUserContextWithDefaultSettings);
     (initPublisher as Mock).mockImplementation(mockedInitPublisher);
     (hasMediaProcessorSupport as Mock).mockImplementation(mockedHasMediaProcessorSupport);
-    mockUseDevices.mockReturnValue({
+    vi.mocked(useDevices).mockReturnValue({
       getAllMediaDevices: vi.fn(),
       allMediaDevices,
     });
-    mockUsePermissions.mockReturnValue({
+    vi.mocked(usePermissions).mockReturnValue({
       accessStatus: DEVICE_ACCESS_STATUS.PENDING,
       setAccessStatus: mockSetAccessStatus,
     });
-    mockUsePublisherOptions.mockReturnValue({
+    vi.mocked(usePublisherOptions).mockReturnValue({
       publishVideo: true,
     });
   });
@@ -104,7 +87,7 @@ describe('useBackgroundPublisher', () => {
 
       const { result } = renderHook(() => useBackgroundPublisher());
       await result.current.initBackgroundLocalPublisher();
-      expect(consoleErrorSpy).toHaveBeenCalledWith('initPublisher error: ', error);
+      expect(console.error).toHaveBeenCalledWith('initPublisher error: ', error);
     });
 
     it('should apply background high blur when initialized and changed background', async () => {
@@ -195,7 +178,7 @@ describe('useBackgroundPublisher', () => {
         await res.current.changeBackground('low-blur');
       });
 
-      expect(consoleErrorSpy).toHaveBeenCalledWith('Failed to apply background filter.');
+      expect(console.error).toHaveBeenCalledWith('Failed to apply background filter.');
     });
   });
 
@@ -261,7 +244,7 @@ describe('useBackgroundPublisher', () => {
         expect(emitAccessDeniedError).not.toThrow();
       });
 
-      expect(consoleErrorSpy).toHaveBeenCalledWith(
+      expect(console.error).toHaveBeenCalledWith(
         'Failed to query device permission for microphone: Error: Whoops'
       );
     });

frontend/src/Context/ConfigProvider/useConfig/useConfig.spec.tsx

@@ -1,9 +1,8 @@
-import { afterAll, afterEach, beforeAll, beforeEach, describe, expect, it, vi } from 'vitest';
+import { describe, expect, it, vi, beforeEach } from 'vitest';
 import { renderHook, waitFor } from '@testing-library/react';
 import useConfig, { AppConfig } from './useConfig';
 
 describe('useConfig', () => {
-  let nativeFetch: typeof global.fetch;
   const defaultConfig: AppConfig = {
     videoSettings: {
       allowCameraControl: true,
@@ -30,25 +29,11 @@ describe('useConfig', () => {
       showParticipantList: true,
     },
   };
-  const consoleErrorSpy = vi.spyOn(console, 'error');
-  const consoleInfoSpy = vi.spyOn(console, 'info');
-
-  beforeAll(() => {
-    nativeFetch = global.fetch;
-  });
 
   beforeEach(() => {
-    global.fetch = vi.fn().mockResolvedValue({
-      json: async () => ({}),
-    });
-  });
-
-  afterEach(() => {
-    vi.resetAllMocks();
-  });
-
-  afterAll(() => {
-    global.fetch = nativeFetch;
+    vi.spyOn(console, 'log').mockImplementation(vi.fn());
+    vi.spyOn(console, 'info').mockImplementation(vi.fn());
+    vi.spyOn(console, 'error').mockImplementation(vi.fn());
   });
 
   it('returns the default config when no config.json is loaded', async () => {
@@ -87,12 +72,14 @@ describe('useConfig', () => {
         showParticipantList: false,
       },
     };
-    global.fetch = vi.fn().mockResolvedValue({
+
+    vi.spyOn(global, 'fetch').mockResolvedValue({
       json: async () => mockConfig,
       headers: {
         get: () => 'application/json',
       },
-    });
+    } as unknown as Response);
+
     const { result } = renderHook(() => useConfig());
 
     await waitFor(() => {
@@ -102,30 +89,33 @@ describe('useConfig', () => {
 
   it('falls back to defaultConfig if fetch fails', async () => {
     const mockFetchError = new Error('mocking a failure to fetch');
-    global.fetch = vi.fn().mockRejectedValue(mockFetchError);
+
+    vi.spyOn(global, 'fetch').mockRejectedValue(mockFetchError as unknown as Response);
+
     const { result } = renderHook(() => useConfig());
 
     await waitFor(() => {
       expect(result.current).toEqual(defaultConfig);
     });
-    expect(consoleErrorSpy).toHaveBeenCalledWith('Error loading config:', expect.any(Error));
+    expect(console.error).toHaveBeenCalledWith('Error loading config:', expect.any(Error));
   });
 
   it('falls back to defaultConfig if no config.json is found', async () => {
-    global.fetch = vi.fn().mockResolvedValue({
+    vi.spyOn(global, 'fetch').mockResolvedValue({
       ok: false,
       status: 404,
       statusText: 'Not Found',
       headers: {
         get: () => 'text/html',
       },
-    });
+    } as unknown as Response);
+
     const { result } = renderHook(() => useConfig());
 
     await waitFor(() => {
       expect(result.current).toEqual(defaultConfig);
     });
-    expect(consoleInfoSpy).toHaveBeenCalledWith('No valid JSON found, using default config');
-    expect(consoleErrorSpy).not.toHaveBeenCalled();
+    expect(console.info).toHaveBeenCalledWith('No valid JSON found, using default config');
+    expect(console.error).not.toHaveBeenCalled();
   });
 });

frontend/src/Context/PreviewPublisherProvider/usePreviewPublisher/usePreviewPublisher.spec.tsx

@@ -1,30 +1,19 @@
-import { act, cleanup, renderHook } from '@testing-library/react';
-import { afterAll, afterEach, beforeEach, describe, expect, it, Mock, vi } from 'vitest';
+import { act, renderHook } from '@testing-library/react';
+import { afterAll, beforeEach, describe, expect, it, Mock, vi } from 'vitest';
 import { hasMediaProcessorSupport, initPublisher, Publisher } from '@vonage/client-sdk-video';
 import EventEmitter from 'events';
-import usePreviewPublisher from './usePreviewPublisher';
+import useUserContext from '@hooks/useUserContext';
+import usePermissions from '@hooks/usePermissions';
+import useDevices from '@hooks/useDevices';
+import { allMediaDevices, defaultAudioDevice, defaultVideoDevice } from '@utils/mockData/device';
+import { DEVICE_ACCESS_STATUS } from '@utils/constants';
 import { UserContextType } from '../../user';
-import useUserContext from '../../../hooks/useUserContext';
-import usePermissions, { PermissionsHookType } from '../../../hooks/usePermissions';
-import useDevices from '../../../hooks/useDevices';
-import { AllMediaDevices } from '../../../types';
-import {
-  allMediaDevices,
-  defaultAudioDevice,
-  defaultVideoDevice,
-} from '../../../utils/mockData/device';
-import { DEVICE_ACCESS_STATUS } from '../../../utils/constants';
+import usePreviewPublisher from './usePreviewPublisher';
 
 vi.mock('@vonage/client-sdk-video');
-vi.mock('../../../hooks/useUserContext.tsx');
-vi.mock('../../../hooks/usePermissions.tsx');
-vi.mock('../../../hooks/useDevices.tsx');
-const mockUseUserContext = useUserContext as Mock<[], UserContextType>;
-const mockUsePermissions = usePermissions as Mock<[], PermissionsHookType>;
-const mockUseDevices = useDevices as Mock<
-  [],
-  { allMediaDevices: AllMediaDevices; getAllMediaDevices: () => void }
->;
+vi.mock('@hooks/useUserContext.tsx');
+vi.mock('@hooks/usePermissions.tsx');
+vi.mock('@hooks/useDevices.tsx');
 
 const defaultSettings = {
   publishAudio: false,
@@ -50,28 +39,24 @@ describe('usePreviewPublisher', () => {
   }) as unknown as Publisher;
   const mockedInitPublisher = vi.fn();
   const mockedHasMediaProcessorSupport = vi.fn();
-  const consoleErrorSpy = vi.spyOn(console, 'error');
   const mockSetAccessStatus = vi.fn();
 
   beforeEach(() => {
-    vi.resetAllMocks();
-    mockUseUserContext.mockImplementation(() => mockUserContextWithDefaultSettings);
+    vi.spyOn(console, 'error').mockImplementation(vi.fn());
+
+    vi.mocked(useUserContext).mockImplementation(() => mockUserContextWithDefaultSettings);
     (initPublisher as Mock).mockImplementation(mockedInitPublisher);
     (hasMediaProcessorSupport as Mock).mockImplementation(mockedHasMediaProcessorSupport);
-    mockUseDevices.mockReturnValue({
+    vi.mocked(useDevices).mockReturnValue({
       getAllMediaDevices: vi.fn(),
       allMediaDevices,
     });
-    mockUsePermissions.mockReturnValue({
+    vi.mocked(usePermissions).mockReturnValue({
       accessStatus: DEVICE_ACCESS_STATUS.PENDING,
       setAccessStatus: mockSetAccessStatus,
     });
   });
 
-  afterEach(() => {
-    cleanup();
-  });
-
   describe('initLocalPublisher', () => {
     it('should call initLocalPublisher', async () => {
       mockedInitPublisher.mockReturnValue(mockPublisher);
@@ -93,7 +78,7 @@ describe('usePreviewPublisher', () => {
 
       const { result } = renderHook(() => usePreviewPublisher());
       await result.current.initLocalPublisher();
-      expect(consoleErrorSpy).toHaveBeenCalledWith('initPublisher error: ', error);
+      expect(console.error).toHaveBeenCalledWith('initPublisher error: ', error);
     });
 
     it('should apply background high blur when initialized and changed background', async () => {
@@ -180,7 +165,7 @@ describe('usePreviewPublisher', () => {
         await res.current.changeBackground('low-blur');
       });
 
-      expect(consoleErrorSpy).toHaveBeenCalledWith('Failed to apply background filter.');
+      expect(console.error).toHaveBeenCalledWith('Failed to apply background filter.');
     });
   });
 
@@ -246,7 +231,7 @@ describe('usePreviewPublisher', () => {
         expect(emitAccessDeniedError).not.toThrow();
       });
 
-      expect(consoleErrorSpy).toHaveBeenCalledWith(
+      expect(console.error).toHaveBeenCalledWith(
         'Failed to query device permission for microphone: Error: Whoops'
       );
     });