feat: update to mui5

graasp · Oct 12, 2022 · 3a16dbc · 3a16dbc
1 parent a746be1
commit 3a16dbc
Show file tree

Hide file tree

Showing 28 changed files with 1,707 additions and 1,569 deletions.
diff --git a/.prettierrc b/.prettierrc
@@ -3,7 +3,13 @@
   "tabWidth": 2,
   "semi": true,
   "singleQuote": true,
-  "importOrder": ["^@(?!graasp|material)(.*)", "^react", "^@?material(.*)", "^@?graasp(.*)", "^[./]"],
+  "importOrder": [
+    "^@(?!graasp|mui)(.*)",
+    "^react",
+    "^@?mui(.*)",
+    "^@?graasp(.*)",
+    "^[./]"
+  ],
   "importOrderSeparation": true,
   "importOrderSortSpecifiers": true
 }
diff --git a/cypress/fixtures/chat_messages.ts b/cypress/fixtures/chat_messages.ts
@@ -1,9 +1,19 @@
 import { v4 } from 'uuid';
 
+import { ChatMessage } from '../../src/types';
 import { CURRENT_MEMBER, MEMBERS } from './members';
 
 export const CHAT_ID = v4();
 
+export const getMockMessage = ({ member = CURRENT_MEMBER }): ChatMessage => ({
+  id: v4(),
+  chatId: CHAT_ID,
+  creator: member.id,
+  createdAt: new Date().toISOString(),
+  updatedAt: new Date().toISOString(),
+  body: 'This is a message',
+});
+
 export const CHAT_MESSAGES = [
   {
     id: v4(),

diff --git a/cypress/integration/message-actions.cy.tsx b/cypress/integration/message-actions.cy.tsx
@@ -1,7 +1,11 @@
-/// <reference types="./cypress"/>
+/// <reference types="../cypress"/>
 import { List } from 'immutable';
 
-import { ImmutableMember, Member } from '../../src';
+import React from 'react';
+
+import { convertJs } from '@graasp/sdk';
+
+import { ImmutableMember } from '../../src';
 import Chatbox from '../../src/components/Chatbox/Chatbox';
 import {
   dataCyWrapper,
@@ -16,15 +20,18 @@ import {
 import { SIDE_PANE_HEIGHT, SIDE_PANE_WIDTH } from '../../src/constants';
 import { CHAT_ID, CHAT_MESSAGES, spyMethod } from '../fixtures/chat_messages';
 import { CURRENT_MEMBER, MEMBERS } from '../fixtures/members';
+import { mockUseAvatar } from '../fixtures/mockHooks';
 
 describe('Message actions', () => {
   beforeEach(() => {
+    const { hook: fakeHook } = mockUseAvatar();
     cy.mount(
       <Chatbox
         chatId={CHAT_ID}
         currentMember={new ImmutableMember(MEMBERS.ANNA)}
-        members={List(Object.values(MEMBERS) as Member[])}
-        messages={List(CHAT_MESSAGES)}
+        members={List(convertJs(Object.values(MEMBERS)))}
+        messages={List(convertJs(CHAT_MESSAGES))}
+        useAvatarHook={fakeHook}
       />,
     );
   });
@@ -45,13 +52,15 @@ describe('Message actions', () => {
 describe('Delete action', () => {
   it('should delete message', () => {
     const deleteMessageSpy = spyMethod('spyMethod');
+    const { hook: fakeHook } = mockUseAvatar();
     cy.mount(
       <Chatbox
         chatId={CHAT_ID}
         currentMember={new ImmutableMember(MEMBERS.ANNA)}
-        members={List(Object.values(MEMBERS) as Member[])}
-        messages={List(CHAT_MESSAGES)}
+        members={List(convertJs(Object.values(MEMBERS)))}
+        messages={List(convertJs(CHAT_MESSAGES))}
         deleteMessageFunction={deleteMessageSpy}
+        useAvatarHook={fakeHook}
       />,
     );
     cy.get(dataCyWrapper(messageActionsButtonCypress))
@@ -69,14 +78,16 @@ describe('Edit action', () => {
     cy.viewport(SIDE_PANE_WIDTH, SIDE_PANE_HEIGHT);
     const editMessageSpy = spyMethod('editSpyMethod');
     const sendMessageSpy = spyMethod('sendSpyMethod');
+    const { hook: fakeHook } = mockUseAvatar();
     cy.mount(
       <Chatbox
         chatId={CHAT_ID}
         currentMember={new ImmutableMember(MEMBERS.ANNA)}
-        members={List(Object.values(MEMBERS) as Member[])}
-        messages={List(CHAT_MESSAGES)}
+        members={List(convertJs(Object.values(MEMBERS)))}
+        messages={List(convertJs(CHAT_MESSAGES))}
         editMessageFunction={editMessageSpy}
         sendMessageFunction={sendMessageSpy}
+        useAvatarHook={fakeHook}
       />,
     );
 

diff --git a/cypress/integration/render-ui.cy.tsx b/cypress/integration/render-ui.cy.tsx
@@ -2,26 +2,36 @@
 import { List } from 'immutable';
 import { v4 } from 'uuid';
 
-import { ImmutableMember, Member } from '../../src';
+import React from 'react';
+
+import { convertJs } from '@graasp/sdk';
+
+import { ImmutableMember } from '../../src';
 import Chatbox from '../../src/components/Chatbox/Chatbox';
 import {
   dataCyWrapper,
   inputTextFieldTextAreaCypress,
   messageIdCyWrapper,
   messagesContainerCypress,
 } from '../../src/config/selectors';
-import { CHAT_ID, CHAT_MESSAGES } from '../fixtures/chat_messages';
+import {
+  CHAT_ID,
+  CHAT_MESSAGES,
+  getMockMessage,
+} from '../fixtures/chat_messages';
 import { MEMBERS } from '../fixtures/members';
 import { mockUseAvatar } from '../fixtures/mockHooks';
 
 describe('Render Avatar', () => {
   beforeEach(() => {
+    const { hook: fakeHook } = mockUseAvatar();
     cy.mount(
       <Chatbox
         chatId={CHAT_ID}
         currentMember={new ImmutableMember(MEMBERS.ANNA)}
-        members={List(Object.values(MEMBERS) as Member[])}
-        messages={List(CHAT_MESSAGES)}
+        members={List(convertJs(Object.values(MEMBERS)))}
+        messages={List(convertJs(CHAT_MESSAGES))}
+        useAvatarHook={fakeHook}
       />,
     );
   });
@@ -32,8 +42,8 @@ describe('Render Avatar', () => {
       <Chatbox
         chatId={CHAT_ID}
         currentMember={new ImmutableMember(MEMBERS.ANNA)}
-        members={List(Object.values(MEMBERS) as Member[])}
-        messages={List(CHAT_MESSAGES)}
+        members={List(convertJs(Object.values(MEMBERS)))}
+        messages={List(convertJs(CHAT_MESSAGES))}
         useAvatarHook={fakeHook}
       />,
     );
@@ -43,12 +53,14 @@ describe('Render Avatar', () => {
 
 describe('Autofocus input field', () => {
   it('should autofocus input field on first render', () => {
+    const { hook: fakeHook } = mockUseAvatar();
     cy.mount(
       <Chatbox
         chatId={CHAT_ID}
         currentMember={new ImmutableMember(MEMBERS.ANNA)}
-        members={List(Object.values(MEMBERS) as Member[])}
-        messages={List(CHAT_MESSAGES)}
+        members={List(convertJs(Object.values(MEMBERS)))}
+        messages={List(convertJs(CHAT_MESSAGES))}
+        useAvatarHook={fakeHook}
       />,
     ).then(() =>
       cy.get(`#${inputTextFieldTextAreaCypress}`).should('be.focused'),
@@ -58,27 +70,35 @@ describe('Autofocus input field', () => {
 
 describe('Messages container', () => {
   it('should scroll when there are a lot of messages', () => {
+    const { hook: fakeHook } = mockUseAvatar();
     const firstId = v4();
     const lastId = v4();
     cy.mount(
       <Chatbox
         chatId={CHAT_ID}
         currentMember={new ImmutableMember(MEMBERS.ANNA)}
-        members={List(Object.values(MEMBERS) as Member[])}
-        messages={List([
-          {
-            ...CHAT_MESSAGES[0],
-            id: firstId,
-          },
-          ...CHAT_MESSAGES,
-          ...CHAT_MESSAGES,
-          ...CHAT_MESSAGES,
-          ...CHAT_MESSAGES,
-          {
-            ...CHAT_MESSAGES[0],
-            id: lastId,
-          },
-        ])}
+        members={List(convertJs(Object.values(MEMBERS)))}
+        messages={List(
+          convertJs([
+            {
+              ...CHAT_MESSAGES[0],
+              id: firstId,
+            },
+            getMockMessage({ member: MEMBERS.ANNA }),
+            getMockMessage({ member: MEMBERS.BOB }),
+            getMockMessage({ member: MEMBERS.ANNA }),
+            getMockMessage({ member: MEMBERS.ANNA }),
+            getMockMessage({ member: MEMBERS.BOB }),
+            getMockMessage({ member: MEMBERS.BOB }),
+            getMockMessage({ member: MEMBERS.ANNA }),
+            getMockMessage({ member: MEMBERS.ANNA }),
+            {
+              ...CHAT_MESSAGES[0],
+              id: lastId,
+            },
+          ]),
+        )}
+        useAvatarHook={fakeHook}
       />,
     ).then(() => {
       cy.get(dataCyWrapper(messageIdCyWrapper(lastId))).should('be.visible');

diff --git a/cypress/integration/send-message.cy.tsx b/cypress/integration/send-message.cy.tsx
@@ -1,7 +1,11 @@
-/// <reference types="./cypress"/>
+/// <reference types="../cypress"/>
 import { List } from 'immutable';
 
-import { ImmutableMember, Member } from '../../src';
+import React from 'react';
+
+import { convertJs } from '@graasp/sdk';
+
+import { ImmutableMember } from '../../src';
 import Chatbox from '../../src/components/Chatbox/Chatbox';
 import {
   charCounterCypress,
@@ -19,15 +23,18 @@ import {
   spyMethod,
 } from '../fixtures/chat_messages';
 import { MEMBERS } from '../fixtures/members';
+import { mockUseAvatar } from '../fixtures/mockHooks';
 
 describe('Enter text', () => {
   beforeEach(() => {
+    const { hook: fakeHook } = mockUseAvatar();
     cy.mount(
       <Chatbox
         chatId={CHAT_ID}
         currentMember={new ImmutableMember(MEMBERS.ANNA)}
-        members={List(Object.values(MEMBERS) as Member[])}
-        messages={List(CHAT_MESSAGES)}
+        members={List(convertJs(Object.values(MEMBERS)))}
+        messages={List(convertJs(CHAT_MESSAGES))}
+        useAvatarHook={fakeHook}
       />,
     );
   });
@@ -53,13 +60,15 @@ describe('Send message', () => {
   it('should send a message with click', () => {
     const inputText = 'Hello there';
     const sendMessageSpy = spyMethod('spyMethod');
+    const { hook: fakeHook } = mockUseAvatar();
     cy.mount(
       <Chatbox
         chatId={CHAT_ID}
         currentMember={new ImmutableMember(MEMBERS.ANNA)}
-        members={List(Object.values(MEMBERS) as Member[])}
-        messages={List(CHAT_MESSAGES)}
+        members={List(convertJs(Object.values(MEMBERS)))}
+        messages={List(convertJs(CHAT_MESSAGES))}
         sendMessageFunction={sendMessageSpy}
+        useAvatarHook={fakeHook}
       />,
     );
     cy.get(dataCyWrapper(inputTextFieldCypress)).type(inputText);
@@ -70,13 +79,15 @@ describe('Send message', () => {
   it('should send a message with enter', function () {
     const inputText = 'Hello there';
     const sendMessageSpy = spyMethod('spyMethod');
+    const { hook: fakeHook } = mockUseAvatar();
     cy.mount(
       <Chatbox
         chatId={CHAT_ID}
         currentMember={new ImmutableMember(MEMBERS.ANNA)}
-        members={List(Object.values(MEMBERS) as Member[])}
-        messages={List(CHAT_MESSAGES)}
+        members={List(convertJs(Object.values(MEMBERS)))}
+        messages={List(convertJs(CHAT_MESSAGES))}
         sendMessageFunction={sendMessageSpy}
+        useAvatarHook={fakeHook}
       />,
     );
     cy.get(dataCyWrapper(inputTextFieldCypress))
@@ -90,13 +101,15 @@ describe('Message Length', () => {
   let sendMessageSpy;
   beforeEach(() => {
     sendMessageSpy = spyMethod('spyMethod');
+    const { hook: fakeHook } = mockUseAvatar();
     cy.mount(
       <Chatbox
         chatId={CHAT_ID}
         currentMember={new ImmutableMember(MEMBERS.ANNA)}
-        members={List(Object.values(MEMBERS) as Member[])}
-        messages={List(CHAT_MESSAGES)}
+        members={List(convertJs(Object.values(MEMBERS)))}
+        messages={List(convertJs(CHAT_MESSAGES))}
         sendMessageFunction={sendMessageSpy}
+        useAvatarHook={fakeHook}
       />,
     );
   });

diff --git a/cypress/support/component.ts → cypress/support/component.tsx b/cypress/support/component.ts → cypress/support/component.tsx
@@ -17,6 +17,11 @@
 // require('./commands')
 import { mount } from 'cypress/react';
 
+import React from 'react';
+
+import { CssBaseline } from '@mui/material';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
+
 import './commands';
 
 // Augment the Cypress namespace to include type definitions for
@@ -31,7 +36,16 @@ declare global {
   }
 }
 
-Cypress.Commands.add('mount', mount);
+Cypress.Commands.add('mount', (component) => {
+  const theme = createTheme();
+  const wrapped = (
+    <ThemeProvider theme={theme}>
+      <CssBaseline />
+      {component}
+    </ThemeProvider>
+  );
+  return mount(wrapped);
+});
 
 // Example use:
 // cy.mount(<MyComponent />)
diff --git a/example/package.json b/example/package.json
@@ -11,10 +11,9 @@
   },
   "dependencies": {
     "@graasp/chatbox": "link:..",
-    "@graasp/query-client": "github:graasp/graasp-query-client#202/exportChatHook",
-    "@material-ui/core": "4.12.4",
-    "@material-ui/icons": "4.11.2",
-    "@material-ui/lab": "4.0.0-alpha.60",
+    "@graasp/query-client": "github:graasp/graasp-query-client",
+    "@mui/icons-material": "5.10.9",
+    "@mui/material": "5.10.9",
     "@testing-library/jest-dom": "link:../node_modules/@testing-library/jest-dom",
     "@testing-library/react": "link:../node_modules/@testing-library/react",
     "@testing-library/user-event": "link:../node_modules/@testing-library/user-event",