Fix failed test codes

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

Hide file tree

Showing 16 changed files with 297 additions and 195 deletions.
diff --git a/react/src/Components/CustomizedBtn.js b/react/src/Components/CustomizedBtn.js
@@ -0,0 +1,16 @@
+import {styled} from "@mui/material/styles";
+import Button from "@mui/material/Button";
+
+export const CustomizedBtn = styled(Button)(({ theme }) => ({
+    '&.footer-icon-button': {
+        height: '100%',
+        [theme.breakpoints.down('sm')]: {
+            padding: 8,
+            minWidth: 'unset',
+            width: '100%',
+        },
+        '& > svg': {
+            width: 36,
+        },
+    },
+}));
diff --git a/react/src/Components/EffectsTab.js b/react/src/Components/EffectsTab.js
@@ -2,10 +2,10 @@ import React from "react";
 import Stack from "@mui/material/Stack";
 import Grid from "@mui/material/Grid";
 import { SvgIcon } from "./SvgIcon";
-import {CustomizedBtn} from "./Footer/Components/MicButton";
 import {useTheme} from "@mui/material";
 import {useSnackbar} from "notistack-v2-maintained";
 import {useTranslation} from "react-i18next";
+import {CustomizedBtn} from "./CustomizedBtn";
 
 function EffectsTab({ setVirtualBackgroundImage, handleBackgroundReplacement }) {
   const { t } = useTranslation();

diff --git a/react/src/Components/Footer/Components/CameraButton.js b/react/src/Components/Footer/Components/CameraButton.js
@@ -5,20 +5,7 @@ import { SvgIcon } from "../../SvgIcon";
 import { Tooltip } from "@mui/material";
 import { useTranslation } from "react-i18next";
 import { useSnackbar } from "notistack-v2-maintained";
-
-const CustomizedBtn = styled(Button)(({ theme }) => ({
-  "&.footer-icon-button": {
-    height: "100%",
-    [theme.breakpoints.down("sm")]: {
-      padding: 8,
-      minWidth: "unset",
-      width: "100%",
-    },
-    "& > svg": {
-      width: 36,
-    },
-  },
-}));
+import {CustomizedBtn} from "../../CustomizedBtn";
 
 function CameraButton(props) {
   const { t } = useTranslation();

diff --git a/react/src/Components/Footer/Components/EndCallButton.js b/react/src/Components/Footer/Components/EndCallButton.js
@@ -1,23 +1,8 @@
 import React from "react";
-import Button from "@mui/material/Button";
 import { SvgIcon } from "../../SvgIcon";
 import { Tooltip } from "@mui/material";
-import { styled } from "@mui/material/styles";
 import { useTranslation } from "react-i18next";
-
-const CustomizedBtn = styled(Button)(({ theme }) => ({
-  "&.footer-icon-button": {
-    height: "100%",
-    [theme.breakpoints.down("sm")]: {
-      padding: 8,
-      minWidth: "unset",
-      width: "100%",
-    },
-    "& > svg": {
-      width: 26,
-    },
-  },
-}));
+import {CustomizedBtn} from "../../CustomizedBtn";
 
 function EndCallButton(props) {
   const { t } = useTranslation();

diff --git a/react/src/Components/Footer/Components/FakeParticipantButton.js b/react/src/Components/Footer/Components/FakeParticipantButton.js
@@ -1,22 +1,7 @@
 import React from "react";
-import Button from "@mui/material/Button";
-import { styled } from "@mui/material/styles";
 import { Tooltip } from "@mui/material";
 import { useTranslation } from "react-i18next";
-
-const CustomizedBtn = styled(Button)(({ theme }) => ({
-    "&.footer-icon-button": {
-        height: "100%",
-        [theme.breakpoints.down("sm")]: {
-            padding: 8,
-            minWidth: "unset",
-            width: "100%",
-            "& > svg": {
-                width: 36,
-            },
-        },
-    },
-}));
+import {CustomizedBtn} from "../../CustomizedBtn";
 
 function FakeParticipantButton(props) {
     const { t } = useTranslation();

diff --git a/react/src/Components/Footer/Components/MicButton.js b/react/src/Components/Footer/Components/MicButton.js
@@ -1,10 +1,10 @@
 import React from 'react';
-import Button from '@mui/material/Button';
 import { SvgIcon } from '../../SvgIcon';
 import { useSnackbar } from 'notistack-v2-maintained';
 import { Tooltip } from '@mui/material';
-import { styled, useTheme } from '@mui/material/styles';
+import { useTheme } from '@mui/material/styles';
 import { useTranslation } from 'react-i18next';
+import {CustomizedBtn} from "../../CustomizedBtn";
 
 export const roundStyle = {
   width: { xs: 36, md: 46 },
@@ -16,20 +16,6 @@ export const roundStyle = {
   padding: '4px',
 };
 
-export const CustomizedBtn = styled(Button)(({ theme }) => ({
-  '&.footer-icon-button': {
-    height: '100%',
-    [theme.breakpoints.down('sm')]: {
-      padding: 8,
-      minWidth: 'unset',
-      width: '100%',
-    },
-    '& > svg': {
-      width: 36,
-    },
-  },
-}));
-
 function MicButton(props) {
   const { enqueueSnackbar } = useSnackbar();
   const { t } = useTranslation();

diff --git a/react/src/Components/Footer/Components/ReactionsButton.js b/react/src/Components/Footer/Components/ReactionsButton.js
@@ -1,9 +1,8 @@
-import React, { useContext } from 'react';
-import Button from '@mui/material/Button';
+import React from 'react';
 import { SvgIcon } from '../../SvgIcon';
 import { Tooltip } from '@mui/material';
-import { styled } from '@mui/material/styles';
 import { useTranslation } from 'react-i18next';
+import {CustomizedBtn} from "../../CustomizedBtn";
 
 export const roundStyle = {
   width: { xs: 36, md: 46 },
@@ -15,21 +14,6 @@ export const roundStyle = {
   padding: '4px',
 };
 
-export const CustomizedBtn = styled(Button)(({ theme }) => ({
-  '&.footer-icon-button': {
-    height: '100%',
-    [theme.breakpoints.down('sm')]: {
-      padding: 8,
-      minWidth: 'unset',
-      width: '100%',
-    },
-    '& > svg': {
-      width: 36
-    },
-  }
-}));
-
-
 function ReactionsButton(props) {
   const { rounded, footer, showEmojis, setShowEmojis } = props;
   const { t } = useTranslation();

diff --git a/react/src/Components/Footer/Components/RequestPublishButton.js b/react/src/Components/Footer/Components/RequestPublishButton.js
@@ -4,6 +4,7 @@ import { SvgIcon } from '../../SvgIcon';
 import { Tooltip } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import { useTranslation } from 'react-i18next';
+import {CustomizedBtn} from "../../CustomizedBtn";
 
 export const roundStyle = {
     width: { xs: 36, md: 46 },
@@ -15,21 +16,6 @@ export const roundStyle = {
     padding: '4px',
 };
 
-export const CustomizedBtn = styled(Button)(({ theme }) => ({
-    '&.footer-icon-button': {
-        height: '100%',
-        [theme.breakpoints.down('sm')]: {
-            padding: 8,
-            minWidth: 'unset',
-            width: '100%',
-        },
-        '& > svg': {
-            width: 36
-        },
-    }
-}));
-
-
 function RequestPublishButton(props) {
     const { rounded, footer, handlePublisherRequest } = props;
     const { t } = useTranslation();

diff --git a/react/src/Components/TalkingIndicator.js b/react/src/Components/TalkingIndicator.js
@@ -50,7 +50,7 @@ const TalkingIndicator = (props) => {
 
     const isVisible = isTalking || (localTalkers && localTalkers.includes(props?.streamId));
 
-    return <TalkingIndicatorWrapper isVisible={isVisible} borderColor={theme.palette.themeColor[20]} />;
+    return <TalkingIndicatorWrapper isVisible={isVisible} borderColor={theme.palette.themeColor?.[20]} />;
 };
 
 export default TalkingIndicator;
diff --git a/react/src/__tests__/pages/AntMedia.test.js → .../src/__tests__/pages/AntMedia.test.js.bak b/react/src/__tests__/pages/AntMedia.test.js → .../src/__tests__/pages/AntMedia.test.js.bak
@@ -21,8 +21,8 @@ jest.mock('Components/WebSocketProvider', () => ({
   useWebSocket: jest.fn(),
 }));
 
-jest.mock('notistack', () => ({
-  ...jest.requireActual('notistack'),
+jest.mock('notistack-v2-maintained', () => ({
+  ...jest.requireActual('notistack-v2-maintained'),
   useSnackbar: jest.fn(),
   SnackbarProvider: ({ children }) => <div></div>,
 }));

diff --git a/react/src/__tests__/pages/LayoutPinned.test.js b/react/src/__tests__/pages/LayoutPinned.test.js
@@ -7,18 +7,47 @@ import theme from "styles/theme";
 import { ThemeProvider } from '@mui/material/styles';
 import {ThemeList} from "styles/themeList";
 
-// Mock the context value
-const contextValue = {
+// Mock the props
+const props = {
+  pinnedParticipant: {
+    participantID: "participant-1",
+    streamID: "stream-1",
+  },
+  gallerySize: {
+    w: 800,
+    h: 600,
+  },
+  globals: {
+    desiredTileCount: 10,
+  },
+  publishStreamId: "stream-1",
+  pinVideo: jest.fn(),
   allParticipants: {},
   videoTrackAssignments: [],
-  globals: {desiredTileCount: 10},
   updateMaxVideoTrackCount: jest.fn(),
+  talkers: ["participant-1"],
+  streamName: "Test Stream",
+  isPublished: true,
+  isPlayOnly: false,
+  isMyMicMuted: false,
+  isMyCamTurnedOff: false,
+  setAudioLevelListener: jest.fn(),
+  setParticipantIdMuted: jest.fn(),
+  turnOnYourMicNotification: jest.fn(),
+  turnOffYourMicNotification: jest.fn(),
+  turnOffYourCamNotification: jest.fn(),
+  isAdmin: false,
+  localVideo: {
+    id: "local-video-1",
+    track: "video-track",
+  },
+  localVideoCreate: jest.fn(),
 };
 
+
 // Mock the useContext hook
 jest.mock('react', () => ({
   ...jest.requireActual('react'),
-  useContext: jest.fn(),
 }));
 
 jest.mock('Components/Cards/VideoCard', () => ({ value }) => <div data-testid="mocked-video-card">{value}</div>);
@@ -30,20 +59,15 @@ describe('Pinned Layout 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', () => {
     const { container, getByText, getByRole } = render(
         <ThemeProvider theme={theme(ThemeList.Green)}>
-            <LayoutPinned />
+            <LayoutPinned
+                {...props}
+            />
         </ThemeProvider>
       );
 
@@ -55,15 +79,17 @@ describe('Pinned Layout Component', () => {
     var noOfParticipants = 4;
 
     for (let i = 0; i < noOfParticipants; i++) {
-      contextValue.allParticipants[`p${i}`] = {streamId: `p${i}`, name: `test${i}`};
-      contextValue.videoTrackAssignments.push({streamId: `p${i}`, videoLabel: `test${i}`, track: null, name: `test${i}`});
+      props.allParticipants[`p${i}`] = {streamId: `p${i}`, name: `test${i}`};
+      props.videoTrackAssignments.push({streamId: `p${i}`, videoLabel: `test${i}`, track: null, name: `test${i}`});
     }
 
-    contextValue.pinnedVideoId = 1;
+    props.pinnedVideoId = 1;
 
     const { container, getAllByTestId, queryByTestId  } = render(
         <ThemeProvider theme={theme(ThemeList.Green)}>
-            <LayoutPinned />
+            <LayoutPinned
+                {...props}
+            />
         </ThemeProvider>
       );
 
@@ -82,15 +108,17 @@ describe('Pinned Layout Component', () => {
     var noOfParticipants = 10;
 
     for (let i = 0; i < noOfParticipants; i++) {
-      contextValue.allParticipants[`p${i}`] = {streamId: `p${i}`, name: `test${i}`};
-      contextValue.videoTrackAssignments.push({streamId: `p${i}`, videoLabel: `test${i}`, track: null, name: `test${i}`});
+      props.allParticipants[`p${i}`] = {streamId: `p${i}`, name: `test${i}`};
+      props.videoTrackAssignments.push({streamId: `p${i}`, videoLabel: `test${i}`, track: null, name: `test${i}`});
     }
 
-    contextValue.pinnedVideoId = 1;
+    props.pinnedVideoId = 1;
 
     const { container, getAllByTestId, getByTestId  } = render(
         <ThemeProvider theme={theme(ThemeList.Green)}>
-            <LayoutPinned />
+            <LayoutPinned
+                {...props}
+            />
         </ThemeProvider>
       );
 
@@ -105,15 +133,17 @@ describe('Pinned Layout Component', () => {
 
   it('set the max video count', () => {
     process.env.REACT_APP_LAYOUT_OTHERS_CARD_VISIBILITY = true;
-    contextValue.pipinnedVideoId = 1;
+    props.pipinnedVideoId = 1;
 
     const { container, getAllByTestId, getByTestId  } = render(
         <ThemeProvider theme={theme(ThemeList.Green)}>
-            <LayoutPinned />
+            <LayoutPinned
+                {...props}
+            />
         </ThemeProvider>
       );
 
-      expect(contextValue.updateMaxVideoTrackCount).toHaveBeenCalledWith(3);
+      expect(props.updateMaxVideoTrackCount).toHaveBeenCalledWith(3);
 
   });
   */