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

Tim Mendoza · GitHub Enterprise · commit 6c9f66527388 · 2020-09-30T10:34:15.000-06:00
Feature/design refresh fix cypress tests
diff --git a/cypress.json b/cypress.json
@@ -1,6 +1,6 @@
 {
   "video": false,
-  "defaultCommandTimeout": 10000,
+  "defaultCommandTimeout": 30000,
   "baseUrl": "http://localhost:3000",
   "reporter": "cypress-multi-reporters",
   "reporterOptions": {
diff --git a/cypress/integration/twilio-video.spec.js b/cypress/integration/twilio-video.spec.js
@@ -12,12 +12,17 @@ context('A video app user', () => {
   describe('before entering a room', () => {
     it('should see their audio level indicator moving in the media device panel', () => {
       cy.visit('/');
+
+      cy.get('#input-user-name').type('testuser');
+      cy.get('#input-room-name').type(getRoomName());
+      cy.get('[type="submit"]').click();
+
       cy.get('clipPath rect')
         .invoke('attr', 'y')
-        .should('be', 21);
+        .should('be', 14);
       cy.get('clipPath rect')
         .invoke('attr', 'y')
-        .should('be.lessThan', 21);
+        .should('be.lessThan', 14);
     });
   });
 
@@ -34,7 +39,7 @@ context('A video app user', () => {
     });
 
     it('should be inside the correct room', () => {
-      cy.get('header').should('contain', ROOM_NAME);
+      cy.get('footer').should('contain', ROOM_NAME);
       cy.getParticipant('testuser').should('contain', 'testuser');
     });
 
@@ -53,10 +58,10 @@ context('A video app user', () => {
       cy.getParticipant('test1')
         .get('clipPath rect')
         .invoke('attr', 'y')
-        .should('be', 21);
+        .should('be', 14);
       cy.get('clipPath rect')
         .invoke('attr', 'y')
-        .should('be.lessThan', 21);
+        .should('be.lessThan', 14);
     });
 
     it('should see other participants disconnect when they close their browser', () => {
@@ -158,32 +163,32 @@ context('A video app user', () => {
     it('should see participant "test1" when they are the dominant speaker', () => {
       cy.task('toggleParticipantAudio', 'test2');
       cy.task('toggleParticipantAudio', 'test3');
-      cy.getParticipant('test2').find('[data-cy-audio-mute-icon]');
-      cy.getParticipant('test3').find('[data-cy-audio-mute-icon]');
+      cy.getParticipant('test2').find('[data-test-audio-mute-icon]');
+      cy.getParticipant('test3').find('[data-test-audio-mute-icon]');
       cy.getParticipant('test1').shouldBeSameVideoAs('[data-cy-main-participant]');
     });
 
     it('should see participant "test2" when they are the dominant speaker', () => {
       cy.task('toggleParticipantAudio', 'test1');
       cy.task('toggleParticipantAudio', 'test2');
-      cy.getParticipant('test1').find('[data-cy-audio-mute-icon]');
-      cy.getParticipant('test3').find('[data-cy-audio-mute-icon]');
+      cy.getParticipant('test1').find('[data-test-audio-mute-icon]');
+      cy.getParticipant('test3').find('[data-test-audio-mute-icon]');
       cy.getParticipant('test2').shouldBeSameVideoAs('[data-cy-main-participant]');
     });
 
     it('should see participant "test3" when they are the dominant speaker', () => {
       cy.task('toggleParticipantAudio', 'test2');
       cy.task('toggleParticipantAudio', 'test3');
-      cy.getParticipant('test1').find('[data-cy-audio-mute-icon]');
-      cy.getParticipant('test2').find('[data-cy-audio-mute-icon]');
+      cy.getParticipant('test1').find('[data-test-audio-mute-icon]');
+      cy.getParticipant('test2').find('[data-test-audio-mute-icon]');
       cy.getParticipant('test3').shouldBeSameVideoAs('[data-cy-main-participant]');
     });
 
     it('should see participant "test3" when there is no dominant speaker', () => {
       cy.task('toggleParticipantAudio', 'test3');
-      cy.getParticipant('test1').find('[data-cy-audio-mute-icon]');
-      cy.getParticipant('test2').find('[data-cy-audio-mute-icon]');
-      cy.getParticipant('test3').find('[data-cy-audio-mute-icon]');
+      cy.getParticipant('test1').find('[data-test-audio-mute-icon]');
+      cy.getParticipant('test2').find('[data-test-audio-mute-icon]');
+      cy.getParticipant('test3').find('[data-test-audio-mute-icon]');
       cy.getParticipant('test3').shouldBeSameVideoAs('[data-cy-main-participant]');
     });
   });
diff --git a/cypress/plugins/index.js b/cypress/plugins/index.js
@@ -8,7 +8,7 @@ const participants = {};
 module.exports = (on, config) => {
   const participantFunctions = {
     addParticipant: async ({ name, roomName, color }) => {
-      const args = ['--use-fake-ui-for-media-stream', '--use-fake-device-for-media-stream'];
+      const args = ['--use-fake-ui-for-media-stream', '--use-fake-device-for-media-stream', `--window-size=1920,1080`];
 
       if (color) {
         args.push(`--use-file-for-fake-video-capture=cypress/fixtures/${color}.y4m`);
@@ -20,28 +20,27 @@ module.exports = (on, config) => {
       });
       const page = (participants[name] = await browser.newPage()); // keep track of this participant for future use
       await page.goto(config.baseUrl);
-      await page.type('#menu-name', name);
-      await page.type('#menu-room', roomName);
+      await page.type('#input-user-name', name);
+      await page.type('#input-room-name', roomName);
       await page.click('[type="submit"]');
+      await page.waitForSelector('[data-cy-join-now]:not([disabled])');
+      await page.click('[data-cy-join-now]');
       await page.waitForSelector('[data-cy-main-participant] video');
       return Promise.resolve(null);
     },
     toggleParticipantAudio: async name => {
       const page = participants[name];
-      await page.click('body'); // To make controls reappear
       await page.click('[data-cy-audio-toggle]');
       return Promise.resolve(null);
     },
     shareParticipantScreen: async name => {
       const page = participants[name];
-      await page.click('body');
-      await page.click('[title="Share Screen"]');
+      await page.click('[data-cy-share-screen]');
       return Promise.resolve(null);
     },
     removeParticipant: async name => {
       const page = participants[name];
-      await page.click('body');
-      await page.click('[title="End Call"]');
+      await page.click('[data-cy-disconnect]');
       await page.close();
       delete participants[name];
       return Promise.resolve(null);
diff --git a/cypress/support/commands.js b/cypress/support/commands.js
@@ -2,18 +2,19 @@ import detectSound from './detectSound';
 
 Cypress.Commands.add('joinRoom', (username, roomname) => {
   cy.visit('/');
-  cy.get('#menu-name').type(username);
-  cy.get('#menu-room').type(roomname);
+  cy.get('#input-user-name').type(username);
+  cy.get('#input-room-name').type(roomname);
   cy.get('[type="submit"]').click();
+  cy.get('[data-cy-join-now]').click();
   cy.get('[data-cy-main-participant]');
 });
 
 Cypress.Commands.add('leaveRoom', () => {
   cy.wait(500);
   cy.get('body').click(); // Makes controls reappear
-  cy.get('[title="End Call"]').click();
+  cy.get('footer [data-cy-disconnect]').click();
   cy.task('removeAllParticipants');
-  cy.get('#menu-room');
+  cy.get('[type="submit"]');
 });
 
 Cypress.Commands.add('shouldBeColor', { prevSubject: 'element' }, (subject, color) => {
@@ -56,7 +57,7 @@ Cypress.Commands.add('shouldBeMakingSound', { prevSubject: 'element' }, subject
         }
       );
     });
-    
+
   cy.window()
     .then(win => {
       const participantIdentity = subject.attr('data-cy-participant');
diff --git a/jest.config.js b/jest.config.js
@@ -8,4 +8,7 @@ module.exports = {
   snapshotSerializers: ['enzyme-to-json/serializer'],
   setupFiles: ['<rootDir>/src/setupTests.ts'],
   reporters: ['default', 'jest-junit'],
+
+  // We don't need to test the static JSX in the icons folder, so let's exclude it from our test coverage report
+  coveragePathIgnorePatterns: ['node_modules', 'src/icons'],
 };
diff --git a/src/components/Buttons/EndCallButton/EndCallButton.tsx b/src/components/Buttons/EndCallButton/EndCallButton.tsx
@@ -23,7 +23,7 @@ export default function EndCallButton(props: { className?: string }) {
   const { room } = useVideoContext();
 
   return (
-    <Button onClick={() => room.disconnect()} className={clsx(classes.button, props.className)}>
+    <Button onClick={() => room.disconnect()} className={clsx(classes.button, props.className)} data-cy-disconnect>
       Disconnect
     </Button>
   );
diff --git a/src/components/Buttons/ToogleScreenShareButton/ToggleScreenShareButton.tsx b/src/components/Buttons/ToogleScreenShareButton/ToggleScreenShareButton.tsx
@@ -60,6 +60,7 @@ export default function ToggleScreenShareButton(props: { disabled?: boolean }) {
           onClick={toggleScreenShare}
           disabled={isDisabled}
           startIcon={<ScreenShareIcon />}
+          data-cy-share-screen
         >
           {SCREEN_SHARE_TEXT}
         </Button>
diff --git a/src/components/MainParticipantInfo/MainParticipantInfo.tsx b/src/components/MainParticipantInfo/MainParticipantInfo.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import clsx from 'clsx';
 import { makeStyles, Theme } from '@material-ui/core/styles';
-import { LocalVideoTrack, Participant, RemoteVideoTrack } from 'twilio-video';
+import { LocalAudioTrack, LocalVideoTrack, Participant, RemoteAudioTrack, RemoteVideoTrack } from 'twilio-video';
 
 import AvatarIcon from '../../icons/AvatarIcon';
 import Typography from '@material-ui/core/Typography';
@@ -12,6 +12,7 @@ import useScreenShareParticipant from '../../hooks/useScreenShareParticipant/use
 import useTrack from '../../hooks/useTrack/useTrack';
 import useVideoContext from '../../hooks/useVideoContext/useVideoContext';
 import useParticipantIsReconnecting from '../../hooks/useParticipantIsReconnecting/useParticipantIsReconnecting';
+import AudioLevelIndicator from '../AudioLevelIndicator/AudioLevelIndicator';
 
 const useStyles = makeStyles((theme: Theme) => ({
   container: {
@@ -22,7 +23,7 @@ const useStyles = makeStyles((theme: Theme) => ({
   identity: {
     background: 'rgba(0, 0, 0, 0.5)',
     color: 'white',
-    padding: '0.1em 0.3em',
+    padding: '0.1em 0.3em 0.1em 0',
     fontSize: '1.2em',
     display: 'inline-flex',
     '& svg': {
@@ -92,18 +93,23 @@ export default function MainParticipantInfo({ participant, children }: MainParti
   const videoTrack = useTrack(screenSharePublication || videoPublication);
   const isVideoEnabled = Boolean(videoTrack);
 
+  const audioPublication = publications.find(p => p.kind === 'audio');
+  const audioTrack = useTrack(audioPublication) as LocalAudioTrack | RemoteAudioTrack | undefined;
+
   const isVideoSwitchedOff = useIsTrackSwitchedOff(videoTrack as LocalVideoTrack | RemoteVideoTrack);
   const isParticipantReconnecting = useParticipantIsReconnecting(participant);
 
   return (
     <div
       data-cy-main-participant
+      data-cy-participant={participant.identity}
       className={clsx(classes.container, {
         [classes.fullWidth]: !isRemoteParticipantScreenSharing,
       })}
     >
       <div className={classes.infoContainer}>
         <div className={classes.identity}>
+          <AudioLevelIndicator audioTrack={audioTrack} />
           <Typography variant="body1" color="inherit">
             {participant.identity}
             {isLocal && ' (You)'}
diff --git a/src/components/ParticipantInfo/ParticipantInfo.tsx b/src/components/ParticipantInfo/ParticipantInfo.tsx
@@ -165,7 +165,7 @@ export default function ParticipantInfo({
   const videoTrack = useTrack(videoPublication);
   const isVideoSwitchedOff = useIsTrackSwitchedOff(videoTrack as LocalVideoTrack | RemoteVideoTrack);
 
-  const audioTrack = useTrack(audioPublication) as LocalAudioTrack | RemoteAudioTrack;
+  const audioTrack = useTrack(audioPublication) as LocalAudioTrack | RemoteAudioTrack | undefined;
   const isParticipantReconnecting = useParticipantIsReconnecting(participant);
 
   const classes = useStyles();
diff --git a/src/components/PreJoinScreens/DeviceSelectionScreen/DeviceSelectionScreen.tsx b/src/components/PreJoinScreens/DeviceSelectionScreen/DeviceSelectionScreen.tsx
@@ -97,7 +97,13 @@ export default function DeviceSelectionScreen({ name, roomName, setStep }: Devic
               <Button variant="outlined" color="primary" onClick={() => setStep(Steps.roomNameStep)}>
                 Cancel
               </Button>
-              <Button variant="contained" color="primary" onClick={handleJoin} disabled={disableButtons}>
+              <Button
+                variant="contained"
+                color="primary"
+                data-cy-join-now
+                onClick={handleJoin}
+                disabled={disableButtons}
+              >
                 Join Now
               </Button>
             </div>

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"video": false,`
`3`		`- "defaultCommandTimeout": 10000,`
	`3`	`+ "defaultCommandTimeout": 30000,`
`4`	`4`	`"baseUrl": "http://localhost:3000",`
`5`	`5`	`"reporter": "cypress-multi-reporters",`
`6`	`6`	`"reporterOptions": {`
Original file line number	Diff line number	Diff line change
`@@ -60,6 +60,7 @@ export default function ToggleScreenShareButton(props: { disabled?: boolean }) {`
`60`	`60`	`onClick={toggleScreenShare}`
`61`	`61`	`disabled={isDisabled}`
`62`	`62`	`startIcon={<ScreenShareIcon />}`
	`63`	`+ data-cy-share-screen`
`63`	`64`	`>`
`64`	`65`	`{SCREEN_SHARE_TEXT}`
`65`	`66`	`</Button>`