Merge pull request #2 from tmendoza/feature/design-refresh-fix-tests

Feature/design refresh fix tests

src/components/AudioLevelIndicator/AudioLevelIndicator.test.tsx

@@ -10,28 +10,40 @@ jest.mock('../../hooks/useIsTrackEnabled/useIsTrackEnabled');
 const mockUseIsTrackEnabled = useIsTrackEnabled as jest.Mock<boolean>;
 
 describe('the AudioLevelIndicator component', () => {
-  it('should render a MicOff icon when the audioTrack is not enabled', () => {
-    mockUseIsTrackEnabled.mockImplementationOnce(() => false);
-    const wrapper = shallow(<AudioLevelIndicator />);
-    expect(wrapper.exists(MicOff)).toBe(true);
-  });
+  describe('when the audioTrack is not enabled', () => {
+    mockUseIsTrackEnabled.mockImplementation(() => false);
+    const wrapper = shallow(<AudioLevelIndicator color="#123456" />);
 
-  it('should not render a MicOff icon when the audioTrack is enabled', () => {
-    mockUseIsTrackEnabled.mockImplementationOnce(() => true);
-    const wrapper = shallow(<AudioLevelIndicator />);
-    expect(wrapper.exists(MicOff)).toBe(false);
-    expect(wrapper.exists('svg')).toBe(true);
-  });
+    it('should render a mute icon', () => {
+      expect(wrapper.exists('[data-test-audio-mute-icon]')).toBe(true);
+    });
 
-  it('should change the size of the indicator when the size prop is used', () => {
-    mockUseIsTrackEnabled.mockImplementationOnce(() => true);
-    const wrapper = shallow(<AudioLevelIndicator size={35} />);
-    expect(wrapper.find({ width: '35px', height: '35px' }).exists()).toBeTruthy();
+    it('should change the color of the mute icon when color prop is used', () => {
+      expect(
+        wrapper
+          .find('[data-test-audio-mute-icon]')
+          .find({ fill: '#123456' })
+          .exists()
+      ).toBeTruthy();
+    });
   });
 
-  it('should change the background of the indicator when background prop is used', () => {
-    mockUseIsTrackEnabled.mockImplementationOnce(() => true);
-    const wrapper = shallow(<AudioLevelIndicator background="#123456" />);
-    expect(wrapper.find({ fill: '#123456' }).exists()).toBeTruthy();
+  describe('when the audioTrack is enabled', () => {
+    mockUseIsTrackEnabled.mockImplementation(() => true);
+    const wrapper = shallow(<AudioLevelIndicator color="#123456" />);
+
+    it('should render the audio level icon', () => {
+      expect(wrapper.exists(MicOff)).toBe(false);
+      expect(wrapper.exists('[data-test-audio-indicator]')).toBe(true);
+    });
+
+    it('should change the color of the audio level icon when color prop is used', () => {
+      expect(
+        wrapper
+          .find('[data-test-audio-indicator]')
+          .find({ fill: '#123456' })
+          .exists()
+      ).toBeTruthy();
+    });
   });
 });

src/components/AudioLevelIndicator/AudioLevelIndicator.tsx

@@ -95,7 +95,7 @@ function AudioLevelIndicator({ audioTrack, color = 'white' }: { audioTrack?: Aud
   const clipPathId = `audio-level-clip-${getUniqueClipId()}`;
 
   return isTrackEnabled ? (
-    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" data-test-audio-indicator>
       <defs>
         <clipPath id={clipPathId}>
           <rect ref={SVGRectRef} x="0" y="14" width="24" height="24" />
@@ -126,7 +126,7 @@ function AudioLevelIndicator({ audioTrack, color = 'white' }: { audioTrack?: Aud
       height="24"
       viewBox="0 0 24 24"
       transform="translate(-0.5, 0)"
-      data-cy-audio-mute-icon
+      data-test-audio-mute-icon
     >
       <g fill="none" fillRule="evenodd">
         <path

src/components/MainParticipant/MainParticipant.test.tsx

@@ -5,16 +5,27 @@ import { shallow } from 'enzyme';
 import useMainSpeaker from '../../hooks/useMainSpeaker/useMainSpeaker';
 import useSelectedParticipant from '../VideoProvider/useSelectedParticipant/useSelectedParticipant';
 import useScreenShareParticipant from '../../hooks/useScreenShareParticipant/useScreenShareParticipant';
+import useVideoContext from '../../hooks/useVideoContext/useVideoContext';
 
 jest.mock('../../hooks/useMainSpeaker/useMainSpeaker');
 jest.mock('../VideoProvider/useSelectedParticipant/useSelectedParticipant');
 jest.mock('../../hooks/useScreenShareParticipant/useScreenShareParticipant');
+jest.mock('../../hooks/useVideoContext/useVideoContext');
 
 const mockUseMainSpeaker = useMainSpeaker as jest.Mock<any>;
 const mockUseSelectedParticipant = useSelectedParticipant as jest.Mock<any>;
 const mockUseScreenShareParticipant = useScreenShareParticipant as jest.Mock<any>;
+const mockUseVideoContext = useVideoContext as jest.Mock<any>;
+
+const mockLocalParticipant = {};
 
 describe('the MainParticipant component', () => {
+  mockUseVideoContext.mockImplementation(() => ({
+    room: {
+      localParticipant: mockLocalParticipant,
+    },
+  }));
+
   it('should set the videoPriority to high when the main participant is the selected participant', () => {
     const mockParticipant = {};
     mockUseMainSpeaker.mockImplementationOnce(() => mockParticipant);
@@ -33,6 +44,28 @@ describe('the MainParticipant component', () => {
     expect(wrapper.find(ParticipantTracks).prop('videoPriority')).toBe('high');
   });
 
+  describe('when the main participant is the localParticipant', () => {
+    const mockParticipant = {};
+    mockUseMainSpeaker.mockImplementation(() => mockParticipant);
+    mockUseSelectedParticipant.mockImplementation(() => [{}]);
+    mockUseScreenShareParticipant.mockImplementation(() => mockParticipant);
+    mockUseVideoContext.mockImplementation(() => ({
+      room: {
+        localParticipant: mockParticipant,
+      },
+    }));
+
+    const wrapper = shallow(<MainParticipant />);
+
+    it('should not set the videoPriority', () => {
+      expect(wrapper.find(ParticipantTracks).prop('videoPriority')).toBe(null);
+    });
+
+    it('should set the enableScreenShare prop to false', () => {
+      expect(wrapper.find(ParticipantTracks).prop('enableScreenShare')).toBe(false);
+    });
+  });
+
   it('should set the videoPriority to null when the main participant is not the selected participant and they are not sharing their screen', () => {
     const mockParticipant = {};
     mockUseMainSpeaker.mockImplementationOnce(() => mockParticipant);

src/components/MainParticipantInfo/MainParticipantInfo.test.tsx

@@ -1,35 +1,45 @@
 import React from 'react';
+
 import MainParticipantInfo from './MainParticipantInfo';
+import AvatarIcon from '../../icons/AvatarIcon';
 import { shallow } from 'enzyme';
 import useIsTrackSwitchedOff from '../../hooks/useIsTrackSwitchedOff/useIsTrackSwitchedOff';
 import usePublications from '../../hooks/usePublications/usePublications';
 import useTrack from '../../hooks/useTrack/useTrack';
+import useVideoContext from '../../hooks/useVideoContext/useVideoContext';
 
 jest.mock('../../hooks/useParticipantNetworkQualityLevel/useParticipantNetworkQualityLevel', () => () => 4);
 jest.mock('../../hooks/usePublications/usePublications');
 jest.mock('../../hooks/useIsTrackSwitchedOff/useIsTrackSwitchedOff');
 jest.mock('../../hooks/useTrack/useTrack');
+jest.mock('../../hooks/useVideoContext/useVideoContext');
 
 const mockUsePublications = usePublications as jest.Mock<any>;
 const mockUseIsTrackSwitchedOff = useIsTrackSwitchedOff as jest.Mock<any>;
 const mockUseTrack = useTrack as jest.Mock<any>;
+const mockUseVideoContext = useVideoContext as jest.Mock<any>;
 
 describe('the MainParticipantInfo component', () => {
   beforeEach(jest.clearAllMocks);
-  it('should render a VideoCamOff icon when no camera tracks are published', () => {
+
+  beforeEach(() => {
+    mockUseVideoContext.mockImplementation(() => ({ room: { localParticipant: {} } }));
+  });
+
+  it('should render the AvatarIcon component when no video tracks are published', () => {
     mockUsePublications.mockImplementation(() => []);
     const wrapper = shallow(
       <MainParticipantInfo participant={{ identity: 'mockIdentity' } as any}>mock children</MainParticipantInfo>
     );
-    expect(wrapper.find('VideocamOffIcon').exists()).toEqual(true);
+    expect(wrapper.find(AvatarIcon).exists()).toBe(true);
   });
 
-  it('should not render a VideoCamOff icon when a camera track is published', () => {
+  it('should render not the AvatarIcon component when no video tracks are published', () => {
     mockUsePublications.mockImplementation(() => [{ trackName: 'camera-123456' }]);
     const wrapper = shallow(
       <MainParticipantInfo participant={{ identity: 'mockIdentity' } as any}>mock children</MainParticipantInfo>
     );
-    expect(wrapper.find('VideocamOffIcon').exists()).toEqual(false);
+    expect(wrapper.find(AvatarIcon).exists()).toBe(false);
   });
 
   it('should add isVideoSwitchedOff class to container div when video is switched off', () => {
@@ -60,4 +70,20 @@ describe('the MainParticipantInfo component', () => {
     shallow(<MainParticipantInfo participant={{ identity: 'mockIdentity' } as any}>mock children</MainParticipantInfo>);
     expect(mockUseTrack).toHaveBeenCalledWith({ trackName: 'camera-123456' });
   });
+
+  it('should add "(You)" to the participants identity when they are the localParticipant', () => {
+    const mockParticipant = { identity: 'mockIdentity' } as any;
+    mockUseVideoContext.mockImplementationOnce(() => ({ room: { localParticipant: mockParticipant } }));
+    mockUseIsTrackSwitchedOff.mockImplementation(() => false);
+    const wrapper = shallow(<MainParticipantInfo participant={mockParticipant}>mock children</MainParticipantInfo>);
+    expect(wrapper.text()).toContain('mockIdentity (You)');
+  });
+
+  it('should not add "(You)" to the participants identity when they are the localParticipant', () => {
+    mockUseIsTrackSwitchedOff.mockImplementation(() => false);
+    const wrapper = shallow(
+      <MainParticipantInfo participant={{ identity: 'mockIdentity' } as any}>mock children</MainParticipantInfo>
+    );
+    expect(wrapper.text()).not.toContain('mockIdentity (You)');
+  });
 });

src/components/MenuBar/Buttons/EndCallButton/EndCallButton.test.tsx

@@ -4,7 +4,7 @@ import { shallow } from 'enzyme';
 import EndCallButton from './EndCallButton';
 
 const mockRoom: any = { disconnect: jest.fn() };
-jest.mock('../../../hooks/useVideoContext/useVideoContext', () => () => ({ room: mockRoom }));
+jest.mock('../../../../hooks/useVideoContext/useVideoContext', () => () => ({ room: mockRoom }));
 
 describe('End Call button', () => {
   it('should disconnect from the room when clicked', () => {

src/components/MenuBar/Buttons/ToggleAudioButton/ToggleAudioButton.test.tsx

@@ -2,44 +2,34 @@ import React from 'react';
 import { shallow } from 'enzyme';
 import useLocalAudioToggle from '../../../../hooks/useLocalAudioToggle/useLocalAudioToggle';
 
+import MicIcon from '../../../../icons/MicIcon';
+import MicOffIcon from '../../../../icons/MicOffIcon';
 import ToggleAudioButton from './ToggleAudioButton';
 
-jest.mock('../../../hooks/useLocalAudioToggle/useLocalAudioToggle');
+jest.mock('../../../../hooks/useLocalAudioToggle/useLocalAudioToggle');
 
 const mockUseLocalAudioToggle = useLocalAudioToggle as jest.Mock<any>;
 
 describe('the ToggleAudioButton component', () => {
   it('should render correctly when audio is enabled', () => {
     mockUseLocalAudioToggle.mockImplementation(() => [true, () => {}]);
     const wrapper = shallow(<ToggleAudioButton />);
-    expect(wrapper.find('MicIcon').exists()).toBe(true);
-    expect(wrapper.find('MicOffIcon').exists()).toBe(false);
-    expect(
-      wrapper
-        .find('WithStyles(ForwardRef(Tooltip))')
-        .at(0)
-        .prop('title')
-    ).toBe('Mute Audio');
+    expect(wrapper.prop('startIcon')).toEqual(<MicIcon />);
+    expect(wrapper.text()).toBe('Mute');
   });
 
   it('should render correctly when audio is disabled', () => {
     mockUseLocalAudioToggle.mockImplementation(() => [false, () => {}]);
     const wrapper = shallow(<ToggleAudioButton />);
-    expect(wrapper.find('MicIcon').exists()).toBe(false);
-    expect(wrapper.find('MicOffIcon').exists()).toBe(true);
-    expect(
-      wrapper
-        .find('WithStyles(ForwardRef(Tooltip))')
-        .at(0)
-        .prop('title')
-    ).toBe('Unmute Audio');
+    expect(wrapper.prop('startIcon')).toEqual(<MicOffIcon />);
+    expect(wrapper.text()).toBe('Unmute');
   });
 
   it('should call the correct toggle function when clicked', () => {
     const mockFn = jest.fn();
     mockUseLocalAudioToggle.mockImplementation(() => [false, mockFn]);
     const wrapper = shallow(<ToggleAudioButton />);
-    wrapper.find('WithStyles(ForwardRef(Fab))').simulate('click');
+    wrapper.simulate('click');
     expect(mockFn).toHaveBeenCalled();
   });
 });

src/components/MenuBar/Buttons/ToggleVideoButton/ToggleVideoButton.test.tsx

@@ -3,47 +3,46 @@ import { shallow } from 'enzyme';
 import useLocalVideoToggle from '../../../../hooks/useLocalVideoToggle/useLocalVideoToggle';
 
 import ToggleVideoButton from './ToggleVideoButton';
+import VideoOffIcon from '../../../../icons/VideoOffIcon';
+import VideoOnIcon from '../../../../icons/VideoOnIcon';
 
-jest.mock('../../../hooks/useLocalVideoToggle/useLocalVideoToggle');
+jest.mock('../../../../hooks/useLocalVideoToggle/useLocalVideoToggle');
 
 const mockUseLocalVideoToggle = useLocalVideoToggle as jest.Mock<any>;
 
 describe('the ToggleVideoButton component', () => {
   it('should render correctly when video is enabled', () => {
     mockUseLocalVideoToggle.mockImplementation(() => [true, () => {}]);
     const wrapper = shallow(<ToggleVideoButton />);
-    expect(wrapper.find('VideocamIcon').exists()).toBe(true);
-    expect(wrapper.find('VideocamOffIcon').exists()).toBe(false);
-    expect(wrapper.prop('title')).toBe('Mute Video');
+    expect(wrapper.prop('startIcon')).toEqual(<VideoOnIcon />);
+    expect(wrapper.text()).toBe('Stop Video');
   });
 
   it('should render correctly when video is disabled', () => {
     mockUseLocalVideoToggle.mockImplementation(() => [false, () => {}]);
     const wrapper = shallow(<ToggleVideoButton />);
-    expect(wrapper.find('VideocamIcon').exists()).toBe(false);
-    expect(wrapper.find('VideocamOffIcon').exists()).toBe(true);
-    expect(wrapper.prop('title')).toBe('Unmute Video');
+    expect(wrapper.prop('startIcon')).toEqual(<VideoOffIcon />);
+    expect(wrapper.text()).toBe('Start Video');
   });
 
   it('should call the correct toggle function when clicked', () => {
     const mockFn = jest.fn();
     mockUseLocalVideoToggle.mockImplementation(() => [false, mockFn]);
     const wrapper = shallow(<ToggleVideoButton />);
-    wrapper.find('WithStyles(ForwardRef(Fab))').simulate('click');
+    wrapper.simulate('click');
     expect(mockFn).toHaveBeenCalled();
   });
 
   it('should throttle the toggle function to 200ms', () => {
     const mockFn = jest.fn();
     mockUseLocalVideoToggle.mockImplementation(() => [false, mockFn]);
     const wrapper = shallow(<ToggleVideoButton />);
-    const button = wrapper.find('WithStyles(ForwardRef(Fab))');
     Date.now = () => 100000;
-    button.simulate('click'); // Should register
+    wrapper.simulate('click'); // Should register
     Date.now = () => 100100;
-    button.simulate('click'); // Should be ignored
+    wrapper.simulate('click'); // Should be ignored
     Date.now = () => 100300;
-    button.simulate('click'); // Should register
+    wrapper.simulate('click'); // Should register
     expect(mockFn).toHaveBeenCalledTimes(2);
   });
 });