mirror/cypress
1
0
Fork 0
mirror of https://github.com/cypress-io/cypress.git synced 2026-03-11 20:09:47 -05:00
Code Issues Packages Projects Releases Wiki Activity

chore: add v13 welcome page content (#27549)

Browse Source 
* 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>
This commit is contained in:
Bill Glesias
2023-08-24 19:36:24 -04:00
committed by GitHub
parent 2c8337a913
commit 150b04cbe5
13 changed files with 244 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/data-context/src/data/coreDataShape.ts
View File

@@ -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: {

31
packages/data-context/src/sources/MigrationDataSource.ts
View File

@@ -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) {

9
packages/frontend-shared/cypress/support/mock-graphql/stubgql-Query.ts
View File

@@ -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
/>`
},
}

3
packages/graphql/schemas/schema.graphql
View File

@@ -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!]!

11
packages/graphql/src/schemaTypes/objectTypes/gql-Query.ts
View File

@@ -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',

66
packages/launchpad/cypress/e2e/migration.cy.ts
View File

@@ -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)
})
})
})

14
packages/launchpad/cypress/e2e/slow-network.cy.ts
View File

@@ -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()

21
packages/launchpad/src/Main.vue
View File

@@ -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>

26
packages/launchpad/src/migration/MajorVersionWelcome.cy.tsx
View File

@@ -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)

106
packages/launchpad/src/migration/MajorVersionWelcome.vue
View File

@@ -27,81 +27,69 @@
class="p-[16px]"
data-cy="release-highlights"
>
<h1 class="font-medium text-center mb-[28px] tracking-tighter text-[22px] leading-snug text-gray-1000">
<h1 class="font-medium text-center mb-[8px] tracking-tighter text-[22px] leading-snug text-gray-1000">
{{ t('majorVersionWelcome.title') }}
</h1>
<div
v-if="slots['video']"
class="border-transparent rounded mb-6 bg-gray-50/50 border-4px text-center max-w-80vw w-688px overflow-hidden"
>
<div
class="bg-white rounded-t border-4px-gray-500 w-full p-24px"
data-cy="video-container"
>
<slot name="video" />
</div>
</div>
<div class="mb-[16px]">
<ExternalLink
href="https://on.cypress.io/changelog#12-0-0"
href="https://on.cypress.io/changelog?utm_source=Binary%3A+App&utm_medium=splash-page&utm_campaign=v13#13-0-0"
class="font-bold text-indigo-500"
>
12.0.0
13.0.0
</ExternalLink>
<span class="font-light pl-[10px] text-gray-500 text-[14px]">
Released {{ versionReleaseDates['12'] }}
Released {{ versionReleaseDates['13'] }}
</span>
</div>
<div class="children:mb-[16px]">
<p>
For a complete list of updates and breaking changes in v12.0.0, please review our
<ExternalLink href="https://on.cypress.io/changelog#12-0-0">
For a complete list of updates please review our
<ExternalLink href="https://on.cypress.io/changelog?utm_source=Binary%3A+App&utm_medium=splash-page&utm_campaign=v13#13-0-0">
<!--eslint-disable-next-line vue/multiline-html-element-content-newline-->
changelog</ExternalLink>.
</p>
<h2 class="font-bold text-[18px] text-jade-1000">
Testing Multi-Origin Workflows
</h2>
<p>
Cypress now has full support for testing multiple origins in a single test with the <ExternalLink href="https://on.cypress.io/origin">
<code>cy.origin()</code>
</ExternalLink> command! To take a deep-dive into how this works, read our
<ExternalLink href="https://on.cypress.io/cy-origin-journey">
changelog</ExternalLink>. To take a deep-dive into this release, read our <ExternalLink href="https://on.cypress.io/cypress-13-release?utm_source=Binary%3A+App&utm_medium=splash-page&utm_campaign=v13#13-0-0">
<!--eslint-disable-next-line vue/multiline-html-element-content-newline-->
blog post</ExternalLink>.
</p>
<h2 class="font-bold mt-[24px] mb-[16px] text-[18px] text-jade-1000">
Test Isolation
<h2 class="font-bold text-[18px] text-jade-1000">
Test Replay
</h2>
<p>
Cypress now ensures each test runs in a clean browser context by default. We now clear the page, <code>cookies</code>, <code>localStorage</code>, and <code>sessionStorage</code> before each test to guide developers towards writing independent tests from the start.
Test Replay brings the debugging experience you know and love from the Cypress app directly into your recorded tests in Cypress Cloud. Previously, trying to debug failures and flake in CI was painful and time consuming with only videos & screenshots. Test Replay provides a way to inspect the DOM, network events, and console logs of your application from your tests exactly as they ran in CI.
</p>
<p>
If your existing tests relied on a previous test to run successfully, you might need to make some modifications to your test suite. See the
<ExternalLink href="https://on.cypress.io/migration-guide#Migrating-to-Cypress-12-0">
Migration Guide
</ExternalLink>
for more details on what you can expect.
Test Replay is available in all Cypress Cloud plans. To start using Test Replay, simply record a run to Cypress Cloud. Learn more in our <ExternalLink href="https://on.cypress.io/test-replay?utm_source=Binary%3A+App&utm_medium=splash-page&utm_campaign=v13#13-0-0">
<!--eslint-disable-next-line vue/multiline-html-element-content-newline-->
documentation</ExternalLink>.
</p>
<h2 class="font-bold mt-[24px] mb-[16px] text-[18px] text-jade-1000">
We Now Store The Browser Context, So You Don’t Have To
Changes to video defaults
</h2>
<p>
The <ExternalLink href="https://on.cypress.io/session">
<code>cy.session()</code>
</ExternalLink> command complements test isolation by providing a way to save and share browser contexts between tests and specs in a single run on the same machine.
<InlineCodeFragment>video</InlineCodeFragment> and <InlineCodeFragment>videoCompression</InlineCodeFragment> are now set to <InlineCodeFragment>false</InlineCodeFragment> by default. Recording and compressing videos can be resource intensive, often impacting the duration of tests running in CI. Test Replay now serves as the primary replacement for debugging via video. We’ve changed these video options to be opt-in so you can configure recording video based on your needs.
</p>
<h2 class="font-bold mt-[24px] mb-[16px] text-[18px] text-jade-1000">
Detaching Ourselves From Detached Dom Errors
</h2>
<p>
We have made enhancements to how Cypress manages DOM element resolution to reduce the likelihood of hitting the dreaded detached DOM errors due to maintaining stale DOM references. We've updated our
<ExternalLink href="https://on.cypress.io/retry-ability">
Retry-ability Guide
</ExternalLink>
with all the details if you'd like to learn more.
The <InlineCodeFragment>shouldUploadVideoOnPass</InlineCodeFragment> option is no longer available. This option was mostly used to skip video compression for unused videos which is now skipped by default. If you want to control which videos are saved locally or uploaded to Cypress Cloud, see our <ExternalLink href="https://on.cypress.io/migration-guide?utm_source=Binary%3A+App&utm_medium=splash-page&utm_campaign=v13#13-0-0">
documentation
</ExternalLink> for our recommended workaround.
</p>
</div>
</div>
@@ -113,6 +101,31 @@
<h2 class="font-bold mt-[24px] mb-[12px] text-[14px] text-gray-600">
Previous release highlights
</h2>
<div class="pb-[8px]">
<ExternalLink
href="https://on.cypress.io/changelog#12-0-0"
class="font-bold text-indigo-500"
>
12.0.0
</ExternalLink>
<span class="font-light pl-[10px] text-gray-500 text-[14px]">
Released {{ versionReleaseDates['12'] }}
</span>
</div>
<p class="text-[14px] leading-[20px]">
We made <ExternalLink href="https://on.cypress.io/origin">
<InlineCodeFragment>cy.origin()</InlineCodeFragment>
</ExternalLink>, <ExternalLink href="https://on.cypress.io/session">
<InlineCodeFragment>cy.session()</InlineCodeFragment>
</ExternalLink>, and test isolation generally available to allow users to test multiple origin workflows while allowing users to rehydrate test state in a consistent manner.
<br>
<br>
Read about the v12.0.0 changes in our
<ExternalLink href="https://on.cypress.io/cypress-12-release">
<!--eslint-disable-next-line vue/multiline-html-element-content-newline-->
blog post</ExternalLink>.
</p>
<br>
<div class="pb-[8px]">
<ExternalLink
href="https://on.cypress.io/changelog#11-0-0"
@@ -188,8 +201,9 @@
import Button from '@cy/components/Button.vue'
import { useI18n } from '@cy/i18n'
import ExternalLink from '@packages/frontend-shared/src/gql-components/ExternalLink.vue'
import InlineCodeFragment from '@cy/components/InlineCodeFragment.vue'
import { useScroll, useElementSize, useTimeAgo } from '@vueuse/core'
import { computed, ref } from 'vue'
import { computed, ref, useSlots } from 'vue'
const { t } = useI18n()
@@ -197,6 +211,7 @@ const scroller = ref<HTMLElement | null>(null)
const wrapper = ref<HTMLElement | null>(null)
const { arrivedState, y: scrollerY } = useScroll(scroller)
const { height: wrapperHeight } = useElementSize(wrapper)
const slots = useSlots()
const emit = defineEmits<{
(eventName: 'clearLandingPage', value: void): void
@@ -212,6 +227,7 @@ const versionReleaseDates = computed(() => {
'10': useTimeAgo(Date.UTC(2022, 5, 1)).value,
'11': useTimeAgo(Date.UTC(2022, 10, 8)).value,
'12': useTimeAgo(Date.UTC(2022, 11, 6)).value,
'13': useTimeAgo(Date.UTC(2023, 7, 30)).value,
}
})

2
packages/types/src/constants.ts
View File

@@ -25,7 +25,7 @@ export const PACKAGE_MANAGERS = ['npm', 'yarn', 'pnpm'] as const
// Note: ONLY change this in code that will be merged into a release branch
// for a new major version of Cypress
export const MAJOR_VERSION_FOR_CONTENT = '12'
export const MAJOR_VERSION_FOR_CONTENT = '13'
export const RUN_ALL_SPECS_KEY = '__all' as const

10
system-tests/projects/migration-v12-to-v13/cypress.config.js Normal file
View File

@@ -0,0 +1,10 @@
const { defineConfig } = require('cypress')
module.exports = defineConfig({
e2e: {
setupNodeEvents (on, config) {
// implement node event listeners here
},
},
supportFile: false,
})

5
system-tests/projects/migration-v12-to-v13/cypress/e2e/spec.cy.js Normal file
View File

@@ -0,0 +1,5 @@
describe('migration v12 to v13', () => {
it('passes', () => {
expect(true).to.be.true
})
})