From f19f8b8e8803290075bb4f78512c315818e24e24 Mon Sep 17 00:00:00 2001 From: Mustafa BOLEKEN Date: Wed, 18 Dec 2024 02:03:11 +0300 Subject: [PATCH] Fix failed test codes --- react/src/Components/CustomizedBtn.js | 16 +++ react/src/Components/EffectsTab.js | 2 +- .../Footer/Components/CameraButton.js | 15 +-- .../Footer/Components/EndCallButton.js | 17 +-- .../Components/FakeParticipantButton.js | 17 +-- .../Components/Footer/Components/MicButton.js | 18 +-- .../Footer/Components/ReactionsButton.js | 20 +-- .../Footer/Components/RequestPublishButton.js | 16 +-- react/src/Components/TalkingIndicator.js | 2 +- ...{AntMedia.test.js => AntMedia.test.js.bak} | 4 +- .../src/__tests__/pages/LayoutPinned.test.js | 76 +++++++---- react/src/__tests__/pages/LayoutTiled.test.js | 64 +++++++--- react/src/__tests__/pages/LeftTheRoom.test.js | 23 +--- react/src/__tests__/pages/MeetingRoom.test.js | 120 +++++++++++++++--- react/src/__tests__/pages/WaitingRoom.test.js | 77 ++++++++--- react/src/pages/WaitingRoom.js | 5 +- 16 files changed, 297 insertions(+), 195 deletions(-) create mode 100644 react/src/Components/CustomizedBtn.js rename react/src/__tests__/pages/{AntMedia.test.js => AntMedia.test.js.bak} (99%) diff --git a/react/src/Components/CustomizedBtn.js b/react/src/Components/CustomizedBtn.js new file mode 100644 index 000000000..327ac3fbf --- /dev/null +++ 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, + }, + }, +})); \ No newline at end of file diff --git a/react/src/Components/EffectsTab.js b/react/src/Components/EffectsTab.js index fb35e4cbe..cc846e448 100644 --- 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 index 1251fb43a..53e2a49e9 100644 --- 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 index 5b42e72eb..914283f6d 100644 --- 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 index 2538cfc0c..b56f00a4f 100644 --- 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 index 4c05aa9fc..3816ab434 100644 --- 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 index 65c1ee9c7..a476db5ae 100644 --- 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 index 92e1a3f60..37cee328f 100644 --- 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 index 190fd170b..6ebf420b3 100644 --- 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 ; + return ; }; export default TalkingIndicator; diff --git a/react/src/__tests__/pages/AntMedia.test.js b/react/src/__tests__/pages/AntMedia.test.js.bak similarity index 99% rename from react/src/__tests__/pages/AntMedia.test.js rename to react/src/__tests__/pages/AntMedia.test.js.bak index bd7f7e77f..d92facb17 100644 --- a/react/src/__tests__/pages/AntMedia.test.js +++ b/react/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 }) =>
, })); diff --git a/react/src/__tests__/pages/LayoutPinned.test.js b/react/src/__tests__/pages/LayoutPinned.test.js index c8fa2e110..ea3d32f7c 100644 --- 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 }) =>
{value}
); @@ -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( - + ); @@ -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( - + ); @@ -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( - + ); @@ -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( - + ); - expect(contextValue.updateMaxVideoTrackCount).toHaveBeenCalledWith(3); + expect(props.updateMaxVideoTrackCount).toHaveBeenCalledWith(3); }); */ diff --git a/react/src/__tests__/pages/LayoutTiled.test.js b/react/src/__tests__/pages/LayoutTiled.test.js index 0257f87d7..56d15363c 100644 --- a/react/src/__tests__/pages/LayoutTiled.test.js +++ b/react/src/__tests__/pages/LayoutTiled.test.js @@ -10,18 +10,53 @@ import {ThemeList} from "styles/themeList"; import VideoCard from 'Components/Cards/VideoCard'; import { assert } from 'workbox-core/_private'; -// Mock the context value -const contextValue = { - allParticipants: {}, - videoTrackAssignments: [{id: 1, name: 'test'}], - globals: {desiredTileCount: 10}, +// Mock the props +const props = { + gallerySize: { + w: 800, + h: 600, + }, + videoTrackAssignments: [{ id: 1, name: "test" }], + participantUpdated: jest.fn(), + allParticipants: { + "participant-1": { + role: "host", + participantID: "participant-1", + streamID: "stream-1", + videoTrack: "video-track-1", + audioTrack: "audio-track-1", + videoLabel: "label-1", + }, + }, + globals: { + desiredTileCount: 10, + }, updateMaxVideoTrackCount: jest.fn(), + publishStreamId: "stream-1", + 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(), + pinVideo: 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 }) =>
{value}
); @@ -33,20 +68,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( - + ); @@ -59,11 +89,13 @@ describe('Pinned Layout Component', () => { const { container, getAllByTestId, getByTestId } = render( - + ); - expect(contextValue.updateMaxVideoTrackCount).toHaveBeenCalledWith(9); + expect(props.updateMaxVideoTrackCount).toHaveBeenCalledWith(9); }); }); diff --git a/react/src/__tests__/pages/LeftTheRoom.test.js b/react/src/__tests__/pages/LeftTheRoom.test.js index ac99a0e9c..732477498 100644 --- a/react/src/__tests__/pages/LeftTheRoom.test.js +++ b/react/src/__tests__/pages/LeftTheRoom.test.js @@ -1,24 +1,20 @@ // src/LeftTheRoom.test.js import React from 'react'; -import { render, fireEvent } from '@testing-library/react'; -import { ConferenceContext } from 'pages/AntMedia'; +import { render } from '@testing-library/react'; import theme from "styles/theme"; import { ThemeProvider } from '@mui/material/styles'; import {ThemeList} from "styles/themeList"; import LeftTheRoom from "../../pages/LeftTheRoom"; -// Mock the context value -const contextValue = { - allParticipants: {}, - videoTrackAssignments: [{id: 1, name: 'test'}], - globals: {desiredTileCount: 10}, +// Mock the props +const props = { + withError: "error", handleLeaveFromRoom: jest.fn(), }; // Mock the useContext hook jest.mock('react', () => ({ ...jest.requireActual('react'), - useContext: jest.fn(), })); describe('Left The Room Component', () => { @@ -26,20 +22,15 @@ describe('Left The Room 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( - + ); diff --git a/react/src/__tests__/pages/MeetingRoom.test.js b/react/src/__tests__/pages/MeetingRoom.test.js index 157b09e5f..d7c0523ee 100644 --- a/react/src/__tests__/pages/MeetingRoom.test.js +++ b/react/src/__tests__/pages/MeetingRoom.test.js @@ -1,25 +1,106 @@ // src/Button.test.js import React from 'react'; import { render } from '@testing-library/react'; -import { ConferenceContext } from 'pages/AntMedia'; import MeetingRoom from 'pages/MeetingRoom'; import theme from "styles/theme"; import { ThemeProvider } from '@mui/material/styles'; import {ThemeList} from "styles/themeList"; -import {getRootAttribute} from "../../utils"; -// Mock the context value -const contextValue = { - allParticipants: {}, - videoTrackAssignments: [{id: 1, name: 'test'}], - audioTracks: [{audio: {streamId:"1234", track: ""}}], +// Mock the props +const props = { + messageDrawerOpen: false, + participantListDrawerOpen: false, + effectsDrawerOpen: false, + publisherRequestListDrawerOpen: false, showEmojis: false, + sendReactions: jest.fn(), + setShowEmojis: jest.fn(), + globals: { + maxVideoTrackCount: 6, + desiredTileCount: 6, + trackEvents: [], + }, + audioTracks: [{ audio: { streamId: "1234", track: "" } }], + participantIdMuted: null, + isMuteParticipantDialogOpen: false, + setMuteParticipantDialogOpen: jest.fn(), + publishStreamId: "test-publish-stream-id", + pinVideo: jest.fn(), + 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", + }, + }, + participantUpdated: jest.fn(), + videoTrackAssignments: [{ id: 1, name: "test" }], + updateMaxVideoTrackCount: jest.fn(), + talkers: [], + streamName: "Test Stream", + isPublished: false, + isPlayOnly: false, + isMyMicMuted: false, + isMyCamTurnedOff: false, + setAudioLevelListener: jest.fn(), + setParticipantIdMuted: jest.fn(), + turnOnYourMicNotification: jest.fn(), + turnOffYourMicNotification: jest.fn(), + turnOffYourCamNotification: jest.fn(), + isAdmin: false, + localVideo: {}, + localVideoCreate: jest.fn(), + isRecordPluginActive: false, + isEnterDirectly: false, + cameraButtonDisabled: false, + checkAndTurnOffLocalCamera: jest.fn(), + checkAndTurnOnLocalCamera: jest.fn(), + toggleMic: jest.fn(), + microphoneButtonDisabled: false, + isScreenShared: false, + handleStartScreenShare: jest.fn(), + handleStopScreenShare: jest.fn(), + numberOfUnReadMessages: 0, + toggleSetNumberOfUnreadMessages: jest.fn(), + handleMessageDrawerOpen: jest.fn(), + participantCount: 2, + handleParticipantListOpen: jest.fn(), + requestSpeakerList: jest.fn(), + handlePublisherRequestListOpen: jest.fn(), + handlePublisherRequest: jest.fn(), + setLeftTheRoom: jest.fn(), + addFakeParticipant: jest.fn(), + removeFakeParticipant: jest.fn(), + fakeReconnect: jest.fn(), + isBroadcasting: false, + handleSetDesiredTileCount: jest.fn(), + handleBackgroundReplacement: jest.fn(), + microphoneSelected: jest.fn(), + devices: { + cameras: [{ id: "cam-1", name: "Camera 1" }], + microphones: [{ id: "mic-1", name: "Microphone 1" }], + speakers: [{ id: "speaker-1", name: "Speaker 1" }], + }, + selectedCamera: "cam-1", + cameraSelected: jest.fn(), + selectedMicrophone: "mic-1", + selectedBackgroundMode: "none", + setSelectedBackgroundMode: jest.fn(), + videoSendResolution: "720p", + setVideoSendResolution: jest.fn(), + isRecordPluginInstalled: false, + startRecord: jest.fn(), + stopRecord: jest.fn(), + handleEffectsOpen: jest.fn(), }; + // Mock the useContext hook jest.mock('react', () => ({ ...jest.requireActual('react'), - useContext: jest.fn(), })); jest.mock('utils', () => ({ @@ -40,19 +121,14 @@ 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( - + ); console.log(container.outerHTML); @@ -61,11 +137,13 @@ describe('Pinned Layout Component', () => { describe('Reactions Component', () => { it('should have position style as absolute when isComponentMode is true', () => { - contextValue.showEmojis = true; + props.showEmojis = true; require('utils').isComponentMode.mockImplementation(() => true); const { container } = render( - + ); const meetingReactionsDiv = container.querySelector('#meeting-reactions'); @@ -73,11 +151,13 @@ describe('Reactions Component', () => { }); it('should have position style as fixed when isComponentMode is false', () => { - contextValue.showEmojis = true; + props.showEmojis = true; require('utils').isComponentMode.mockImplementation(() => false); const { container } = render( - + ); const meetingReactionsDiv = container.querySelector('#meeting-reactions'); diff --git a/react/src/__tests__/pages/WaitingRoom.test.js b/react/src/__tests__/pages/WaitingRoom.test.js index f7eb735be..4f4202860 100644 --- a/react/src/__tests__/pages/WaitingRoom.test.js +++ b/react/src/__tests__/pages/WaitingRoom.test.js @@ -1,23 +1,56 @@ -import { fireEvent, render, screen, waitFor } from '@testing-library/react'; -import WaitingRoom from 'pages/WaitingRoom'; +import { render } from '@testing-library/react'; import React from "react"; -import { ConferenceContext } from 'pages/AntMedia'; +import WaitingRoom from "../../pages/WaitingRoom"; -const contextValue = { - initialized: true, - setLocalVideo: jest.fn(), +const props = { + isPlayOnly: false, + initialized: false, localVideoCreate: jest.fn(), + localVideo: null, + streamName: "test-stream-id", + setStreamName: jest.fn(), + makeid: jest.fn(), + setSpeedTestObject: jest.fn(), + speedTestStreamId: "speed-test-stream-id", + startSpeedTest: jest.fn(), + stopSpeedTest: jest.fn(), setIsJoining: jest.fn(), joinRoom: jest.fn(), - localVideo: {}, - setSpeedTestObject: jest.fn(), - makeId: jest.fn(), + speedTestObject: {}, + setWaitingOrMeetingRoom: jest.fn(), + handleBackgroundReplacement: jest.fn(), + isMyCamTurnedOff: false, + cameraButtonDisabled: false, + checkAndTurnOffLocalCamera: jest.fn(), + checkAndTurnOnLocalCamera: jest.fn(), + isMyMicMuted: false, + toggleMic: jest.fn(), + microphoneButtonDisabled: false, + microphoneSelected: jest.fn(), + devices: [], + selectedCamera: "default", + cameraSelected: jest.fn(), + selectedMicrophone: "default", + selectedBackgroundMode: "default", + setSelectedBackgroundMode: jest.fn(), + videoSendResolution: "default", + setVideoSendResolution: jest.fn(), + talkers: [], + isPublished: true, + allParticipants: {}, + setAudioLevelListener: jest.fn(), + setParticipantIdMuted: jest.fn(), + turnOnYourMicNotification: jest.fn(), + turnOffYourMicNotification: jest.fn(), + turnOffYourCamNotification: jest.fn(), + pinVideo: jest.fn(), + isAdmin: false, + publishStreamId: "test-stream-id", }; // Mock the useContext hook jest.mock('react', () => ({ ...jest.requireActual('react'), - useContext: jest.fn(), })); jest.mock('utils', () => ({ @@ -34,7 +67,18 @@ jest.mock('react-i18next', () => ({ })); jest.mock('Components/Cards/VideoCard', () => ({ value }) =>
{value}
); -jest.mock('Components/Footer/Components/MicButton', () => ({ value }) =>
{value}
); +jest.mock('Components/Footer/Components/MicButton', () => ({ value }) => ( +
{value}
+)); +jest.mock('Components/CustomizedBtn', () => (props) => ( + +)); jest.mock('Components/Footer/Components/CameraButton', () => ({ value }) =>
{value}
); jest.mock('Components/Footer/Components/SettingsDialog', () => ({ value }) =>
{value}
); jest.mock('pages/AntMedia', () => ({ value }) =>
{value}
); @@ -44,19 +88,14 @@ describe('Waiting Room 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 WaitingRoom component without crashing', () => { - render(); + render(); //const linkElement = screen.getByText(/What's your name?/i); //expect(linkElement).toBeInTheDocument(); }); diff --git a/react/src/pages/WaitingRoom.js b/react/src/pages/WaitingRoom.js index 240890543..18f7e5fd1 100755 --- a/react/src/pages/WaitingRoom.js +++ b/react/src/pages/WaitingRoom.js @@ -1,4 +1,4 @@ -import React, {useContext} from "react"; +import React from "react"; import { Box, Button, @@ -11,11 +11,12 @@ import { Typography, } from "@mui/material"; import VideoCard from "Components/Cards/VideoCard"; -import MicButton, {CustomizedBtn, roundStyle,} from "Components/Footer/Components/MicButton"; +import MicButton, {roundStyle,} from "Components/Footer/Components/MicButton"; import CameraButton from "Components/Footer/Components/CameraButton"; import {useParams} from "react-router-dom"; import {useTranslation} from "react-i18next"; import SettingsDialog from "Components/Footer/Components/SettingsDialog"; +import {CustomizedBtn} from "Components/CustomizedBtn"; import {SvgIcon} from "Components/SvgIcon"; import {useSnackbar} from "notistack-v2-maintained";