cypress 13.2.0 → 13.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/angular/angular/README.md +10 -0
- package/angular/angular/dist/index.d.ts +128 -0
- package/angular/angular/dist/index.js +333 -0
- package/angular/angular/package.json +77 -0
- package/angular/package.json +9 -1
- package/lib/exec/spawn.js +1 -1
- package/lib/util.js +1 -1
- package/mount-utils/mount-utils/README.md +140 -0
- package/mount-utils/mount-utils/dist/index.d.ts +40 -0
- package/mount-utils/mount-utils/dist/index.js +68 -0
- package/mount-utils/mount-utils/package.json +46 -0
- package/mount-utils/package.json +10 -1
- package/package.json +20 -4
- package/react/package.json +13 -0
- package/react/react/README.md +14 -0
- package/react/react/dist/cypress-react.cjs.js +943 -0
- package/react/react/dist/cypress-react.esm-bundler.js +917 -0
- package/react/react/dist/index.d.ts +111 -0
- package/react/react/package.json +111 -0
- package/react18/package.json +10 -0
- package/react18/react18/README.md +7 -0
- package/react18/react18/dist/cypress-react.cjs.js +592 -0
- package/react18/react18/dist/cypress-react.esm-bundler.js +569 -0
- package/react18/react18/dist/index.d.ts +78 -0
- package/react18/react18/package.json +71 -0
- package/svelte/package.json +13 -1
- package/svelte/svelte/README.md +15 -0
- package/svelte/svelte/dist/cypress-svelte.cjs.js +122 -0
- package/svelte/svelte/dist/cypress-svelte.esm-bundler.js +120 -0
- package/svelte/svelte/dist/index.d.ts +201 -0
- package/svelte/svelte/package.json +56 -0
- package/types/cypress.d.ts +2 -2
- package/vue/package.json +13 -1
- package/vue/vue/README.md +14 -0
- package/vue/vue/dist/cypress-vue.cjs.js +8582 -0
- package/vue/vue/dist/cypress-vue.esm-bundler.js +8560 -0
- package/vue/vue/dist/index.d.ts +1392 -0
- package/vue/vue/package.json +96 -0
- package/vue2/dist/cypress-vue2.cjs.js +1 -1
- package/vue2/dist/cypress-vue2.esm-bundler.js +1 -1
- package/vue2/package.json +13 -1
- package/vue2/vue2/README.md +7 -0
- package/vue2/vue2/dist/cypress-vue2.cjs.js +20045 -0
- package/vue2/vue2/dist/cypress-vue2.esm-bundler.js +20042 -0
- package/vue2/vue2/dist/index.d.ts +364 -0
- package/vue2/vue2/package.json +65 -0
@@ -0,0 +1,140 @@
|
|
1
|
+
# @cypress/mount-utils
|
2
|
+
|
3
|
+
> **Note** this package is not meant to be used outside of cypress component testing.
|
4
|
+
|
5
|
+
This library exports some shared types and utility functions designed to build adapters for components frameworks.
|
6
|
+
|
7
|
+
It is used in:
|
8
|
+
|
9
|
+
- [`@cypress/react`](https://github.com/cypress-io/cypress/tree/develop/npm/react)
|
10
|
+
- [`@cypress/vue`](https://github.com/cypress-io/cypress/tree/develop/npm/vue)
|
11
|
+
- [`@cypress/svelte`](https://github.com/cypress-io/cypress/tree/develop/npm/svelte)
|
12
|
+
- [`@cypress/angular`](https://github.com/cypress-io/cypress/tree/develop/npm/angular)
|
13
|
+
|
14
|
+
## What is a Mount Adapter?
|
15
|
+
|
16
|
+
All Component Tests require a component to be **mounted**. This is generally done with a custom command, `cy.mount` by default.
|
17
|
+
|
18
|
+
|
19
|
+
### Requirements
|
20
|
+
|
21
|
+
All the functionality used to create the first party Mount adapters is available to support third parties adapters. At minimum, a Mount Adapter must:
|
22
|
+
|
23
|
+
- Receive a component as the first argument. This could be class, function etc - depends on the framework.
|
24
|
+
- Return a Cypress Chainable (for example using `cy.wrap`) that resolves whatever is idiomatic for your framework
|
25
|
+
- Call `getContainerEl` to access the root DOM element
|
26
|
+
|
27
|
+
In addition, we recommend that Mount Adapters:
|
28
|
+
|
29
|
+
- call `setupHooks` to register the required lifecycle hooks for `@cypress/mount-utils` to work
|
30
|
+
|
31
|
+
### Example Mount Adapter: Web Components
|
32
|
+
|
33
|
+
Here's a simple yet realistic example of Mount Adapter targeting Web Components. It uses utilities from this package (`@cypress/mount-utils`) This is recommended, so your adapter behaves similar to the first party Mount Adapters.
|
34
|
+
|
35
|
+
```ts
|
36
|
+
import {
|
37
|
+
ROOT_SELECTOR,
|
38
|
+
setupHooks,
|
39
|
+
getContainerEl
|
40
|
+
} from "@cypress/mount-utils";
|
41
|
+
|
42
|
+
Cypress.on("run:start", () => {
|
43
|
+
// Consider doing a check to ensure your adapter only runs in Component Testing mode.
|
44
|
+
if (Cypress.testingType !== "component") {
|
45
|
+
return;
|
46
|
+
}
|
47
|
+
|
48
|
+
Cypress.on("test:before:run", () => {
|
49
|
+
// Do some cleanup from previous test - for example, clear the DOM.
|
50
|
+
getContainerEl().innerHTML = "";
|
51
|
+
});
|
52
|
+
});
|
53
|
+
|
54
|
+
function maybeRegisterComponent<T extends CustomElementConstructor>(
|
55
|
+
name: string,
|
56
|
+
webComponent: T
|
57
|
+
) {
|
58
|
+
// Avoid double-registering a Web Component.
|
59
|
+
if (window.customElements.get(name)) {
|
60
|
+
return;
|
61
|
+
}
|
62
|
+
|
63
|
+
window.customElements.define(name, webComponent);
|
64
|
+
}
|
65
|
+
|
66
|
+
export function mount(
|
67
|
+
webComponent: CustomElementConstructor
|
68
|
+
): Cypress.Chainable {
|
69
|
+
// Get root selector defined in `cypress/support.component-index.html
|
70
|
+
const $root = document.querySelector(ROOT_SELECTOR)!;
|
71
|
+
|
72
|
+
// Change to kebab-case to comply with Web Component naming convention
|
73
|
+
const name = webComponent.name
|
74
|
+
.replace(/([a-z0–9])([A-Z])/g, "$1-$2")
|
75
|
+
.toLowerCase();
|
76
|
+
|
77
|
+
/// Register Web Component
|
78
|
+
maybeRegisterComponent(name, webComponent);
|
79
|
+
|
80
|
+
// Render HTML containing component.
|
81
|
+
$root.innerHTML = `<${name} id="root"></${name}>`;
|
82
|
+
|
83
|
+
// Log a messsage in the Command Log.
|
84
|
+
Cypress.log({
|
85
|
+
name: "mount",
|
86
|
+
message: [`<${name} ... />`],
|
87
|
+
});
|
88
|
+
|
89
|
+
// Return a `Cypress.Chainable` that returns whatever is idiomatic
|
90
|
+
// in the framework your mount adapter targets.
|
91
|
+
return cy.wrap(document.querySelector("#root"), { log: false });
|
92
|
+
}
|
93
|
+
|
94
|
+
// Setup Cypress lifecycle hooks.
|
95
|
+
setupHooks();
|
96
|
+
```
|
97
|
+
|
98
|
+
Usage:
|
99
|
+
|
100
|
+
```ts
|
101
|
+
// User will generally register a `cy.mount` command in `cypress/support/component.js`:
|
102
|
+
|
103
|
+
import { mount } from '@package/cypress-web-components'
|
104
|
+
|
105
|
+
Cypress.Commands.add('mount', mount)
|
106
|
+
|
107
|
+
// Test
|
108
|
+
export class WebCounter extends HTMLElement {
|
109
|
+
constructor() {
|
110
|
+
super();
|
111
|
+
}
|
112
|
+
|
113
|
+
connectedCallback() {
|
114
|
+
this.innerHTML = `
|
115
|
+
<div>
|
116
|
+
<button>Counter</button>
|
117
|
+
</div>`;
|
118
|
+
}
|
119
|
+
}
|
120
|
+
|
121
|
+
|
122
|
+
describe('web-component.cy.ts', () => {
|
123
|
+
it('playground', () => {
|
124
|
+
cy.mount(WebCounter)
|
125
|
+
})
|
126
|
+
})
|
127
|
+
```
|
128
|
+
|
129
|
+
For more robust, production ready examples, check out our first party adapters.
|
130
|
+
|
131
|
+
## Compatibility
|
132
|
+
|
133
|
+
| @cypress/mount-utils | cypress |
|
134
|
+
| -------------------- | ------- |
|
135
|
+
| <= v1 | <= v9 |
|
136
|
+
| >= v2 | >= v10 |
|
137
|
+
|
138
|
+
## Changelog
|
139
|
+
|
140
|
+
[Changelog](./CHANGELOG.md)
|
@@ -0,0 +1,40 @@
|
|
1
|
+
export declare const ROOT_SELECTOR = "[data-cy-root]";
|
2
|
+
/**
|
3
|
+
* Gets the root element used to mount the component.
|
4
|
+
* @returns {HTMLElement} The root element
|
5
|
+
* @throws {Error} If the root element is not found
|
6
|
+
*/
|
7
|
+
export declare const getContainerEl: () => HTMLElement;
|
8
|
+
export declare function checkForRemovedStyleOptions(mountingOptions: Record<string, any>): void;
|
9
|
+
/**
|
10
|
+
* Utility function to register CT side effects and run cleanup code during the "test:before:run" Cypress hook
|
11
|
+
* @param optionalCallback Callback to be called before the next test runs
|
12
|
+
*/
|
13
|
+
export declare function setupHooks(optionalCallback?: Function): void;
|
14
|
+
/**
|
15
|
+
* Remove any style or extra link elements from the iframe placeholder
|
16
|
+
* left from any previous test
|
17
|
+
*
|
18
|
+
* Removed as of Cypress 11.0.0
|
19
|
+
* @see https://on.cypress.io/migration-11-0-0-component-testing-updates
|
20
|
+
*/
|
21
|
+
export declare function cleanupStyles(): void;
|
22
|
+
/**
|
23
|
+
* Additional styles to inject into the document.
|
24
|
+
* A component might need 3rd party libraries from CDN,
|
25
|
+
* local CSS files and custom styles.
|
26
|
+
*
|
27
|
+
* Removed as of Cypress 11.0.0.
|
28
|
+
* @see https://on.cypress.io/migration-11-0-0-component-testing-updates
|
29
|
+
*/
|
30
|
+
export declare type StyleOptions = unknown;
|
31
|
+
/**
|
32
|
+
* Injects custom style text or CSS file or 3rd party style resources
|
33
|
+
* into the given document.
|
34
|
+
*
|
35
|
+
* Removed as of Cypress 11.0.0.
|
36
|
+
* @see https://on.cypress.io/migration-11-0-0-component-testing-updates
|
37
|
+
*/
|
38
|
+
export declare const injectStylesBeforeElement: (options: Partial<StyleOptions & {
|
39
|
+
log: boolean;
|
40
|
+
}>, document: Document, el: HTMLElement | null) => void;
|
@@ -0,0 +1,68 @@
|
|
1
|
+
export const ROOT_SELECTOR = '[data-cy-root]';
|
2
|
+
/**
|
3
|
+
* Gets the root element used to mount the component.
|
4
|
+
* @returns {HTMLElement} The root element
|
5
|
+
* @throws {Error} If the root element is not found
|
6
|
+
*/
|
7
|
+
export const getContainerEl = () => {
|
8
|
+
const el = document.querySelector(ROOT_SELECTOR);
|
9
|
+
if (el) {
|
10
|
+
return el;
|
11
|
+
}
|
12
|
+
throw Error(`No element found that matches selector ${ROOT_SELECTOR}. Please add a root element with data-cy-root attribute to your "component-index.html" file so that Cypress can attach your component to the DOM.`);
|
13
|
+
};
|
14
|
+
export function checkForRemovedStyleOptions(mountingOptions) {
|
15
|
+
for (const key of ['cssFile', 'cssFiles', 'style', 'styles', 'stylesheet', 'stylesheets']) {
|
16
|
+
if (mountingOptions[key]) {
|
17
|
+
Cypress.utils.throwErrByPath('mount.removed_style_mounting_options', key);
|
18
|
+
}
|
19
|
+
}
|
20
|
+
}
|
21
|
+
/**
|
22
|
+
* Utility function to register CT side effects and run cleanup code during the "test:before:run" Cypress hook
|
23
|
+
* @param optionalCallback Callback to be called before the next test runs
|
24
|
+
*/
|
25
|
+
export function setupHooks(optionalCallback) {
|
26
|
+
// We don't want CT side effects to run when e2e
|
27
|
+
// testing so we early return.
|
28
|
+
// System test to verify CT side effects do not pollute e2e: system-tests/test/e2e_with_mount_import_spec.ts
|
29
|
+
if (Cypress.testingType !== 'component') {
|
30
|
+
return;
|
31
|
+
}
|
32
|
+
// When running component specs, we cannot allow "cy.visit"
|
33
|
+
// because it will wipe out our preparation work, and does not make much sense
|
34
|
+
// thus we overwrite "cy.visit" to throw an error
|
35
|
+
Cypress.Commands.overwrite('visit', () => {
|
36
|
+
throw new Error('cy.visit from a component spec is not allowed');
|
37
|
+
});
|
38
|
+
Cypress.Commands.overwrite('session', () => {
|
39
|
+
throw new Error('cy.session from a component spec is not allowed');
|
40
|
+
});
|
41
|
+
Cypress.Commands.overwrite('origin', () => {
|
42
|
+
throw new Error('cy.origin from a component spec is not allowed');
|
43
|
+
});
|
44
|
+
// @ts-ignore
|
45
|
+
Cypress.on('test:before:after:run:async', () => {
|
46
|
+
optionalCallback === null || optionalCallback === void 0 ? void 0 : optionalCallback();
|
47
|
+
});
|
48
|
+
}
|
49
|
+
/**
|
50
|
+
* Remove any style or extra link elements from the iframe placeholder
|
51
|
+
* left from any previous test
|
52
|
+
*
|
53
|
+
* Removed as of Cypress 11.0.0
|
54
|
+
* @see https://on.cypress.io/migration-11-0-0-component-testing-updates
|
55
|
+
*/
|
56
|
+
export function cleanupStyles() {
|
57
|
+
Cypress.utils.throwErrByPath('mount.cleanup_styles');
|
58
|
+
}
|
59
|
+
/**
|
60
|
+
* Injects custom style text or CSS file or 3rd party style resources
|
61
|
+
* into the given document.
|
62
|
+
*
|
63
|
+
* Removed as of Cypress 11.0.0.
|
64
|
+
* @see https://on.cypress.io/migration-11-0-0-component-testing-updates
|
65
|
+
*/
|
66
|
+
export const injectStylesBeforeElement = (options, document, el) => {
|
67
|
+
Cypress.utils.throwErrByPath('mount.inject_styles_before_element');
|
68
|
+
};
|
@@ -0,0 +1,46 @@
|
|
1
|
+
{
|
2
|
+
"name": "@cypress/mount-utils",
|
3
|
+
"version": "0.0.0-development",
|
4
|
+
"description": "Shared utilities for the various component testing adapters",
|
5
|
+
"main": "dist/index.js",
|
6
|
+
"scripts": {
|
7
|
+
"build": "tsc || echo 'built, with type errors'",
|
8
|
+
"postbuild": "node ../../scripts/sync-exported-npm-with-cli.js",
|
9
|
+
"check-ts": "tsc --noEmit",
|
10
|
+
"watch": "tsc -w",
|
11
|
+
"lint": "eslint --ext .js,.ts,.json, ."
|
12
|
+
},
|
13
|
+
"dependencies": {},
|
14
|
+
"devDependencies": {
|
15
|
+
"@rollup/plugin-commonjs": "^17.1.0",
|
16
|
+
"@rollup/plugin-node-resolve": "^11.1.1",
|
17
|
+
"rollup": "3.7.3",
|
18
|
+
"rollup-plugin-dts": "5.0.0",
|
19
|
+
"rollup-plugin-typescript2": "^0.29.0",
|
20
|
+
"typescript": "^4.7.4"
|
21
|
+
},
|
22
|
+
"files": [
|
23
|
+
"dist"
|
24
|
+
],
|
25
|
+
"types": "dist/index.d.ts",
|
26
|
+
"license": "MIT",
|
27
|
+
"repository": {
|
28
|
+
"type": "git",
|
29
|
+
"url": "https://github.com/cypress-io/cypress.git"
|
30
|
+
},
|
31
|
+
"homepage": "https://github.com/cypress-io/cypress/tree/develop/npm/mount-utils#readme",
|
32
|
+
"bugs": "https://github.com/cypress-io/cypress/issues/new?template=1-bug-report.md",
|
33
|
+
"publishConfig": {
|
34
|
+
"access": "public"
|
35
|
+
},
|
36
|
+
"nx": {
|
37
|
+
"targets": {
|
38
|
+
"build": {
|
39
|
+
"outputs": [
|
40
|
+
"{workspaceRoot}/cli/mount-utils",
|
41
|
+
"{projectRoot}/dist"
|
42
|
+
]
|
43
|
+
}
|
44
|
+
}
|
45
|
+
}
|
46
|
+
}
|
package/mount-utils/package.json
CHANGED
@@ -6,7 +6,6 @@
|
|
6
6
|
"scripts": {
|
7
7
|
"build": "tsc || echo 'built, with type errors'",
|
8
8
|
"postbuild": "node ../../scripts/sync-exported-npm-with-cli.js",
|
9
|
-
"build-prod": "yarn build",
|
10
9
|
"check-ts": "tsc --noEmit",
|
11
10
|
"watch": "tsc -w",
|
12
11
|
"lint": "eslint --ext .js,.ts,.json, ."
|
@@ -33,5 +32,15 @@
|
|
33
32
|
"bugs": "https://github.com/cypress-io/cypress/issues/new?template=1-bug-report.md",
|
34
33
|
"publishConfig": {
|
35
34
|
"access": "public"
|
35
|
+
},
|
36
|
+
"nx": {
|
37
|
+
"targets": {
|
38
|
+
"build": {
|
39
|
+
"outputs": [
|
40
|
+
"{workspaceRoot}/cli/mount-utils",
|
41
|
+
"{projectRoot}/dist"
|
42
|
+
]
|
43
|
+
}
|
44
|
+
}
|
36
45
|
}
|
37
46
|
}
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "cypress",
|
3
|
-
"version": "13.
|
3
|
+
"version": "13.3.1",
|
4
4
|
"main": "index.js",
|
5
5
|
"scripts": {
|
6
6
|
"postinstall": "node index.js --exec install",
|
@@ -117,10 +117,26 @@
|
|
117
117
|
"require": "./svelte/dist/cypress-svelte.cjs.js"
|
118
118
|
}
|
119
119
|
},
|
120
|
+
"nx": {
|
121
|
+
"targets": {
|
122
|
+
"build-cli": {
|
123
|
+
"dependsOn": [
|
124
|
+
"prebuild"
|
125
|
+
],
|
126
|
+
"outputs": [
|
127
|
+
"{projectRoot}/types",
|
128
|
+
"{projectRoot}/build"
|
129
|
+
]
|
130
|
+
}
|
131
|
+
},
|
132
|
+
"implicitDependencies": [
|
133
|
+
"@cypress/*"
|
134
|
+
]
|
135
|
+
},
|
120
136
|
"buildInfo": {
|
121
|
-
"commitBranch": "
|
122
|
-
"commitSha": "
|
123
|
-
"commitDate": "2023-
|
137
|
+
"commitBranch": "main",
|
138
|
+
"commitSha": "6373930c8e3f693ca757d7cd47d7ddab271fbbff",
|
139
|
+
"commitDate": "2023-10-11T21:18:56.000Z",
|
124
140
|
"stable": true
|
125
141
|
},
|
126
142
|
"description": "Cypress is a next generation front end testing tool built for the modern web",
|
package/react/package.json
CHANGED
@@ -88,6 +88,19 @@
|
|
88
88
|
"publishConfig": {
|
89
89
|
"access": "public"
|
90
90
|
},
|
91
|
+
"nx": {
|
92
|
+
"targets": {
|
93
|
+
"build": {
|
94
|
+
"dependsOn": [
|
95
|
+
"!@cypress/react18:build"
|
96
|
+
],
|
97
|
+
"outputs": [
|
98
|
+
"{workspaceRoot}/cli/react",
|
99
|
+
"{projectRoot}/dist"
|
100
|
+
]
|
101
|
+
}
|
102
|
+
}
|
103
|
+
},
|
91
104
|
"standard": {
|
92
105
|
"globals": [
|
93
106
|
"Cypress",
|
@@ -0,0 +1,14 @@
|
|
1
|
+
# @cypress/react
|
2
|
+
|
3
|
+
Mount React components in the open source [Cypress.io](https://www.cypress.io/) test runner
|
4
|
+
|
5
|
+
> **Note:** This package is bundled with the `cypress` package and should not need to be installed separately. See the [React Component Testing Docs](https://docs.cypress.io/guides/component-testing/react/overview) for mounting React components. Installing and importing `mount` from `@cypress/react` should only be done for advanced use-cases.
|
6
|
+
## Development
|
7
|
+
|
8
|
+
Run `yarn build` to compile and sync packages to the `cypress` cli package.
|
9
|
+
|
10
|
+
Run `yarn cy:open` to open Cypress component testing against real-world examples.
|
11
|
+
|
12
|
+
Run `yarn test` to execute headless Cypress tests.
|
13
|
+
|
14
|
+
## [Changelog](./CHANGELOG.md)
|