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.
Files changed (46) hide show
  1. package/angular/angular/README.md +10 -0
  2. package/angular/angular/dist/index.d.ts +128 -0
  3. package/angular/angular/dist/index.js +333 -0
  4. package/angular/angular/package.json +77 -0
  5. package/angular/package.json +9 -1
  6. package/lib/exec/spawn.js +1 -1
  7. package/lib/util.js +1 -1
  8. package/mount-utils/mount-utils/README.md +140 -0
  9. package/mount-utils/mount-utils/dist/index.d.ts +40 -0
  10. package/mount-utils/mount-utils/dist/index.js +68 -0
  11. package/mount-utils/mount-utils/package.json +46 -0
  12. package/mount-utils/package.json +10 -1
  13. package/package.json +20 -4
  14. package/react/package.json +13 -0
  15. package/react/react/README.md +14 -0
  16. package/react/react/dist/cypress-react.cjs.js +943 -0
  17. package/react/react/dist/cypress-react.esm-bundler.js +917 -0
  18. package/react/react/dist/index.d.ts +111 -0
  19. package/react/react/package.json +111 -0
  20. package/react18/package.json +10 -0
  21. package/react18/react18/README.md +7 -0
  22. package/react18/react18/dist/cypress-react.cjs.js +592 -0
  23. package/react18/react18/dist/cypress-react.esm-bundler.js +569 -0
  24. package/react18/react18/dist/index.d.ts +78 -0
  25. package/react18/react18/package.json +71 -0
  26. package/svelte/package.json +13 -1
  27. package/svelte/svelte/README.md +15 -0
  28. package/svelte/svelte/dist/cypress-svelte.cjs.js +122 -0
  29. package/svelte/svelte/dist/cypress-svelte.esm-bundler.js +120 -0
  30. package/svelte/svelte/dist/index.d.ts +201 -0
  31. package/svelte/svelte/package.json +56 -0
  32. package/types/cypress.d.ts +2 -2
  33. package/vue/package.json +13 -1
  34. package/vue/vue/README.md +14 -0
  35. package/vue/vue/dist/cypress-vue.cjs.js +8582 -0
  36. package/vue/vue/dist/cypress-vue.esm-bundler.js +8560 -0
  37. package/vue/vue/dist/index.d.ts +1392 -0
  38. package/vue/vue/package.json +96 -0
  39. package/vue2/dist/cypress-vue2.cjs.js +1 -1
  40. package/vue2/dist/cypress-vue2.esm-bundler.js +1 -1
  41. package/vue2/package.json +13 -1
  42. package/vue2/vue2/README.md +7 -0
  43. package/vue2/vue2/dist/cypress-vue2.cjs.js +20045 -0
  44. package/vue2/vue2/dist/cypress-vue2.esm-bundler.js +20042 -0
  45. package/vue2/vue2/dist/index.d.ts +364 -0
  46. 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
+ }
@@ -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.2.0",
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": "develop",
122
- "commitSha": "8638abb2d0082809c8eea559f7ba4af74fd61c4a",
123
- "commitDate": "2023-09-12T14:42:17.000Z",
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",
@@ -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)