fix: Time out loading embed html for migration video, stub in e2e tes…

…ts (#22165)

packages/data-context/src/sources/MigrationDataSource.ts

@@ -104,8 +104,12 @@ export class MigrationDataSource {
     const versionData = await this.ctx.versions.versionData()
     const embedOnLink = `https://on.cypress.io/v10-video-embed/${versionData.current.version}`
 
+    // Time out request if it takes longer than 3 seconds
+    const controller = new AbortController()
+    const timeoutId = setTimeout(() => controller.abort(), 3000)
+
     try {
-      const response = await this.ctx.util.fetch(embedOnLink, { method: 'GET' })
+      const response = await this.ctx.util.fetch(embedOnLink, { method: 'GET', signal: controller.signal })
       const { videoHtml } = await response.json()
 
       this.ctx.update((d) => {
@@ -116,6 +120,8 @@ export class MigrationDataSource {
     } catch {
       // fail silently, no user-facing error is needed
       return null
+    } finally {
+      clearTimeout(timeoutId)
     }
   }
 

packages/data-context/test/unit/sources/MigrationDataSource.spec.ts

@@ -0,0 +1,77 @@
+import { expect } from 'chai'
+import dedent from 'dedent'
+import sinon from 'sinon'
+
+import { DataContext } from '../../../src'
+import { MigrationDataSource } from '../../../src/sources'
+import { createTestDataContext } from '../helper'
+
+const pkg = require('@packages/root')
+
+describe('MigrationDataSource', () => {
+  context('.migration', () => {
+    let ctx: DataContext
+    let fetchStub: sinon.SinonStub
+
+    beforeEach(() => {
+      ctx = createTestDataContext('open')
+
+      ctx.coreData.currentTestingType = 'e2e'
+
+      fetchStub = sinon.stub()
+
+      sinon.stub(ctx.util, 'fetch').callsFake(fetchStub)
+    })
+
+    afterEach(() => {
+      fetchStub.reset()
+      sinon.restore()
+    })
+
+    describe('getVideoEmbedHtml', () => {
+      const expectedPayload = {
+        videoHtml: dedent`
+          <iframe
+            src="https://player.vimeo.com/video/668764401?h=0cbc785eef"
+            class="rounded h-full bg-gray-1000 w-full"
+            frameborder="0"
+            allow="autoplay; fullscreen; picture-in-picture"
+            allowfullscreen
+          />
+        `,
+      }
+
+      it('loads the video embed html', async () => {
+        fetchStub
+        .withArgs(`https://on.cypress.io/v10-video-embed/${pkg.version}`)
+        .resolves({
+          json: sinon.stub().resolves(expectedPayload),
+        })
+
+        const migrationDataSource = new MigrationDataSource(ctx)
+
+        const videoEmbedHtml = await migrationDataSource.getVideoEmbedHtml()
+
+        expect(videoEmbedHtml).to.eql(expectedPayload.videoHtml)
+      })
+
+      it('gracefully returns null when request fails', async () => {
+        const jsonStub = sinon.fake(async () => {
+          throw new Event('abort')
+        })
+
+        fetchStub
+        .withArgs(`https://on.cypress.io/v10-video-embed/${pkg.version}`)
+        .resolves({
+          json: jsonStub,
+        })
+
+        const migrationDataSource = new MigrationDataSource(ctx)
+
+        const videoEmbedHtml = await migrationDataSource.getVideoEmbedHtml()
+
+        expect(videoEmbedHtml).to.eql(null)
+      })
+    })
+  })
+})

packages/launchpad/cypress/e2e/migration.cy.ts

@@ -80,6 +80,27 @@ function renameSupport (lang: 'js' | 'ts' | 'coffee' = 'js') {
   }, { lang })
 }
 
+function stubVideoHtml (): void {
+  // ctx.migration.getVideoEmbedHtml
+  cy.withCtx((ctx, o) => {
+    o.sinon.stub(ctx.migration, 'getVideoEmbedHtml').callsFake(async () => {
+      return '<span>Stubbed Video Content</span>'
+    })
+  })
+}
+
+function unstubVideoHtml (): void {
+  cy.withCtx((ctx, o) => {
+    const restoreFn = (ctx.migration.getVideoEmbedHtml as SinonStub).restore
+
+    restoreFn?.()
+  })
+}
+
+beforeEach(() => {
+  stubVideoHtml()
+})
+
 describe('global mode', () => {
   it('migrates 2 projects in global mode', () => {
     cy.openGlobalMode()
@@ -146,8 +167,6 @@ describe('Opening unmigrated project', () => {
   })
 
   it('migration landing page appears with a video', () => {
-    cy.intercept(/vimeo.com/).as('iframeDocRequest')
-    cy.intercept(/vimeocdn/).as('vimeoCdnRequest')
     cy.scaffoldProject('migration')
     cy.openProject('migration')
     cy.visitLaunchpad()
@@ -159,19 +178,18 @@ describe('Opening unmigrated project', () => {
     .should('be.visible')
     .and('have.attr', 'href', 'https://on.cypress.io/changelog')
 
-    // Vimeo's implementation may change, this is just a high level check that
-    // the expected iframe code is being returned and that there is vimeo-related network traffic
-    cy.get('[data-cy="video-container"] iframe[src*=vimeo]').should('be.visible')
-    cy.wait('@iframeDocRequest')
-
-    // For an unknown reason, recaptcha blocks us from loading Vimeo on CircleCI Windows only
-    // So only wait on the Vimeo CDN request on Linux/Darwin.
-    if (Cypress.platform !== 'win32') cy.wait('@vimeoCdnRequest')
+    // Vimeo's implementation may change and we don't want to have an external dependency in this test,
+    // this is just a high level check that the mocked embed html from the on-link is being included
+    cy.get('[data-cy="video-container"]')
+    .contains('Stubbed Video Content')
+    .and('be.visible')
 
     cy.percySnapshot()
   })
 
   it('landing page does not appear if there is no video embed code', () => {
+    unstubVideoHtml()
+
     cy.scaffoldProject('migration')
     cy.openProject('migration')
     cy.withCtx((ctx, o) => {
@@ -186,6 +204,8 @@ describe('Opening unmigrated project', () => {
   })
 
   it('should only hit the video on link once & cache it', () => {
+    unstubVideoHtml()
+
     cy.scaffoldProject('migration')
     cy.openProject('migration')