/
MajorVersionWelcome.vue
242 lines (209 loc) · 9.08 KB
/
MajorVersionWelcome.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
<!--
MajorVersionWelcome.vue
This is the landing page that all users will see when they upgrade
to a new major version.
See the README of this package for details about this component.
Internal Cypress employees: the process around managing this content
is documented in `prod-eng-docs`. Refer to those docs when modifying
this component or reviewing changes. Changes should go through
a specific approval process.
-->
<template>
<div class="bg-no-repeat bg-cover h-screen min-h-700px lp-wrapper">
<div
ref="wrapper"
class="rounded mx-auto bg-gray-50/50 border-color-[rgba(0,0,0,0.05)] border-4px max-w-80vw top-7vh w-716px relative overflow-hidden"
>
<div
ref="scroller"
class="bg-white rounded-b max-h-72vh pb-90px overflow-scroll"
>
<div class="h-full">
<div
class="p-16px"
data-cy="release-highlights"
>
<h1 class="font-medium mt-4px text-center mb-32px tracking-tighter text-22px text-gray-1000">
{{ t('majorVersionWelcome.title') }}
</h1>
<div class="mb-16px">
<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>
<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">
<!--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">
<!--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>
<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.
</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.
</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
</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.
</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.
</p>
</div>
</div>
<hr class="border-gray-100">
<div
class="px-16px pt-12px"
data-cy="previous-release-highlights"
>
<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#11-0-0"
class="font-bold text-indigo-500"
>
11.0.0
</ExternalLink>
<span class="font-light pl-10px text-gray-500 text-14px">
Released {{ versionReleaseDates['11'] }}
</span>
</div>
<p class="text-14px leading-20px">
We made Component Testing generally available for projects using React, Next.js, Angular, and Vue which allows you to test your application's components without running your whole app! We also massively improved our startup performance with up to 84% faster startup times!
<br>
<br>
Read about the v11.0.0 changes in our
<ExternalLink href="https://on.cypress.io/cypress-11-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#10-0-0"
class="font-bold text-indigo-500"
>
10.0.0
</ExternalLink>
<span class="font-light pl-10px text-gray-500 text-14px">
Released {{ versionReleaseDates['10'] }}
</span>
</div>
<p class="text-14px leading-20px">
We've reworked the Cypress app from the ground up to modernize the interface, streamline workflows and integrate better into your overall development experience.
<br>
<br>
Read about breaking changes in our
<ExternalLink href="https://on.cypress.io/cypress-10-release">
<!--eslint-disable-next-line vue/multiline-html-element-content-newline-->
blog post</ExternalLink>.
</p>
</div>
</div>
</div>
<div
class="bg-white flex border-t-1 border-gray-100 w-full p-16px right-0 bottom-0 left-0 justify-between items-center absolute"
:class="{'bottom-bar-box-shadow': shouldShowShadow}"
data-cy="major-version-welcome-footer"
>
<Button
class="group"
size="lg"
@click="handleClick"
>
{{ t('majorVersionWelcome.actionContinue') }}
<template #suffix>
<i-cy-chevron-right_x16 class="icon-dark-white" />
</template>
</Button>
<ExternalLink
href="https://on.cypress.io/changelog"
>
{{ t('majorVersionWelcome.linkReleaseNotes') }}
</ExternalLink>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import Button from '@cy/components/Button.vue'
import { useI18n } from '@cy/i18n'
import ExternalLink from '@packages/frontend-shared/src/gql-components/ExternalLink.vue'
import { useScroll, useElementSize, useTimeAgo } from '@vueuse/core'
import { computed, ref } from 'vue'
const { t } = useI18n()
const scroller = ref<HTMLElement | null>(null)
const wrapper = ref<HTMLElement | null>(null)
const { arrivedState, y: scrollerY } = useScroll(scroller)
const { height: wrapperHeight } = useElementSize(wrapper)
const emit = defineEmits<{
(eventName: 'clearLandingPage', value: void): void
}>()
const handleClick = () => {
emit('clearLandingPage')
}
const versionReleaseDates = computed(() => {
return {
'10': useTimeAgo(Date.UTC(2022, 5, 1)).value,
'11': useTimeAgo(Date.UTC(2022, 10, 8)).value,
'12': useTimeAgo(Date.UTC(2022, 12, 6)).value,
}
})
const shouldShowShadow = computed(() => {
if (!scroller.value) {
return false
}
const isScrolledToBottom = arrivedState.bottom
const isTallEnoughToScroll = wrapperHeight.value < scroller.value.scrollHeight
const showBecauseNotScrolledToBottom = isTallEnoughToScroll && !isScrolledToBottom
const showBecauseHaveNotScrolledYet = isTallEnoughToScroll && scrollerY.value === 0
return showBecauseNotScrolledToBottom || showBecauseHaveNotScrolledYet
})
</script>
<style scoped lang="scss">
.lp-wrapper {
background-image: url("../images/Background.svg");
}
.bottom-bar-box-shadow {
box-shadow: 0 -7px 11px -10px rgb(0 0 0 / 26%)
}
</style>