test: add test for chatbox

graasp · Aug 12, 2021 · c172dfc · c172dfc
1 parent d0abdce
commit c172dfc
Show file tree

Hide file tree

Showing 7 changed files with 195 additions and 1 deletion.
diff --git a/cypress/fixtures/chatbox.js b/cypress/fixtures/chatbox.js
@@ -0,0 +1,31 @@
+import { DEFAULT_FOLDER_ITEM } from './items';
+import { CURRENT_USER, MEMBERS } from './members';
+
+export const ITEM_WITH_CHATBOX_MESSAGES = {
+  ...DEFAULT_FOLDER_ITEM,
+  id: 'adf09f5a-5688-11eb-ae93-0242ac130004',
+  path: 'adf09f5a_5688_11eb_ae93_0242ac130004',
+  name: 'item with chatbox messages',
+  chat: [
+    {
+      body: 'message1',
+      chatId: 'adf09f5a-5688-11eb-ae93-0242ac130004',
+      createdAt: '2021-08-11T12:56:36.834Z',
+      creator: CURRENT_USER.id,
+    },
+    {
+      body: 'message2',
+      chatId: 'adf09f5a-5688-11eb-ae93-0242ac130004',
+      createdAt: '2021-09-11T12:56:36.834Z',
+      creator: MEMBERS.BOB.id,
+    },
+  ],
+};
+
+export const ITEM_WITHOUT_CHATBOX_MESSAGES = {
+  ...DEFAULT_FOLDER_ITEM,
+  id: 'bdf09f5a-5688-11eb-ae93-0242ac130001',
+  path: 'bdf09f5a_5688_11eb_ae93_0242ac130001',
+  name: 'item without chatbox messages',
+  chat: [],
+};
diff --git a/cypress/integration/item/chatbox/chatbox.spec.js b/cypress/integration/item/chatbox/chatbox.spec.js
@@ -0,0 +1,98 @@
+import { WebSocket } from '@graasp/websockets/test/mock-client';
+import { buildItemPath } from '../../../../src/config/paths';
+import {
+  CHATBOX_ID,
+  CHATBOX_INPUT_BOX_ID,
+  ITEM_CHATBOX_BUTTON_ID,
+} from '../../../../src/config/selectors';
+import {
+  ITEM_WITHOUT_CHATBOX_MESSAGES,
+  ITEM_WITH_CHATBOX_MESSAGES,
+} from '../../../fixtures/chatbox';
+import { CURRENT_USER, MEMBERS } from '../../../fixtures/members';
+import { WEBSOCKETS_DELAY_TIME } from '../../../support/constants';
+
+const openChatbox = () => {
+  cy.get(`#${ITEM_CHATBOX_BUTTON_ID}`).click();
+  cy.wait('@getItemChat');
+};
+
+describe('Chatbox Scenarios', () => {
+  let client;
+
+  beforeEach(() => {
+    client = new WebSocket();
+  });
+
+  it('Send messages in chatbox', () => {
+    const item = ITEM_WITH_CHATBOX_MESSAGES;
+    cy.visitAndMockWs(buildItemPath(item.id), { items: [item] }, client);
+
+    // open chatbox
+    openChatbox();
+    // check the chatbox displays the already saved messages
+    for (const msg of item.chat) {
+      cy.get(`#${CHATBOX_ID}`).should('contain', msg.body);
+    }
+
+    // send message
+    const message = 'a new message';
+    cy.get(`#${CHATBOX_ID} #${CHATBOX_INPUT_BOX_ID} input`).type(message);
+    cy.get(`#${CHATBOX_ID} #${CHATBOX_INPUT_BOX_ID} button`).click();
+    cy.wait('@postItemChatMessage').then(({ request: { body } }) => {
+      expect(body.body).to.equal(message);
+
+      // mock websocket response
+      client.receive({
+        realm: 'notif',
+        type: 'update',
+        topic: 'chat/item',
+        channel: item.id,
+        body: {
+          kind: 'item',
+          op: 'publish',
+          message: {
+            creator: CURRENT_USER.id,
+            chatId: item.id,
+            body: message,
+          },
+        },
+      });
+      cy.wait(WEBSOCKETS_DELAY_TIME);
+
+      // check the new message is visible
+      cy.get(`#${CHATBOX_ID}`).should('contain', message);
+    });
+  });
+
+  it('Receive messages in chatbox from websockets', () => {
+    const item = ITEM_WITHOUT_CHATBOX_MESSAGES;
+    cy.visitAndMockWs(buildItemPath(item.id), { items: [item] }, client);
+
+    openChatbox();
+
+    // check websocket: the chatbox displays someone else's message
+    const bobMessage = 'a message from bob';
+    cy.get(`#${CHATBOX_ID}`).then(() => {
+      client.receive({
+        realm: 'notif',
+        type: 'update',
+        topic: 'chat/item',
+        channel: item.id,
+        body: {
+          kind: 'item',
+          op: 'publish',
+          message: {
+            creator: MEMBERS.BOB.id,
+            chatId: item.id,
+            body: bobMessage,
+          },
+        },
+      });
+      cy.wait(WEBSOCKETS_DELAY_TIME);
+
+      // check the new message is visible
+      cy.get(`#${CHATBOX_ID}`).should('contain', bobMessage);
+    });
+  });
+});
diff --git a/cypress/support/commands.js b/cypress/support/commands.js
@@ -43,6 +43,8 @@ import {
   mockGetItems,
   mockGetFlags,
   mockPostItemFlag,
+  mockGetItemChat,
+  mockPostItemChatMessage,
 } from './server';
 import './commands/item';
 import './commands/navigation';
@@ -76,6 +78,7 @@ Cypress.Commands.add(
     putItemLoginError = false,
     editMemberError = false,
     postItemFlagError = false,
+    getItemChatError = false,
   } = {}) => {
     const cachedItems = JSON.parse(JSON.stringify(items));
     const cachedMembers = JSON.parse(JSON.stringify(members));
@@ -152,6 +155,10 @@ Cypress.Commands.add(
     mockGetPublicChildren(items);
 
     mockGetItems({ items, currentMember });
+
+    mockGetItemChat({ items }, getItemChatError);
+
+    mockPostItemChatMessage();
   },
 );
 
@@ -168,3 +175,15 @@ Cypress.Commands.add('switchMode', (mode) => {
       break;
   }
 });
+
+Cypress.Commands.add(
+  'visitAndMockWs',
+  (visitRoute, sampleData, wsClientStub) => {
+    cy.setUpApi(sampleData);
+    cy.visit(visitRoute, {
+      onBeforeLoad: (win) => {
+        cy.stub(win, 'WebSocket', () => wsClientStub);
+      },
+    });
+  },
+);
diff --git a/cypress/support/server.js b/cypress/support/server.js
@@ -64,6 +64,8 @@ const {
   buildDeleteItemMembershipRoute,
   buildPostItemFlagRoute,
   GET_FLAGS_ROUTE,
+  buildGetItemChatRoute,
+  buildPostItemChatMessageRoute,
 } = API_ROUTES;
 
 const API_HOST = Cypress.env('API_HOST');
@@ -826,3 +828,40 @@ export const mockPostItemFlag = (items, shouldThrowError) => {
     },
   ).as('postItemFlag');
 };
+
+export const mockGetItemChat = ({ items }, shouldThrowError) => {
+  cy.intercept(
+    {
+      method: DEFAULT_GET.method,
+      url: new RegExp(`${API_HOST}/${buildGetItemChatRoute(ID_FORMAT)}$`),
+    },
+    ({ reply, url }) => {
+      if (shouldThrowError) {
+        return reply({ statusCode: StatusCodes.BAD_REQUEST });
+      }
+
+      const itemId = url.slice(API_HOST.length).split('/')[2];
+      const item = items.find(({ id }) => itemId === id);
+
+      return reply({ id: itemId, messages: item?.chat });
+    },
+  ).as('getItemChat');
+};
+
+export const mockPostItemChatMessage = (shouldThrowError) => {
+  cy.intercept(
+    {
+      method: DEFAULT_POST.method,
+      url: new RegExp(
+        `${API_HOST}/${buildPostItemChatMessageRoute(ID_FORMAT)}$`,
+      ),
+    },
+    ({ reply, body }) => {
+      if (shouldThrowError) {
+        return reply({ statusCode: StatusCodes.BAD_REQUEST });
+      }
+
+      return reply(body);
+    },
+  ).as('postItemChatMessage');
+};
diff --git a/src/components/common/Chatbox.js b/src/components/common/Chatbox.js
@@ -8,6 +8,7 @@ import { Map } from 'immutable';
 import { Loader } from '@graasp/ui';
 import { hooks, useMutation } from '../../config/queryClient';
 import { HEADER_HEIGHT } from '../../config/constants';
+import { CHATBOX_INPUT_BOX_ID, CHATBOX_ID } from '../../config/selectors';
 
 const { useItemChat, useCurrentMember } = hooks;
 
@@ -26,6 +27,8 @@ const Chatbox = ({ item }) => {
 
     return (
       <GraaspChatbox
+        id={CHATBOX_ID}
+        sendMessageBoxId={CHATBOX_INPUT_BOX_ID}
         currentMember={currentMember}
         chatId={item.get('id')}
         messages={chat?.get('messages')}

diff --git a/src/components/item/header/ItemHeaderActions.js b/src/components/item/header/ItemHeaderActions.js
@@ -14,6 +14,7 @@ import { ITEM_TYPES } from '../../../enums';
 import { LayoutContext } from '../../context/LayoutContext';
 import {
   buildEditButtonId,
+  ITEM_CHATBOX_BUTTON_ID,
   ITEM_INFORMATION_BUTTON_ID,
   ITEM_INFORMATION_ICON_IS_OPEN_CLASS,
 } from '../../../config/selectors';
@@ -96,7 +97,7 @@ const ItemHeaderActions = ({ onClickMetadata, onClickChatbox, item }) => {
       {renderTableActions()}
       {id && (
         <>
-          <IconButton id={ITEM_INFORMATION_BUTTON_ID} onClick={onClickChatbox}>
+          <IconButton id={ITEM_CHATBOX_BUTTON_ID} onClick={onClickChatbox}>
             <ForumIcon />
           </IconButton>
           <IconButton

diff --git a/src/config/selectors.js b/src/config/selectors.js
@@ -127,3 +127,6 @@ export const SHARE_ITEM_DIALOG_ID = 'shareItemDialog';
 export const SHARE_ITEM_DIALOG_LINK_ID = 'shareItemDialogLink';
 export const SHARE_ITEM_DIALOG_LINK_SELECT_ID = 'shareItemDialogLinkSelect';
 export const ACCESS_INDICATION_ID = 'accessIndication';
+export const ITEM_CHATBOX_BUTTON_ID = 'itemChatboxButton';
+export const CHATBOX_ID = 'chatbox';
+export const CHATBOX_INPUT_BOX_ID = 'chatboxInputBox';