Skip/improve flaky pdf tests (#13150)

GitOrigin-RevId: a98b145e86f325d1df79bdbcd1825ee5a3ca6def

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

@@ -2,7 +2,9 @@ import { RouteHandler, RouteMatcher } from 'cypress/types/net-stubbing'
 
 export const interceptAsync = (route: RouteMatcher, alias: string) => {
   const deferred: { resolve: (value: RouteHandler) => void } = {
-    resolve: () => {},
+    resolve: () => {
+      console.error('This should never be called')
+    },
   }
 
   const promise = new Promise<RouteHandler>(resolve => {

services/web/test/frontend/components/pdf-preview/pdf-logs-entries.spec.tsx

@@ -61,8 +61,8 @@ describe('<PdfLogsEntries/>', function () {
       name: 'Navigate to log position in source code: main.tex, 9',
     }).click()
 
-    cy.get('@findEntityByPath').should('be.calledOnce')
-    cy.get('@openDoc').should('be.calledOnceWith', fakeEntity, {
+    cy.get('@findEntityByPath').should('have.been.calledOnce')
+    cy.get('@openDoc').should('have.been.calledOnceWith', fakeEntity, {
       gotoLine: 9,
       gotoColumn: 8,
     })
@@ -93,8 +93,8 @@ describe('<PdfLogsEntries/>', function () {
       })
     })
 
-    cy.get('@findEntityByPath').should('be.calledOnce')
-    cy.get('@openDoc').should('be.calledOnceWith', fakeEntity, {
+    cy.get('@findEntityByPath').should('have.been.calledOnce')
+    cy.get('@openDoc').should('have.been.calledOnceWith', fakeEntity, {
       gotoLine: 7,
       gotoColumn: 6,
     })
@@ -117,9 +117,9 @@ describe('<PdfLogsEntries/>', function () {
       name: 'Navigate to log position in source code: main.tex, 9',
     }).click()
 
-    cy.get('@findEntityByPath').should('not.be.called')
-    cy.get('@openDoc').should('not.be.called')
-    cy.get('@postDetachMessage').should('be.calledWith', {
+    cy.get('@findEntityByPath').should('not.have.been.called')
+    cy.get('@openDoc').should('not.have.been.called')
+    cy.get('@postDetachMessage').should('have.been.calledWith', {
       role: 'detached',
       event: 'action-sync-to-entry',
       data: {

services/web/test/frontend/components/pdf-preview/pdf-preview-detached-root.spec.tsx

@@ -71,7 +71,7 @@ describe('<PdfPreviewDetachedRoot/>', function () {
       .should('not.be.disabled')
       .click()
 
-    cy.get('@postDetachMessage').should('be.calledWith', {
+    cy.get('@postDetachMessage').should('have.been.calledWith', {
       role: 'detached',
       event: 'action-clearCache',
       data: {

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

@@ -88,7 +88,8 @@ describe('<PdfSynctexControls/>', function () {
     window.metaAttributesCache = new Map()
   })
 
-  it('handles clicks on sync buttons', function () {
+  // eslint-disable-next-line mocha/no-skipped-tests
+  it.skip('handles clicks on sync buttons', function () {
     cy.interceptCompile()
 
     const scope = mockScope()
@@ -272,7 +273,7 @@ describe('<PdfSynctexControls/>', function () {
 
       // synctex is called locally and the result are broadcast for the detached tab
       // NOTE: can't use `.to.deep.include({…})` as it doesn't match the nested array
-      cy.get('@postDetachMessage').should('be.calledWith', {
+      cy.get('@postDetachMessage').should('have.been.calledWith', {
         role: 'detacher',
         event: 'action-setHighlights',
         data: { args: [mockHighlights] },
@@ -376,7 +377,7 @@ describe('<PdfSynctexControls/>', function () {
 
       cy.get('.synctex-spin-icon').should('not.exist')
 
-      cy.get('@postDetachMessage').should('be.calledWith', {
+      cy.get('@postDetachMessage').should('have.been.calledWith', {
         role: 'detached',
         event: 'action-sync-to-code',
         data: {

services/web/test/frontend/features/subscription/components/new/checkout.spec.tsx

@@ -205,13 +205,15 @@ describe('checkout panel', function () {
       })
     })
     cy.mount(<CheckoutPanelWithPaymentProvider />)
-    cy.get('@coupon').should('be.calledOnce')
+    cy.get('@coupon').should('have.been.calledOnce')
     cy.findByTestId('checkout-form').within(() => {
       cy.findByLabelText(/coupon code/i)
         .type(couponCode, { delay: 0 })
         .blur()
     })
-    cy.get('@coupon').should('be.calledTwice').and('be.calledWith', couponCode)
+    cy.get('@coupon')
+      .should('have.been.calledTwice')
+      .and('have.been.calledWith', couponCode)
   })
 
   it('enters invalid coupon code', function () {
@@ -269,13 +271,13 @@ describe('checkout panel', function () {
       })
     })
     cy.mount(<CheckoutPanelWithPaymentProvider />)
-    cy.get('@catch').should('be.calledOnce')
+    cy.get('@catch').should('have.been.calledOnce')
     cy.findByTestId('checkout-form').within(() => {
       cy.findByLabelText(/coupon code/i)
         .type('promo_code', { delay: 0 })
         .blur()
     })
-    cy.get('@catch').should('be.calledTwice')
+    cy.get('@catch').should('have.been.calledTwice')
     cy.findByRole('alert').within(() => {
       cy.contains(/an error occurred when verifying the coupon code/i)
     })
@@ -300,8 +302,8 @@ describe('checkout panel', function () {
         ITMReferrer: itmReferrer,
       })
     cy.get('@assign')
-      .should('be.calledOnce')
-      .and('be.calledWith', '/user/subscription/thank-you')
+      .should('have.been.calledOnce')
+      .and('have.been.calledWith', '/user/subscription/thank-you')
   })
   */
 

services/web/test/frontend/shared/hooks/use-detach-action.spec.tsx

@@ -46,12 +46,12 @@ describe('useDetachAction', function () {
 
     cy.spy(detachChannel, 'postMessage').as('postDetachMessage')
     cy.get('#trigger').click()
-    cy.get('@postDetachMessage').should('be.calledWith', {
+    cy.get('@postDetachMessage').should('have.been.calledWith', {
       role: 'detacher',
       event: 'action-some-action',
       data: { args: ['foo'] },
     })
-    cy.get('@actionFunction').should('not.be.called')
+    cy.get('@actionFunction').should('not.have.been.called')
   })
 
   it('call function as non-sender', function () {
@@ -67,8 +67,8 @@ describe('useDetachAction', function () {
 
     cy.spy(detachChannel, 'postMessage').as('postDetachMessage')
     cy.get('#trigger').click()
-    cy.get('@postDetachMessage').should('not.be.called')
-    cy.get('@actionFunction').should('be.calledWith', 'foo')
+    cy.get('@postDetachMessage').should('not.have.been.called')
+    cy.get('@actionFunction').should('have.been.calledWith', 'foo')
   })
 
   it('receive message and call function as target', function () {
@@ -92,7 +92,7 @@ describe('useDetachAction', function () {
       })
     })
 
-    cy.get('@actionFunction').should('be.calledWith', 'foo')
+    cy.get('@actionFunction').should('have.been.calledWith', 'foo')
   })
 
   it('receive message and does not call function as non-target', function () {
@@ -116,6 +116,6 @@ describe('useDetachAction', function () {
       })
     })
 
-    cy.get('@actionFunction').should('not.be.called')
+    cy.get('@actionFunction').should('not.have.been.called')
   })
 })

services/web/test/frontend/shared/hooks/use-detach-layout.spec.tsx

@@ -62,7 +62,7 @@ describe('useDetachLayout', function () {
     // 2. detach
     cy.get('#detach').click()
     cy.get('@openWindow').should(
-      'be.calledOnceWith',
+      'have.been.calledOnceWith',
       Cypress.sinon.match(/\/detached$/),
       '_blank'
     )
@@ -71,7 +71,8 @@ describe('useDetachLayout', function () {
     cy.get('#role').should('have.text', 'detacher')
   })
 
-  it('detacher role', function () {
+  // eslint-disable-next-line mocha/no-skipped-tests
+  it.skip('detacher role', function () {
     // 1. create hook in detacher mode
     window.metaAttributesCache.set('ol-detachRole', 'detacher')
 
@@ -95,7 +96,7 @@ describe('useDetachLayout', function () {
     })
 
     // 2. simulate connected detached tab
-    cy.get('@postDetachMessage').should('be.calledWith', {
+    cy.get('@postDetachMessage').should('have.been.calledWith', {
       role: 'detacher',
       event: 'up',
     })
@@ -134,13 +135,14 @@ describe('useDetachLayout', function () {
     cy.get('#isLinked').should('not.be.checked')
     cy.get('#isLinking').should('not.be.checked')
     cy.get('#role').should('have.text', 'none')
-    cy.get('@postDetachMessage').should('be.calledWith', {
+    cy.get('@postDetachMessage').should('have.been.calledWith', {
       role: 'detacher',
       event: 'reattach',
     })
   })
 
-  it('reset detacher role when other detacher tab connects', function () {
+  // eslint-disable-next-line mocha/no-skipped-tests
+  it.skip('reset detacher role when other detacher tab connects', function () {
     // 1. create hook in detacher mode
     window.metaAttributesCache.set('ol-detachRole', 'detacher')
 
@@ -225,7 +227,7 @@ describe('useDetachLayout', function () {
     cy.get('#isLinked').should('be.checked')
     cy.get('#isLinking').should('not.be.checked')
     cy.get('#role').should('have.text', 'detached')
-    cy.get('@postDetachMessage').should('be.calledWith', {
+    cy.get('@postDetachMessage').should('have.been.calledWith', {
       role: 'detached',
       event: 'up',
     })
@@ -241,6 +243,6 @@ describe('useDetachLayout', function () {
     cy.get('#isLinked').should('not.be.checked')
     cy.get('#isLinking').should('not.be.checked')
     cy.get('#role').should('have.text', 'detached')
-    cy.get('@closeWindow').should('be.called')
+    cy.get('@closeWindow').should('have.been.called')
   })
 })

services/web/test/frontend/shared/hooks/use-detach-state.spec.tsx

@@ -73,7 +73,7 @@ describe('useDetachState', function () {
 
     cy.spy(detachChannel, 'postMessage').as('postDetachMessage')
     cy.get('#setValue').click()
-    cy.get('@postDetachMessage').should('be.calledWith', {
+    cy.get('@postDetachMessage').should('have.been.calledWith', {
       role: 'detacher',
       event: 'state-some-key',
       data: { value: 'barbaz1' },