From d3e82b85f924a18eb7a884c4702e6aa9949a3b27 Mon Sep 17 00:00:00 2001 From: Mustafa BOLEKEN Date: Wed, 18 Dec 2024 01:23:21 +0300 Subject: [PATCH] Fix failing unit tests --- react/src/Components/Cards/OthersCard.js | 2 +- .../Components/Footer/Components/MicButton.js | 2 +- .../Components/Cards/OthersCard.test.js | 78 ++++---- .../__tests__/Components/EffectsTab.test.js | 36 ++-- .../Footer/Components/CameraButton.test.js | 40 ++--- .../Footer/Components/EndCallButton.test.js | 17 +- .../Components/FakeParticipantButton.test.js | 19 +- .../Footer/Components/MicButton.test.js | 35 ++-- .../Components/MoreOptionsButton.test.js | 70 ++++++-- .../Components/ParticipantListButton.test.js | 33 ++-- .../Components/ParticipantTab.test.js | 166 +++++++++--------- .../Components/RecordingButton.test.js | 8 - 12 files changed, 232 insertions(+), 274 deletions(-) diff --git a/react/src/Components/Cards/OthersCard.js b/react/src/Components/Cards/OthersCard.js index 965cecc33..e563ef4d6 100644 --- 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 ( -
+
{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 index c5c842232..4c05aa9fc 100644 --- a/react/src/Components/Footer/Components/MicButton.js +++ b/react/src/Components/Footer/Components/MicButton.js @@ -71,7 +71,7 @@ function MicButton(props) { diff --git a/react/src/__tests__/Components/Cards/OthersCard.test.js b/react/src/__tests__/Components/Cards/OthersCard.test.js index 2530ce70e..50b77a217 100644 --- 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( - - - + + + ); }); - }); diff --git a/react/src/__tests__/Components/EffectsTab.test.js b/react/src/__tests__/Components/EffectsTab.test.js index b47e0728c..b070d11b0 100644 --- 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,19 +33,15 @@ 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( - + ); }); @@ -69,14 +49,18 @@ describe('Effects Tab Component', () => { 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( - + ); 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 index 0ec212442..6e49ec3a3 100644 --- a/react/src/__tests__/Components/Footer/Components/CameraButton.test.js +++ b/react/src/__tests__/Components/Footer/Components/CameraButton.test.js @@ -4,15 +4,9 @@ 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', () => { @@ -20,28 +14,28 @@ 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( - + ); }); it('check if camera button disabled if no cam available ', () => { - - contextValue.cameraButtonDisabled = true; - const { container, getByText, getByRole } = render( - + ); 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( - + ); 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 index 346a81f4e..c10506aa0 100644 --- a/react/src/__tests__/Components/Footer/Components/EndCallButton.test.js +++ b/react/src/__tests__/Components/Footer/Components/EndCallButton.test.js @@ -4,15 +4,9 @@ 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', () => { @@ -20,19 +14,14 @@ 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( - + ); }); diff --git a/react/src/__tests__/Components/Footer/Components/FakeParticipantButton.test.js b/react/src/__tests__/Components/Footer/Components/FakeParticipantButton.test.js index 3fba95290..745e82adc 100644 --- a/react/src/__tests__/Components/Footer/Components/FakeParticipantButton.test.js +++ b/react/src/__tests__/Components/Footer/Components/FakeParticipantButton.test.js @@ -1,18 +1,11 @@ // 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', () => { @@ -20,19 +13,15 @@ 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( - + ); }); diff --git a/react/src/__tests__/Components/Footer/Components/MicButton.test.js b/react/src/__tests__/Components/Footer/Components/MicButton.test.js index 98ee6b873..11edd754b 100644 --- a/react/src/__tests__/Components/Footer/Components/MicButton.test.js +++ b/react/src/__tests__/Components/Footer/Components/MicButton.test.js @@ -4,15 +4,9 @@ import { render } from '@testing-library/react'; import { ConferenceContext } from 'pages/AntMedia'; import MicButton from 'Components/Footer/Components/MicButton'; -// Mock the context value -const contextValue = { - microphoneButtonDisabled: true, -}; - // Mock the useContext hook jest.mock('react', () => ({ ...jest.requireActual('react'), - useContext: jest.fn(), })); describe('Microphone Button Component', () => { @@ -20,28 +14,27 @@ describe('Microphone 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( - + ); }); it('check if microphone button disabled if no mic device available ', () => { - contextValue.microphoneButtonDisabled = true; - const { container, getByText, getByRole } = render( - + ); console.log(container.outerHTML); @@ -54,10 +47,12 @@ describe('Microphone Button Component', () => { it('check if microphone button enabled if mic devices are available ', () => { - contextValue.microphoneButtonDisabled = false; - const { container, getByText, getByRole } = render( - + ); console.log(container.outerHTML); diff --git a/react/src/__tests__/Components/Footer/Components/MoreOptionsButton.test.js b/react/src/__tests__/Components/Footer/Components/MoreOptionsButton.test.js index d3ddec88a..9b17209c7 100644 --- a/react/src/__tests__/Components/Footer/Components/MoreOptionsButton.test.js +++ b/react/src/__tests__/Components/Footer/Components/MoreOptionsButton.test.js @@ -6,16 +6,9 @@ import MoreOptionsButton from 'Components/Footer/Components/MoreOptionsButton'; import { random } from 'lodash'; import { assert } from 'workbox-core/_private'; -// Mock the context value -const contextValue = { - allParticipants: {}, - globals:{maxVideoTrackCount: 5}, -}; - // Mock the useContext hook jest.mock('react', () => ({ ...jest.requireActual('react'), - useContext: jest.fn(), })); describe('ParticipantList Button Component', () => { @@ -23,25 +16,70 @@ describe('ParticipantList 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( - + ); }); it('click the button', () => { const { container, getByTestId } = render( - + ); console.log(container.outerHTML); diff --git a/react/src/__tests__/Components/Footer/Components/ParticipantListButton.test.js b/react/src/__tests__/Components/Footer/Components/ParticipantListButton.test.js index eb3a35a6d..1b9879ce2 100644 --- a/react/src/__tests__/Components/Footer/Components/ParticipantListButton.test.js +++ b/react/src/__tests__/Components/Footer/Components/ParticipantListButton.test.js @@ -5,17 +5,9 @@ import { ConferenceContext } from 'pages/AntMedia'; import ParticipantListButton from 'Components/Footer/Components/ParticipantListButton'; import { random } from 'lodash'; -// Mock the context value -const contextValue = { - allParticipants: {}, - participantCount: 0, - setParticipantCount: jest.fn() -}; - // Mock the useContext hook jest.mock('react', () => ({ ...jest.requireActual('react'), - useContext: jest.fn(), })); describe('ParticipantList Button Component', () => { @@ -23,33 +15,28 @@ describe('ParticipantList 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( - + ); }); it('check the count on button', async () => { var noOfParticipants = random(1, 10); - await act(()=> - { - contextValue.setParticipantCount(noOfParticipants) - contextValue.participantCount = noOfParticipants; - }); - const { container, getByText, getByRole } = render( - + ); console.log(container.outerHTML); diff --git a/react/src/__tests__/Components/ParticipantTab.test.js b/react/src/__tests__/Components/ParticipantTab.test.js index f60984c00..022f5c169 100644 --- a/react/src/__tests__/Components/ParticipantTab.test.js +++ b/react/src/__tests__/Components/ParticipantTab.test.js @@ -6,63 +6,7 @@ import theme from "styles/theme"; import { ThemeProvider } from '@mui/material/styles'; import {ThemeList} from "styles/themeList"; -// Mock the context value -const contextValue = { - presenters: [], - approvedSpeakerRequestList: [], - presenterButtonDisabled: [], - presenterButtonStreamIdInProcess: '', - 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', - }, - 'test-stream-id-2': { - role: 'host', - participantID: 'test-participant-id-2', - streamID: 'test-stream-id-2', - videoTrack: 'test-video-track-2', - audioTrack: 'test-audio-track-2', - videoLabel: 'test-video-label-2', - metaData: { - isMuted: false - } - } - }, - publishStreamId: 'test-stream-id', - pinVideo: jest.fn(), - makeParticipantPresenter: jest.fn(), - pagedParticipants: { - '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', - }, - 'test-stream-id-2': { - role: 'host', - participantID: 'test-participant-id-2', - streamID: 'test-stream-id-2', - videoTrack: 'test-video-track-2', - audioTrack: 'test-audio-track-2', - videoLabel: 'test-video-label-2', - metaData: { - isMuted: false - } - } - }, - isAdmin: true, - isPlayOnly: false, - videoTrackAssignments: [ - {streamID: 'test-stream-id', participantID: 'test-participant-id', videoTrack: 'test-video-track', audioTrack: 'test-audio-track', videoLabel: 'test-video-label'}, - {streamID: 'test-stream-id-2', participantID: 'test-participant-id-2', videoTrack: 'test-video-track-2', audioTrack: 'test-audio-track-2', videoLabel: 'test-video-label-2'} - ], +const props = { globals: { maxVideoTrackCount: 6, desiredTileCount: 6, @@ -72,18 +16,65 @@ const contextValue = { pageSize: 15, totalPage: 1, startIndex: 0, - endIndex: 15 - } + endIndex: 15, + }, }, + isAdmin: false, + pinVideo: jest.fn(), + makeListenerAgain: jest.fn(), + videoTrackAssignments: [ + { + streamID: "test-stream-id", + participantID: "test-participant-id", + videoTrack: "test-video-track", + audioTrack: "test-audio-track", + videoLabel: "test-video-label", + }, + { + streamID: "test-stream-id-2", + participantID: "test-participant-id-2", + videoTrack: "test-video-track-2", + audioTrack: "test-audio-track-2", + videoLabel: "test-video-label-2", + }, + ], + presenterButtonStreamIdInProcess: "", + presenterButtonDisabled: [], + makeParticipantPresenter: jest.fn(), + makeParticipantUndoPresenter: jest.fn(), + participantCount: 2, + isMyMicMuted: false, + publishStreamId: "test-stream-id", muteLocalMic: jest.fn(), turnOffYourMicNotification: jest.fn(), setParticipantIdMuted: jest.fn(), + pagedParticipants: { + "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", + }, + "test-stream-id-2": { + role: "host", + participantID: "test-participant-id-2", + streamID: "test-stream-id-2", + videoTrack: "test-video-track-2", + audioTrack: "test-audio-track-2", + videoLabel: "test-video-label-2", + metaData: { + isMuted: false, + }, + }, + }, + updateAllParticipantsPagination: jest.fn(), }; // Mock the useContext hook jest.mock('react', () => ({ ...jest.requireActual('react'), - useContext: jest.fn(), })); describe('ParticipantTab Component', () => { @@ -91,19 +82,14 @@ describe('ParticipantTab 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( - + ); }); @@ -111,34 +97,40 @@ describe('ParticipantTab Component', () => { it('renders getParticipantItem without crashing', () => { const { container } = render( - + ); - const participantItem = container.innerHTML.includes('participant-item-'+contextValue.videoTrackAssignments[0].streamID); + const participantItem = container.innerHTML.includes('participant-item-'+props.videoTrackAssignments[0].streamID); expect(participantItem).toBe(true); }); it('renders getAdminButtons without crashing', () => { - contextValue.isAdmin = true; + props.isAdmin = true; process.env.REACT_APP_PARTICIPANT_TAB_ADMIN_MODE_ENABLED=true const { container } = render( - + ); - const adminButtons = container.innerHTML.includes('admin-button-group-'+contextValue.videoTrackAssignments[0].streamID); + const adminButtons = container.innerHTML.includes('admin-button-group-'+props.videoTrackAssignments[0].streamID); expect(adminButtons).toBe(true); }); it('renders presenter button with correct icon and color', () => { - contextValue.isAdmin = true; + props.isAdmin = true; process.env.REACT_APP_PARTICIPANT_TAB_ADMIN_MODE_ENABLED=true const { getByTestId } = render( - + ); const presenterButton = getByTestId('add-presenter-test-stream-id'); @@ -146,39 +138,43 @@ describe('ParticipantTab Component', () => { }); it('check muteLocalMic called in getMuteParticipantButton', () => { - contextValue.isAdmin = true; + props.isAdmin = true; process.env.REACT_APP_PARTICIPANT_TAB_MUTE_PARTICIPANT_BUTTON_ENABLED=true const { getByTestId } = render( - + ); const micToggleParticipant = getByTestId('mic-toggle-participant-test-stream-id'); expect(micToggleParticipant).toBeInTheDocument(); micToggleParticipant.click(); - expect(contextValue.muteLocalMic).toHaveBeenCalled(); - expect(contextValue.setParticipantIdMuted).not.toHaveBeenCalled(); - expect(contextValue.turnOffYourMicNotification).not.toHaveBeenCalled(); + expect(props.muteLocalMic).toHaveBeenCalled(); + expect(props.setParticipantIdMuted).not.toHaveBeenCalled(); + expect(props.turnOffYourMicNotification).not.toHaveBeenCalled(); }); it('check turnOffYourMicNotification called in getMuteParticipantButton', () => { - contextValue.isAdmin = true; + props.isAdmin = true; process.env.REACT_APP_PARTICIPANT_TAB_MUTE_PARTICIPANT_BUTTON_ENABLED=true const { getByTestId } = render( - + ); const micToggleParticipant = getByTestId('mic-toggle-participant-test-stream-id-2'); expect(micToggleParticipant).toBeInTheDocument(); micToggleParticipant.click(); - expect(contextValue.muteLocalMic).not.toHaveBeenCalled(); - expect(contextValue.setParticipantIdMuted).toHaveBeenCalled(); - expect(contextValue.turnOffYourMicNotification).toHaveBeenCalled(); + expect(props.muteLocalMic).not.toHaveBeenCalled(); + expect(props.setParticipantIdMuted).toHaveBeenCalled(); + expect(props.turnOffYourMicNotification).toHaveBeenCalled(); }); }); diff --git a/react/src/__tests__/Components/RecordingButton.test.js b/react/src/__tests__/Components/RecordingButton.test.js index 2bbcc24f3..acbadbf33 100644 --- a/react/src/__tests__/Components/RecordingButton.test.js +++ b/react/src/__tests__/Components/RecordingButton.test.js @@ -7,7 +7,6 @@ import RecordingButton from "../../Components/RecordingButton"; // Mock the useContext hook jest.mock('react', () => ({ ...jest.requireActual('react'), - useContext: jest.fn(), })); describe('Recording Button Component', () => { @@ -15,13 +14,6 @@ describe('Recording 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); - }); });