chore: add v13 welcome page content (#27549)

* feat: add v13 splash page content (wip) chore: add video link for v13 inside graphql context and root resolver. add migration tests outside of migration manager and update component tests to test aspects chore: update copy to most recent. Needs onlink deployments chore: opt for named slot in major version welcome as we still want to show the changes whether or not the video is present chore: fix video margin by shrinking the margin for a more appealing loadout chore: update onlinks for what is expected in deploy chore: adjust margins around video, move video up, and reduce margin on major welcome title chore: bump release date to 8/29 chore: update stubbed query to reference actual video * Update packages/launchpad/src/migration/MajorVersionWelcome.vue Co-authored-by: Mark Noonan <mark@cypress.io> * Update packages/launchpad/src/migration/MajorVersionWelcome.vue Co-authored-by: Mark Noonan <mark@cypress.io> * chore: update code elements to be inlinecodefragments * chore: update utm links to reflect correct nomenclature * stub migration src in network performance launchpad test on video as abortcontroller is difficult to test with current ctx setup --------- Co-authored-by: Mark Noonan <mark@cypress.io>
cypress-io · Aug 24, 2023 · 150b04c · 150b04c · cypress-bot · Aug 25, 2023
1 parent 2c8337a
commit 150b04c
Show file tree

Hide file tree

Showing 13 changed files with 244 additions and 62 deletions.
diff --git a/packages/data-context/src/data/coreDataShape.ts b/packages/data-context/src/data/coreDataShape.ts
@@ -79,6 +79,7 @@ export interface WizardDataShape {
 export interface MigrationDataShape {
   // TODO: have the model of migration here
   step: MigrationStep
+  videoEmbedHtml: string | null
   legacyConfigForMigration?: LegacyCypressConfigJson | null
   filteredSteps: MigrationStep[]
   flags: {
@@ -214,6 +215,7 @@ 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,6 +96,37 @@ 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,4 +43,13 @@ export const stubQuery: MaybeResolver<Query> = {
   scaffoldedFiles () {
     return null
   },
+  videoEmbedHtml () {
+    return `<iframe
+      src="https://player.vimeo.com/video/855168407?h=0cbc785eef"
+      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
@@ -2053,6 +2053,9 @@ 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,6 +146,17 @@ 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,4 +1,5 @@
 import type { ProjectFixtureDir } from '@tooling/system-tests'
+import type { SinonStub } from 'sinon'
 import { getPathForPlatform } from './support/getPathForPlatform'
 
 // @ts-ignore
@@ -1731,3 +1732,68 @@ describe('Migrate custom config files', () => {
     cy.contains(err)
   })
 })
+
+describe('v13 migration welcome page with video', () => {
+  function stubVideoHtml (): void {
+    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()
+  })
+
+  it('Welcome page should appear if video is not present', () => {
+    unstubVideoHtml()
+
+    cy.scaffoldProject('migration-v12-to-v13')
+    cy.openProject('migration-v12-to-v13')
+    cy.withCtx((ctx, o) => {
+      o.sinon.stub(ctx.migration, 'getVideoEmbedHtml').callsFake(async () => {
+        return null
+      })
+    })
+
+    cy.visitLaunchpad()
+    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 present', () => {
+    unstubVideoHtml()
+
+    cy.scaffoldProject('migration-v12-to-v13')
+    cy.openProject('migration-v12-to-v13')
+
+    cy.visitLaunchpad()
+    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', () => {
+    unstubVideoHtml()
+
+    cy.scaffoldProject('migration-v12-to-v13')
+    cy.openProject('migration-v12-to-v13')
+
+    cy.visitLaunchpad()
+    cy.contains(cy.i18n.majorVersionWelcome.title).should('be.visible')
+
+    cy.visitLaunchpad()
+    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
@@ -3,7 +3,14 @@ import type Sinon from 'sinon'
 describe('slow network: launchpad', () => {
   beforeEach(() => {
     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 currentStubbbedFetch = ctx.util.fetch;
 
       (ctx.util.fetch as Sinon.SinonStub).restore()
@@ -12,9 +19,12 @@ describe('slow network: launchpad', () => {
         const dfd = o.pDefer()
 
         o.testState.pendingFetches.push(dfd)
+
+        let resolveTime = 60000
+
         const result = await currentStubbbedFetch(input, init)
 
-        setTimeout(dfd.resolve, 60000)
+        setTimeout(dfd.resolve, resolveTime)
         await dfd.promise
 
         return result
@@ -30,6 +40,8 @@ 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()
     cy.visitLaunchpad()

diff --git a/packages/launchpad/src/Main.vue b/packages/launchpad/src/Main.vue
@@ -6,8 +6,19 @@
     <MajorVersionWelcome
       v-if="shouldShowWelcome"
       class="pt-[64px]"
+      :video-html="videoHtml"
       @clearLandingPage="handleClearLandingPage"
-    />
+    >
+      <template
+        v-if="videoHtml"
+        #video
+      >
+        <div
+          class="major-version-welcome-video"
+          v-html="videoHtml"
+        />
+      </template>
+    </MajorVersionWelcome>
     <div
       v-else
       class="px-[24px] pt-[86px] pb-[24px]"
@@ -134,6 +145,7 @@ fragment MainLaunchpadQueryData on Query {
       id
     }
   }
+  videoEmbedHtml
   isGlobalMode
   ...GlobalPage
   ...ScaffoldedFiles
@@ -213,4 +225,11 @@ const shouldShowWelcome = computed(() => {
   return false
 })
 
+const videoHtml = computed(() => query.data.value?.videoEmbedHtml || '')
+
 </script>
+<style scoped lang="scss">
+.major-version-welcome-video {
+  aspect-ratio: 15/9;
+}
+</style>
diff --git a/packages/launchpad/src/migration/MajorVersionWelcome.cy.tsx b/packages/launchpad/src/migration/MajorVersionWelcome.cy.tsx
@@ -8,21 +8,17 @@ describe('<MajorVersionWelcome />', { viewportWidth: 1280, viewportHeight: 1400
   it('renders expected interactive content', () => {
     const continueStub = cy.stub().as('clearLandingPage')
 
-    cy.mount(<MajorVersionWelcome onClearLandingPage={continueStub} />)
+    cy.mount(<MajorVersionWelcome onClearLandingPage={continueStub}/>)
 
     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#12-0-0"]', '12.0.0')
-      cy.contains('a[href="https://on.cypress.io/changelog#12-0-0"]', 'changelog')
-      cy.contains('a[href="https://on.cypress.io/migration-guide#Migrating-to-Cypress-12-0"]', 'Migration Guide')
-
-      cy.contains('a[href="https://on.cypress.io/origin"]', 'cy.origin()')
-      cy.contains('a[href="https://on.cypress.io/session"]', 'cy.session()')
-      cy.contains('a[href="https://on.cypress.io/retry-ability"]', 'Retry-ability Guide')
+      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.get('[data-cy="previous-release-highlights"]').within(() => {
+      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')
     })
@@ -37,15 +33,17 @@ describe('<MajorVersionWelcome />', { viewportWidth: 1280, viewportHeight: 1400
   })
 
   it('renders correct time for releases and overflows correctly', () => {
-    cy.clock(Date.UTC(2022, 10, 8))
+    cy.clock(Date.UTC(2023, 7, 30))
     cy.mount(<MajorVersionWelcome />)
-    cy.contains('11.0.0 Released just now')
-    cy.contains('10.0.0 Released 5 months ago')
+    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.tick(interval('1 minute'))
-    cy.contains('11.0.0 Released 1 minute ago')
+    cy.contains('13.0.0 Released 1 minute ago')
     cy.tick(interval('1 month'))
-    cy.contains('11.0.0 Released last month')
-    cy.contains('10.0.0 Released 6 months ago')
+    cy.contains('13.0.0 Released last month')
+    cy.contains('12.0.0 Released 10 months ago')
 
     cy.viewport(1280, 500)