Add Suspense to test element container (#17520)

GitOrigin-RevId: 0d7702289870a1074cdf4bd907b55fa6f32b8457

services/web/test/frontend/features/review-panel/review-panel.spec.tsx

@@ -1,15 +1,7 @@
 import CodeMirrorEditor from '../../../../frontend/js/features/source-editor/components/codemirror-editor'
 import { EditorProviders } from '../../helpers/editor-providers'
 import { mockScope } from '../source-editor/helpers/mock-scope'
-
-type ContainerProps = {
-  children: React.ReactNode
-  className?: string
-}
-
-function Container(props: ContainerProps) {
-  return <div style={{ width: 785, height: 785 }} {...props} />
-}
+import { TestContainer } from '../source-editor/helpers/test-container'
 
 describe('<ReviewPanel />', function () {
   beforeEach(function () {
@@ -27,11 +19,11 @@ describe('<ReviewPanel />', function () {
     cy.wrap(scope).as('scope')
 
     cy.mount(
-      <Container className="rp-size-expanded">
+      <TestContainer className="rp-size-expanded">
         <EditorProviders scope={scope}>
           <CodeMirrorEditor />
         </EditorProviders>
-      </Container>
+      </TestContainer>
     )
 
     cy.findByTestId('review-panel').as('review-panel')
@@ -103,11 +95,11 @@ describe('<ReviewPanel />', function () {
         scope.editor.wantTrackChanges = true
 
         cy.mount(
-          <Container className="rp-size-expanded">
+          <TestContainer className="rp-size-expanded">
             <EditorProviders scope={scope}>
               <CodeMirrorEditor />
             </EditorProviders>
-          </Container>
+          </TestContainer>
         )
 
         cy.findByTestId('review-panel').within(() => {

services/web/test/frontend/features/source-editor/components/codemirror-editor-autocomplete.spec.tsx

@@ -1,4 +1,3 @@
-import { FC } from 'react'
 import { Folder } from '../../../../../types/folder'
 import { docId, mockDocContent } from '../helpers/mock-doc'
 import { Metadata } from '../../../../../types/metadata'
@@ -7,10 +6,7 @@ import { EditorProviders } from '../../../helpers/editor-providers'
 import CodeMirrorEditor from '../../../../../frontend/js/features/source-editor/components/codemirror-editor'
 import { activeEditorLine } from '../helpers/active-editor-line'
 import { User, UserId } from '../../../../../types/user'
-
-const Container: FC = ({ children }) => (
-  <div style={{ width: 785, height: 785 }}>{children}</div>
-)
+import { TestContainer } from '../helpers/test-container'
 
 describe('autocomplete', { scrollBehavior: false }, function () {
   beforeEach(function () {
@@ -93,7 +89,7 @@ describe('autocomplete', { scrollBehavior: false }, function () {
     scope.project.rootFolder = rootFolder
 
     cy.mount(
-      <Container>
+      <TestContainer>
         <EditorProviders
           scope={scope}
           metadataManager={metadataManager}
@@ -101,7 +97,7 @@ describe('autocomplete', { scrollBehavior: false }, function () {
         >
           <CodeMirrorEditor />
         </EditorProviders>
-      </Container>
+      </TestContainer>
     )
 
     cy.get('.cm-editor').as('editor')
@@ -268,7 +264,7 @@ describe('autocomplete', { scrollBehavior: false }, function () {
     scope.$root._references.keys = ['foo']
 
     cy.mount(
-      <Container>
+      <TestContainer>
         <EditorProviders
           scope={scope}
           metadataManager={metadataManager}
@@ -276,7 +272,7 @@ describe('autocomplete', { scrollBehavior: false }, function () {
         >
           <CodeMirrorEditor />
         </EditorProviders>
-      </Container>
+      </TestContainer>
     )
 
     cy.get('.cm-editor').as('editor')
@@ -386,7 +382,7 @@ describe('autocomplete', { scrollBehavior: false }, function () {
     const scope = mockScope()
 
     cy.mount(
-      <Container>
+      <TestContainer>
         <EditorProviders
           scope={scope}
           metadataManager={metadataManager}
@@ -394,7 +390,7 @@ describe('autocomplete', { scrollBehavior: false }, function () {
         >
           <CodeMirrorEditor />
         </EditorProviders>
-      </Container>
+      </TestContainer>
     )
 
     cy.get('.cm-editor').as('editor')
@@ -461,7 +457,7 @@ describe('autocomplete', { scrollBehavior: false }, function () {
     scope.$root._references.keys = ['ref-1', 'ref-2', 'ref-3']
 
     cy.mount(
-      <Container>
+      <TestContainer>
         <EditorProviders
           scope={scope}
           metadataManager={metadataManager}
@@ -469,7 +465,7 @@ describe('autocomplete', { scrollBehavior: false }, function () {
         >
           <CodeMirrorEditor />
         </EditorProviders>
-      </Container>
+      </TestContainer>
     )
 
     cy.get('.cm-editor').as('editor')
@@ -531,7 +527,7 @@ describe('autocomplete', { scrollBehavior: false }, function () {
     scope.project.rootFolder = rootFolder
 
     cy.mount(
-      <Container>
+      <TestContainer>
         <EditorProviders
           scope={scope}
           metadataManager={metadataManager}
@@ -539,7 +535,7 @@ describe('autocomplete', { scrollBehavior: false }, function () {
         >
           <CodeMirrorEditor />
         </EditorProviders>
-      </Container>
+      </TestContainer>
     )
 
     cy.get('.cm-editor').as('editor')
@@ -573,11 +569,11 @@ describe('autocomplete', { scrollBehavior: false }, function () {
     const scope = mockScope()
 
     cy.mount(
-      <Container>
+      <TestContainer>
         <EditorProviders scope={scope}>
           <CodeMirrorEditor />
         </EditorProviders>
-      </Container>
+      </TestContainer>
     )
 
     // put the cursor on a blank line to type in
@@ -619,11 +615,11 @@ describe('autocomplete', { scrollBehavior: false }, function () {
     const scope = mockScope()
 
     cy.mount(
-      <Container>
+      <TestContainer>
         <EditorProviders scope={scope}>
           <CodeMirrorEditor />
         </EditorProviders>
-      </Container>
+      </TestContainer>
     )
 
     // put the cursor on a blank line to type in
@@ -654,11 +650,11 @@ describe('autocomplete', { scrollBehavior: false }, function () {
     const scope = mockScope()
 
     cy.mount(
-      <Container>
+      <TestContainer>
         <EditorProviders scope={scope}>
           <CodeMirrorEditor />
         </EditorProviders>
-      </Container>
+      </TestContainer>
     )
 
     // put the cursor on a blank line to type in
@@ -689,11 +685,11 @@ describe('autocomplete', { scrollBehavior: false }, function () {
     const scope = mockScope()
 
     cy.mount(
-      <Container>
+      <TestContainer>
         <EditorProviders scope={scope}>
           <CodeMirrorEditor />
         </EditorProviders>
-      </Container>
+      </TestContainer>
     )
 
     cy.get('.cm-editor').as('editor')
@@ -728,11 +724,11 @@ describe('autocomplete', { scrollBehavior: false }, function () {
     const scope = mockScope()
 
     cy.mount(
-      <Container>
+      <TestContainer>
         <EditorProviders scope={scope}>
           <CodeMirrorEditor />
         </EditorProviders>
-      </Container>
+      </TestContainer>
     )
 
     cy.get('.cm-editor').as('editor')
@@ -764,11 +760,11 @@ describe('autocomplete', { scrollBehavior: false }, function () {
     const scope = mockScope()
 
     cy.mount(
-      <Container>
+      <TestContainer>
         <EditorProviders scope={scope}>
           <CodeMirrorEditor />
         </EditorProviders>
-      </Container>
+      </TestContainer>
     )
 
     cy.get('.cm-editor').as('editor')
@@ -837,11 +833,11 @@ describe('autocomplete', { scrollBehavior: false }, function () {
     const scope = mockScope()
 
     cy.mount(
-      <Container>
+      <TestContainer>
         <EditorProviders scope={scope} metadataManager={metadataManager}>
           <CodeMirrorEditor />
         </EditorProviders>
-      </Container>
+      </TestContainer>
     )
 
     cy.get('.cm-editor').as('editor')
@@ -865,11 +861,11 @@ describe('autocomplete', { scrollBehavior: false }, function () {
       email: 'testuser@example.com',
     } as User
     cy.mount(
-      <Container>
+      <TestContainer>
         <EditorProviders user={user} scope={scope}>
           <CodeMirrorEditor />
         </EditorProviders>
-      </Container>
+      </TestContainer>
     )
     // put the cursor on a blank line to type in
     cy.get('.cm-line').eq(16).as('line')
@@ -897,11 +893,11 @@ describe('autocomplete', { scrollBehavior: false }, function () {
       email: 'testuser@example.com',
     }
     cy.mount(
-      <Container>
+      <TestContainer>
         <EditorProviders user={user} scope={scope}>
           <CodeMirrorEditor />
         </EditorProviders>
-      </Container>
+      </TestContainer>
     )
     // put the cursor on a blank line to type in
     cy.get('.cm-line').eq(16).as('line')
@@ -921,11 +917,11 @@ describe('autocomplete', { scrollBehavior: false }, function () {
     const scope = mockScope()
 
     cy.mount(
-      <Container>
+      <TestContainer>
         <EditorProviders scope={scope}>
           <CodeMirrorEditor />
         </EditorProviders>
-      </Container>
+      </TestContainer>
     )
 
     // Put the cursor on a blank line to type in
@@ -945,11 +941,11 @@ describe('autocomplete', { scrollBehavior: false }, function () {
     const scope = mockScope(mockDocContent('\\begin{}'))
 
     cy.mount(
-      <Container>
+      <TestContainer>
         <EditorProviders scope={scope}>
           <CodeMirrorEditor />
         </EditorProviders>
-      </Container>
+      </TestContainer>
     )
 
     // Put the cursor on a blank line above target line
@@ -968,11 +964,11 @@ describe('autocomplete', { scrollBehavior: false }, function () {
     const scope = mockScope(mockDocContent('\\begin{'))
 
     cy.mount(
-      <Container>
+      <TestContainer>
         <EditorProviders scope={scope}>
           <CodeMirrorEditor />
         </EditorProviders>
-      </Container>
+      </TestContainer>
     )
 
     // Put the cursor on a blank line above target line
@@ -1026,7 +1022,7 @@ describe('autocomplete', { scrollBehavior: false }, function () {
     scope.project.rootFolder = rootFolder
 
     cy.mount(
-      <Container>
+      <TestContainer>
         <EditorProviders
           scope={scope}
           metadataManager={metadataManager}
@@ -1034,7 +1030,7 @@ describe('autocomplete', { scrollBehavior: false }, function () {
         >
           <CodeMirrorEditor />
         </EditorProviders>
-      </Container>
+      </TestContainer>
     )
 
     // Put the cursor on a blank line and type
@@ -1090,11 +1086,11 @@ describe('autocomplete', { scrollBehavior: false }, function () {
     const scope = mockScope(mockDocContent(''))
 
     cy.mount(
-      <Container>
+      <TestContainer>
         <EditorProviders scope={scope}>
           <CodeMirrorEditor />
         </EditorProviders>
-      </Container>
+      </TestContainer>
     )
 
     cy.get('.cm-line').eq(21).type('\\fff \\ff')

services/web/test/frontend/features/source-editor/components/codemirror-editor-close-brackets.spec.tsx

@@ -1,11 +1,7 @@
-import { FC } from 'react'
 import { mockScope } from '../helpers/mock-scope'
 import { EditorProviders } from '../../../helpers/editor-providers'
 import CodeMirrorEditor from '../../../../../frontend/js/features/source-editor/components/codemirror-editor'
-
-const Container: FC = ({ children }) => (
-  <div style={{ width: 785, height: 785 }}>{children}</div>
-)
+import { TestContainer } from '../helpers/test-container'
 
 describe('close brackets', { scrollBehavior: false }, function () {
   beforeEach(function () {
@@ -16,11 +12,11 @@ describe('close brackets', { scrollBehavior: false }, function () {
     const scope = mockScope()
 
     cy.mount(
-      <Container>
+      <TestContainer>
         <EditorProviders scope={scope}>
           <CodeMirrorEditor />
         </EditorProviders>
-      </Container>
+      </TestContainer>
     )
 
     cy.get('.cm-line').eq(20).as('active-line')

services/web/test/frontend/features/source-editor/components/codemirror-editor-cursor.spec.tsx

@@ -1,14 +1,9 @@
-import { FC } from 'react'
 import { EditorProviders } from '../../../helpers/editor-providers'
 import CodemirrorEditor from '../../../../../frontend/js/features/source-editor/components/codemirror-editor'
 import { mockScope } from '../helpers/mock-scope'
-
+import { TestContainer } from '../helpers/test-container'
 const isMac = /Mac/.test(window.navigator?.platform)
 
-const Container: FC = ({ children }) => (
-  <div style={{ width: 785, height: 785 }}>{children}</div>
-)
-
 describe('Cursor and active line highlight', function () {
   const content = `line 1
 
@@ -30,11 +25,11 @@ ${'long line '.repeat(200)}`
     const scope = mockScope(content)
 
     cy.mount(
-      <Container>
+      <TestContainer>
         <EditorProviders scope={scope}>
           <CodemirrorEditor />
         </EditorProviders>
-      </Container>
+      </TestContainer>
     )
   })
 

services/web/test/frontend/features/source-editor/components/figure-modal.spec.tsx → services/web/test/frontend/features/source-editor/components/codemirror-editor-figure-modal.spec.tsx

@@ -4,10 +4,7 @@ import { mockScope, rootFolderId } from '../helpers/mock-scope'
 import { FC } from 'react'
 import { FileTreePathContext } from '@/features/file-tree/contexts/file-tree-path'
 import { ExposedSettings } from '../../../../../types/exposed-settings'
-
-const Container: FC = ({ children }) => (
-  <div style={{ width: 1500, height: 785 }}>{children}</div>
-)
+import { TestContainer } from '../helpers/test-container'
 
 const clickToolbarButton = (text: string) => {
   cy.findByLabelText(text).click()
@@ -63,11 +60,11 @@ describe('<FigureModal />', function () {
     )
 
     cy.mount(
-      <Container>
+      <TestContainer>
         <EditorProviders scope={scope} providers={{ FileTreePathProvider }}>
           <CodemirrorEditor />
         </EditorProviders>
-      </Container>
+      </TestContainer>
     )
   }
 

services/web/test/frontend/features/source-editor/components/codemirror-editor-fundamentals.spec.tsx

@@ -1,11 +1,7 @@
-import { FC } from 'react'
 import { EditorProviders } from '../../../helpers/editor-providers'
 import CodemirrorEditor from '../../../../../frontend/js/features/source-editor/components/codemirror-editor'
 import { mockScope } from '../helpers/mock-scope'
-
-const Container: FC = ({ children }) => (
-  <div style={{ width: 785, height: 785 }}>{children}</div>
-)
+import { TestContainer } from '../helpers/test-container'
 
 describe('<CodeMirrorEditor/> fundamentals', function () {
   const content = `
@@ -19,11 +15,11 @@ test
     const scope = mockScope(content)
 
     cy.mount(
-      <Container>
+      <TestContainer>
         <EditorProviders scope={scope}>
           <CodemirrorEditor />
         </EditorProviders>
-      </Container>
+      </TestContainer>
     )
 
     cy.get('.cm-line').eq(0).as('first-line')

services/web/test/frontend/features/source-editor/components/codemirror-editor-shortcuts.spec.tsx

@@ -2,12 +2,8 @@ import { mockScope } from '../helpers/mock-scope'
 import { EditorProviders } from '../../../helpers/editor-providers'
 import CodeMirrorEditor from '../../../../../frontend/js/features/source-editor/components/codemirror-editor'
 import { metaKey } from '../helpers/meta-key'
-import { FC } from 'react'
 import { activeEditorLine } from '../helpers/active-editor-line'
-
-const Container: FC = ({ children }) => (
-  <div style={{ width: 785, height: 785 }}>{children}</div>
-)
+import { TestContainer } from '../helpers/test-container'
 
 const CHARACTERS =
   'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ\\0123456789'
@@ -21,11 +17,11 @@ describe('keyboard shortcuts', { scrollBehavior: false }, function () {
     const scope = mockScope()
 
     cy.mount(
-      <Container>
+      <TestContainer>
         <EditorProviders scope={scope}>
           <CodeMirrorEditor />
         </EditorProviders>
-      </Container>
+      </TestContainer>
     )
 
     cy.get('.cm-line').eq(16).as('line')
@@ -143,11 +139,11 @@ contentLine3
     const userSettings = { mode: 'emacs' }
 
     cy.mount(
-      <Container>
+      <TestContainer>
         <EditorProviders scope={scope} userSettings={userSettings}>
           <CodeMirrorEditor />
         </EditorProviders>
-      </Container>
+      </TestContainer>
     )
     cy.get('.cm-line').eq(1).as('line')
     cy.get('@line').scrollIntoView()
@@ -248,11 +244,11 @@ contentLine3
     const userSettings = { mode: 'vim' }
 
     cy.mount(
-      <Container>
+      <TestContainer>
         <EditorProviders scope={scope} userSettings={userSettings}>
           <CodeMirrorEditor />
         </EditorProviders>
-      </Container>
+      </TestContainer>
     )
     cy.get('.cm-line').eq(1).as('line')
     cy.get('@line').scrollIntoView()

services/web/test/frontend/features/source-editor/components/codemirror-editor-spellchecker.spec.tsx

@@ -1,11 +1,7 @@
 import { mockScope } from '../helpers/mock-scope'
 import { EditorProviders } from '../../../helpers/editor-providers'
 import CodeMirrorEditor from '../../../../../frontend/js/features/source-editor/components/codemirror-editor'
-import { FC } from 'react'
-
-const Container: FC = ({ children }) => (
-  <div style={{ width: 785, height: 785 }}>{children}</div>
-)
+import { TestContainer } from '../helpers/test-container'
 
 describe('Spellchecker', function () {
   const content = `
@@ -31,11 +27,11 @@ describe('Spellchecker', function () {
     const scope = mockScope(content)
 
     cy.mount(
-      <Container>
+      <TestContainer>
         <EditorProviders scope={scope}>
           <CodeMirrorEditor />
         </EditorProviders>
-      </Container>
+      </TestContainer>
     )
 
     cy.get('.cm-line').eq(13).as('line')

services/web/test/frontend/features/source-editor/components/codemirror-editor-table-generator.spec.tsx

@@ -1,14 +1,10 @@
 // Needed since eslint gets confused by mocha-each
 /* eslint-disable mocha/prefer-arrow-callback */
-import { FC } from 'react'
 import { EditorProviders } from '../../../helpers/editor-providers'
 import CodemirrorEditor from '../../../../../frontend/js/features/source-editor/components/codemirror-editor'
 import { mockScope } from '../helpers/mock-scope'
 import forEach from 'mocha-each'
-
-const Container: FC = ({ children }) => (
-  <div style={{ width: 1000, height: 800 }}>{children}</div>
-)
+import { TestContainer } from '../helpers/test-container'
 
 const mountEditor = (content: string | string[]) => {
   if (Array.isArray(content)) {
@@ -21,11 +17,11 @@ const mountEditor = (content: string | string[]) => {
   scope.editor.showVisual = true
   cy.viewport(1000, 800)
   cy.mount(
-    <Container>
+    <TestContainer style={{ width: 1000, height: 800 }}>
       <EditorProviders scope={scope}>
         <CodemirrorEditor />
       </EditorProviders>
-    </Container>
+    </TestContainer>
   )
 
   // wait for the content to be parsed and revealed

services/web/test/frontend/features/source-editor/components/codemirror-editor-visual-command-tooltip.spec.tsx

@@ -1,22 +1,18 @@
-import { FC } from 'react'
 import { EditorProviders } from '../../../helpers/editor-providers'
 import CodemirrorEditor from '../../../../../frontend/js/features/source-editor/components/codemirror-editor'
 import { mockScope } from '../helpers/mock-scope'
-
-const Container: FC = ({ children }) => (
-  <div style={{ width: 785, height: 785 }}>{children}</div>
-)
+import { TestContainer } from '../helpers/test-container'
 
 const mountEditor = (content: string) => {
   const scope = mockScope(content)
   scope.editor.showVisual = true
 
   cy.mount(
-    <Container>
+    <TestContainer>
       <EditorProviders scope={scope}>
         <CodemirrorEditor />
       </EditorProviders>
-    </Container>
+    </TestContainer>
   )
 
   // wait for the content to be parsed and revealed

services/web/test/frontend/features/source-editor/components/codemirror-editor-visual-floats.spec.tsx

@@ -1,22 +1,18 @@
-import { FC } from 'react'
 import { EditorProviders } from '../../../helpers/editor-providers'
 import CodemirrorEditor from '../../../../../frontend/js/features/source-editor/components/codemirror-editor'
 import { mockScope } from '../helpers/mock-scope'
-
-const Container: FC = ({ children }) => (
-  <div style={{ width: 785, height: 785 }}>{children}</div>
-)
+import { TestContainer } from '../helpers/test-container'
 
 const mountEditor = (content: string) => {
   const scope = mockScope(content)
   scope.editor.showVisual = true
 
   cy.mount(
-    <Container>
+    <TestContainer>
       <EditorProviders scope={scope}>
         <CodemirrorEditor />
       </EditorProviders>
-    </Container>
+    </TestContainer>
   )
 
   // wait for the content to be parsed and revealed

services/web/test/frontend/features/source-editor/components/codemirror-editor-visual-list.spec.tsx

@@ -1,24 +1,20 @@
-import { FC } from 'react'
 import { EditorProviders } from '../../../helpers/editor-providers'
 import CodemirrorEditor from '../../../../../frontend/js/features/source-editor/components/codemirror-editor'
 import { mockScope } from '../helpers/mock-scope'
+import { TestContainer } from '../helpers/test-container'
 
 const isMac = /Mac/.test(window.navigator?.platform)
 
-const Container: FC = ({ children }) => (
-  <div style={{ width: 785, height: 785 }}>{children}</div>
-)
-
 const mountEditor = (content: string) => {
   const scope = mockScope(content)
   scope.editor.showVisual = true
 
   cy.mount(
-    <Container>
+    <TestContainer>
       <EditorProviders scope={scope}>
         <CodemirrorEditor />
       </EditorProviders>
-    </Container>
+    </TestContainer>
   )
 
   // wait for the content to be parsed and revealed

services/web/test/frontend/features/source-editor/components/codemirror-editor-visual-paste-html.spec.tsx

@@ -1,22 +1,18 @@
-import { FC } from 'react'
 import { EditorProviders } from '../../../helpers/editor-providers'
 import CodemirrorEditor from '../../../../../frontend/js/features/source-editor/components/codemirror-editor'
 import { mockScope } from '../helpers/mock-scope'
-
-const Container: FC = ({ children }) => (
-  <div style={{ width: 785, height: 785 }}>{children}</div>
-)
+import { TestContainer } from '../helpers/test-container'
 
 const mountEditor = (content = '') => {
   const scope = mockScope(content)
   scope.editor.showVisual = true
 
   cy.mount(
-    <Container>
+    <TestContainer>
       <EditorProviders scope={scope}>
         <CodemirrorEditor />
       </EditorProviders>
-    </Container>
+    </TestContainer>
   )
 
   // wait for the content to be parsed and revealed

services/web/test/frontend/features/source-editor/components/codemirror-editor-visual-readonly.spec.tsx

@@ -3,10 +3,7 @@ import { EditorProviders } from '../../../helpers/editor-providers'
 import CodemirrorEditor from '../../../../../frontend/js/features/source-editor/components/codemirror-editor'
 import { FC, ComponentProps } from 'react'
 import { FileTreePathContext } from '@/features/file-tree/contexts/file-tree-path'
-
-const Container: FC = ({ children }) => (
-  <div style={{ width: 785, height: 785 }}>{children}</div>
-)
+import { TestContainer } from '../helpers/test-container'
 
 const mountEditor = (
   content: string,
@@ -17,11 +14,11 @@ const mountEditor = (
   scope.editor.showVisual = true
 
   cy.mount(
-    <Container>
+    <TestContainer>
       <EditorProviders scope={scope} {...props}>
         <CodemirrorEditor />
       </EditorProviders>
-    </Container>
+    </TestContainer>
   )
 
   // wait for the content to be parsed and revealed

services/web/test/frontend/features/source-editor/components/codemirror-editor-visual-toolbar.spec.tsx

@@ -1,7 +1,7 @@
-import { FC } from 'react'
 import { EditorProviders } from '../../../helpers/editor-providers'
 import CodemirrorEditor from '../../../../../frontend/js/features/source-editor/components/codemirror-editor'
 import { mockScope } from '../helpers/mock-scope'
+import { TestContainer } from '../helpers/test-container'
 
 const isMac = /Mac/.test(window.navigator?.platform)
 
@@ -12,25 +12,21 @@ const selectAll = () => {
   )
 }
 
-const clickToolbarButton = (text: string) => {
-  cy.findByLabelText(text).click()
-  cy.findByLabelText(text).trigger('mouseout')
+const clickToolbarButton = (name: string) => {
+  cy.findByRole('button', { name }).click()
+  cy.findByRole('button', { name }).trigger('mouseout')
 }
 
-const Container: FC = ({ children }) => (
-  <div style={{ width: 1500, height: 785 }}>{children}</div>
-)
-
 const mountEditor = (content: string) => {
   const scope = mockScope(content)
   scope.editor.showVisual = true
 
   cy.mount(
-    <Container>
+    <TestContainer>
       <EditorProviders scope={scope}>
         <CodemirrorEditor />
       </EditorProviders>
-    </Container>
+    </TestContainer>
   )
 
   // wait for the content to be parsed and revealed
@@ -126,6 +122,7 @@ describe('<CodeMirrorEditor/> toolbar in Rich Text mode', function () {
     mountEditor('test')
     selectAll()
 
+    clickToolbarButton('More')
     clickToolbarButton('Bullet List')
 
     cy.get('.cm-content').should('have.text', ' test')
@@ -138,6 +135,7 @@ describe('<CodeMirrorEditor/> toolbar in Rich Text mode', function () {
     mountEditor('test')
     selectAll()
 
+    clickToolbarButton('More')
     clickToolbarButton('Numbered List')
 
     cy.get('.cm-content').should('have.text', ' test')
@@ -150,6 +148,7 @@ describe('<CodeMirrorEditor/> toolbar in Rich Text mode', function () {
     mountEditor('test')
     selectAll()
 
+    clickToolbarButton('More')
     clickToolbarButton('Numbered List')
 
     // expose the markup
@@ -182,6 +181,7 @@ describe('<CodeMirrorEditor/> toolbar in Rich Text mode', function () {
     mountEditor('test')
     selectAll()
 
+    clickToolbarButton('More')
     clickToolbarButton('Numbered List')
 
     // expose the markup
@@ -206,6 +206,7 @@ describe('<CodeMirrorEditor/> toolbar in Rich Text mode', function () {
     mountEditor('test\ntest')
     selectAll()
 
+    clickToolbarButton('More')
     clickToolbarButton('Numbered List')
 
     // expose the markup
@@ -242,6 +243,7 @@ describe('<CodeMirrorEditor/> toolbar in Rich Text mode', function () {
 
     cy.get('.cm-line').eq(1).click()
 
+    clickToolbarButton('More')
     clickToolbarButton('Numbered List')
 
     cy.get('.cm-line').eq(0).type('{upArrow}')
@@ -262,6 +264,7 @@ describe('<CodeMirrorEditor/> toolbar in Rich Text mode', function () {
     mountEditor('test\ntest')
     selectAll()
 
+    clickToolbarButton('More')
     clickToolbarButton('Numbered List')
 
     // expose the markup
@@ -298,6 +301,7 @@ describe('<CodeMirrorEditor/> toolbar in Rich Text mode', function () {
 
     cy.get('.cm-line').eq(0).click()
 
+    clickToolbarButton('More')
     clickToolbarButton('Numbered List')
 
     // expose the markup

services/web/test/frontend/features/source-editor/components/codemirror-editor-visual-tooltips.spec.tsx

@@ -1,11 +1,7 @@
 import { mockScope } from '../helpers/mock-scope'
 import { EditorProviders } from '../../../helpers/editor-providers'
 import CodemirrorEditor from '../../../../../frontend/js/features/source-editor/components/codemirror-editor'
-import { FC } from 'react'
-
-const Container: FC = ({ children }) => (
-  <div style={{ width: 785, height: 785 }}>{children}</div>
-)
+import { TestContainer } from '../helpers/test-container'
 
 describe('<CodeMirrorEditor/> tooltips in Visual mode', function () {
   beforeEach(function () {
@@ -18,11 +14,11 @@ describe('<CodeMirrorEditor/> tooltips in Visual mode', function () {
     scope.editor.showVisual = true
 
     cy.mount(
-      <Container>
+      <TestContainer>
         <EditorProviders scope={scope}>
           <CodemirrorEditor />
         </EditorProviders>
-      </Container>
+      </TestContainer>
     )
 
     // wait for the content to be parsed and revealed

services/web/test/frontend/features/source-editor/components/codemirror-editor-visual.spec.tsx

@@ -6,10 +6,7 @@ import CodemirrorEditor from '../../../../../frontend/js/features/source-editor/
 import { mockScope } from '../helpers/mock-scope'
 import forEach from 'mocha-each'
 import { FileTreePathContext } from '@/features/file-tree/contexts/file-tree-path'
-
-const Container: FC = ({ children }) => (
-  <div style={{ width: 785, height: 785 }}>{children}</div>
-)
+import { TestContainer } from '../helpers/test-container'
 
 describe('<CodeMirrorEditor/> in Visual mode', function () {
   beforeEach(function () {
@@ -41,11 +38,11 @@ describe('<CodeMirrorEditor/> in Visual mode', function () {
     )
 
     cy.mount(
-      <Container>
+      <TestContainer>
         <EditorProviders scope={scope} providers={{ FileTreePathProvider }}>
           <CodemirrorEditor />
         </EditorProviders>
-      </Container>
+      </TestContainer>
     )
 
     // wait for the content to be parsed and revealed

services/web/test/frontend/features/source-editor/components/codemirror-editor.spec.tsx

@@ -1,14 +1,10 @@
 import CodeMirrorEditor from '../../../../../frontend/js/features/source-editor/components/codemirror-editor'
 import { EditorProviders } from '../../../helpers/editor-providers'
-import { FC } from 'react'
 import { mockScope } from '../helpers/mock-scope'
 import { metaKey } from '../helpers/meta-key'
 import { docId } from '../helpers/mock-doc'
 import { activeEditorLine } from '../helpers/active-editor-line'
-
-const Container: FC = ({ children }) => (
-  <div style={{ width: 785, height: 785 }}>{children}</div>
-)
+import { TestContainer } from '../helpers/test-container'
 
 describe('<CodeMirrorEditor/>', { scrollBehavior: false }, function () {
   beforeEach(function () {
@@ -21,11 +17,11 @@ describe('<CodeMirrorEditor/>', { scrollBehavior: false }, function () {
     const scope = mockScope()
 
     cy.mount(
-      <Container>
+      <TestContainer>
         <EditorProviders scope={scope}>
           <CodeMirrorEditor />
         </EditorProviders>
-      </Container>
+      </TestContainer>
     )
 
     // put the cursor on a blank line to type in
@@ -46,11 +42,11 @@ describe('<CodeMirrorEditor/>', { scrollBehavior: false }, function () {
     cy.clock()
 
     cy.mount(
-      <Container>
+      <TestContainer>
         <EditorProviders scope={scope} userSettings={userSettings}>
           <CodeMirrorEditor />
         </EditorProviders>
-      </Container>
+      </TestContainer>
     )
 
     cy.tick(1000)
@@ -94,11 +90,11 @@ describe('<CodeMirrorEditor/>', { scrollBehavior: false }, function () {
     cy.clock()
 
     cy.mount(
-      <Container>
+      <TestContainer>
         <EditorProviders scope={scope} userSettings={userSettings}>
           <CodeMirrorEditor />
         </EditorProviders>
-      </Container>
+      </TestContainer>
     )
 
     cy.tick(1000)
@@ -113,11 +109,11 @@ describe('<CodeMirrorEditor/>', { scrollBehavior: false }, function () {
     const scope = mockScope()
 
     cy.mount(
-      <Container>
+      <TestContainer>
         <EditorProviders scope={scope}>
           <CodeMirrorEditor />
         </EditorProviders>
-      </Container>
+      </TestContainer>
     )
 
     cy.contains('Your introduction goes here!')
@@ -127,11 +123,11 @@ describe('<CodeMirrorEditor/>', { scrollBehavior: false }, function () {
     const scope = mockScope()
 
     cy.mount(
-      <Container>
+      <TestContainer>
         <EditorProviders scope={scope}>
           <CodeMirrorEditor />
         </EditorProviders>
-      </Container>
+      </TestContainer>
     )
 
     // put the cursor on a blank line to type in
@@ -146,11 +142,11 @@ describe('<CodeMirrorEditor/>', { scrollBehavior: false }, function () {
     const scope = mockScope()
 
     cy.mount(
-      <Container>
+      <TestContainer>
         <EditorProviders scope={scope}>
           <CodeMirrorEditor />
         </EditorProviders>
-      </Container>
+      </TestContainer>
     )
 
     // put the cursor on a blank line to type in
@@ -167,11 +163,11 @@ describe('<CodeMirrorEditor/>', { scrollBehavior: false }, function () {
     const scope = mockScope()
 
     cy.mount(
-      <Container>
+      <TestContainer>
         <EditorProviders scope={scope}>
           <CodeMirrorEditor />
         </EditorProviders>
-      </Container>
+      </TestContainer>
     )
 
     // put the cursor on a blank line to type in
@@ -214,11 +210,11 @@ describe('<CodeMirrorEditor/>', { scrollBehavior: false }, function () {
     }
 
     cy.mount(
-      <Container>
+      <TestContainer>
         <EditorProviders scope={scope}>
           <CodeMirrorEditor />
         </EditorProviders>
-      </Container>
+      </TestContainer>
     )
 
     cy.get('.ol-cm-cursorHighlight').should('have.length', 3)
@@ -230,11 +226,11 @@ describe('<CodeMirrorEditor/>', { scrollBehavior: false }, function () {
     scope.permissions.write = false
 
     cy.mount(
-      <Container>
+      <TestContainer>
         <EditorProviders scope={scope}>
           <CodeMirrorEditor />
         </EditorProviders>
-      </Container>
+      </TestContainer>
     )
 
     // Handling the thrown error on failing to type text
@@ -257,11 +253,11 @@ describe('<CodeMirrorEditor/>', { scrollBehavior: false }, function () {
     const scope = mockScope()
 
     cy.mount(
-      <Container>
+      <TestContainer>
         <EditorProviders scope={scope}>
           <CodeMirrorEditor />
         </EditorProviders>
-      </Container>
+      </TestContainer>
     )
 
     // put the cursor on a blank line to type in
@@ -280,11 +276,11 @@ describe('<CodeMirrorEditor/>', { scrollBehavior: false }, function () {
     const scope = mockScope()
 
     cy.mount(
-      <Container>
+      <TestContainer>
         <EditorProviders scope={scope}>
           <CodeMirrorEditor />
         </EditorProviders>
-      </Container>
+      </TestContainer>
     )
 
     // select foldable line
@@ -324,11 +320,11 @@ describe('<CodeMirrorEditor/>', { scrollBehavior: false }, function () {
     const userSettings = { mode: 'vim' }
 
     cy.mount(
-      <Container>
+      <TestContainer>
         <EditorProviders scope={scope} userSettings={userSettings}>
           <CodeMirrorEditor />
         </EditorProviders>
-      </Container>
+      </TestContainer>
     )
 
     // Compile on initial load
@@ -356,11 +352,11 @@ describe('<CodeMirrorEditor/>', { scrollBehavior: false }, function () {
     const scope = mockScope()
 
     cy.mount(
-      <Container>
+      <TestContainer>
         <EditorProviders scope={scope}>
           <CodeMirrorEditor />
         </EditorProviders>
-      </Container>
+      </TestContainer>
     )
 
     cy.get('.cm-line').eq(16).as('line')
@@ -483,11 +479,11 @@ describe('<CodeMirrorEditor/>', { scrollBehavior: false }, function () {
     const scope = mockScope()
 
     cy.mount(
-      <Container>
+      <TestContainer>
         <EditorProviders scope={scope}>
           <CodeMirrorEditor />
         </EditorProviders>
-      </Container>
+      </TestContainer>
     )
 
     // Open the search panel
@@ -568,11 +564,11 @@ describe('<CodeMirrorEditor/>', { scrollBehavior: false }, function () {
     )
 
     cy.mount(
-      <Container>
+      <TestContainer>
         <EditorProviders scope={scope}>
           <CodeMirrorEditor />
         </EditorProviders>
-      </Container>
+      </TestContainer>
     )
 
     activeEditorLine()

services/web/test/frontend/features/source-editor/helpers/test-container.tsx

@@ -0,0 +1,12 @@
+import { FC, ComponentProps, Suspense } from 'react'
+
+const style = { width: 785, height: 785 }
+
+export const TestContainer: FC<ComponentProps<'div'>> = ({
+  children,
+  ...rest
+}) => (
+  <div style={style} {...rest}>
+    <Suspense fallback={null}>{children}</Suspense>
+  </div>
+)