Merge pull request #3707 from overleaf/ae-refactor-word-count-modal

Refactor "Word Count" modal

GitOrigin-RevId: 00561b5b3f8f161238321c440ecde67cd42ece1c

services/web/test/frontend/features/word-count-modal/components/word-count-modal.test.js

@@ -1,29 +1,43 @@
 import React from 'react'
-import { render, screen } from '@testing-library/react'
-import WordCountModalContent from '../../../../../frontend/js/features/word-count-modal/components/word-count-modal-content'
+import { render, screen, cleanup } from '@testing-library/react'
+import WordCountModal from '../../../../../frontend/js/features/word-count-modal/components/word-count-modal'
 import { expect } from 'chai'
+import sinon from 'sinon'
+import fetchMock from 'fetch-mock'
 
-const handleHide = () => {
-  // closed
-}
+describe('<WordCountModal />', function() {
+  afterEach(function() {
+    fetchMock.reset()
+    cleanup()
+  })
+
+  const modalProps = {
+    projectId: 'project-1',
+    clsiServerId: 'clsi-server-1',
+    show: true,
+    handleHide: sinon.stub()
+  }
 
-describe('<WordCountModalContent />', function() {
   it('renders the translated modal title', async function() {
-    render(<WordCountModalContent handleHide={handleHide} loading={false} />)
+    render(<WordCountModal {...modalProps} />)
 
     await screen.findByText('Word Count')
-
-    expect(screen.queryByText(/Loading/)).to.not.exist
   })
 
   it('renders a loading message when loading', async function() {
-    render(<WordCountModalContent handleHide={handleHide} loading />)
+    fetchMock.get('express:/project/:projectId/wordcount', () => {
+      return { status: 200, body: { texcount: {} } }
+    })
 
-    await screen.findByText('Loading')
+    render(<WordCountModal {...modalProps} />)
+
+    await screen.findByText('Loading…')
   })
 
   it('renders an error message and hides loading message on error', async function() {
-    render(<WordCountModalContent handleHide={handleHide} loading error />)
+    fetchMock.get('express:/project/:projectId/wordcount', 500)
+
+    render(<WordCountModal {...modalProps} />)
 
     await screen.findByText('Sorry, something went wrong')
 
@@ -31,32 +45,38 @@ describe('<WordCountModalContent />', function() {
   })
 
   it('displays messages', async function() {
-    render(
-      <WordCountModalContent
-        handleHide={handleHide}
-        loading={false}
-        data={{
-          messages: 'This is a test'
-        }}
-      />
-    )
+    fetchMock.get('express:/project/:projectId/wordcount', () => {
+      return {
+        status: 200,
+        body: {
+          texcount: {
+            messages: 'This is a test'
+          }
+        }
+      }
+    })
+
+    render(<WordCountModal {...modalProps} />)
 
     await screen.findByText('This is a test')
   })
 
   it('displays counts data', async function() {
-    render(
-      <WordCountModalContent
-        handleHide={handleHide}
-        loading={false}
-        data={{
-          textWords: 100,
-          mathDisplay: 200,
-          mathInline: 300,
-          headers: 400
-        }}
-      />
-    )
+    fetchMock.get('express:/project/:projectId/wordcount', () => {
+      return {
+        status: 200,
+        body: {
+          texcount: {
+            textWords: 100,
+            mathDisplay: 200,
+            mathInline: 300,
+            headers: 400
+          }
+        }
+      }
+    })
+
+    render(<WordCountModal {...modalProps} />)
 
     await screen.findByText((content, element) =>
       element.textContent.trim().match(/^Total Words\s*:\s*100$/)