Video 3727 cypress testing

cypress/integration/twilio-video.spec.js

@@ -106,6 +106,76 @@ context('A video app user', () => {
     it('should be able to hear the other participant', () => {
       cy.getParticipant('test1').shouldBeMakingSound();
     });
+
+    describe('the chat feature', () => {
+      // Before we test the chat feature, we want to open the chat window and send enough messages
+      // to make the message list taller than its container so that we can test the scrolling behavior:
+      before(() => {
+        cy.get('[data-cy-chat-button]').click();
+      // Create an array with 15 values, then send a message when looping over each of them:
+        Array(15)
+          .fill(true)
+          .forEach((_, i) => {
+            cy.task('sendAMessage', {
+              name: 'test1',
+              message: 'welcome to the chat! - ' + i,
+            });
+          });
+      // Wait 1 second for the above to complete:
+        cy.wait(1000);
+        cy.contains('welcome to the chat! - 14');
+      });
+
+      after(() => {
+        cy.get('[data-cy-chat-button]').click();
+      });
+
+      it('should see "1 new message" button when not scrolled to bottom of chat and a new message is received', () => {
+        cy.get('[data-cy-message-list-inner-scroll]').scrollTo(0, 0);
+        cy.task('sendAMessage', { name: 'test1', message: 'how is it going?' });
+        cy.contains('1 new message').should('be.visible');
+      });
+
+      it('should scroll to bottom of chat when "1 new message button" is clicked on', () => {
+        cy.get('[data-cy-message-list-inner-scroll]').scrollTo(0, 0);
+        cy.task('sendAMessage', { name: 'test1', message: 'Ahoy!' });
+        cy.contains('Ahoy!');
+        cy.get('[data-cy-new-message-button]')
+          .should('be.visible')
+          .click();
+        cy.get('[data-cy-message-list-inner-scroll]')
+          .contains('Ahoy!')
+          .should('be.visible');
+
+        // Here we are checking if the chat window has scrolled all the way to the bottom.
+        // The following will be true if the scrolling container's scrollHeight property
+        // is equal to its 'scrollTop' plus its 'clientHeight' properties:
+        cy.get('[data-cy-message-list-inner-scroll]').should($el => {
+          expect($el.prop('scrollHeight')).to.equal($el.prop('scrollTop') + $el.prop('clientHeight'));
+        });
+      });
+
+      it('should not see "1 new message" button when manually scroll to bottom of chat after receiving new message', () => {
+        cy.get('[data-cy-message-list-inner-scroll]').scrollTo(0, 0);
+        cy.task('sendAMessage', { name: 'test1', message: 'chatting is fun!' });
+        cy.get('[data-cy-new-message-button]').should('be.visible');
+        cy.get('[data-cy-message-list-inner-scroll]').scrollTo('bottom');
+        cy.get('[data-cy-new-message-button]').should('not.be.visible');
+        cy.get('[data-cy-message-list-inner-scroll]')
+          .contains('chatting is fun!')
+          .should('be.visible');
+      });
+
+      it('should auto-scroll to bottom of chat when already scrolled to bottom and a new message is received', () => {
+        cy.get('[data-cy-message-list-inner-scroll]').scrollTo('bottom');
+        cy.task('sendAMessage', { name: 'test1', message: 'what a wonderful day!' });
+        cy.contains('what a wonderful day!');
+        // Check if chat window is scrolled to the bottom:
+        cy.get('[data-cy-message-list-inner-scroll]').should($el => {
+          expect($el.prop('scrollHeight')).to.equal($el.prop('scrollTop') + $el.prop('clientHeight'));
+        });
+      });
+    });
   });
 
   describe('when entering an empty room that three participants will join', () => {

cypress/plugins/index.js

@@ -56,6 +56,13 @@ module.exports = (on, config) => {
       delete participants[name];
       return Promise.resolve(null);
     },
+    sendAMessage: async ({ message, name }) => {
+      const page = participants[name];
+      await page.click('[data-cy-chat-button]');
+      await page.type('[data-cy-chat-input]', message);
+      await page.click('[data-cy-send-message-button]');
+      return Promise.resolve(null);
+    },
   };
   on('task', participantFunctions);
 };

package.json

@@ -48,7 +48,7 @@
     "@testing-library/react-hooks": "^3.2.1",
     "@types/enzyme": "^3.10.4",
     "@types/enzyme-adapter-react-16": "^1.0.5",
-    "cypress": "^5.4.0",
+    "cypress": "^6.8.0",
     "cypress-multi-reporters": "^1.4.0",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.2",

src/components/Buttons/ToggleChatButton/ToggleChatButton.tsx

@@ -82,6 +82,7 @@ export default function ToggleVideoButton() {
 
   return (
     <Button
+      data-cy-chat-button
       onClick={toggleChatWindow}
       disabled={!conversation}
       startIcon={

src/components/ChatWindow/ChatInput/ChatInput.tsx

@@ -135,6 +135,7 @@ export default function ChatInput({ conversation, isChatWindowOpen }: ChatInputP
         onKeyPress={handleReturnKeyPress}
         onChange={handleChange}
         value={messageBody}
+        data-cy-chat-input
         ref={textInputRef}
       />
 
@@ -164,6 +165,7 @@ export default function ChatInput({ conversation, isChatWindowOpen }: ChatInputP
             color="primary"
             variant="contained"
             disabled={!isValidMessage}
+            data-cy-send-message-button
           >
             <SendMessageIcon />
           </Button>

src/components/ChatWindow/MessageList/MessageList.test.tsx

@@ -63,6 +63,7 @@ const messages: any = [
       filename: 'test1.txt',
       size: 123456,
     },
+    sid: 'IMXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX8',
     type: 'media',
   },
 ];