From 970954961395467d8a5f6b65ad24f8aa0ee032f9 Mon Sep 17 00:00:00 2001 From: Mathias Jakobsen Date: Wed, 25 Oct 2023 12:11:14 +0100 Subject: [PATCH] Merge pull request #15411 from overleaf/mj-cypress-mathjax [web] Stub mathjax in cypress tests GitOrigin-RevId: 7b734a7d80cbc0a96c9cc05ee8c31a4daaab5e25 --- .../support/shared/commands/mathjax.ts | 24 +++++++++++---- ...codemirror-editor-table-generator.spec.tsx | 8 +++++ ...codemirror-editor-visual-readonly.spec.tsx | 5 +--- ...codemirror-editor-visual-tooltips.spec.tsx | 5 +--- .../codemirror-editor-visual.spec.tsx | 30 +++++++++---------- .../components/figure-modal.spec.tsx | 5 +--- 6 files changed, 44 insertions(+), 33 deletions(-) diff --git a/services/web/cypress/support/shared/commands/mathjax.ts b/services/web/cypress/support/shared/commands/mathjax.ts index b5a5f8a830..c99fb5c2a8 100644 --- a/services/web/cypress/support/shared/commands/mathjax.ts +++ b/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') } diff --git a/services/web/test/frontend/features/source-editor/components/codemirror-editor-table-generator.spec.tsx b/services/web/test/frontend/features/source-editor/components/codemirror-editor-table-generator.spec.tsx index 981e4d582f..69ab9ca501 100644 --- a/services/web/test/frontend/features/source-editor/components/codemirror-editor-table-generator.spec.tsx +++ b/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 () { diff --git a/services/web/test/frontend/features/source-editor/components/codemirror-editor-visual-readonly.spec.tsx b/services/web/test/frontend/features/source-editor/components/codemirror-editor-visual-readonly.spec.tsx index 1f81663abd..2509374e42 100644 --- a/services/web/test/frontend/features/source-editor/components/codemirror-editor-visual-readonly.spec.tsx +++ b/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(' 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() }) diff --git a/services/web/test/frontend/features/source-editor/components/codemirror-editor-visual-tooltips.spec.tsx b/services/web/test/frontend/features/source-editor/components/codemirror-editor-visual-tooltips.spec.tsx index 0405b4da75..4fa1669711 100644 --- a/services/web/test/frontend/features/source-editor/components/codemirror-editor-visual-tooltips.spec.tsx +++ b/services/web/test/frontend/features/source-editor/components/codemirror-editor-visual-tooltips.spec.tsx @@ -10,10 +10,7 @@ const Container: FC = ({ children }) => ( describe(' 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() diff --git a/services/web/test/frontend/features/source-editor/components/codemirror-editor-visual.spec.tsx b/services/web/test/frontend/features/source-editor/components/codemirror-editor-visual.spec.tsx index 7e4847ec9e..b3aedf5fbf 100644 --- a/services/web/test/frontend/features/source-editor/components/codemirror-editor-visual.spec.tsx +++ b/services/web/test/frontend/features/source-editor/components/codemirror-editor-visual.spec.tsx @@ -13,12 +13,9 @@ const Container: FC = ({ children }) => ( describe(' 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(' 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
title') + cy.get('.ol-cm-frame-title').should('contain.html', 'Slide
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(' 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
with') cy.get('.ol-cm-author').should('have.text', 'Author') @@ -700,7 +690,15 @@ describe(' 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 }) diff --git a/services/web/test/frontend/features/source-editor/components/figure-modal.spec.tsx b/services/web/test/frontend/features/source-editor/components/figure-modal.spec.tsx index 638a4876a1..3e3f1f4eb0 100644 --- a/services/web/test/frontend/features/source-editor/components/figure-modal.spec.tsx +++ b/services/web/test/frontend/features/source-editor/components/figure-modal.spec.tsx @@ -41,10 +41,7 @@ describe('', 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()