chore: update welcome screen for Cypress 14 (#30845)

cypress-io · Jan 9, 2025 · c1a7467 · c1a7467 · cypress-bot · Jan 9, 2025
1 parent 056696c
commit c1a7467
Show file tree

Hide file tree

Showing 10 changed files with 46 additions and 257 deletions.
diff --git a/packages/data-context/src/data/coreDataShape.ts b/packages/data-context/src/data/coreDataShape.ts
@@ -94,7 +94,6 @@ export interface WizardDataShape {
 export interface MigrationDataShape {
   // TODO: have the model of migration here
   step: MigrationStep
-  videoEmbedHtml: string | null
   legacyConfigForMigration?: LegacyCypressConfigJson | null
   filteredSteps: MigrationStep[]
   flags: {
@@ -225,7 +224,6 @@ export function makeCoreData (modeOptions: Partial<AllModeOptions> = {}): CoreDa
     },
     migration: {
       step: 'renameAuto',
-      videoEmbedHtml: null,
       legacyConfigForMigration: null,
       filteredSteps: [...MIGRATION_STEPS],
       flags: {

diff --git a/packages/data-context/src/sources/MigrationDataSource.ts b/packages/data-context/src/sources/MigrationDataSource.ts
@@ -96,37 +96,6 @@ export class MigrationDataSource {
     return this.ctx.lifecycleManager.metaState.needsCypressJsonMigration && Boolean(legacyConfigFileExists)
   }
 
-  async getVideoEmbedHtml () {
-    if (this.ctx.coreData.migration.videoEmbedHtml) {
-      return this.ctx.coreData.migration.videoEmbedHtml
-    }
-
-    const versionData = await this.ctx.versions.versionData()
-    const embedOnLink = `https://on.cypress.io/v13-video-embed/${versionData.current.version}`
-
-    debug(`Getting videoEmbedHtml at link: ${embedOnLink}`)
-
-    // 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', signal: controller.signal })
-      const { videoHtml } = await response.json()
-
-      this.ctx.update((d) => {
-        d.migration.videoEmbedHtml = videoHtml
-      })
-
-      return videoHtml
-    } catch {
-      // fail silently, no user-facing error is needed
-      return null
-    } finally {
-      clearTimeout(timeoutId)
-    }
-  }
-
   async getComponentTestingMigrationStatus () {
     debug('getComponentTestingMigrationStatus: start')
     if (!this.legacyConfig || !this.ctx.currentProject) {

diff --git a/packages/frontend-shared/cypress/support/mock-graphql/stubgql-Query.ts b/packages/frontend-shared/cypress/support/mock-graphql/stubgql-Query.ts
@@ -43,14 +43,4 @@ export const stubQuery: MaybeResolver<Query> = {
   scaffoldedFiles () {
     return null
   },
-  videoEmbedHtml () {
-    return `<iframe
-      src="https://player.vimeo.com/video/855168407?h=0cbc785eef"
-      title="Video about what is new in Cypress"
-      class="rounded h-full bg-gray-1000 w-full"
-      frameborder="0"
-      allow="autoplay; fullscreen; picture-in-picture"
-      allowfullscreen
-    />`
-  },
 }
diff --git a/packages/graphql/schemas/schema.graphql b/packages/graphql/schemas/schema.graphql
@@ -2074,9 +2074,6 @@ type Query {
   """Previous versions of cypress and their release date"""
   versions: VersionData
 
-  """Markup for the migration landing page video embed"""
-  videoEmbedHtml: String
-
   """A list of warnings"""
   warnings: [ErrorWrapper!]!
 

diff --git a/packages/graphql/src/schemaTypes/objectTypes/gql-Query.ts b/packages/graphql/src/schemaTypes/objectTypes/gql-Query.ts
@@ -146,17 +146,6 @@ export const Query = objectType({
       description: 'Unique node machine identifier for this instance - may be nil if unable to resolve',
       resolve: async (source, args, ctx) => await ctx.coreData.machineId,
     })
-
-    t.string('videoEmbedHtml', {
-      description: 'Markup for the migration landing page video embed',
-      resolve: (source, args, ctx) => {
-        // NOTE: embedded video is not always a part of the v9 - v10 migration experience
-        // in the case of v1x - v13, we want to show an embedded video to users installing the major
-        // version for the first time without going through the steps of the migration resolver, hence
-        // why this lives in the root resolver but the migration context
-        return ctx.migration.getVideoEmbedHtml()
-      },
-    })
   },
   sourceType: {
     module: '@packages/graphql',

diff --git a/packages/launchpad/cypress/e2e/migration.cy.ts b/packages/launchpad/cypress/e2e/migration.cy.ts
@@ -1,5 +1,4 @@
 import type { ProjectFixtureDir } from '@tooling/system-tests'
-import type { SinonStub } from 'sinon'
 import { getPathForPlatform } from './support/getPathForPlatform'
 
 // @ts-ignore
@@ -1661,124 +1660,3 @@ describe('Migrate custom config files', () => {
     cy.contains(err)
   })
 })
-
-describe('v13 migration welcome page with video', () => {
-  it('Welcome page should appear if video is not present (failure)', () => {
-    cy.withCtx((ctx, o) => {
-      const originalGetVideoEmbedHtml = ctx.migration.getVideoEmbedHtml
-
-      o.sinon.stub(ctx.migration, 'getVideoEmbedHtml').callsFake(async () => {
-        const mockMigrationSourceGetVideoEmbedHtmlCTX = {
-          ctx: {
-            coreData: {
-              migration: {
-                videoEmbedHtml: undefined,
-              },
-            },
-            versions: {
-              versionData: () => {
-                return {
-                  current: {
-                    version: '13.0.0',
-                  },
-                }
-              },
-            },
-            util: {
-              fetch: () => {
-                throw new Error('kaboom')
-              },
-            },
-          },
-        }
-
-        return originalGetVideoEmbedHtml.apply(mockMigrationSourceGetVideoEmbedHtmlCTX)
-      })
-    })
-
-    cy.scaffoldProject('migration-v12-to-v13')
-    cy.openProject('migration-v12-to-v13')
-
-    cy.visitLaunchpad({ showWelcome: true })
-    cy.contains(cy.i18n.majorVersionWelcome.title).should('be.visible')
-    cy.get('[data-cy="video-container"]').should('not.exist')
-  })
-
-  it('Welcome page should appear if video is not present (timeout)', () => {
-    cy.withCtx((ctx, o) => {
-      const originalGetVideoEmbedHtml = ctx.migration.getVideoEmbedHtml
-
-      o.sinon.stub(ctx.migration, 'getVideoEmbedHtml').callsFake(async () => {
-        const mockMigrationSourceGetVideoEmbedHtmlCTX = {
-          ctx: {
-            coreData: {
-              migration: {
-                videoEmbedHtml: undefined,
-              },
-            },
-            versions: {
-              versionData: () => {
-                return {
-                  current: {
-                    version: '13.0.0',
-                  },
-                }
-              },
-            },
-            util: {
-              fetch: () => {
-                return new Promise((resolve, reject) => {
-                  setTimeout(() => {
-                    // the request should time out before this body is returned
-                    resolve({
-                      json () {
-                        return {
-                          videoHtml: '<span>Stubbed Video Content</span>',
-                        }
-                      },
-                    })
-                  }, 4000)
-                })
-              },
-            },
-          },
-        }
-
-        return originalGetVideoEmbedHtml.apply(mockMigrationSourceGetVideoEmbedHtmlCTX)
-      })
-    })
-
-    cy.scaffoldProject('migration-v12-to-v13')
-    cy.openProject('migration-v12-to-v13')
-
-    cy.visitLaunchpad({ showWelcome: true })
-    cy.contains(cy.i18n.majorVersionWelcome.title, {
-      timeout: 8000,
-    }).should('be.visible')
-
-    cy.get('[data-cy="video-container"]').should('not.exist')
-  })
-
-  it('Welcome page should appear if video is present', () => {
-    cy.scaffoldProject('migration-v12-to-v13')
-    cy.openProject('migration-v12-to-v13')
-
-    cy.visitLaunchpad({ showWelcome: true })
-    cy.contains(cy.i18n.majorVersionWelcome.title).should('be.visible')
-    cy.get('[data-cy="video-container"]').should('be.visible')
-  })
-
-  it('should only hit the video on link once & cache it', () => {
-    cy.scaffoldProject('migration-v12-to-v13')
-    cy.openProject('migration-v12-to-v13')
-
-    cy.visitLaunchpad({ showWelcome: true })
-    cy.contains(cy.i18n.majorVersionWelcome.title).should('be.visible')
-
-    cy.visitLaunchpad({ showWelcome: true })
-    cy.contains(cy.i18n.majorVersionWelcome.title).should('be.visible')
-    cy.withCtx((ctx, o) => {
-      expect((ctx.util.fetch as SinonStub).args.filter((a) => String(a[0]).includes('v13-video-embed')).length).to.eq(1)
-    })
-  })
-})
diff --git a/packages/launchpad/cypress/e2e/slow-network.cy.ts b/packages/launchpad/cypress/e2e/slow-network.cy.ts
@@ -5,12 +5,6 @@ describe('slow network: launchpad', () => {
     cy.scaffoldProject('todos')
 
     cy.withCtx((ctx, o) => {
-      o.sinon.stub(ctx.migration, 'getVideoEmbedHtml').callsFake(async () => {
-        // stubbing the AbortController is a bit difficult with fetch ctx, so instead
-        // assume the migration handler itself returned null from a timeout
-        return null
-      })
-
       const currentStubbedFetch = ctx.util.fetch;
 
       (ctx.util.fetch as Sinon.SinonStub).restore()
@@ -40,7 +34,6 @@ describe('slow network: launchpad', () => {
     })
   })
 
-  // NOTE: testing the videoEmbedHTML query abortController with the current setup is a bit difficult.
   // The timeout happens as needed, but is not functioning correctly in this E2E test
   it('loads through to the browser screen when the network is slow', () => {
     cy.loginUser()

diff --git a/packages/launchpad/src/Main.vue b/packages/launchpad/src/Main.vue
@@ -7,19 +7,8 @@
       v-if="shouldShowWelcome"
       class="pt-[64px]"
       role="main"
-      :video-html="videoHtml"
       @clearLandingPage="handleClearLandingPage"
-    >
-      <template
-        v-if="videoHtml"
-        #video
-      >
-        <div
-          class="major-version-welcome-video"
-          v-html="videoHtml"
-        />
-      </template>
-    </MajorVersionWelcome>
+    />
     <main
       v-else
       class="px-[24px] pt-[86px] pb-[24px]"
@@ -148,7 +137,6 @@ fragment MainLaunchpadQueryData on Query {
       id
     }
   }
-  videoEmbedHtml
   isGlobalMode
   ...GlobalPage
   ...ScaffoldedFiles
@@ -278,8 +266,6 @@ const shouldShowWelcome = computed(() => {
   return false
 })
 
-const videoHtml = computed(() => query.data.value?.videoEmbedHtml || '')
-
 </script>
 <style scoped lang="scss">
 .major-version-welcome-video {

diff --git a/packages/launchpad/src/migration/MajorVersionWelcome.cy.tsx b/packages/launchpad/src/migration/MajorVersionWelcome.cy.tsx
@@ -14,11 +14,12 @@ describe('<MajorVersionWelcome />', { viewportWidth: 1280, viewportHeight: 1400
     cy.contains('h1', 'What\'s New in Cypress').should('be.visible')
 
     cy.get('[data-cy="release-highlights"]').within(() => {
-      cy.contains('a[href="https://on.cypress.io/changelog?utm_source=Binary%3A+App&utm_medium=splash-page&utm_campaign=v13#13-0-0"]', '13.0.0')
-      cy.contains('a[href="https://on.cypress.io/changelog?utm_source=Binary%3A+App&utm_medium=splash-page&utm_campaign=v13#13-0-0"]', 'changelog')
+      cy.contains('a[href="https://on.cypress.io/changelog?utm_source=Binary%3A+App&utm_medium=splash-page&utm_campaign=v14#14-0-0"]', '14.0.0')
+      cy.contains('a[href="https://on.cypress.io/changelog?utm_source=Binary%3A+App&utm_medium=splash-page&utm_campaign=v14#14-0-0"]', 'changelog')
     })
 
     cy.get('[data-cy="previous-release-highlights"]').within(() => {
+      cy.contains('a[href="https://on.cypress.io/changelog#13-0-0"]', '13.0.0')
       cy.contains('a[href="https://on.cypress.io/changelog#12-0-0"]', '12.0.0')
       cy.contains('a[href="https://on.cypress.io/changelog#11-0-0"]', '11.0.0')
       cy.contains('a[href="https://on.cypress.io/changelog#10-0-0"]', '10.0.0')
@@ -34,17 +35,18 @@ describe('<MajorVersionWelcome />', { viewportWidth: 1280, viewportHeight: 1400
   })
 
   it('renders correct time for releases and overflows correctly', () => {
-    cy.clock(Date.UTC(2023, 7, 29))
+    cy.clock(Date.UTC(2025, 0, 10))
     cy.mount(<MajorVersionWelcome />)
-    cy.contains('13.0.0 Released just now')
-    cy.contains('12.0.0 Released 9 months ago')
-    cy.contains('11.0.0 Released 10 months ago')
-    cy.contains('10.0.0 Released last year')
+    cy.contains('14.0.0 Released just now')
+    cy.contains('13.0.0 Released last year')
+    cy.contains('12.0.0 Released 2 years ago')
+    cy.contains('11.0.0 Released 2 years ago')
+    cy.contains('10.0.0 Released 3 years ago')
     cy.tick(interval('1 minute'))
-    cy.contains('13.0.0 Released 1 minute ago')
+    cy.contains('14.0.0 Released 1 minute ago')
     cy.tick(interval('1 month'))
-    cy.contains('13.0.0 Released last month')
-    cy.contains('12.0.0 Released 10 months ago')
+    cy.contains('14.0.0 Released last month')
+    cy.contains('13.0.0 Released last year')
 
     cy.viewport(1280, 500)