[#1045] Automated testing of the web socket

frontend/chat-plugin/handles/index.ts

@@ -1,3 +1,4 @@
 export const cyBubble = 'bubble';
 export const cyInputbarTextarea = 'inputbarTextarea';
 export const cyInputbarButton = 'inputbarButton';
+export const cyChatPluginMessageList = 'chatPluginMessageList';

frontend/chat-plugin/src/components/chat/index.tsx

@@ -18,7 +18,7 @@ import {SourceMessage, CommandUnion} from 'render';
 import {MessageInfoWrapper} from 'render/components/MessageInfoWrapper';
 /* eslint-disable @typescript-eslint/no-var-requires */
 const camelcaseKeys = require('camelcase-keys');
-import {cyBubble} from 'chat-plugin-handles';
+import {cyBubble, cyChatPluginMessageList} from 'chat-plugin-handles';
 
 let ws: WebSocket;
 
@@ -148,7 +148,7 @@ const Chat = (props: Props) => {
           <HeaderBarProp render={headerBar} />
           <div className={style.connectedContainer}>
             <div className={style.chat}>
-              <div id="messages" className={style.messages}>
+              <div id="messages" className={style.messages} data-cy={cyChatPluginMessageList}>
                 {messages.map((message, index: number) => {
                   const nextMessage = messages[index + 1];
                   const lastInGroup = nextMessage ? isFromContact(message) !== isFromContact(nextMessage) : true;

integration/chat-plugin/BUILD

@@ -8,6 +8,7 @@ ts_web_library(
     srcs = glob(["*.spec.ts"]),
     deps = [
         "//frontend/chat-plugin/handles:chat-plugin-handles",
+        "//frontend/ui/handles",
         "@npm//cypress",
     ],
 )

integration/chat-plugin/websocket_test.spec.ts

@@ -0,0 +1,84 @@
+import {cyBubble, cyInputbarTextarea, cyInputbarButton, cyChatPluginMessageList} from 'chat-plugin-handles';
+
+import {
+  cyChannelsChatPluginAddButton,
+  cyChannelsChatPluginConnectButton,
+  cyChannelsChatPluginFormNameInput,
+  cyChannelsChatPluginFormSubmitButton,
+} from 'handles';
+
+describe('Sends message from Inbox to Chatplugin', () => {
+  it('Login', () => {
+    cy.visit('/login');
+    cy.get('form')
+      .within(() => {
+        cy.get('input[type=email]').type(Cypress.env('username'));
+        cy.get('input[type=password]').type(Cypress.env('password'));
+      })
+      .submit();
+
+    cy.wait(500);
+
+    cy.visit('/channels');
+    cy.wait(500);
+    cy.url().should('include', '/channels');
+    cy.get(`[data-cy=${cyChannelsChatPluginAddButton}]`).click();
+    cy.get(`[data-cy=${cyChannelsChatPluginConnectButton}]`).click();
+    cy.get(`[data-cy=${cyChannelsChatPluginFormNameInput}]`).type(Cypress.env('chatPluginName'));
+    cy.get(`[data-cy=${cyChannelsChatPluginFormSubmitButton}]`).click();
+
+    cy.visit('http://airy.core/chatplugin/ui/example?channel_id=' + Cypress.env('channelId'));
+    cy.get(`[data-cy=${cyBubble}]`).click();
+    cy.get(`[data-cy=${cyInputbarTextarea}]`).type(Cypress.env('messageChatplugin'));
+    cy.get(`[data-cy=${cyInputbarButton}]`).click();
+
+    cy.wait(500);
+
+    cy.get(`[data-cy=${cyChatPluginMessageList}]`).children().its('length').should('eq', 2);
+
+    cy.wait(2500);
+
+    cy.request('POST', 'http://airy.core/users.login', {
+      email: Cypress.env('username'),
+      password: Cypress.env('password'),
+    }).then(response => {
+      const loginToken = response.body['token'];
+      console.log('LoginToken', loginToken);
+
+      cy.request({
+        method: 'POST',
+        url: 'http://airy.core/conversations.list',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: `Bearer ${loginToken}`,
+        },
+        body: {
+          cursor: null,
+          page_size: 2,
+        },
+      }).then(response => {
+        const conversationId = response.body.data[0].id;
+
+        cy.request({
+          method: 'POST',
+          url: 'http://airy.core/messages.send',
+          headers: {
+            'Content-Type': 'application/json',
+            Authorization: `Bearer ${loginToken}`,
+          },
+          body: {
+            conversation_id: `${conversationId}`,
+            message: {
+              text: Cypress.env('websocketMessage'),
+            },
+          },
+        }).then(response => {
+          expect(response).property('status').to.equal(200);
+        });
+        cy.wait(3000);
+
+        cy.get(`[data-cy=${cyChatPluginMessageList}]`).children().its('length').should('eq', 3);
+      });
+    });
+  });
+});

integration/cypress.json

@@ -9,7 +9,8 @@
        "tagName": "Cypress Tag",
        "searchQuery": "Cypress Filter",
        "messageInbox": "Hello from Cypress Inbox!",
-       "messageChatplugin": "Hello from Cypress Chatplugin!",
+       "messageChatplugin": "Hello from Cypress ChatPlugin!",
+       "websocketMessage": "Websocket Test Message",
        "channelId": "3502a0a7-933d-5410-b5fc-51f041146d89"
     },
     "viewportHeight": 800,

integration/ui/create_tag.spec.ts

@@ -12,7 +12,6 @@ import {
   cyTagsTableRowDisplayDeleteModal,
   cyTagsTableRowDisplayDeleteModalInput,
   cyTagsTableRowDisplayDeleteModalButton,
-  cyChannelsChatPluginList,
   cyChannelsFormBackButton,
 } from 'handles';
 

integration/ui/filter_conversation.spec.ts

@@ -6,7 +6,6 @@ import {
   cyChannelsChatPluginConnectButton,
   cyChannelsChatPluginFormNameInput,
   cyChannelsChatPluginFormSubmitButton,
-  cyChannelsChatPluginList,
   cyChannelsFormBackButton,
 } from 'handles';