VIDSOL-619: Fix tests for Mirror Self View Toggle feature

- Add mirrorSelfView: true to user.spec.tsx expected defaultSettings
- Add UserProvider wrapper to BackgroundVideoContainer.spec.tsx (component now uses useUserContext)
- Update DeviceSettingsMenu.spec.tsx: add providers.user and userContext to RenderOptions, use queryAllByTestId for dropdown-separator (two separators now rendered)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: czoli1976

frontend/src/Context/tests/user.spec.tsx

@@ -43,6 +43,7 @@ describe('UserContext', () => {
         audioSource: undefined,
         videoSource: undefined,
         publishCaptions: true,
+        mirrorSelfView: true,
       },
       issues: {
         reconnections: 0,

frontend/src/components/BackgroundEffects/BackgroundVideoContainer/BackgroundVideoContainer.spec.tsx

@@ -1,22 +1,28 @@
 import { act, render, screen, waitFor } from '@testing-library/react';
 import { describe, expect, it, vi } from 'vitest';
+import { ReactNode } from 'react';
+import UserProvider from '../../../Context/user';
 import BackgroundVideoContainer from './BackgroundVideoContainer';
 
 vi.mock('../../../utils/waitUntilPlaying', () => ({
   __esModule: true,
   default: vi.fn(() => Promise.resolve()),
 }));
 
+const wrapper = ({ children }: { children: ReactNode }) => <UserProvider>{children}</UserProvider>;
+
 describe('BackgroundVideoContainer', () => {
   it('shows message when video is not enabled', () => {
-    render(<BackgroundVideoContainer isParentVideoEnabled={false} />);
+    render(<BackgroundVideoContainer isParentVideoEnabled={false} />, { wrapper });
     expect(screen.getByText(/Your camera is turned off/i)).toBeInTheDocument();
   });
 
   it('renders video element when video is enabled', async () => {
     const videoEl = document.createElement('video');
     act(() => {
-      render(<BackgroundVideoContainer isParentVideoEnabled publisherVideoElement={videoEl} />);
+      render(<BackgroundVideoContainer isParentVideoEnabled publisherVideoElement={videoEl} />, {
+        wrapper,
+      });
     });
     await waitFor(() => {
       expect(videoEl.classList.contains('video__element')).toBe(true);
@@ -27,7 +33,9 @@ describe('BackgroundVideoContainer', () => {
   it('shows loading spinner while video is loading', async () => {
     const videoEl = document.createElement('video');
     act(() => {
-      render(<BackgroundVideoContainer isParentVideoEnabled publisherVideoElement={videoEl} />);
+      render(<BackgroundVideoContainer isParentVideoEnabled publisherVideoElement={videoEl} />, {
+        wrapper,
+      });
     });
     await waitFor(() => {
       expect(screen.getByRole('progressbar')).toBeInTheDocument();

frontend/src/components/MeetingRoom/DeviceSettingsMenu/DeviceSettingsMenu.spec.tsx

@@ -314,12 +314,12 @@ describe('DeviceSettingsMenu Component', () => {
       );
 
       await waitFor(() => {
-        expect(screen.queryByTestId('dropdown-separator')).toBeVisible();
+        expect(screen.queryAllByTestId('dropdown-separator')[0]).toBeVisible();
         expect(screen.queryByText('Video effects')).toBeVisible();
       });
     });
 
-    it('and does not render the dropdown separator and video effects option when media processor is not supported', async () => {
+    it('and does not render the video effects option when media processor is not supported', async () => {
       render(
         <DeviceSettingsMenuComponent
           deviceType={deviceType}
@@ -333,12 +333,12 @@ describe('DeviceSettingsMenu Component', () => {
       );
 
       await waitFor(() => {
-        expect(screen.queryByTestId('dropdown-separator')).not.toBeInTheDocument();
-        expect(screen.queryByText('video effects')).not.toBeInTheDocument();
+        expect(screen.queryByText('Video effects')).not.toBeInTheDocument();
+        expect(screen.queryByText('Mirror Self View')).toBeInTheDocument();
       });
     });
 
-    it('and does not render the dropdown separator and video effects option when allowBackgroundEffects is false', async () => {
+    it('and does not render the video effects option when allowBackgroundEffects is false', async () => {
       render(
         <DeviceSettingsMenuComponent
           deviceType={deviceType}
@@ -364,20 +364,22 @@ describe('DeviceSettingsMenu Component', () => {
       );
 
       await waitFor(() => {
-        expect(screen.queryByTestId('dropdown-separator')).not.toBeInTheDocument();
-        expect(screen.queryByText('video effects')).not.toBeInTheDocument();
+        expect(screen.queryByText('Video effects')).not.toBeInTheDocument();
+        expect(screen.queryByText('Mirror Self View')).toBeInTheDocument();
       });
     });
   });
 });
 
 type RenderOptions = {
   appConfigContext?: ProviderOptions['AppConfigContext'];
+  userContext?: ProviderOptions['UserContext'];
 };
 
-function render(ui: ReactElement, { appConfigContext }: RenderOptions = {}) {
-  const { wrapper, ...context } = makeTestProvider([providers.appConfig], {
+function render(ui: ReactElement, { appConfigContext, userContext }: RenderOptions = {}) {
+  const { wrapper, ...context } = makeTestProvider([providers.appConfig, providers.user], {
     appConfigContext,
+    userContext,
   });
 
   return {