Merge pull request #76 from RasaHQ/feature/error-toast-message-on-net…

…work-issue-socket-io

test(e2e):Error toast message on Socket IO connection

.github/workflows/chat-widget.yml

@@ -31,3 +31,9 @@ jobs:
 
       - name: Lerna - Tests
         run: npm run test
+
+      - name: E2E - Install dependencies
+        run: npm run e2e:install
+
+      - name: E2E - Run automation suite
+        run: npm run e2e:run

e2e/cypress/fixtures/chatbotWidgetData.ts

@@ -9,6 +9,7 @@ const userInputs = {
   quickRepliesMessage: 'Markdown',
   videoMessage: 'Video',
   quickRepliesUserReply: 'hyperlink',
+  errorConnectionSocketioTest: 'Connection',
 } as const;
 
 type TUserInputsType = typeof userInputs;

e2e/cypress/plugins/mockSocketIO/index.ts

@@ -66,10 +66,14 @@ function startFakeWebsocketServer(options?: Partial<ServerOptions>) {
     socket.on('user_uttered', (...args) => {
       const message = args[0].message as TUserInput;
       const eventPayload = botResponses[message];
-      io.emit('bot_uttered', {
-        ...eventPayload,
-        session_id: sessionId,
-      });
+      if (message === 'Connection') {
+        io.emit('error');
+      } else {
+        io.emit('bot_uttered', {
+          ...eventPayload,
+          session_id: sessionId,
+        });
+      }
     });
   });
 }

e2e/cypress/tests/errorToastMessageSocketIO.cy.ts

@@ -0,0 +1,92 @@
+import { chatbotWidgetPage } from '@rasa-cypress-POM/chatbotWidgetPOM';
+import {
+  userInputs,
+  widgetProps,
+} from '@rasa-cypress-fixtures/chatbotWidgetData';
+
+describe('Error Toast message on Network Connectivity issues with Socket IO connection', () => {
+  const mockedServerUrl = Cypress.env('mockedServerUrl');
+
+  beforeEach(() => {
+    cy.setPropertiesAndOpenThePage([
+      { key: 'server-url', value: mockedServerUrl },
+      widgetProps.toggleFullScreen,
+    ]);
+  });
+
+  it('TC010 - Error toast message on Network connectivity issue - Socket IO', () => {
+    chatbotWidgetPage.widgetLauncher.click();
+
+    cy.userSendMessage(userInputs.textMessage);
+
+    chatbotWidgetPage.userChatMessage.should('be.visible');
+
+    chatbotWidgetPage.widgetSessionDivider.should('be.visible');
+
+    cy.checkUserMessageIsSent(userInputs.textMessage);
+
+    chatbotWidgetPage.botChatTextMessage.should('be.visible');
+
+    chatbotWidgetPage.botChatTextMessage
+      .get('span')
+      .should(
+        'contain.text',
+        "I understand you want to be connected to a human agent, but that's something I cannot help you with at the moment. Is there something else I can help you with?"
+      );
+
+    cy.userSendMessage(userInputs.errorConnectionSocketioTest);
+
+    cy.checkUserMessageIsSent(userInputs.errorConnectionSocketioTest);
+
+    chatbotWidgetPage.errorToastMessage.should('be.visible');
+
+    cy.matchImage({
+      title: 'errorToastMessageSocketIO',
+    });
+  });
+
+  it('TC011 - Error toast message on Network connectivity issue - Socket IO - Full screen mode', () => {
+    chatbotWidgetPage.rasaChatbotWidget.should(
+      'have.attr',
+      'toggle-full-screen'
+    );
+
+    chatbotWidgetPage.widgetLauncher.click();
+
+    chatbotWidgetPage.toggleFullScreen.should('be.visible');
+
+    chatbotWidgetPage.toggleFullScreen.click();
+
+    chatbotWidgetPage.widgetOpened.should(
+      'have.class',
+      'messenger--fullscreen'
+    );
+
+    cy.userSendMessage(userInputs.textMessage);
+
+    chatbotWidgetPage.userChatMessage.should('be.visible');
+
+    chatbotWidgetPage.widgetSessionDivider.should('be.visible');
+
+    cy.checkUserMessageIsSent(userInputs.textMessage);
+
+    chatbotWidgetPage.botChatTextMessage.should('be.visible');
+
+    chatbotWidgetPage.botChatTextMessage
+      .get('span')
+      .should(
+        'contain.text',
+        "I understand you want to be connected to a human agent, but that's something I cannot help you with at the moment. Is there something else I can help you with?"
+      );
+
+    cy.userSendMessage(userInputs.errorConnectionSocketioTest);
+
+    cy.checkUserMessageIsSent(userInputs.errorConnectionSocketioTest);
+
+    chatbotWidgetPage.errorToastMessage.should('be.visible');
+
+    cy.matchImage({
+      title: 'errorToastMessageSocketIOFullScreen',
+    });
+  });
+});