diff --git a/src/components/VideoProvider/useSelectedParticipant/useSelectedParticipant.test.tsx b/src/components/VideoProvider/useSelectedParticipant/useSelectedParticipant.test.tsx index 03297ede4..320babf53 100644 --- a/src/components/VideoProvider/useSelectedParticipant/useSelectedParticipant.test.tsx +++ b/src/components/VideoProvider/useSelectedParticipant/useSelectedParticipant.test.tsx @@ -1,35 +1,31 @@ -import { act, renderHook } from '@testing-library/react-hooks'; +import { act, HookResult, renderHook, RenderHookResult } from '@testing-library/react-hooks'; import { EventEmitter } from 'events'; import React from 'react'; -import { Room } from 'twilio-video'; +import { Participant, Room } from 'twilio-video'; import useSelectedParticipant, { SelectedParticipantProvider } from './useSelectedParticipant'; describe('the useSelectedParticipant hook', () => { let mockRoom: Room; + let result: HookResult void]>; + beforeEach(() => (mockRoom = new EventEmitter() as Room)); - it('should return null as the default value', () => { - const { result } = renderHook(useSelectedParticipant, { + beforeEach(() => { + ({ result } = renderHook(useSelectedParticipant, { wrapper: ({ children }) => {children}, - }); + })); + }); + + it('should return null as the default value', () => { expect(result.current[0]).toBe(null); }); it('should set a selected participant', () => { - const { result } = renderHook(useSelectedParticipant, { - wrapper: ({ children }) => {children}, - }); - act(() => result.current[1]('mockParticipant' as any)); - expect(result.current[0]).toBe('mockParticipant'); }); it('should set "null" as the selected participant when the user selects the currently selected participant', () => { - const { result } = renderHook(useSelectedParticipant, { - wrapper: ({ children }) => {children}, - }); - act(() => result.current[1]('mockParticipant' as any)); act(() => result.current[1]('mockParticipant' as any)); @@ -37,10 +33,6 @@ describe('the useSelectedParticipant hook', () => { }); it('should set "null" as the selected participant on room disconnect', () => { - const { result } = renderHook(useSelectedParticipant, { - wrapper: ({ children }) => {children}, - }); - act(() => result.current[1]('mockParticipant' as any)); expect(result.current[0]).toBe('mockParticipant'); act(() => { @@ -48,4 +40,20 @@ describe('the useSelectedParticipant hook', () => { }); expect(result.current[0]).toBe(null); }); + + it('should set "null" as the selected participant when the participant disconnects from the room', () => { + act(() => result.current[1]('mockParticipant' as any)); + act(() => { + mockRoom.emit('participantDisconnected', 'mockParticipant'); + }); + expect(result.current[0]).toBe(null); + }); + + it('should not set "null" as the selected participant when a non-selected participant disconnects from the room', () => { + act(() => result.current[1]('mockParticipant' as any)); + act(() => { + mockRoom.emit('participantDisconnected', 'otherMockParticipant'); + }); + expect(result.current[0]).toBe('mockParticipant'); + }); }); diff --git a/src/components/VideoProvider/useSelectedParticipant/useSelectedParticipant.tsx b/src/components/VideoProvider/useSelectedParticipant/useSelectedParticipant.tsx index 8206eb31e..88d950dad 100644 --- a/src/components/VideoProvider/useSelectedParticipant/useSelectedParticipant.tsx +++ b/src/components/VideoProvider/useSelectedParticipant/useSelectedParticipant.tsx @@ -22,9 +22,14 @@ export function SelectedParticipantProvider({ room, children }: SelectedParticip useEffect(() => { const onDisconnect = () => _setSelectedParticipant(null); + const handleParticipantDisconnected = (participant: Participant) => + _setSelectedParticipant(prevParticipant => (prevParticipant === participant ? null : prevParticipant)); + room.on('disconnected', onDisconnect); + room.on('participantDisconnected', handleParticipantDisconnected); return () => { room.off('disconnected', onDisconnect); + room.off('participantDisconnected', handleParticipantDisconnected); }; }, [room]);