Merge pull request #3649 from overleaf/as-chat-test-cleanup

Chat test cleanup

GitOrigin-RevId: 4323d93f64f0e51efd2931acbc77fc9b43a216cd

services/web/frontend/stories/chat.stories.js

@@ -1,9 +1,10 @@
 import React from 'react'
 import fetchMock from 'fetch-mock'
+import { v4 as uuid } from 'uuid'
+
 import { ContextRoot } from '../js/shared/context/root-context'
 import ChatPane from '../js/features/chat/components/chat-pane'
 import {
-  stubChatStore,
   stubUIConfig,
   stubMathJax
 } from '../../test/frontend/features/chat/components/stubs'
@@ -33,6 +34,7 @@ function generateMessages(count) {
     timestamp -= (4.3 + Math.random()) * ONE_MINUTE
 
     messages.push({
+      id: uuid(),
       content: `message #${i}`,
       user: author,
       timestamp
@@ -43,10 +45,9 @@ function generateMessages(count) {
 
 stubUIConfig()
 stubMathJax()
-stubChatStore({ user })
 setupContext()
 
-export const Conversation = args => <ChatPane {...args} chatIsOpen />
+export const Conversation = args => <ChatPane {...args} />
 Conversation.parameters = {
   setupMocks: () => {
     fetchMock.restore()
@@ -55,7 +56,7 @@ Conversation.parameters = {
   }
 }
 
-export const NoMessages = args => <ChatPane {...args} chatIsOpen />
+export const NoMessages = args => <ChatPane {...args} />
 NoMessages.parameters = {
   setupMocks: () => {
     fetchMock.restore()
@@ -63,7 +64,7 @@ NoMessages.parameters = {
   }
 }
 
-export const Loading = args => <ChatPane {...args} chatIsOpen />
+export const Loading = args => <ChatPane {...args} />
 Loading.parameters = {
   setupMocks: () => {
     fetchMock.restore()
@@ -90,7 +91,12 @@ export default {
     Story => (
       <>
         <style>{'html, body, .chat { height: 100%; width: 100%; }'}</style>
-        <ContextRoot>
+        <ContextRoot
+          chatIsOpenAngular
+          setChatIsOpenAngular={() => {}}
+          openDoc={() => {}}
+          onlineUsersArray={[]}
+        >
           <Story />
         </ContextRoot>
       </>

services/web/frontend/stories/editor-navigation-toolbar.stories.js

@@ -1,8 +1,9 @@
 import React from 'react'
 import ToolbarHeader from '../js/features/editor-navigation-toolbar/components/toolbar-header'
 
-// required by ColorManager
-window.user = { id: 42 }
+import { setupContext } from './fixtures/context'
+
+setupContext()
 
 export const UpToThreeConnectedUsers = args => {
   return <ToolbarHeader {...args} />

services/web/frontend/stories/fixtures/context.js

@@ -2,6 +2,9 @@ import sinon from 'sinon'
 
 export function setupContext() {
   window.project_id = '1234'
+  window.user = {
+    id: 'fake_user'
+  }
   let $scope = {}
   if (window._ide) {
     $scope = { ...window._ide.$scope, project: {} }

services/web/test/frontend/features/chat/components/chat-pane.test.js

@@ -4,18 +4,19 @@ import { screen, waitForElementToBeRemoved } from '@testing-library/react'
 import fetchMock from 'fetch-mock'
 
 import ChatPane from '../../../../../frontend/js/features/chat/components/chat-pane'
-import { renderWithChatContext } from '../../../helpers/render-with-context'
 import {
-  stubChatStore,
+  renderWithChatContext,
+  cleanUpContext
+} from '../../../helpers/render-with-context'
+import {
   stubMathJax,
   stubUIConfig,
-  tearDownChatStore,
   tearDownMathJaxStubs,
   tearDownUIConfigStubs
 } from './stubs'
 
 describe('<ChatPane />', function() {
-  const currentUser = {
+  const user = {
     id: 'fake_user',
     first_name: 'fake_user_first_name',
     email: 'fake@example.com'
@@ -25,64 +26,64 @@ describe('<ChatPane />', function() {
     {
       id: 'msg_1',
       content: 'a message',
-      user: currentUser,
+      user,
       timestamp: new Date().getTime()
     },
     {
       id: 'msg_2',
       content: 'another message',
-      user: currentUser,
+      user,
       timestamp: new Date().getTime()
     }
   ]
 
   beforeEach(function() {
-    global.localStorage.clear()
-    stubChatStore({ user: currentUser })
+    fetchMock.reset()
+    cleanUpContext()
+
     stubUIConfig()
     stubMathJax()
-    fetchMock.reset()
   })
 
   afterEach(function() {
-    tearDownChatStore()
     tearDownUIConfigStubs()
     tearDownMathJaxStubs()
-    fetchMock.reset()
   })
 
   it('renders multiple messages', async function() {
     fetchMock.get(/messages/, testMessages)
-    // unmounting before `beforeEach` block is executed is required to prevent cleanup errors
-    const { unmount } = renderWithChatContext(<ChatPane />)
+
+    renderWithChatContext(<ChatPane />, { user })
 
     await screen.findByText('a message')
     await screen.findByText('another message')
-    unmount()
   })
 
   it('A loading spinner is rendered while the messages are loading, then disappears', async function() {
     fetchMock.get(/messages/, [])
-    const { unmount } = renderWithChatContext(<ChatPane />)
+
+    renderWithChatContext(<ChatPane />, { user })
+
     await waitForElementToBeRemoved(() => screen.getByText('Loading…'))
-    unmount()
   })
 
   describe('"send your first message" placeholder', function() {
     it('is rendered when there are no messages ', async function() {
       fetchMock.get(/messages/, [])
-      const { unmount } = renderWithChatContext(<ChatPane />)
+
+      renderWithChatContext(<ChatPane />, { user })
+
       await screen.findByText('Send your first message to your collaborators')
-      unmount()
     })
 
     it('is not rendered when messages are displayed', function() {
       fetchMock.get(/messages/, testMessages)
-      const { unmount } = renderWithChatContext(<ChatPane />)
+
+      renderWithChatContext(<ChatPane />, { user })
+
       expect(
         screen.queryByText('Send your first message to your collaborators')
       ).to.not.exist
-      unmount()
     })
   })
 })

services/web/test/frontend/features/chat/components/message-list.test.js

@@ -5,10 +5,8 @@ import { screen, render, fireEvent } from '@testing-library/react'
 
 import MessageList from '../../../../../frontend/js/features/chat/components/message-list'
 import {
-  stubChatStore,
   stubMathJax,
   stubUIConfig,
-  tearDownChatStore,
   tearDownMathJaxStubs,
   tearDownUIConfigStubs
 } from './stubs'
@@ -38,13 +36,11 @@ describe('<MessageList />', function() {
   }
 
   before(function() {
-    stubChatStore({ user: currentUser }) // required by ColorManager
     stubUIConfig()
     stubMathJax()
   })
 
   after(function() {
-    tearDownChatStore()
     tearDownUIConfigStubs()
     tearDownMathJaxStubs()
   })

services/web/test/frontend/features/chat/components/stubs.js

@@ -25,11 +25,3 @@ export function stubMathJax() {
 export function tearDownMathJaxStubs() {
   delete window.MathJax
 }
-
-export function stubChatStore({ user }) {
-  window.user = user
-}
-
-export function tearDownChatStore() {
-  delete window.user
-}

services/web/test/frontend/helpers/render-with-context.js

@@ -45,3 +45,9 @@ export function renderWithChatContext(children, { user, projectId } = {}) {
     projectId
   })
 }
+
+export function cleanUpContext() {
+  delete window.user
+  delete window.project_id
+  delete window._ide
+}