Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

14.0 Docs #5964

Open
wants to merge 35 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
35 commits
Select commit Hold shift + click to select a range
ef2b49e
Start 14.0 doc updates
jennifer-shehane Oct 24, 2024
5d6e370
Write JIT compile migration
jennifer-shehane Oct 24, 2024
0db7b2a
Add note about deprecation of resourceType
jennifer-shehane Oct 24, 2024
0eebb83
Merge branch 'main' into release/14.0.0
jennifer-shehane Oct 24, 2024
9cfa5e6
Add deprecated badge to intercept resourceType
jennifer-shehane Oct 24, 2024
bb90f10
Add badge styling
jennifer-shehane Oct 24, 2024
b4ed11f
Add new browser support
jennifer-shehane Oct 24, 2024
cca1974
Merge branch 'release/14.0.0' of https://github.com/cypress-io/cypres…
jennifer-shehane Oct 24, 2024
bf985f4
update miggration to right number of versions
jennifer-shehane Oct 25, 2024
b4df868
update to be more specific
jennifer-shehane Oct 25, 2024
23c348a
Add more docs around justInTimeCompile
jennifer-shehane Nov 1, 2024
66740a6
chore: update supported vite versions for cypress 14 (#5978)
AtofStryker Nov 3, 2024
369a79e
chore: remove nuxt2 documentation as it is removed as a CT option in …
AtofStryker Nov 3, 2024
6cc52f3
chore: remove vue 2 documentation from Component Testing as it will n…
AtofStryker Nov 5, 2024
3a4fa3b
chore: update nextjs documentation to reflect Cypress 14 (#5980)
AtofStryker Nov 5, 2024
21d6c94
chore: update angular documentation with supported versions from Cypr…
AtofStryker Nov 6, 2024
91d4cbb
chore: remove CRA docs from cypress 14 and add migration guide (#5987)
AtofStryker Nov 6, 2024
63942a4
docs: remove svelte 3 references and update migration guide (#5999)
mschile Nov 12, 2024
b891150
chore: remove vue/cli-service from cypress docs and add migration gui…
AtofStryker Nov 12, 2024
a0cc314
Merge branch 'main' into release/14.0.0
jennifer-shehane Nov 13, 2024
436fd7f
Write a preliminary 'Summary' for v14
jennifer-shehane Nov 13, 2024
98fdf6d
chore: update react docs for Cypress 14 (#6003)
AtofStryker Nov 18, 2024
e741d6c
remove jit from experimental section (#6013)
AtofStryker Nov 21, 2024
9ef1430
chore: add docs for react 19 and next.js 15 (#6008)
AtofStryker Nov 21, 2024
3ef141c
chore: update angular docs to include Angular 19 (#6018)
AtofStryker Dec 2, 2024
9889ea3
chore: update vite docs to include v6 (#6019)
AtofStryker Dec 2, 2024
b63d65e
chore: update docs to svelte 5 (#6028)
AtofStryker Dec 10, 2024
b5e9530
chore: remove react 19 rc warning (#6030)
AtofStryker Dec 10, 2024
a710e50
Merge branch 'main' into release/14.0.0
jennifer-shehane Dec 23, 2024
61b980d
Updates to changelog/migration guide to clean it up.
jennifer-shehane Dec 23, 2024
9ab7ea4
updates
jennifer-shehane Dec 23, 2024
78757f8
Merge branch 'main' into release/14.0.0
jennifer-shehane Dec 23, 2024
d496894
Merge branch 'main' into release/14.0.0
jennifer-shehane Jan 3, 2025
35da1af
fix: linting errors (#6067)
cacieprins Jan 3, 2025
9041497
Documents changes to cy.origin, configuration for document.domain inj…
jennifer-shehane Jan 3, 2025
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 16 additions & 15 deletions docs/api/commands/intercept.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -130,21 +130,21 @@ glob-matched against the request using
[`Cypress.minimatch`](/api/utilities/minimatch) with the `{ matchBase: true }`
minimatch option applied.

| Option | Description |
| ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------- |
| auth | HTTP Basic Authentication (`object` with keys `username` and `password`) |
| headers | HTTP request headers (`object`) |
| hostname | HTTP request hostname |
| https | `true`: only secure (https://) requests, `false`: only insecure (http://) requests |
| method | HTTP request method (matches any method by default) |
| middleware | `true`: match route first and in defined order, `false`: match route in reverse order (default) |
| path | HTTP request path after the hostname, including query parameters |
| pathname | Like `path`, but without query parameters |
| port | HTTP request port(s) (`number` or `Array`) |
| query | Parsed query string (`object`) |
| resourceType | The resource type of the request. See ["Request object properties"](#Request-object-properties) for a list of possible values for `resourceType`. |
| times | Maximum number of times to match (`number`) |
| url | Full HTTP request URL |
| Option | Description |
| ----------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
| auth | HTTP Basic Authentication (`object` with keys `username` and `password`) |
| headers | HTTP request headers (`object`) |
| hostname | HTTP request hostname |
| https | `true`: only secure (https://) requests, `false`: only insecure (http://) requests |
| method | HTTP request method (matches any method by default) |
| middleware | `true`: match route first and in defined order, `false`: match route in reverse order (default) |
| path | HTTP request path after the hostname, including query parameters |
| pathname | Like `path`, but without query parameters |
| port | HTTP request port(s) (`number` or `Array`) |
| query | Parsed query string (`object`) |
| resourceType <Badge type="caution">deprecated</Badge> | The resource type of the request. See ["Request object properties"](#Request-object-properties) for a list of possible values for `resourceType`. |
| times | Maximum number of times to match (`number`) |
| url | Full HTTP request URL |

See [examples](#With-RouteMatcher) below.

Expand Down Expand Up @@ -1619,6 +1619,7 @@ information about the request and response to the console:

| Version | Changes |
| ------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [14.0.0](/app/references/changelog#14-0-0) | Deprecated `resourceType` property |
| [12.2.0](/app/references/changelog#12-2-0) | Added `resourceType` property to `req` and `RouteMatcher`. |
| [7.6.0](/app/references/changelog#7-0-0) | Added `query` option to `req` (The incoming request object yielded to request handler functions). |
| [7.0.0](/app/references/changelog#7-0-0) | Removed `matchUrlAgainstPath` option from `RouteMatcher`, reversed handler ordering, added request events, removed substring URL matching, removed `cy.route2` alias, added `middleware` RouteMatcher option, renamed `res.delay()` to `res.setDelay()` and `res.throttle()` to `res.setThrottle()`. |
Expand Down
32 changes: 1 addition & 31 deletions docs/api/commands/mount.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -35,10 +35,6 @@ to start with for your commands:
<TabItem value='React'>

```js
// React 18
import { mount } from 'cypress/react18'

// React 16, 17
import { mount } from 'cypress/react'

Cypress.Commands.add('mount', (component, options) => {
Expand All @@ -49,33 +45,7 @@ Cypress.Commands.add('mount', (component, options) => {
```

</TabItem>
<TabItem value='Vue 2'>

```js
import { mount } from 'cypress/vue2'

Cypress.Commands.add('mount', (component, options = {}) => {
// Setup options object
options.extensions = options.extensions || {}
options.extensions.plugins = options.extensions.plugins || []
options.extensions.components = options.extensions.components || {}

/* Add any global plugins */
// options.extensions.plugins.push({
// install(app) {
// app.use(MyPlugin);
// },
// });

/* Add any global components */
// options.extensions.components['Button'] = Button;

return mount(component, options)
})
```

</TabItem>
<TabItem value='Vue 3'>
<TabItem value='Vue'>

```js
import { mount } from 'cypress/vue'
Expand Down
47 changes: 31 additions & 16 deletions docs/api/commands/origin.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@ title: origin
e2eSpecific: true
---

Visit multiple domains of different
[origin](https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy#definition_of_an_origin)
Visit multiple different
[origins](https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy#definition_of_an_origin)
in a single test.

In normal use, a single Cypress test may only run commands in a single origin, a
Expand All @@ -28,6 +28,18 @@ doc.

:::

:::info

<strong>Changes in Cypress [v14.0.0](/app/references/changelog#14-0-0)</strong>

Cypress no longer injects `document.domain` by default, which means `cy.origin()`
must now be used to navigate between any two origins in the same test, even if
the two origins are in the same superdomain. This behavior can be disabled by setting
the `injectDocumentDomain` configuration option to `true`, to allow a smooth transition
of tests to the new behavior. In Cypress 15, this configuration option will be removed.

:::

## Syntax

```js
Expand Down Expand Up @@ -63,26 +75,28 @@ cy.get('h1').contains('My cool site under test')
const hits = getHits()
cy.visit('https://example.cypress.io/history/founder')
// To interact with cross-origin content, move this inside cy.origin() callback
cy.get('h1').contains('About our Founder')
// Domain must be a precise match including subdomain, i.e. example.cypress.io
cy.origin('cypress.io', () => {
cy.visit('/history/founder')
cy.get('h1').contains('About our Founder')
// Fails because hits is not passed in via args
cy.get('#hitcounter').contains(hits)
cy.get('h1').contains('Kitchen Sink')
// Origin must be a precise match including scheme, subdomain and port, i.e. https://www.cypress.io
cy.origin('https://www.cypress.io', () => {
cy.visit('/about-us')
cy.get('h1').contains('About us')
// Fails because doanloads is not passed in via args
cy.contains(downloads)
})
// Won't work because still on cypress.io
cy.get('h1').contains('My cool site under test')
// Won't work because still on www.cypress.io
cy.get('h1').contains('Kitchen Sink')
```

### Arguments

<Icon name="angle-right" /> **url _(String)_**
<Icon name="angle-right" /> **origin _(String)_**

A URL specifying the secondary origin in which the callback is to be executed.
This should at the very least contain a hostname, and may also include the
protocol, port number & path. The hostname must precisely match that of the
secondary origin, including all subdomains. Query params are not supported.
A string specifying the origin in which the callback is to be executed.
This should at the very least contain a hostname. It may also include the
scheme and port number. The path may be included, but is not necessary.
The hostname must precisely match that of the secondary origin, including
all subdomains. Query params are not supported. If no scheme is provided,
the scheme defaults to `https`.

This argument will be used in two ways:

Expand Down Expand Up @@ -542,6 +556,7 @@ inclusion in a future version of Cypress.

| Version | Changes |
| ------------------------------------------- | ----------------------------------------------------------------------------------------------------------- |
| [14.0.0](/app/references/changelog#14-0-0) | `cy.origin()` is now required when navigating between origins in the same test, rather than superdomains. |
| [12.6.0](/app/references/changelog#10-7-0) | Support for `Cypress.require()` added and support for CommonJS `require()` and ES module `import()` removed |
| [10.11.0](/app/references/changelog#10-7-0) | Support for CommonJS `require()` and ES module `import()` added and support for `Cypress.require()` removed |
| [10.7.0](/app/references/changelog#10-7-0) | Support for `Cypress.require()` added |
Expand Down
18 changes: 10 additions & 8 deletions docs/app/component-testing/angular/api.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,6 @@ sidebar_label: API
import { mount } from 'cypress/angular'
```

Be sure to use the `cypress/angular-signals` package if using Angular `17.2` and up and wishing to test `signal()`s within your component tests.

```js
import { mount } from 'cypress/angular-signals'
```

<table class="api-table">
<tr>
<td>Description</td>
Expand Down Expand Up @@ -159,8 +153,16 @@ providers, declarations, imports and even component @Inputs()
</tr>
<tr>
<td>componentProperties</td>
<td>Partial&lt;&lbrace;[P in keyof T]: T[P];&rbrace;&gt; (optional)</td>
<td> If using the `cypress/angular-signals` test harness, this type is adapted to `Partial<{[P in keyof T]: T[P] extends InputSignal<infer V> ? InputSignal<V> | WritableSignal<V> | V : T[P]}>` to allow for generic types to be wrapped inside a signal</td>
<td>
Partial&lt;&lbrace;[P in keyof T]: T[P] extends InputSignal&lt;infer V&gt;
? InputSignal&lt;V&gt; | WritableSignal&lt;V&gt; | V : T[P]&rbrace;&gt;
(optional)
</td>
<td>
{' '}
signal based inference types need only apply if you are using signals within
your component tests
</td>
</tr>
</table>

Expand Down
15 changes: 11 additions & 4 deletions docs/app/component-testing/angular/examples.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,10 @@ If you need to set up any additional `imports`, `declarations`, or `providers`
for your component to mount successfully, you can set them in the options
(similar to setting them up in `ngModule` in a app):

:::info
Note: `imports`, `declarations`, and `providers` options do not work with `standalone` components as they are set within the test `ngModule`. This is the default behavior in Angular 19.
:::

```ts
cy.mount(ComponentThatFetchesData, {
imports: [HttpClientModule],
Expand Down Expand Up @@ -208,10 +212,13 @@ in the future

### Signals

With the releases of Angular versions [17.1](https://github.com/angular/angular/blob/main/CHANGELOG.md#1710-2024-01-17) and [17.2](https://github.com/angular/angular/blob/main/CHANGELOG.md#1720-2024-02-14), [input](https://github.com/angular/angular/pull/53521) and [model](https://github.com/angular/angular/pull/54252) signals were introduced into the `@angular/core` API.
Since signals introduced new methods and types to the core API, Cypress introduced a new test harness, `@cypress/angular-signals`.
With the releases of Angular versions [17.1](https://github.com/angular/angular/blob/main/CHANGELOG.md#1710-2024-01-17) and [17.2](https://github.com/angular/angular/blob/main/CHANGELOG.md#1720-2024-02-14), [input](https://github.com/angular/angular/pull/53521) and [model](https://github.com/angular/angular/pull/54252) signals were introduced into the `@angular/core` API. Though basic signals were introduced in Angular `16`, using all signals requires Angular `17.2` and above.

Though basic signals were introduced in Angular `16`, this testing harness requires Angular `17.2` and above.
:::info

With Cypress 14, signal support is directly included in the `cypress/angular` testing harness.

:::

For the below examples, we'll be working with a very simple component called `TestComponent`, which looks something like shown below:

Expand Down Expand Up @@ -268,7 +275,7 @@ cy.get('[data-cy="test-component-title-display"]').should(
```

:::info
Under the hood, Cypress wraps the generic value in a writable `signal()` and merges it into the prop. In other words, the `@cypress/angular-signals` test harness in this example is really:
Under the hood, Cypress wraps the generic value in a writable `signal()` and merges it into the prop. In other words, this example is really:

```typescript
cy.mount(TestComponent, {
Expand Down
6 changes: 3 additions & 3 deletions docs/app/component-testing/angular/overview.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ sidebar_label: Overview

## Framework Support

Cypress Component Testing supports Angular 13+.
Cypress Component Testing supports Angular 17.2.0+.

## Tutorial

Expand Down Expand Up @@ -119,5 +119,5 @@ export default {

#### Sample Angular Apps

- [Angular 14](https://github.com/cypress-io/cypress-component-testing-apps/tree/main/angular)
- [Angular 16 Standalone](https://github.com/cypress-io/cypress-component-testing-apps/tree/main/angular-standalone)
- [Angular 18](https://github.com/cypress-io/cypress-component-testing-apps/tree/main/angular)
- [Angular 19 Standalone](https://github.com/cypress-io/cypress-component-testing-apps/tree/main/angular-standalone)
Loading