Merge pull request #15411 from overleaf/mj-cypress-mathjax

[web] Stub mathjax in cypress tests

GitOrigin-RevId: 7b734a7d80cbc0a96c9cc05ee8c31a4daaab5e25

services/web/cypress/support/shared/commands/mathjax.ts

@@ -3,7 +3,22 @@ window.MathJax = {
   startup: {
     promise: Promise.resolve()
   }, 
-  svgStylesheet: () => document.createElement("STYLE") 
+  svgStylesheet: () => document.createElement("STYLE"),
+  typesetPromise: (elements) => {
+    for (const element of elements) {
+      // This will keep math delimeters around the text
+      element.classList.add('MathJax')
+    }
+    return Promise.resolve()
+  },
+  tex2svgPromise: (content) => {
+    const text = document.createElement('SPAN')
+    text.classList.add('MathJax')
+    text.innerText = content
+    return Promise.resolve(text)
+  },
+  getMetricsFor: () => ({}),
+  texReset: () => {},
 }
 `
 
@@ -11,13 +26,12 @@ export const interceptMathJax = () => {
   cy.window().then(win => {
     win.metaAttributesCache.set(
       'ol-mathJax3Path',
-      'https://unpkg.com/mathjax@3.2.2/es5/tex-svg-full.js'
+      '/js/libs/mathjax3/es5/tex-svg-full.js'
     )
   })
-  cy.intercept('GET', '/js/libs/mathjax3/es5/tex-svg-full.js*', MATHJAX_STUB)
   cy.intercept(
     'GET',
-    'https://unpkg.com/mathjax@3.2.2/es5/tex-svg-full.js',
+    '/js/libs/mathjax3/es5/tex-svg-full.js*',
     MATHJAX_STUB
-  )
+  ).as('mathjax-load-request')
 }

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

@@ -155,6 +155,14 @@ cell 3 & cell 4 \\\\
 
       checkBordersWithNoMultiColumn([false, true, false], [false, true, false])
     })
+
+    it('Renders math in cells', function () {
+      mountEditor(`
+\\begin{tabular}{c}
+  $\\pi$
+\\end{tabular}`)
+      cy.get('.MathJax').should('have.text', '$\\pi$')
+    })
   })
 
   describe('The toolbar', function () {

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

@@ -27,10 +27,7 @@ const mountEditor = (content: string, ...args: any[]) => {
 describe('<CodeMirrorEditor/> in Visual mode with read-only permission', function () {
   beforeEach(function () {
     window.metaAttributesCache.set('ol-preventCompileOnLoad', true)
-    window.metaAttributesCache.set(
-      'ol-mathJax3Path',
-      'https://unpkg.com/mathjax@3.2.2/es5/tex-svg-full.js'
-    )
+    cy.interceptMathJax()
     cy.interceptEvents()
     cy.interceptSpelling()
   })

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

@@ -10,10 +10,7 @@ const Container: FC = ({ children }) => (
 describe('<CodeMirrorEditor/> tooltips in Visual mode', function () {
   beforeEach(function () {
     window.metaAttributesCache.set('ol-preventCompileOnLoad', true)
-    window.metaAttributesCache.set(
-      'ol-mathJax3Path',
-      'https://unpkg.com/mathjax@3.2.2/es5/tex-svg-full.js'
-    )
+    cy.interceptMathJax()
     cy.interceptEvents()
     cy.interceptSpelling()
 

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

@@ -13,12 +13,9 @@ const Container: FC = ({ children }) => (
 describe('<CodeMirrorEditor/> in Visual mode', function () {
   beforeEach(function () {
     window.metaAttributesCache.set('ol-preventCompileOnLoad', true)
-    window.metaAttributesCache.set(
-      'ol-mathJax3Path',
-      'https://unpkg.com/mathjax@3.2.2/es5/tex-svg-full.js'
-    )
     cy.interceptEvents()
     cy.interceptSpelling()
+    cy.interceptMathJax()
 
     // 3 blank lines
     const content = '\n'.repeat(3)
@@ -386,17 +383,14 @@ describe('<CodeMirrorEditor/> in Visual mode', function () {
       cy.get('@first-line').type(
         '\\begin{{}frame}{{}Slide\\\\title}{Enter}\\end{{}frame}{Enter}'
       )
-      cy.get('.ol-cm-frame-title').should('have.html', 'Slide<br>title')
+      cy.get('.ol-cm-frame-title').should('contain.html', 'Slide<br>title')
     })
 
-    // eslint-disable-next-line mocha/no-skipped-tests
-    it.skip('typesets math in title', function () {
+    it('typesets math in title', function () {
       cy.get('@first-line').type(
         '\\begin{{}frame}{{}Slide $\\pi$}{Enter}\\end{{}frame}{Enter}'
       )
-
-      // allow plenty of time for MathJax to load
-      cy.get('.MathJax', { timeout: 10000 })
+      cy.get('.MathJax').should('contain.text', '$\\pi$')
     })
 
     it('typesets subtitle', function () {
@@ -419,11 +413,7 @@ describe('<CodeMirrorEditor/> in Visual mode', function () {
       ].join('{Enter}')
     )
 
-    // allow plenty of time for MathJax to load
-    // TODO: re-enable this assertion when stable
-    // cy.get('.MathJax', { timeout: 10000 })
-
-    cy.get('.ol-cm-maketitle')
+    cy.get('.ol-cm-maketitle').should('have.class', 'MathJax')
     cy.get('.ol-cm-title').should('contain.html', 'Document title<br>with')
     cy.get('.ol-cm-author').should('have.text', 'Author')
 
@@ -700,7 +690,15 @@ describe('<CodeMirrorEditor/> in Visual mode', function () {
     }
   )
 
+  it('invokes MathJax when math is written', function () {
+    cy.get('@first-line').type('foo $\\pi$ bar')
+    cy.get('@second-line').type(
+      'foo \n\\[\\epsilon{rightArrow}{rightArrow}\nbar'
+    )
+    cy.get('.MathJax').first().should('have.text', '\\pi')
+    cy.get('.MathJax').eq(1).should('have.text', '\\epsilon')
+  })
+
   // TODO: \input
-  // TODO: Math
   // TODO: Abstract
 })

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

@@ -41,10 +41,7 @@ describe('<FigureModal />', function () {
   // TODO: Write tests for width toggle, when we can match on source code
   beforeEach(function () {
     window.metaAttributesCache.set('ol-preventCompileOnLoad', true)
-    window.metaAttributesCache.set(
-      'ol-mathJax3Path',
-      'https://unpkg.com/mathjax@3.2.2/es5/tex-svg-full.js'
-    )
+    cy.interceptMathJax()
     cy.interceptEvents()
     cy.interceptSpelling()