Fix failing unit tests

ant-media · Dec 17, 2024 · d3e82b8 · d3e82b8
1 parent 4098f3a
commit d3e82b8
Show file tree

Hide file tree

Showing 12 changed files with 232 additions and 274 deletions.
diff --git a/react/src/Components/Cards/OthersCard.js b/react/src/Components/Cards/OthersCard.js
@@ -48,7 +48,7 @@ function OthersCard(props) {
   const others = othersNames;//.sort();
 
   return (
-    <div className="others-tile-inner" style={{background: theme.palette.themeColor[71]}}>
+    <div className="others-tile-inner" style={{background: theme.palette.themeColor?.[71]}}>
       <CustomizedAvatarGroup sx={{justifyContent: "center"}}>
         {others.map(({username}, index) => {
           if (username?.length > 0) {

diff --git a/react/src/Components/Footer/Components/MicButton.js b/react/src/Components/Footer/Components/MicButton.js
@@ -71,7 +71,7 @@ function MicButton(props) {
           <SvgIcon
               size={40}
               name={props?.isMicMuted ? 'muted-microphone' : 'microphone'}
-              color={props?.isMicMuted ? theme.palette.iconColor.primary : theme.palette.darkIconColor.primary}
+              color={props?.isMicMuted ? theme.palette.iconColor?.primary : theme.palette.darkIconColor?.primary}
           />
         </CustomizedBtn>
       </Tooltip>

diff --git a/react/src/__tests__/Components/Cards/OthersCard.test.js b/react/src/__tests__/Components/Cards/OthersCard.test.js
@@ -1,52 +1,44 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import { ConferenceContext } from 'pages/AntMedia';
-import OthersCard from 'Components/Cards/OthersCard';
-import theme from "styles/theme";
-import { ThemeProvider } from '@mui/material/styles';
-import {ThemeList} from "styles/themeList";
+import React from "react";
+import { render } from "@testing-library/react";
+import OthersCard from "Components/Cards/OthersCard";
+import { ThemeProvider, createTheme } from "@mui/material/styles";
 
-// Mock the context value
-const contextValue = {
-  allParticipants: {
-    'test-stream-id': {
-      role: 'host',
-      participantID: 'test-participant-id',
-      streamID: 'test-stream-id',
-      videoTrack: 'test-video-track',
-      audioTrack: 'test-audio-track',
-      videoLabel: 'test-video-label',
+// Mock theme with required properties
+const mockTheme = createTheme({
+  palette: {
+    themeColor: {
+      71: "#123456", // Replace with a mock color
+      80: "#654321",
+      85: "#abcdef",
     },
   },
-  publishStreamId: 'test-stream-id',
-};
-
-// Mock the useContext hook
-jest.mock('react', () => ({
-  ...jest.requireActual('react'),
-  useContext: jest.fn(),
-}));
-
-describe('OthersCard Component', () => {
-
-  beforeEach(() => {
-    // Reset the mock implementation before each test
-    jest.clearAllMocks();
+  breakpoints: {
+    values: {
+      xs: 0,
+      sm: 600,
+      md: 960,
+      lg: 1280,
+      xl: 1920,
+    },
+  },
+});
 
-    React.useContext.mockImplementation(input => {
-      if (input === ConferenceContext) {
-        return contextValue;
-      }
-      return jest.requireActual('react').useContext(input);
-    });
-  });
+// Mock props for the component
+const props = {
+  allParticipants: {
+    "test-stream-id": { name: "John Doe" },
+    "another-stream-id": { name: "Jane Smith" },
+  },
+  publishStreamId: "test-stream-id",
+  playingParticipants: [{ streamId: "test-stream-id" }],
+};
 
-  it('renders without crashing', () => {
+describe("OthersCard Component", () => {
+  it("renders without crashing", () => {
     render(
-      <ThemeProvider theme={theme(ThemeList.Green)}>
-        <OthersCard/>
-      </ThemeProvider>
+        <ThemeProvider theme={mockTheme}>
+          <OthersCard {...props} />
+        </ThemeProvider>
     );
   });
-
 });
diff --git a/react/src/__tests__/Components/EffectsTab.test.js b/react/src/__tests__/Components/EffectsTab.test.js
@@ -16,25 +16,9 @@ const mockOpfsRoot = {
   })),
 };
 
-const contextValue = {
-  allParticipants: {
-    'test-stream-id': {
-      role: 'host',
-      participantID: 'test-participant-id',
-      streamID: 'test-stream-id',
-      videoTrack: 'test-video-track',
-      audioTrack: 'test-audio-track',
-      videoLabel: 'test-video-label',
-    },
-  },
-  publishStreamId: 'test-stream-id',
-  setVirtualBackgroundImage: jest.fn(),
-};
-
 // Mock the useContext hook
 jest.mock('react', () => ({
   ...jest.requireActual('react'),
-  useContext: jest.fn(),
 }));
 
 describe('Effects Tab Component', () => {
@@ -49,34 +33,34 @@ describe('Effects Tab Component', () => {
       },
       writable: true,
     });
-
-    React.useContext.mockImplementation(input => {
-      if (input === ConferenceContext) {
-        return contextValue;
-      }
-      return jest.requireActual('react').useContext(input);
-    });
   });
 
   it('renders without crashing', () => {
     render(
         <ThemeProvider theme={theme(ThemeList.Green)}>
-          <EffectsTab />
+          <EffectsTab
+              setVirtualBackgroundImage={jest.fn()}
+              handleBackgroundReplacement={jest.fn()}
+          />
         </ThemeProvider>
       );
   });
 
   describe('getBackgroundImages', () => {
     it('returns an empty array when no environment variable or custom images are provided', () => {
       process.env.REACT_APP_VIRTUAL_BACKGROUND_IMAGES = undefined;
+      const setVirtualBackgroundImageMock = jest.fn();
       const {getByTestId} = render(
           <ThemeProvider theme={theme(ThemeList.Green)}>
-            <EffectsTab />
+            <EffectsTab
+                setVirtualBackgroundImage={setVirtualBackgroundImageMock}
+                handleBackgroundReplacement={jest.fn()}
+            />
           </ThemeProvider>
       );
       let customVirtualBackgroundButton = getByTestId('custom-virtual-background-button');
       customVirtualBackgroundButton.click();
-      expect(contextValue.setVirtualBackgroundImage).toHaveBeenCalled();
+      expect(setVirtualBackgroundImageMock).toHaveBeenCalled();
     });
 
 

diff --git a/react/src/__tests__/Components/Footer/Components/CameraButton.test.js b/react/src/__tests__/Components/Footer/Components/CameraButton.test.js
@@ -4,44 +4,38 @@ import { render } from '@testing-library/react';
 import { ConferenceContext } from 'pages/AntMedia';
 import CameraButton from 'Components/Footer/Components/CameraButton';
 
-// Mock the context value
-const contextValue = {
-  cameraButtonDisabled: true,
-};
-
 // Mock the useContext hook
 jest.mock('react', () => ({
   ...jest.requireActual('react'),
-  useContext: jest.fn(),
 }));
 
 describe('Camera Button Component', () => {
 
   beforeEach(() => {
     // Reset the mock implementation before each test
     jest.clearAllMocks();
-
-    React.useContext.mockImplementation(input => {
-      if (input === ConferenceContext) {
-        return contextValue;
-      }
-      return jest.requireActual('react').useContext(input);
-    });
   });
 
 
   it('renders without crashing', () => {
     render(
-      <CameraButton />
+      <CameraButton
+          cameraButtonDisabled={true}
+          isCamTurnedOff={true}
+          onTurnOffCamera={jest.fn()}
+          onTurnOnCamera= {jest.fn()}
+      />
     );
   });
 
   it('check if camera button disabled if no cam available ', () => {
-
-    contextValue.cameraButtonDisabled = true;
-
     const { container, getByText, getByRole } = render(
-      <CameraButton />
+      <CameraButton
+          cameraButtonDisabled={true}
+          isCamTurnedOff={true}
+          onTurnOffCamera={jest.fn()}
+          onTurnOnCamera= {jest.fn()}
+      />
     );
 
     console.log(container.outerHTML);
@@ -53,11 +47,13 @@ describe('Camera Button Component', () => {
   });
 
   it('check if camera button enabled if cam devices are available ', () => {
-
-    contextValue.cameraButtonDisabled = false;
-
     const { container, getByText, getByRole } = render(
-      <CameraButton />
+      <CameraButton
+          cameraButtonDisabled={false}
+          isCamTurnedOff={true}
+          onTurnOffCamera={jest.fn()}
+          onTurnOnCamera= {jest.fn()}
+      />
     );
 
     console.log(container.outerHTML);

diff --git a/react/src/__tests__/Components/Footer/Components/EndCallButton.test.js b/react/src/__tests__/Components/Footer/Components/EndCallButton.test.js
@@ -4,35 +4,24 @@ import { render } from '@testing-library/react';
 import { ConferenceContext } from 'pages/AntMedia';
 import EndCallButton from "../../../../Components/Footer/Components/EndCallButton";
 
-// Mock the context value
-const contextValue = {
-  setLeftTheRoom: jest.fn(),
-};
-
 // Mock the useContext hook
 jest.mock('react', () => ({
   ...jest.requireActual('react'),
-  useContext: jest.fn(),
 }));
 
 describe('End Call Button Component', () => {
 
   beforeEach(() => {
     // Reset the mock implementation before each test
     jest.clearAllMocks();
-
-    React.useContext.mockImplementation(input => {
-      if (input === ConferenceContext) {
-        return contextValue;
-      }
-      return jest.requireActual('react').useContext(input);
-    });
   });
 
 
   it('renders without crashing', () => {
     render(
-      <EndCallButton />
+      <EndCallButton
+          onLeaveRoom={jest.fn()}
+      />
     );
   });
 

diff --git a/react/src/__tests__/Components/Footer/Components/FakeParticipantButton.test.js b/react/src/__tests__/Components/Footer/Components/FakeParticipantButton.test.js
@@ -1,38 +1,27 @@
 // src/FakeParticipantButton.test.js
 import React from 'react';
 import { render } from '@testing-library/react';
-import { ConferenceContext } from 'pages/AntMedia';
 import FakeParticipantButton from "../../../../Components/Footer/Components/FakeParticipantButton";
 
-// Mock the context value
-const contextValue = {
-  setLeftTheRoom: jest.fn(),
-};
-
 // Mock the useContext hook
 jest.mock('react', () => ({
   ...jest.requireActual('react'),
-  useContext: jest.fn(),
 }));
 
 describe('Fake Participant Button Component', () => {
 
   beforeEach(() => {
     // Reset the mock implementation before each test
     jest.clearAllMocks();
-
-    React.useContext.mockImplementation(input => {
-      if (input === ConferenceContext) {
-        return contextValue;
-      }
-      return jest.requireActual('react').useContext(input);
-    });
   });
 
 
   it('renders without crashing', () => {
     render(
-      <FakeParticipantButton />
+      <FakeParticipantButton
+          increment={false}
+          onAction={jest.fn()}
+      />
     );
   });