Merge pull request #12176 from overleaf/ae-syntex-tests

Improve synctex Cypress tests

GitOrigin-RevId: 282d26d344d8ae08f52b18ef4c12a4c311a6b7ff

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

@@ -45,7 +45,7 @@ const outputFiles = () => {
 
 export const interceptCompile = (prefix = 'compile', times = 1) => {
   cy.intercept(
-    { method: 'POST', url: '/project/*/compile*', times },
+    { method: 'POST', pathname: '/project/*/compile', times },
     {
       body: {
         status: 'success',
@@ -58,17 +58,17 @@ export const interceptCompile = (prefix = 'compile', times = 1) => {
   ).as(`${prefix}`)
 
   cy.intercept(
-    { url: '/build/*/output.pdf*', times },
+    { pathname: '/build/*/output.pdf', times },
     { fixture: 'build/output.pdf,null' }
   ).as(`${prefix}-pdf`)
 
   cy.intercept(
-    { url: '/build/*/output.log*', times },
+    { pathname: '/build/*/output.log', times },
     { fixture: 'build/output.log' }
   ).as(`${prefix}-log`)
 
   cy.intercept(
-    { url: '/build/*/output.blg*', times },
+    { pathname: '/build/*/output.blg', times },
     { fixture: 'build/output.blg' }
   ).as(`${prefix}-blg`)
 }
@@ -134,17 +134,17 @@ export const interceptDeferredCompile = (beforeResponse?: () => void) => {
   ).as('compile')
 
   cy.intercept(
-    { url: '/build/*/output.pdf*', times: 1 },
+    { pathname: '/build/*/output.pdf', times: 1 },
     { fixture: 'build/output.pdf,null' }
   ).as(`compile-pdf`)
 
   cy.intercept(
-    { url: '/build/*/output.log*', times: 1 },
+    { pathname: '/build/*/output.log', times: 1 },
     { fixture: 'build/output.log' }
   ).as(`compile-log`)
 
   cy.intercept(
-    { url: '/build/*/output.blg*', times: 1 },
+    { pathname: '/build/*/output.blg', times: 1 },
     { fixture: 'build/output.blg' }
   ).as(`compile-blg`)
 

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

@@ -6,6 +6,7 @@ import {
 } from './compile'
 import { interceptEvents } from './events'
 import { interceptSpelling } from './spelling'
+import { interceptAsync } from './intercept-async'
 
 // eslint-disable-next-line no-unused-vars,@typescript-eslint/no-namespace
 declare global {
@@ -13,6 +14,7 @@ declare global {
   namespace Cypress {
     // eslint-disable-next-line no-unused-vars
     interface Chainable {
+      interceptAsync: typeof interceptAsync
       interceptCompile: typeof interceptCompile
       interceptEvents: typeof interceptEvents
       interceptSpelling: typeof interceptSpelling
@@ -23,6 +25,7 @@ declare global {
   }
 }
 
+Cypress.Commands.add('interceptAsync', interceptAsync)
 Cypress.Commands.add('interceptCompile', interceptCompile)
 Cypress.Commands.add('interceptEvents', interceptEvents)
 Cypress.Commands.add('interceptSpelling', interceptSpelling)

services/web/cypress/support/shared/commands/intercept-async.ts

@@ -0,0 +1,17 @@
+import { RouteHandler, RouteMatcher } from 'cypress/types/net-stubbing'
+
+export const interceptAsync = (route: RouteMatcher, alias: string) => {
+  const deferred: { resolve: (value: RouteHandler) => void } = {
+    resolve: () => {},
+  }
+
+  const promise = new Promise<RouteHandler>(resolve => {
+    deferred.resolve = resolve
+  })
+
+  cy.intercept(route, req => {
+    return promise.then(response => req.reply(response))
+  }).as(alias)
+
+  return cy.wrap(deferred)
+}

services/web/test/frontend/components/pdf-preview/pdf-synctex-controls.spec.tsx

@@ -76,60 +76,10 @@ const WithSelectedEntities = ({
   return null
 }
 
-const interceptSyncCodeAsync = () => {
-  const deferred: { resolve: () => void } = {
-    resolve: () => {
-      // do nothing
-    },
-  }
-
-  cy.intercept('/project/*/sync/code?*', req => {
-    return new Promise(resolve => {
-      deferred.resolve = () => {
-        req.reply({
-          body: { pdf: cloneDeep(mockHighlights) },
-        })
-        resolve()
-      }
-    })
-  }).as('sync-code')
-
-  return deferred
-}
-
-const interceptSyncPdfAsync = () => {
-  const output: { resolve: () => void } = {
-    resolve: () => {
-      // do nothing
-    },
-  }
-
-  cy.intercept('/project/*/sync/pdf?*', req => {
-    return new Promise(resolve => {
-      output.resolve = () => {
-        req.reply({
-          body: { code: [{ file: 'main.tex', line: 100 }] },
-          delay: 1,
-        })
-        resolve()
-      }
-    })
-  }).as('sync-pdf')
-
-  return output
-}
-
-const interceptSyncPdf = () => {
-  cy.intercept('/project/*/sync/pdf?*', req => {
-    req.reply({
-      body: { code: [{ file: 'main.tex', line: 100 }] },
-    })
-  }).as('sync-pdf')
-}
-
 describe('<PdfSynctexControls/>', function () {
   beforeEach(function () {
     window.metaAttributesCache = new Map()
+    window.metaAttributesCache.set('ol-project_id', 'test-project')
     window.metaAttributesCache.set('ol-preventCompileOnLoad', false)
     cy.interceptEvents()
   })
@@ -168,27 +118,35 @@ describe('<PdfSynctexControls/>', function () {
       setDetachedPosition(mockPosition)
     })
 
-    const syncCode = interceptSyncCodeAsync()
-
-    cy.findByRole('button', { name: 'Go to code location in PDF' }).click()
-    cy.findByRole('button', { name: 'Go to code location in PDF' })
-      .should('be.disabled')
-      .then(() => {
-        syncCode.resolve()
-      })
-
-    cy.wait('@sync-code')
+    cy.interceptAsync({ pathname: '/project/*/sync/code' }, 'sync-code').then(
+      syncCodeResponse => {
+        cy.findByRole('button', { name: 'Go to code location in PDF' }).click()
+        cy.findByRole('button', { name: 'Go to code location in PDF' })
+          .should('be.disabled')
+          .then(() => {
+            syncCodeResponse.resolve({
+              body: { pdf: cloneDeep(mockHighlights) },
+            })
+          })
 
-    const syncPdf = interceptSyncPdfAsync()
+        cy.wait('@sync-code')
+      }
+    )
 
-    cy.findByRole('button', { name: /^Go to PDF location in code/ }).click()
-    cy.findByRole('button', { name: /^Go to PDF location in code/ })
-      .should('be.disabled')
-      .then(() => {
-        syncPdf.resolve()
-      })
+    cy.interceptAsync({ pathname: '/project/*/sync/pdf' }, 'sync-pdf').then(
+      syncPdfResponse => {
+        cy.findByRole('button', { name: /^Go to PDF location in code/ }).click()
+        cy.findByRole('button', { name: /^Go to PDF location in code/ })
+          .should('be.disabled')
+          .then(() => {
+            syncPdfResponse.resolve({
+              body: { code: [{ file: 'main.tex', line: 100 }] },
+            })
+          })
 
-    cy.wait('@sync-pdf')
+        cy.wait('@sync-pdf')
+      }
+    )
   })
 
   it('disables button when multiple entities are selected', function () {
@@ -286,23 +244,27 @@ describe('<PdfSynctexControls/>', function () {
 
       cy.spy(detachChannel, 'postMessage').as('postDetachMessage')
 
-      const syncing = interceptSyncCodeAsync()
-
-      cy.findByRole('button', {
-        name: 'Go to code location in PDF',
-      })
-        .should('not.be.disabled')
-        .click()
-
-      cy.findByRole('button', {
-        name: 'Go to code location in PDF',
-      })
-        .should('be.disabled')
-        .then(() => {
-          syncing.resolve()
-        })
+      cy.interceptAsync({ pathname: '/project/*/sync/code' }, 'sync-code').then(
+        syncCodeResponse => {
+          cy.findByRole('button', {
+            name: 'Go to code location in PDF',
+          })
+            .should('not.be.disabled')
+            .click()
 
-      cy.wait('@sync-code')
+          cy.findByRole('button', {
+            name: 'Go to code location in PDF',
+          })
+            .should('be.disabled')
+            .then(() => {
+              syncCodeResponse.resolve({
+                body: { pdf: cloneDeep(mockHighlights) },
+              })
+            })
+
+          cy.wait('@sync-code')
+        }
+      )
 
       cy.findByRole('button', {
         name: 'Go to code location in PDF',
@@ -319,7 +281,6 @@ describe('<PdfSynctexControls/>', function () {
 
     it('reacts to sync to code action', function () {
       cy.interceptCompile()
-      interceptSyncPdf()
 
       const scope = mockScope()
 
@@ -331,17 +292,23 @@ describe('<PdfSynctexControls/>', function () {
         </EditorProviders>
       )
 
-      cy.waitForCompile().then(() => {
-        testDetachChannel.postMessage({
-          role: 'detached',
-          event: 'action-sync-to-code',
-          data: {
-            args: [mockPosition],
-          },
-        })
-      })
+      cy.waitForCompile()
+
+      cy.interceptAsync({ pathname: '/project/*/sync/pdf' }, 'sync-pdf')
+        .then(syncPdfResponse => {
+          syncPdfResponse.resolve({
+            body: { code: [{ file: 'main.tex', line: 100 }] },
+          })
 
-      cy.wait('@sync-pdf')
+          testDetachChannel.postMessage({
+            role: 'detached',
+            event: 'action-sync-to-code',
+            data: {
+              args: [mockPosition],
+            },
+          })
+        })
+        .wait('@sync-pdf')
     })
   })