Skip to content

Commit

Permalink
14.0 Docs (#5964)
Browse files Browse the repository at this point in the history 
* Start 14.0 doc updates

* Write JIT compile migration

* Add note about deprecation of resourceType

* Add deprecated badge to intercept resourceType

* Add badge styling

* Add new browser support

* update miggration to right number of versions

* update to be more specific

* Add more docs around justInTimeCompile

* chore: update supported vite versions for cypress 14 (#5978)

* chore: remove nuxt2 documentation as it is removed as a CT option in Cypress 14 (#5976)

* chore: remove vue 2 documentation from Component Testing as it will no longer be supported in Cypress 14 (#5977)

* chore: remove vue 2 docs from component testing as it is no longer supported in Cypress v14

* add vue2 migration guide for temporary support if needed

* chore: update nextjs documentation to reflect Cypress 14 (#5980)

* chore: update angular documentation with supported versions from Cypress 14 (#5983)

* chore: update angular documentation with supported versions from cypress 14 and add migration guide documentation

* address comments from code review

* chore: remove CRA docs from cypress 14 and add migration guide (#5987)

* docs: remove svelte 3 references and update migration guide (#5999)

* chore: remove vue/cli-service from cypress docs and add migration guide (#5989)

* Write a preliminary 'Summary' for v14

* chore: update react docs for Cypress 14 (#6003)

* remove jit from experimental section (#6013)

* chore: add docs for react 19 and next.js 15 (#6008)

* chore: update angular docs to include Angular 19 (#6018)

* chore: add angular 19 docs

* Update docs/app/component-testing/angular/examples.mdx

Co-authored-by: Matt Schile <mschile@cypress.io>

---------

Co-authored-by: Matt Schile <mschile@cypress.io>

* chore: update vite docs to include v6 (#6019)

* chore: update docs to svelte 5 (#6028)

* chore: update docs to svelte 5

* Update docs/app/references/migration-guide.mdx

Co-authored-by: Matt Schile <mschile@cypress.io>

---------

Co-authored-by: Matt Schile <mschile@cypress.io>

* chore: remove react 19 rc warning (#6030)

* Updates to changelog/migration guide to clean it up.

* updates

* fix: linting errors (#6067)

* fix link to intercept command from migration-guide

* prettier

* Documents changes to cy.origin, configuration for document.domain inj… (#6058)

* Documents changes to cy.origin, configuration for document.domain injection removal and reversion

* lint and broken link fixes

* lint

* address code review comments: typos, clarification

* lint

* Update docs/app/references/configuration.mdx

Co-authored-by: Bill Glesias <bglesias@gmail.com>

* update example in cyorigin

---------

Co-authored-by: Cacie Prins <cacie@cypress.io>
Co-authored-by: Cacie Prins <cacieprins@users.noreply.github.com>
Co-authored-by: Bill Glesias <bglesias@gmail.com>

* lint

* chore: updates some of the images on the component testing setup guide to show more modern dependency versions (#6073)

* Update docs/app/references/changelog.mdx

Co-authored-by: Bill Glesias <bglesias@gmail.com>

* Update docs/app/references/changelog.mdx

Co-authored-by: Bill Glesias <bglesias@gmail.com>

* Update docs/partials/_document-domain-workaround.mdx

Co-authored-by: Bill Glesias <bglesias@gmail.com>

* Update docs/app/guides/cross-origin-testing.mdx

Co-authored-by: Bill Glesias <bglesias@gmail.com>

* Update docs/app/references/changelog.mdx

Co-authored-by: Mike McCready <66998419+MikeMcC399@users.noreply.github.com>

* Update docs/app/references/changelog.mdx

Co-authored-by: Mike McCready <66998419+MikeMcC399@users.noreply.github.com>

* Update docs/app/references/changelog.mdx

Co-authored-by: Mike McCready <66998419+MikeMcC399@users.noreply.github.com>

* Update docs/app/references/changelog.mdx

Co-authored-by: Mike McCready <66998419+MikeMcC399@users.noreply.github.com>

* fix link

* Update docs/app/references/migration-guide.mdx

Co-authored-by: Mike McCready <66998419+MikeMcC399@users.noreply.github.com>

* chore: make sure prettier doesnt run on these lines as things look quite odd (#6081)

---------

Co-authored-by: Bill Glesias <bglesias@gmail.com>
Co-authored-by: Matt Schile <mschile@cypress.io>
Co-authored-by: Cacie Prins <cacieprins@users.noreply.github.com>
Co-authored-by: Cacie Prins <cacie@cypress.io>
Co-authored-by: Mike McCready <66998419+MikeMcC399@users.noreply.github.com>
  • Loading branch information
@jennifer-shehane @AtofStryker
@mschile @cacieprins @MikeMcC399
6 people authored Jan 16, 2025
1 parent 303d316 commit 639cfea
Show file tree
Hide file tree
Showing 31 changed files with 728 additions and 681 deletions.
31 changes: 16 additions & 15 deletions docs/api/commands/intercept.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -136,21 +136,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 @@ -1628,6 +1628,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
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,10 +42,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 @@ -56,33 +52,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
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,8 @@ e2eSpecific: true

# origin

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 @@ -34,6 +34,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 @@ -69,26 +81,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 @@ -548,6 +562,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
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,12 +17,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 @@ -164,8 +158,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
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,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 @@ -213,10 +217,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 @@ -273,7 +280,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
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,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 @@ -124,5 +124,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

0 comments on commit 639cfea

Please sign in to comment.