Skip to content

Commit c1a7467

Browse files
AtofStrykerAtofStryker
authored
chore: update welcome screen for Cypress 14 (#30845)
1 parent 056696c commit c1a7467

File tree

10 files changed

+46
-257
lines changed

10 files changed

+46
-257
lines changed

‎packages/data-context/src/data/coreDataShape.ts

-2
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,6 @@ export interface WizardDataShape {
9494
export interface MigrationDataShape {
9595
// TODO: have the model of migration here
9696
step: MigrationStep
97-
videoEmbedHtml: string | null
9897
legacyConfigForMigration?: LegacyCypressConfigJson | null
9998
filteredSteps: MigrationStep[]
10099
flags: {
@@ -225,7 +224,6 @@ export function makeCoreData (modeOptions: Partial<AllModeOptions> = {}): CoreDa
225224
},
226225
migration: {
227226
step: 'renameAuto',
228-
videoEmbedHtml: null,
229227
legacyConfigForMigration: null,
230228
filteredSteps: [...MIGRATION_STEPS],
231229
flags: {

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

-31
Original file line numberDiff line numberDiff line change
@@ -96,37 +96,6 @@ export class MigrationDataSource {
9696
return this.ctx.lifecycleManager.metaState.needsCypressJsonMigration && Boolean(legacyConfigFileExists)
9797
}
9898

99-
async getVideoEmbedHtml () {
100-
if (this.ctx.coreData.migration.videoEmbedHtml) {
101-
return this.ctx.coreData.migration.videoEmbedHtml
102-
}
103-
104-
const versionData = await this.ctx.versions.versionData()
105-
const embedOnLink = `https://on.cypress.io/v13-video-embed/${versionData.current.version}`
106-
107-
debug(`Getting videoEmbedHtml at link: ${embedOnLink}`)
108-
109-
// Time out request if it takes longer than 3 seconds
110-
const controller = new AbortController()
111-
const timeoutId = setTimeout(() => controller.abort(), 3000)
112-
113-
try {
114-
const response = await this.ctx.util.fetch(embedOnLink, { method: 'GET', signal: controller.signal })
115-
const { videoHtml } = await response.json()
116-
117-
this.ctx.update((d) => {
118-
d.migration.videoEmbedHtml = videoHtml
119-
})
120-
121-
return videoHtml
122-
} catch {
123-
// fail silently, no user-facing error is needed
124-
return null
125-
} finally {
126-
clearTimeout(timeoutId)
127-
}
128-
}
129-
13099
async getComponentTestingMigrationStatus () {
131100
debug('getComponentTestingMigrationStatus: start')
132101
if (!this.legacyConfig || !this.ctx.currentProject) {

‎packages/frontend-shared/cypress/support/mock-graphql/stubgql-Query.ts

-10
Original file line numberDiff line numberDiff line change
@@ -43,14 +43,4 @@ export const stubQuery: MaybeResolver<Query> = {
4343
scaffoldedFiles () {
4444
return null
4545
},
46-
videoEmbedHtml () {
47-
return `<iframe
48-
src="https://player.vimeo.com/video/855168407?h=0cbc785eef"
49-
title="Video about what is new in Cypress"
50-
class="rounded h-full bg-gray-1000 w-full"
51-
frameborder="0"
52-
allow="autoplay; fullscreen; picture-in-picture"
53-
allowfullscreen
54-
/>`
55-
},
5646
}

‎packages/graphql/schemas/schema.graphql

-3
Original file line numberDiff line numberDiff line change
@@ -2074,9 +2074,6 @@ type Query {
20742074
"""Previous versions of cypress and their release date"""
20752075
versions: VersionData
20762076

2077-
"""Markup for the migration landing page video embed"""
2078-
videoEmbedHtml: String
2079-
20802077
"""A list of warnings"""
20812078
warnings: [ErrorWrapper!]!
20822079

‎packages/graphql/src/schemaTypes/objectTypes/gql-Query.ts

-11
Original file line numberDiff line numberDiff line change
@@ -146,17 +146,6 @@ export const Query = objectType({
146146
description: 'Unique node machine identifier for this instance - may be nil if unable to resolve',
147147
resolve: async (source, args, ctx) => await ctx.coreData.machineId,
148148
})
149-
150-
t.string('videoEmbedHtml', {
151-
description: 'Markup for the migration landing page video embed',
152-
resolve: (source, args, ctx) => {
153-
// NOTE: embedded video is not always a part of the v9 - v10 migration experience
154-
// in the case of v1x - v13, we want to show an embedded video to users installing the major
155-
// version for the first time without going through the steps of the migration resolver, hence
156-
// why this lives in the root resolver but the migration context
157-
return ctx.migration.getVideoEmbedHtml()
158-
},
159-
})
160149
},
161150
sourceType: {
162151
module: '@packages/graphql',

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

-122
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import type { ProjectFixtureDir } from '@tooling/system-tests'
2-
import type { SinonStub } from 'sinon'
32
import { getPathForPlatform } from './support/getPathForPlatform'
43

54
// @ts-ignore
@@ -1661,124 +1660,3 @@ describe('Migrate custom config files', () => {
16611660
cy.contains(err)
16621661
})
16631662
})
1664-
1665-
describe('v13 migration welcome page with video', () => {
1666-
it('Welcome page should appear if video is not present (failure)', () => {
1667-
cy.withCtx((ctx, o) => {
1668-
const originalGetVideoEmbedHtml = ctx.migration.getVideoEmbedHtml
1669-
1670-
o.sinon.stub(ctx.migration, 'getVideoEmbedHtml').callsFake(async () => {
1671-
const mockMigrationSourceGetVideoEmbedHtmlCTX = {
1672-
ctx: {
1673-
coreData: {
1674-
migration: {
1675-
videoEmbedHtml: undefined,
1676-
},
1677-
},
1678-
versions: {
1679-
versionData: () => {
1680-
return {
1681-
current: {
1682-
version: '13.0.0',
1683-
},
1684-
}
1685-
},
1686-
},
1687-
util: {
1688-
fetch: () => {
1689-
throw new Error('kaboom')
1690-
},
1691-
},
1692-
},
1693-
}
1694-
1695-
return originalGetVideoEmbedHtml.apply(mockMigrationSourceGetVideoEmbedHtmlCTX)
1696-
})
1697-
})
1698-
1699-
cy.scaffoldProject('migration-v12-to-v13')
1700-
cy.openProject('migration-v12-to-v13')
1701-
1702-
cy.visitLaunchpad({ showWelcome: true })
1703-
cy.contains(cy.i18n.majorVersionWelcome.title).should('be.visible')
1704-
cy.get('[data-cy="video-container"]').should('not.exist')
1705-
})
1706-
1707-
it('Welcome page should appear if video is not present (timeout)', () => {
1708-
cy.withCtx((ctx, o) => {
1709-
const originalGetVideoEmbedHtml = ctx.migration.getVideoEmbedHtml
1710-
1711-
o.sinon.stub(ctx.migration, 'getVideoEmbedHtml').callsFake(async () => {
1712-
const mockMigrationSourceGetVideoEmbedHtmlCTX = {
1713-
ctx: {
1714-
coreData: {
1715-
migration: {
1716-
videoEmbedHtml: undefined,
1717-
},
1718-
},
1719-
versions: {
1720-
versionData: () => {
1721-
return {
1722-
current: {
1723-
version: '13.0.0',
1724-
},
1725-
}
1726-
},
1727-
},
1728-
util: {
1729-
fetch: () => {
1730-
return new Promise((resolve, reject) => {
1731-
setTimeout(() => {
1732-
// the request should time out before this body is returned
1733-
resolve({
1734-
json () {
1735-
return {
1736-
videoHtml: '<span>Stubbed Video Content</span>',
1737-
}
1738-
},
1739-
})
1740-
}, 4000)
1741-
})
1742-
},
1743-
},
1744-
},
1745-
}
1746-
1747-
return originalGetVideoEmbedHtml.apply(mockMigrationSourceGetVideoEmbedHtmlCTX)
1748-
})
1749-
})
1750-
1751-
cy.scaffoldProject('migration-v12-to-v13')
1752-
cy.openProject('migration-v12-to-v13')
1753-
1754-
cy.visitLaunchpad({ showWelcome: true })
1755-
cy.contains(cy.i18n.majorVersionWelcome.title, {
1756-
timeout: 8000,
1757-
}).should('be.visible')
1758-
1759-
cy.get('[data-cy="video-container"]').should('not.exist')
1760-
})
1761-
1762-
it('Welcome page should appear if video is present', () => {
1763-
cy.scaffoldProject('migration-v12-to-v13')
1764-
cy.openProject('migration-v12-to-v13')
1765-
1766-
cy.visitLaunchpad({ showWelcome: true })
1767-
cy.contains(cy.i18n.majorVersionWelcome.title).should('be.visible')
1768-
cy.get('[data-cy="video-container"]').should('be.visible')
1769-
})
1770-
1771-
it('should only hit the video on link once & cache it', () => {
1772-
cy.scaffoldProject('migration-v12-to-v13')
1773-
cy.openProject('migration-v12-to-v13')
1774-
1775-
cy.visitLaunchpad({ showWelcome: true })
1776-
cy.contains(cy.i18n.majorVersionWelcome.title).should('be.visible')
1777-
1778-
cy.visitLaunchpad({ showWelcome: true })
1779-
cy.contains(cy.i18n.majorVersionWelcome.title).should('be.visible')
1780-
cy.withCtx((ctx, o) => {
1781-
expect((ctx.util.fetch as SinonStub).args.filter((a) => String(a[0]).includes('v13-video-embed')).length).to.eq(1)
1782-
})
1783-
})
1784-
})

‎packages/launchpad/cypress/e2e/slow-network.cy.ts

-7
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,6 @@ describe('slow network: launchpad', () => {
55
cy.scaffoldProject('todos')
66

77
cy.withCtx((ctx, o) => {
8-
o.sinon.stub(ctx.migration, 'getVideoEmbedHtml').callsFake(async () => {
9-
// stubbing the AbortController is a bit difficult with fetch ctx, so instead
10-
// assume the migration handler itself returned null from a timeout
11-
return null
12-
})
13-
148
const currentStubbedFetch = ctx.util.fetch;
159

1610
(ctx.util.fetch as Sinon.SinonStub).restore()
@@ -40,7 +34,6 @@ describe('slow network: launchpad', () => {
4034
})
4135
})
4236

43-
// NOTE: testing the videoEmbedHTML query abortController with the current setup is a bit difficult.
4437
// The timeout happens as needed, but is not functioning correctly in this E2E test
4538
it('loads through to the browser screen when the network is slow', () => {
4639
cy.loginUser()

‎packages/launchpad/src/Main.vue

+1-15
Original file line numberDiff line numberDiff line change
@@ -7,19 +7,8 @@
77
v-if="shouldShowWelcome"
88
class="pt-[64px]"
99
role="main"
10-
:video-html="videoHtml"
1110
@clearLandingPage="handleClearLandingPage"
12-
>
13-
<template
14-
v-if="videoHtml"
15-
#video
16-
>
17-
<div
18-
class="major-version-welcome-video"
19-
v-html="videoHtml"
20-
/>
21-
</template>
22-
</MajorVersionWelcome>
11+
/>
2312
<main
2413
v-else
2514
class="px-[24px] pt-[86px] pb-[24px]"
@@ -148,7 +137,6 @@ fragment MainLaunchpadQueryData on Query {
148137
id
149138
}
150139
}
151-
videoEmbedHtml
152140
isGlobalMode
153141
...GlobalPage
154142
...ScaffoldedFiles
@@ -278,8 +266,6 @@ const shouldShowWelcome = computed(() => {
278266
return false
279267
})
280268
281-
const videoHtml = computed(() => query.data.value?.videoEmbedHtml || '')
282-
283269
</script>
284270
<style scoped lang="scss">
285271
.major-version-welcome-video {

‎packages/launchpad/src/migration/MajorVersionWelcome.cy.tsx

+12-10
Original file line numberDiff line numberDiff line change
@@ -14,11 +14,12 @@ describe('<MajorVersionWelcome />', { viewportWidth: 1280, viewportHeight: 1400
1414
cy.contains('h1', 'What\'s New in Cypress').should('be.visible')
1515

1616
cy.get('[data-cy="release-highlights"]').within(() => {
17-
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')
18-
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')
17+
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')
18+
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')
1919
})
2020

2121
cy.get('[data-cy="previous-release-highlights"]').within(() => {
22+
cy.contains('a[href="https://on.cypress.io/changelog#13-0-0"]', '13.0.0')
2223
cy.contains('a[href="https://on.cypress.io/changelog#12-0-0"]', '12.0.0')
2324
cy.contains('a[href="https://on.cypress.io/changelog#11-0-0"]', '11.0.0')
2425
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
3435
})
3536

3637
it('renders correct time for releases and overflows correctly', () => {
37-
cy.clock(Date.UTC(2023, 7, 29))
38+
cy.clock(Date.UTC(2025, 0, 10))
3839
cy.mount(<MajorVersionWelcome />)
39-
cy.contains('13.0.0 Released just now')
40-
cy.contains('12.0.0 Released 9 months ago')
41-
cy.contains('11.0.0 Released 10 months ago')
42-
cy.contains('10.0.0 Released last year')
40+
cy.contains('14.0.0 Released just now')
41+
cy.contains('13.0.0 Released last year')
42+
cy.contains('12.0.0 Released 2 years ago')
43+
cy.contains('11.0.0 Released 2 years ago')
44+
cy.contains('10.0.0 Released 3 years ago')
4345
cy.tick(interval('1 minute'))
44-
cy.contains('13.0.0 Released 1 minute ago')
46+
cy.contains('14.0.0 Released 1 minute ago')
4547
cy.tick(interval('1 month'))
46-
cy.contains('13.0.0 Released last month')
47-
cy.contains('12.0.0 Released 10 months ago')
48+
cy.contains('14.0.0 Released last month')
49+
cy.contains('13.0.0 Released last year')
4850

4951
cy.viewport(1280, 500)
5052

0 commit comments

Comments
 (0)