Skip to content

Commit d6c96f6

Browse files
mschilemschile
authored
10.5.0 release (cypress-io#4669)
1 parent fd8b181 commit d6c96f6

25 files changed

+1340
-67
lines changed

‎assets/img/guides/component-testing/first-test-run-angular.png

62 KB
Loading

‎assets/img/guides/component-testing/project-setup-angular.png

49 KB
Loading

‎assets/img/guides/component-testing/scaffolded-files-angular.png

107 KB
Loading

‎components/global/CodeGroupReactVue2Vue3Angular.vue

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<template>
2+
<CodeGroup sync-group="react-vue2-vue3-angular">
3+
<CodeBlock label="React" active>
4+
<template #alert><slot name="react-alert"></slot></template>
5+
<slot name="react"></slot>
6+
</CodeBlock>
7+
<CodeBlock label="Vue 3">
8+
<template #alert><slot name="vue3-alert"></slot></template>
9+
<slot name="vue3"></slot>
10+
</CodeBlock>
11+
<CodeBlock label="Vue 2">
12+
<template #alert><slot name="vue2-alert"></slot></template>
13+
<slot name="vue2"></slot>
14+
</CodeBlock>
15+
<CodeBlock label="Angular" active>
16+
<template #alert><slot name="angular-alert"></slot></template>
17+
<slot name="angular"></slot>
18+
</CodeBlock>
19+
</CodeGroup>
20+
</template>

‎components/global/CodeGroupReactVueAngular.vue

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<template>
2+
<CodeGroup sync-group="react-vue-angular">
3+
<CodeBlock label="React" active>
4+
<template #alert><slot name="react-alert"></slot></template>
5+
<slot name="react"></slot>
6+
</CodeBlock>
7+
<CodeBlock label="Vue">
8+
<template #alert><slot name="vue-alert"></slot></template>
9+
<slot name="vue"></slot>
10+
</CodeBlock>
11+
<CodeBlock label="Angular" active>
12+
<template #alert><slot name="angular-alert"></slot></template>
13+
<slot name="angular"></slot>
14+
</CodeBlock>
15+
</CodeGroup>
16+
</template>

‎content/_changelogs/10.5.0.md

+86
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
## 10.5.0
2+
3+
_Released 8/15/2022_
4+
5+
**Features:**
6+
7+
- Display a 'flaky test' indicator in the Specs Explorer for specs that are
8+
known to be flaky in the Dashboard. Addresses
9+
[#22656](https://github.com/cypress-io/cypress/issues/22656) &
10+
[#22657](https://github.com/cypress-io/cypress/issues/22657).
11+
- The project drop down is now populated when connecting a project with an
12+
organization that only has one project. Addresses
13+
[#22936](https://github.com/cypress-io/cypress/issues/22936).
14+
- Added new `testIsolation` configuration option to allow users to revert to
15+
`legacy` mode when `experimentalSessionAndOrigin` is set to true. Read more
16+
about [test isolation](/guides/core-concepts/test-isolation) in Cypress to
17+
learn more. Addresses
18+
[#22279](https://github.com/cypress-io/cypress/issues/22279).
19+
- React 18 projects will now be scaffolded with the `cypress/react18` mount
20+
registration during component setup. Addresses
21+
[#23033](https://github.com/cypress-io/cypress/issues/23033).
22+
- A list of Vue components in the project are now available for selection when
23+
generating a new spec for component testing in projects that are using the
24+
default spec pattern. Addresses
25+
[#22836](https://github.com/cypress-io/cypress/issues/22836).
26+
- If the user logs in to the Dashboard from the app, but the current project
27+
does not have a project ID, the user will now be able to enter the connect
28+
project workflow directly. Addresses
29+
[#23022](https://github.com/cypress-io/cypress/issues/23022)
30+
- Adds Angular component testing support, including Angular template support and
31+
support for Angular standalone components. Addresses
32+
[#22819](https://github.com/cypress-io/cypress/issues/22819).
33+
34+
**Bugfixes:**
35+
36+
- Fixes an issue where usage of the `--spec` option would result in no specs
37+
found if the absolute project path included glob pattern characters. Fixes
38+
[#22272](https://github.com/cypress-io/cypress/issues/22272).
39+
- Webpack entry points are no longer preserved for CT Webpack projects. Fixes
40+
[#23224](https://github.com/cypress-io/cypress/issues/23224)
41+
- Fixes an issue where session state was not being reset when changing between
42+
specs in open mode. Fixes
43+
[#23146](https://github.com/cypress-io/cypress/pull/23146)
44+
- Add delay to header tooltips so they don't pop open unless hovered on. Fixes
45+
[#23115](https://github.com/cypress-io/cypress/issues/23115)
46+
- Fixed an edge-case bug where Cypress would hang in run-mode if an error was
47+
thrown from a `test:before:run` event handler. Fixes
48+
[#23039](https://github.com/cypress-io/cypress/issues/23039).
49+
- Fixes an issue introduced in `10.3.0` where network logs could be missing
50+
certain information or cause certain requests to be delayed by 500ms. Fixes
51+
[#23227](https://github.com/cypress-io/cypress/pull/23227).
52+
- In the 'Create Blank Spec' dialog, pressing enter or return when the focus is
53+
on the spec path input field will create the blank spec. Fixes
54+
[#21815](https://github.com/cypress-io/cypress/issues/21815).
55+
- Fixes React 18 unmount component handling to resolve the
56+
`lastMountedReactDom.unmountComponentAtNode is not a function` error. Fixes
57+
[#23081](https://github.com/cypress-io/cypress/issues/23081).
58+
- Fixes a regression introduced in Cypress 10.0 where Cypress no longer
59+
persisted the spec filter in the 'Search Specs' field during a session and
60+
when a project is reopened. The same filter will be used in the main specs
61+
list as well as the inline specs list present in the Test Runner. Fixes
62+
[#21837](https://github.com/cypress-io/cypress/issues/21837).
63+
- Fixed an issue that could lead to infinite recursion and thus a crash when
64+
running tests that make use of `cy.intercept()`. Fixes
65+
[#22693](https://github.com/cypress-io/cypress/issues/22693).
66+
- In the Launchpad, the project's name will no longer link to the 'Choose
67+
Testing Type' step of the launchpad. Fixes
68+
[#21911](https://github.com/cypress-io/cypress/issues/21911).
69+
- CT projects using Vite `v3` work with Node versions `>=17`. Fixes
70+
[#23042](https://github.com/cypress-io/cypress/issues/23042) &
71+
[#23114](https://github.com/cypress-io/cypress/issues/23114).
72+
73+
**Miscellaneous:**
74+
75+
- Updated UI styling for Cypress `about:blank` pages. Addresses
76+
[#20978](https://github.com/cypress-io/cypress/issues/20978).
77+
- Stable Firefox versions 101 and 102 are now explicitly rendered as unsupported
78+
in Windows due to an unpatched browser incompatibility in those versions.
79+
Addresses [#23164](https://github.com/cypress-io/cypress/issues/23164).
80+
- Add a warning for users on the old React API, `cypress/react`, who are using
81+
React 18. Users can now take advantage of the React 18 integration,
82+
`cypress/react18`. Addresses
83+
[#23032](https://github.com/cypress-io/cypress/issues/23032).
84+
- `cy.state('subject')` is deprecated and reading from it will log a warning to
85+
the console. Prefer `cy.currentSubject()` instead. Addresses
86+
[#23092](https://github.com/cypress-io/cypress/issues/23092).

‎content/_data/sidebar.json

+27
Original file line numberDiff line numberDiff line change
@@ -144,6 +144,33 @@
144144
"title": "Custom Mount Commands for React",
145145
"slug": "custom-mount-react"
146146
},
147+
{
148+
"title": "Angular Component Testing"
149+
},
150+
{
151+
"title": "Quickstart: Angular",
152+
"slug": "quickstart-angular"
153+
},
154+
{
155+
"title": "Mounting Components",
156+
"slug": "mounting-angular"
157+
},
158+
{
159+
"title": "Testing Angular Components",
160+
"slug": "testing-angular"
161+
},
162+
{
163+
"title": "Testing Angular Components with Emitted Events",
164+
"slug": "events-angular"
165+
},
166+
{
167+
"title": "Testing Angular Components with Slots",
168+
"slug": "slots-angular"
169+
},
170+
{
171+
"title": "Custom Mount Commands for Angular",
172+
"slug": "custom-mount-angular"
173+
},
147174
{
148175
"title": "Diving Deeper"
149176
},

‎content/api/commands/mount.md

+37-23
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ the commands file using
3434
[`Cypress.Commands.add()`](/api/cypress-api/custom-commands). Below are examples
3535
to start with for your commands:
3636

37-
<code-group-react-vue2-vue3>
37+
<code-group-react-vue2-vue3-angular>
3838
<template #react>
3939

4040
```js
@@ -102,7 +102,18 @@ Cypress.Commands.add('mount', (component, options = {}) => {
102102
```
103103

104104
</template>
105-
</code-group-react-vue2-vue3>
105+
<template #angular>
106+
107+
```js
108+
import { mount } from 'cypress/angular'
109+
110+
Cypress.Commands.add('mount', (component, config) => {
111+
return mount(component, config)
112+
})
113+
```
114+
115+
</template>
116+
</code-group-react-vue2-vue3-angular>
106117

107118
## Adding TypeScript Typings for `cy.mount()` Commands
108119

@@ -115,24 +126,16 @@ The typings need to be in a location that any code can access, therefore, we
115126
recommend creating a `cypress.d.ts` file in the root directory, and use this
116127
example as a starting point for customizing your own command:
117128

118-
<code-group-react-vue>
129+
<code-group-react-vue-angular>
119130
<template #react>
120131

121132
```ts
122-
import { MountOptions, MountReturn } from 'cypress/react'
133+
import { mount } from 'cypress/react'
123134

124135
declare global {
125136
namespace Cypress {
126137
interface Chainable {
127-
/**
128-
* Mounts a React node
129-
* @param component React Node to mount
130-
* @param options Additional options to pass into mount
131-
*/
132-
mount(
133-
component: React.ReactNode,
134-
options?: MountOptions
135-
): Cypress.Chainable<MountReturn>
138+
mount: typeof mount
136139
}
137140
}
138141
}
@@ -150,19 +153,29 @@ type OptionsParam = MountParams[1]
150153
declare global {
151154
namespace Cypress {
152155
interface Chainable {
153-
/**
154-
* Helper mount function for Vue Components
155-
* @param component Vue Component or JSX Element to mount
156-
* @param options Options passed to Vue Test Utils
157-
*/
158-
mount(component: any, options?: OptionsParam): Chainable<any>
156+
mount: typeof mount
157+
}
158+
}
159+
}
160+
```
161+
162+
</template>
163+
<template #angular>
164+
165+
```ts
166+
import { mount } from 'cypress/angular'
167+
168+
declare global {
169+
namespace Cypress {
170+
interface Chainable {
171+
mount: typeof mount
159172
}
160173
}
161174
}
162175
```
163176

164177
</template>
165-
</code-group-react-vue>
178+
</code-group-react-vue-angular>
166179

167180
If your tests have trouble finding the types for the custom commands, manually
168181
include the `cypress.d.ts` file in all your `tsconfig.json` files like so:
@@ -174,6 +187,7 @@ include the `cypress.d.ts` file in all your `tsconfig.json` files like so:
174187
## Additional Mount Command Examples
175188

176189
Visit the guides for scenarios in
177-
[React](/guides/component-testing/custom-mount-react) and
178-
[Vue](/guides/component-testing/custom-mount-vue) for customizing a mount
179-
command.
190+
[React](/guides/component-testing/custom-mount-react),
191+
[Vue](/guides/component-testing/custom-mount-vue), and
192+
[Angular](/guides/component-testing/custom-mount-angular) for customizing a
193+
mount command.

‎content/guides/component-testing/component-framework-configuration.md

+61-21
Original file line numberDiff line numberDiff line change
@@ -11,27 +11,17 @@ setup configuration.
1111
Cypress currently supports the following frameworks and versions for component
1212
testing:
1313

14-
| Framework | UI Library | Bundler |
15-
| -------------------------------------------------------- | ---------- | ---------- |
16-
| [Create React App 4+](#Create-React-App-CRA) | React 16+ | Webpack 4+ |
17-
| [Next.js 11+](#Next-js) <Badge type="info">Alpha</Badge> | React 16+ | Webpack 5 |
18-
| [React with Vite](#React-with-Vite) | React 16+ | Vite 2 |
19-
| [React with Webpack](#React-with-Webpack) | React 16+ | Webpack 4+ |
20-
| [Vue CLI](#Vue-CLI) | Vue 2+ | Webpack 4+ |
21-
| [Nuxt 2](#Nuxt) <Badge type="info">Alpha</Badge> | Vue 2+ | Webpack 4+ |
22-
| [Vue with Vite](#Vue-with-Vite) | Vue 2+ | Vite 2 |
23-
| [Vue with Webpack](#Vue-with-Webpack) | Vue 2+ | Webpack 4+ |
24-
25-
<Alert type="info">
26-
27-
Currently Cypress does not officially support Component Testing with Angular,
28-
but this is planned for a future release. Until then, users may roll their own
29-
solution with a
30-
[custom `cy.mount()` command](/api/commands/mount#Creating-a-New-cy-mount-Command),
31-
or take as a starting point
32-
[this unofficial solution from one of our own developers](https://github.com/jordanpowell88/angular-ct).
33-
34-
</Alert>
14+
| Framework | UI Library | Bundler |
15+
| -------------------------------------------------------- | ----------- | ---------- |
16+
| [Create React App 4+](#Create-React-App-CRA) | React 16+ | Webpack 4+ |
17+
| [Next.js 11+](#Next-js) <Badge type="info">Alpha</Badge> | React 16+ | Webpack 5 |
18+
| [React with Vite](#React-with-Vite) | React 16+ | Vite 2 |
19+
| [React with Webpack](#React-with-Webpack) | React 16+ | Webpack 4+ |
20+
| [Vue CLI](#Vue-CLI) | Vue 2+ | Webpack 4+ |
21+
| [Nuxt 2](#Nuxt) <Badge type="info">Alpha</Badge> | Vue 2+ | Webpack 4+ |
22+
| [Vue with Vite](#Vue-with-Vite) | Vue 2+ | Vite 2 |
23+
| [Vue with Webpack](#Vue-with-Webpack) | Vue 2+ | Webpack 4+ |
24+
| [Angular](#Angular) <Badge type="info">Alpha</Badge> | Angular 13+ | Webpack 5 |
3525

3626
## Automatic Configuration (Recommended)
3727

@@ -518,6 +508,56 @@ in manually via the `webpackConfig` option.
518508

519509
- [Vue 3 Webpack 5 with TypeScript](https://github.com/cypress-io/cypress-component-testing-apps/tree/main/vue3-webpack-ts)
520510

511+
## Angular
512+
513+
For Angular apps, we have built-in support for `@angular/cli` projects.
514+
515+
### Angular CLI
516+
517+
To configure component testing for an Angular application that uses the
518+
[Angular CLI](https://angular.io/cli), you will need to configure a `devServer`
519+
with a `framework` of "angular", a `bundler` of "webpack" and a `specPattern`
520+
like so:
521+
522+
<cypress-config-file>
523+
<template #js>
524+
525+
```js
526+
module.exports = {
527+
component: {
528+
devServer: {
529+
framework: 'angular',
530+
bundler: 'webpack',
531+
},
532+
specPattern: '**/*.cy.ts',
533+
},
534+
}
535+
```
536+
537+
</template>
538+
<template #ts>
539+
540+
```ts
541+
import { defineConfig } from 'cypress'
542+
543+
export default defineConfig({
544+
component: {
545+
devServer: {
546+
framework: 'angular',
547+
bundler: 'webpack',
548+
},
549+
specPattern: '**/*.cy.ts',
550+
},
551+
})
552+
```
553+
554+
</template>
555+
</cypress-config-file>
556+
557+
#### Sample Angular Apps
558+
559+
- [Angular 14](https://github.com/cypress-io/cypress-component-testing-apps/tree/main/angular)
560+
521561
## Component Testing Config
522562

523563
Below are a few additional configuration values that are specific to component

0 commit comments

Comments
 (0)