cypress 13.17.0 → 14.0.1
Sign up to get free protection for your applications and to get access to all the features.
- package/angular/README.md +5 -0
- package/angular/angular/README.md +5 -0
- package/angular/angular/dist/index.d.ts +11 -2
- package/angular/angular/dist/index.js +944 -4
- package/angular/angular/package.json +16 -9
- package/angular/dist/index.d.ts +11 -2
- package/angular/dist/index.js +944 -4
- package/angular/package.json +16 -9
- package/lib/cli.js +1 -30
- package/lib/exec/spawn.js +29 -7
- package/mount-utils/dist/index.d.ts +0 -28
- package/mount-utils/dist/index.js +0 -27
- package/mount-utils/mount-utils/dist/index.d.ts +0 -28
- package/mount-utils/mount-utils/dist/index.js +0 -27
- package/package.json +5 -23
- package/react/README.md +5 -0
- package/react/dist/cypress-react.cjs.js +21 -676
- package/react/dist/cypress-react.esm-bundler.js +22 -676
- package/react/dist/index.d.ts +13 -30
- package/react/package.json +13 -15
- package/react/react/README.md +5 -0
- package/react/react/dist/cypress-react.cjs.js +21 -676
- package/react/react/dist/cypress-react.esm-bundler.js +22 -676
- package/react/react/dist/index.d.ts +13 -30
- package/react/react/package.json +13 -15
- package/svelte/README.md +6 -2
- package/svelte/dist/cypress-svelte.cjs.js +12 -12
- package/svelte/dist/cypress-svelte.esm-bundler.js +12 -12
- package/svelte/dist/index.d.ts +8 -179
- package/svelte/package.json +2 -2
- package/svelte/svelte/README.md +6 -2
- package/svelte/svelte/dist/cypress-svelte.cjs.js +12 -12
- package/svelte/svelte/dist/cypress-svelte.esm-bundler.js +12 -12
- package/svelte/svelte/dist/index.d.ts +8 -179
- package/svelte/svelte/package.json +2 -2
- package/types/cypress.d.ts +32 -49
- package/types/net-stubbing.d.ts +2 -7
- package/vue/dist/cypress-vue.cjs.js +380 -275
- package/vue/dist/cypress-vue.esm-bundler.js +382 -276
- package/vue/dist/index.d.ts +61 -78
- package/vue/package.json +2 -5
- package/vue/vue/dist/cypress-vue.cjs.js +380 -275
- package/vue/vue/dist/cypress-vue.esm-bundler.js +382 -276
- package/vue/vue/dist/index.d.ts +61 -78
- package/vue/vue/package.json +2 -5
- package/angular-signals/README.md +0 -11
- package/angular-signals/angular-signals/README.md +0 -11
- package/angular-signals/angular-signals/dist/index.d.ts +0 -136
- package/angular-signals/angular-signals/dist/index.js +0 -1861
- package/angular-signals/angular-signals/package.json +0 -74
- package/angular-signals/dist/index.d.ts +0 -136
- package/angular-signals/dist/index.js +0 -1861
- package/angular-signals/package.json +0 -74
- package/react18/README.md +0 -7
- package/react18/dist/cypress-react.cjs.js +0 -597
- package/react18/dist/cypress-react.esm-bundler.js +0 -574
- package/react18/dist/index.d.ts +0 -78
- package/react18/package.json +0 -71
- package/react18/react18/README.md +0 -7
- package/react18/react18/dist/cypress-react.cjs.js +0 -597
- package/react18/react18/dist/cypress-react.esm-bundler.js +0 -574
- package/react18/react18/dist/index.d.ts +0 -78
- package/react18/react18/package.json +0 -71
- package/vue2/README.md +0 -7
- package/vue2/dist/cypress-vue2.cjs.js +0 -20045
- package/vue2/dist/cypress-vue2.esm-bundler.js +0 -20042
- package/vue2/dist/index.d.ts +0 -207
- package/vue2/package.json +0 -65
- package/vue2/vue2/README.md +0 -7
- package/vue2/vue2/dist/cypress-vue2.cjs.js +0 -20045
- package/vue2/vue2/dist/cypress-vue2.esm-bundler.js +0 -20042
- package/vue2/vue2/dist/index.d.ts +0 -207
- package/vue2/vue2/package.json +0 -65
@@ -2,7 +2,7 @@
|
|
2
2
|
|
3
3
|
import * as React from 'react';
|
4
4
|
import React__default from 'react';
|
5
|
-
import * as
|
5
|
+
import * as react_dom_client from 'react-dom/client';
|
6
6
|
|
7
7
|
interface UnmountArgs {
|
8
8
|
log: boolean;
|
@@ -10,7 +10,7 @@ interface UnmountArgs {
|
|
10
10
|
}
|
11
11
|
type MountOptions = Partial<MountReactComponentOptions>;
|
12
12
|
interface MountReactComponentOptions {
|
13
|
-
ReactDom: typeof
|
13
|
+
ReactDom: typeof react_dom_client;
|
14
14
|
/**
|
15
15
|
* Log the mounting command into Cypress Command Log,
|
16
16
|
* true by default.
|
@@ -23,8 +23,8 @@ interface MountReactComponentOptions {
|
|
23
23
|
strict: boolean;
|
24
24
|
}
|
25
25
|
interface InternalMountOptions {
|
26
|
-
reactDom: typeof
|
27
|
-
render: (reactComponent: ReturnType<typeof React__default.createElement>, el: HTMLElement, reactDomToUse: typeof
|
26
|
+
reactDom: typeof react_dom_client;
|
27
|
+
render: (reactComponent: ReturnType<typeof React__default.createElement>, el: HTMLElement, reactDomToUse: typeof react_dom_client) => void;
|
28
28
|
unmount: (options: UnmountArgs) => void;
|
29
29
|
cleanup: () => boolean;
|
30
30
|
}
|
@@ -38,13 +38,6 @@ interface MountReturn {
|
|
38
38
|
* or have asynchronous updates (`useEffect`, `useLayoutEffect`).
|
39
39
|
*/
|
40
40
|
rerender: (component: React__default.ReactNode) => globalThis.Cypress.Chainable<MountReturn>;
|
41
|
-
/**
|
42
|
-
* Removes the mounted component.
|
43
|
-
*
|
44
|
-
* Removed as of Cypress 11.0.0.
|
45
|
-
* @see https://on.cypress.io/migration-11-0-0-component-testing-updates
|
46
|
-
*/
|
47
|
-
unmount: (payload: UnmountArgs) => void;
|
48
41
|
}
|
49
42
|
|
50
43
|
/**
|
@@ -78,10 +71,10 @@ declare const getContainerEl: () => HTMLElement;
|
|
78
71
|
|
79
72
|
/**
|
80
73
|
* Mounts a React component into the DOM.
|
81
|
-
* @param
|
82
|
-
* @param
|
83
|
-
* @param
|
84
|
-
*
|
74
|
+
* @param {import('react').JSX.Element} jsx The React component to mount.
|
75
|
+
* @param {MountOptions} options Options to pass to the mount function.
|
76
|
+
* @param {string} rerenderKey A key to use to force a rerender.
|
77
|
+
*
|
85
78
|
* @example
|
86
79
|
* import { mount } from '@cypress/react'
|
87
80
|
* import { Stepper } from './Stepper'
|
@@ -91,21 +84,11 @@ declare const getContainerEl: () => HTMLElement;
|
|
91
84
|
* cy.get('[data-cy=increment]').click()
|
92
85
|
* cy.get('[data-cy=counter]').should('have.text', '1')
|
93
86
|
* }
|
87
|
+
*
|
88
|
+
* @see {@link https://on.cypress.io/mounting-react} for more details.
|
89
|
+
*
|
90
|
+
* @returns {Cypress.Chainable<MountReturn>} The mounted component.
|
94
91
|
*/
|
95
92
|
declare function mount(jsx: React__default.ReactNode, options?: MountOptions, rerenderKey?: string): Cypress.Chainable<MountReturn>;
|
96
|
-
/**
|
97
|
-
* Removed as of Cypress 11.0.0.
|
98
|
-
* @see https://on.cypress.io/migration-11-0-0-component-testing-updates
|
99
|
-
*/
|
100
|
-
declare function unmount(options?: {
|
101
|
-
log: boolean;
|
102
|
-
}): void;
|
103
|
-
|
104
|
-
/**
|
105
|
-
* Mounts a React hook function in a test component for testing.
|
106
|
-
* Removed as of Cypress 11.0.0.
|
107
|
-
* @see https://on.cypress.io/migration-11-0-0-component-testing-updates
|
108
|
-
*/
|
109
|
-
declare const mountHook: <T>(hookFn: (...args: any[]) => T) => void;
|
110
93
|
|
111
|
-
export { InternalMountOptions, MountOptions, MountReactComponentOptions, MountReturn, UnmountArgs, createMount, getContainerEl, makeMountFn, makeUnmountFn, mount
|
94
|
+
export { InternalMountOptions, MountOptions, MountReactComponentOptions, MountReturn, UnmountArgs, createMount, getContainerEl, makeMountFn, makeUnmountFn, mount };
|
package/react/react/package.json
CHANGED
@@ -17,25 +17,26 @@
|
|
17
17
|
},
|
18
18
|
"devDependencies": {
|
19
19
|
"@cypress/mount-utils": "0.0.0-development",
|
20
|
-
"@types/semver": "7.5.
|
21
|
-
"@vitejs/plugin-react": "4.3.
|
22
|
-
"axios": "
|
20
|
+
"@types/semver": "7.5.8",
|
21
|
+
"@vitejs/plugin-react": "4.3.3",
|
22
|
+
"axios": "1.7.7",
|
23
23
|
"cypress": "0.0.0-development",
|
24
|
-
"prop-types": "15.
|
25
|
-
"react": "
|
26
|
-
"react-dom": "
|
27
|
-
"react-router": "6.
|
28
|
-
"react-router-dom": "6.
|
24
|
+
"prop-types": "15.8.1",
|
25
|
+
"react": "18.3.1",
|
26
|
+
"react-dom": "18.3.1",
|
27
|
+
"react-router": "6.28.0",
|
28
|
+
"react-router-dom": "6.28.0",
|
29
29
|
"semver": "^7.5.3",
|
30
30
|
"typescript": "~5.4.5",
|
31
|
-
"vite": "5.
|
31
|
+
"vite": "5.4.10",
|
32
32
|
"vite-plugin-require-transform": "1.0.12"
|
33
33
|
},
|
34
34
|
"peerDependencies": {
|
35
|
-
"@types/react": "^
|
35
|
+
"@types/react": "^18 || ^19",
|
36
|
+
"@types/react-dom": "^18 || ^19",
|
36
37
|
"cypress": "*",
|
37
|
-
"react": "
|
38
|
-
"react-dom": "
|
38
|
+
"react": "^18 || ^19",
|
39
|
+
"react-dom": "^18 || ^19"
|
39
40
|
},
|
40
41
|
"files": [
|
41
42
|
"dist"
|
@@ -90,9 +91,6 @@
|
|
90
91
|
"nx": {
|
91
92
|
"targets": {
|
92
93
|
"build": {
|
93
|
-
"dependsOn": [
|
94
|
-
"!@cypress/react18:build"
|
95
|
-
],
|
96
94
|
"outputs": [
|
97
95
|
"{workspaceRoot}/cli/react",
|
98
96
|
"{projectRoot}/dist"
|
package/svelte/README.md
CHANGED
@@ -1,8 +1,12 @@
|
|
1
1
|
# @cypress/svelte
|
2
2
|
|
3
|
-
Mount Svelte components in the open source [Cypress.io](https://www.cypress.io/) test runner
|
3
|
+
Mount Svelte components in the open source [Cypress.io](https://www.cypress.io/) test runner
|
4
4
|
|
5
|
-
> **Note:** This package is bundled with the `cypress` package and should not need to be installed separately. See the [Svelte Component Testing Docs](https://docs.cypress.io/guides/component-testing/svelte/overview) for mounting Svelte components. Installing and importing `mount` from `@cypress/svelte` should only be done for advanced use-cases.
|
5
|
+
> **Note:** This package is bundled with the `cypress` package and should not need to be installed separately. See the [Svelte Component Testing Docs](https://docs.cypress.io/guides/component-testing/svelte/overview) for mounting Svelte components. Installing and importing `mount` from `@cypress/svelte` should only be done for advanced use-cases or in the case you may require an older or non supported version of svelte.
|
6
|
+
|
7
|
+
## Requirements
|
8
|
+
|
9
|
+
- Svelte 5+ (Cypress 13 and under supports Svelte 4 and under)
|
6
10
|
|
7
11
|
## Development
|
8
12
|
|
@@ -1,12 +1,14 @@
|
|
1
1
|
|
2
2
|
/**
|
3
3
|
* @cypress/svelte v0.0.0-development
|
4
|
-
* (c)
|
4
|
+
* (c) 2025 Cypress.io
|
5
5
|
* Released under the MIT License
|
6
6
|
*/
|
7
7
|
|
8
8
|
'use strict';
|
9
9
|
|
10
|
+
var svelte = require('svelte');
|
11
|
+
|
10
12
|
const ROOT_SELECTOR = '[data-cy-root]';
|
11
13
|
/**
|
12
14
|
* Gets the root element used to mount the component.
|
@@ -20,13 +22,6 @@ const getContainerEl = () => {
|
|
20
22
|
}
|
21
23
|
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.`);
|
22
24
|
};
|
23
|
-
function checkForRemovedStyleOptions(mountingOptions) {
|
24
|
-
for (const key of ['cssFile', 'cssFiles', 'style', 'styles', 'stylesheet', 'stylesheets']) {
|
25
|
-
if (mountingOptions[key]) {
|
26
|
-
Cypress.utils.throwErrByPath('mount.removed_style_mounting_options', key);
|
27
|
-
}
|
28
|
-
}
|
29
|
-
}
|
30
25
|
/**
|
31
26
|
* Utility function to register CT side effects and run cleanup code during the "test:before:run" Cypress hook
|
32
27
|
* @param optionalCallback Callback to be called before the next test runs
|
@@ -59,7 +54,9 @@ function setupHooks(optionalCallback) {
|
|
59
54
|
const DEFAULT_COMP_NAME = 'unknown';
|
60
55
|
let componentInstance;
|
61
56
|
const cleanup = () => {
|
62
|
-
|
57
|
+
if (componentInstance) {
|
58
|
+
svelte.unmount(componentInstance);
|
59
|
+
}
|
63
60
|
};
|
64
61
|
// Extract the component name from the object passed to mount
|
65
62
|
const getComponentDisplayName = (Component) => {
|
@@ -72,7 +69,7 @@ const getComponentDisplayName = (Component) => {
|
|
72
69
|
/**
|
73
70
|
* Mounts a Svelte component inside the Cypress browser
|
74
71
|
*
|
75
|
-
* @param {
|
72
|
+
* @param {Record<string, any>} Component Svelte component being mounted
|
76
73
|
* @param {MountReturn<T extends SvelteComponent>} options options to customize the component being mounted
|
77
74
|
* @returns Cypress.Chainable<MountReturn>
|
78
75
|
*
|
@@ -88,13 +85,16 @@ const getComponentDisplayName = (Component) => {
|
|
88
85
|
* @see {@link https://on.cypress.io/mounting-svelte} for more details.
|
89
86
|
*/
|
90
87
|
function mount(Component, options = {}) {
|
91
|
-
|
88
|
+
// In Svelte 5, the component name is no longer easily discoverable and logs as "wrapper"
|
89
|
+
// so we default the logging of it to false as it doesn't provide a lot of value
|
90
|
+
options.log = options.log || false;
|
92
91
|
return cy.then(() => {
|
93
92
|
// Remove last mounted component if cy.mount is called more than once in a test
|
94
93
|
cleanup();
|
95
94
|
const target = getContainerEl();
|
96
95
|
const ComponentConstructor = (Component.default || Component);
|
97
|
-
|
96
|
+
// @see https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes
|
97
|
+
componentInstance = svelte.mount(ComponentConstructor, Object.assign({ target }, options));
|
98
98
|
// by waiting, we are delaying test execution for the next tick of event loop
|
99
99
|
// and letting hooks and component lifecycle methods to execute mount
|
100
100
|
return cy.wait(0, { log: false }).then(() => {
|
@@ -1,10 +1,12 @@
|
|
1
1
|
|
2
2
|
/**
|
3
3
|
* @cypress/svelte v0.0.0-development
|
4
|
-
* (c)
|
4
|
+
* (c) 2025 Cypress.io
|
5
5
|
* Released under the MIT License
|
6
6
|
*/
|
7
7
|
|
8
|
+
import { mount as mount$1, unmount } from 'svelte';
|
9
|
+
|
8
10
|
const ROOT_SELECTOR = '[data-cy-root]';
|
9
11
|
/**
|
10
12
|
* Gets the root element used to mount the component.
|
@@ -18,13 +20,6 @@ const getContainerEl = () => {
|
|
18
20
|
}
|
19
21
|
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.`);
|
20
22
|
};
|
21
|
-
function checkForRemovedStyleOptions(mountingOptions) {
|
22
|
-
for (const key of ['cssFile', 'cssFiles', 'style', 'styles', 'stylesheet', 'stylesheets']) {
|
23
|
-
if (mountingOptions[key]) {
|
24
|
-
Cypress.utils.throwErrByPath('mount.removed_style_mounting_options', key);
|
25
|
-
}
|
26
|
-
}
|
27
|
-
}
|
28
23
|
/**
|
29
24
|
* Utility function to register CT side effects and run cleanup code during the "test:before:run" Cypress hook
|
30
25
|
* @param optionalCallback Callback to be called before the next test runs
|
@@ -57,7 +52,9 @@ function setupHooks(optionalCallback) {
|
|
57
52
|
const DEFAULT_COMP_NAME = 'unknown';
|
58
53
|
let componentInstance;
|
59
54
|
const cleanup = () => {
|
60
|
-
|
55
|
+
if (componentInstance) {
|
56
|
+
unmount(componentInstance);
|
57
|
+
}
|
61
58
|
};
|
62
59
|
// Extract the component name from the object passed to mount
|
63
60
|
const getComponentDisplayName = (Component) => {
|
@@ -70,7 +67,7 @@ const getComponentDisplayName = (Component) => {
|
|
70
67
|
/**
|
71
68
|
* Mounts a Svelte component inside the Cypress browser
|
72
69
|
*
|
73
|
-
* @param {
|
70
|
+
* @param {Record<string, any>} Component Svelte component being mounted
|
74
71
|
* @param {MountReturn<T extends SvelteComponent>} options options to customize the component being mounted
|
75
72
|
* @returns Cypress.Chainable<MountReturn>
|
76
73
|
*
|
@@ -86,13 +83,16 @@ const getComponentDisplayName = (Component) => {
|
|
86
83
|
* @see {@link https://on.cypress.io/mounting-svelte} for more details.
|
87
84
|
*/
|
88
85
|
function mount(Component, options = {}) {
|
89
|
-
|
86
|
+
// In Svelte 5, the component name is no longer easily discoverable and logs as "wrapper"
|
87
|
+
// so we default the logging of it to false as it doesn't provide a lot of value
|
88
|
+
options.log = options.log || false;
|
90
89
|
return cy.then(() => {
|
91
90
|
// Remove last mounted component if cy.mount is called more than once in a test
|
92
91
|
cleanup();
|
93
92
|
const target = getContainerEl();
|
94
93
|
const ComponentConstructor = (Component.default || Component);
|
95
|
-
|
94
|
+
// @see https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes
|
95
|
+
componentInstance = mount$1(ComponentConstructor, Object.assign({ target }, options));
|
96
96
|
// by waiting, we are delaying test execution for the next tick of event loop
|
97
97
|
// and letting hooks and component lifecycle methods to execute mount
|
98
98
|
return cy.wait(0, { log: false }).then(() => {
|
package/svelte/dist/index.d.ts
CHANGED
@@ -1,187 +1,14 @@
|
|
1
1
|
/// <reference types="cypress" />
|
2
2
|
|
3
|
-
|
4
|
-
export { SvelteComponentDev as default } from 'svelte/internal';
|
5
|
-
}
|
6
|
-
|
7
|
-
/**
|
8
|
-
* INTERNAL, DO NOT USE. Code may change at any time.
|
9
|
-
*/
|
10
|
-
interface Fragment {
|
11
|
-
key: string | null;
|
12
|
-
first: null;
|
13
|
-
c: () => void;
|
14
|
-
l: (nodes: any) => void;
|
15
|
-
h: () => void;
|
16
|
-
m: (target: HTMLElement, anchor: any) => void;
|
17
|
-
p: (ctx: any, dirty: any) => void;
|
18
|
-
r: () => void;
|
19
|
-
f: () => void;
|
20
|
-
a: () => void;
|
21
|
-
i: (local: any) => void;
|
22
|
-
o: (local: any) => void;
|
23
|
-
d: (detaching: 0 | 1) => void;
|
24
|
-
}
|
25
|
-
interface T$$ {
|
26
|
-
dirty: number[];
|
27
|
-
ctx: null | any;
|
28
|
-
bound: any;
|
29
|
-
update: () => void;
|
30
|
-
callbacks: any;
|
31
|
-
after_update: any[];
|
32
|
-
props: Record<string, 0 | string>;
|
33
|
-
fragment: null | false | Fragment;
|
34
|
-
not_equal: any;
|
35
|
-
before_update: any[];
|
36
|
-
context: Map<any, any>;
|
37
|
-
on_mount: any[];
|
38
|
-
on_destroy: any[];
|
39
|
-
skip_bound: boolean;
|
40
|
-
on_disconnect: any[];
|
41
|
-
root: Element | ShadowRoot;
|
42
|
-
}
|
43
|
-
/**
|
44
|
-
* Base class for Svelte components. Used when dev=false.
|
45
|
-
*/
|
46
|
-
declare class SvelteComponent {
|
47
|
-
$$: T$$;
|
48
|
-
$$set?: ($$props: any) => void;
|
49
|
-
$destroy(): void;
|
50
|
-
$on(type: any, callback: any): () => void;
|
51
|
-
$set($$props: any): void;
|
52
|
-
}
|
53
|
-
|
54
|
-
declare type Props = Record<string, any>;
|
55
|
-
interface ComponentConstructorOptions<Props extends Record<string, any> = Record<string, any>> {
|
56
|
-
target: Element | ShadowRoot;
|
57
|
-
anchor?: Element;
|
58
|
-
props?: Props;
|
59
|
-
context?: Map<any, any>;
|
60
|
-
hydrate?: boolean;
|
61
|
-
intro?: boolean;
|
62
|
-
$$inline?: boolean;
|
63
|
-
}
|
64
|
-
interface SvelteComponentDev$1 {
|
65
|
-
$set(props?: Props): void;
|
66
|
-
$on(event: string, callback: (event: any) => void): () => void;
|
67
|
-
$destroy(): void;
|
68
|
-
[accessor: string]: any;
|
69
|
-
}
|
70
|
-
/**
|
71
|
-
* Base class for Svelte components with some minor dev-enhancements. Used when dev=true.
|
72
|
-
*/
|
73
|
-
declare class SvelteComponentDev$1 extends SvelteComponent {
|
74
|
-
/**
|
75
|
-
* @private
|
76
|
-
* For type checking capabilities only.
|
77
|
-
* Does not exist at runtime.
|
78
|
-
* ### DO NOT USE!
|
79
|
-
*/
|
80
|
-
$$prop_def: Props;
|
81
|
-
/**
|
82
|
-
* @private
|
83
|
-
* For type checking capabilities only.
|
84
|
-
* Does not exist at runtime.
|
85
|
-
* ### DO NOT USE!
|
86
|
-
*/
|
87
|
-
$$events_def: any;
|
88
|
-
/**
|
89
|
-
* @private
|
90
|
-
* For type checking capabilities only.
|
91
|
-
* Does not exist at runtime.
|
92
|
-
* ### DO NOT USE!
|
93
|
-
*/
|
94
|
-
$$slot_def: any;
|
95
|
-
constructor(options: ComponentConstructorOptions);
|
96
|
-
$capture_state(): void;
|
97
|
-
$inject_state(): void;
|
98
|
-
}
|
99
|
-
interface SvelteComponentTyped<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any> {
|
100
|
-
$set(props?: Partial<Props>): void;
|
101
|
-
$on<K extends Extract<keyof Events, string>>(type: K, callback: (e: Events[K]) => void): () => void;
|
102
|
-
$destroy(): void;
|
103
|
-
[accessor: string]: any;
|
104
|
-
}
|
105
|
-
/**
|
106
|
-
* Base class to create strongly typed Svelte components.
|
107
|
-
* This only exists for typing purposes and should be used in `.d.ts` files.
|
108
|
-
*
|
109
|
-
* ### Example:
|
110
|
-
*
|
111
|
-
* You have component library on npm called `component-library`, from which
|
112
|
-
* you export a component called `MyComponent`. For Svelte+TypeScript users,
|
113
|
-
* you want to provide typings. Therefore you create a `index.d.ts`:
|
114
|
-
* ```ts
|
115
|
-
* import { SvelteComponentTyped } from "svelte";
|
116
|
-
* export class MyComponent extends SvelteComponentTyped<{foo: string}> {}
|
117
|
-
* ```
|
118
|
-
* Typing this makes it possible for IDEs like VS Code with the Svelte extension
|
119
|
-
* to provide intellisense and to use the component like this in a Svelte file
|
120
|
-
* with TypeScript:
|
121
|
-
* ```svelte
|
122
|
-
* <script lang="ts">
|
123
|
-
* import { MyComponent } from "component-library";
|
124
|
-
* </script>
|
125
|
-
* <MyComponent foo={'bar'} />
|
126
|
-
* ```
|
127
|
-
*
|
128
|
-
* #### Why not make this part of `SvelteComponent(Dev)`?
|
129
|
-
* Because
|
130
|
-
* ```ts
|
131
|
-
* class ASubclassOfSvelteComponent extends SvelteComponent<{foo: string}> {}
|
132
|
-
* const component: typeof SvelteComponent = ASubclassOfSvelteComponent;
|
133
|
-
* ```
|
134
|
-
* will throw a type error, so we need to separate the more strictly typed class.
|
135
|
-
*/
|
136
|
-
declare class SvelteComponentTyped<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any> extends SvelteComponentDev$1 {
|
137
|
-
/**
|
138
|
-
* @private
|
139
|
-
* For type checking capabilities only.
|
140
|
-
* Does not exist at runtime.
|
141
|
-
* ### DO NOT USE!
|
142
|
-
*/
|
143
|
-
$$prop_def: Props;
|
144
|
-
/**
|
145
|
-
* @private
|
146
|
-
* For type checking capabilities only.
|
147
|
-
* Does not exist at runtime.
|
148
|
-
* ### DO NOT USE!
|
149
|
-
*/
|
150
|
-
$$events_def: Events;
|
151
|
-
/**
|
152
|
-
* @private
|
153
|
-
* For type checking capabilities only.
|
154
|
-
* Does not exist at runtime.
|
155
|
-
* ### DO NOT USE!
|
156
|
-
*/
|
157
|
-
$$slot_def: Slots;
|
158
|
-
constructor(options: ComponentConstructorOptions<Props>);
|
159
|
-
}
|
160
|
-
/**
|
161
|
-
* Convenience type to get the props the given component expects. Example:
|
162
|
-
* ```html
|
163
|
-
* <script lang="ts">
|
164
|
-
* import type { ComponentProps } from 'svelte';
|
165
|
-
* import Component from './Component.svelte';
|
166
|
-
*
|
167
|
-
* const props: ComponentProps<Component> = { foo: 'bar' }; // Errors if these aren't the correct props
|
168
|
-
* </script>
|
169
|
-
* ```
|
170
|
-
*/
|
171
|
-
declare type ComponentProps<Component extends SvelteComponent> = Component extends SvelteComponentTyped<infer Props> ? Props : never;
|
3
|
+
import { Component, MountOptions } from 'svelte';
|
172
4
|
|
173
|
-
|
174
|
-
|
175
|
-
interface MountOptions<T extends SvelteComponentDev$1> extends SvelteComponentOptions<T> {
|
176
|
-
log?: boolean;
|
177
|
-
}
|
178
|
-
interface MountReturn<T extends SvelteComponentDev$1> {
|
179
|
-
component: T;
|
5
|
+
interface MountReturn {
|
6
|
+
component: Record<string, any>;
|
180
7
|
}
|
181
8
|
/**
|
182
9
|
* Mounts a Svelte component inside the Cypress browser
|
183
10
|
*
|
184
|
-
* @param {
|
11
|
+
* @param {Record<string, any>} Component Svelte component being mounted
|
185
12
|
* @param {MountReturn<T extends SvelteComponent>} options options to customize the component being mounted
|
186
13
|
* @returns Cypress.Chainable<MountReturn>
|
187
14
|
*
|
@@ -196,6 +23,8 @@ interface MountReturn<T extends SvelteComponentDev$1> {
|
|
196
23
|
*
|
197
24
|
* @see {@link https://on.cypress.io/mounting-svelte} for more details.
|
198
25
|
*/
|
199
|
-
declare function mount
|
26
|
+
declare function mount(Component: Component<Record<string, any>, Record<string, any>, any>, options?: Omit<MountOptions, 'target'> & {
|
27
|
+
log?: boolean;
|
28
|
+
}): Cypress.Chainable<MountReturn>;
|
200
29
|
|
201
|
-
export {
|
30
|
+
export { MountReturn, mount };
|
package/svelte/package.json
CHANGED
@@ -12,12 +12,12 @@
|
|
12
12
|
},
|
13
13
|
"devDependencies": {
|
14
14
|
"@cypress/mount-utils": "0.0.0-development",
|
15
|
-
"svelte": "^
|
15
|
+
"svelte": "^5.4.0",
|
16
16
|
"typescript": "~5.4.5"
|
17
17
|
},
|
18
18
|
"peerDependencies": {
|
19
19
|
"cypress": ">=10.6.0",
|
20
|
-
"svelte": ">=
|
20
|
+
"svelte": ">=5.0.0"
|
21
21
|
},
|
22
22
|
"files": [
|
23
23
|
"dist/**/*"
|
package/svelte/svelte/README.md
CHANGED
@@ -1,8 +1,12 @@
|
|
1
1
|
# @cypress/svelte
|
2
2
|
|
3
|
-
Mount Svelte components in the open source [Cypress.io](https://www.cypress.io/) test runner
|
3
|
+
Mount Svelte components in the open source [Cypress.io](https://www.cypress.io/) test runner
|
4
4
|
|
5
|
-
> **Note:** This package is bundled with the `cypress` package and should not need to be installed separately. See the [Svelte Component Testing Docs](https://docs.cypress.io/guides/component-testing/svelte/overview) for mounting Svelte components. Installing and importing `mount` from `@cypress/svelte` should only be done for advanced use-cases.
|
5
|
+
> **Note:** This package is bundled with the `cypress` package and should not need to be installed separately. See the [Svelte Component Testing Docs](https://docs.cypress.io/guides/component-testing/svelte/overview) for mounting Svelte components. Installing and importing `mount` from `@cypress/svelte` should only be done for advanced use-cases or in the case you may require an older or non supported version of svelte.
|
6
|
+
|
7
|
+
## Requirements
|
8
|
+
|
9
|
+
- Svelte 5+ (Cypress 13 and under supports Svelte 4 and under)
|
6
10
|
|
7
11
|
## Development
|
8
12
|
|
@@ -1,12 +1,14 @@
|
|
1
1
|
|
2
2
|
/**
|
3
3
|
* @cypress/svelte v0.0.0-development
|
4
|
-
* (c)
|
4
|
+
* (c) 2025 Cypress.io
|
5
5
|
* Released under the MIT License
|
6
6
|
*/
|
7
7
|
|
8
8
|
'use strict';
|
9
9
|
|
10
|
+
var svelte = require('svelte');
|
11
|
+
|
10
12
|
const ROOT_SELECTOR = '[data-cy-root]';
|
11
13
|
/**
|
12
14
|
* Gets the root element used to mount the component.
|
@@ -20,13 +22,6 @@ const getContainerEl = () => {
|
|
20
22
|
}
|
21
23
|
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.`);
|
22
24
|
};
|
23
|
-
function checkForRemovedStyleOptions(mountingOptions) {
|
24
|
-
for (const key of ['cssFile', 'cssFiles', 'style', 'styles', 'stylesheet', 'stylesheets']) {
|
25
|
-
if (mountingOptions[key]) {
|
26
|
-
Cypress.utils.throwErrByPath('mount.removed_style_mounting_options', key);
|
27
|
-
}
|
28
|
-
}
|
29
|
-
}
|
30
25
|
/**
|
31
26
|
* Utility function to register CT side effects and run cleanup code during the "test:before:run" Cypress hook
|
32
27
|
* @param optionalCallback Callback to be called before the next test runs
|
@@ -59,7 +54,9 @@ function setupHooks(optionalCallback) {
|
|
59
54
|
const DEFAULT_COMP_NAME = 'unknown';
|
60
55
|
let componentInstance;
|
61
56
|
const cleanup = () => {
|
62
|
-
|
57
|
+
if (componentInstance) {
|
58
|
+
svelte.unmount(componentInstance);
|
59
|
+
}
|
63
60
|
};
|
64
61
|
// Extract the component name from the object passed to mount
|
65
62
|
const getComponentDisplayName = (Component) => {
|
@@ -72,7 +69,7 @@ const getComponentDisplayName = (Component) => {
|
|
72
69
|
/**
|
73
70
|
* Mounts a Svelte component inside the Cypress browser
|
74
71
|
*
|
75
|
-
* @param {
|
72
|
+
* @param {Record<string, any>} Component Svelte component being mounted
|
76
73
|
* @param {MountReturn<T extends SvelteComponent>} options options to customize the component being mounted
|
77
74
|
* @returns Cypress.Chainable<MountReturn>
|
78
75
|
*
|
@@ -88,13 +85,16 @@ const getComponentDisplayName = (Component) => {
|
|
88
85
|
* @see {@link https://on.cypress.io/mounting-svelte} for more details.
|
89
86
|
*/
|
90
87
|
function mount(Component, options = {}) {
|
91
|
-
|
88
|
+
// In Svelte 5, the component name is no longer easily discoverable and logs as "wrapper"
|
89
|
+
// so we default the logging of it to false as it doesn't provide a lot of value
|
90
|
+
options.log = options.log || false;
|
92
91
|
return cy.then(() => {
|
93
92
|
// Remove last mounted component if cy.mount is called more than once in a test
|
94
93
|
cleanup();
|
95
94
|
const target = getContainerEl();
|
96
95
|
const ComponentConstructor = (Component.default || Component);
|
97
|
-
|
96
|
+
// @see https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes
|
97
|
+
componentInstance = svelte.mount(ComponentConstructor, Object.assign({ target }, options));
|
98
98
|
// by waiting, we are delaying test execution for the next tick of event loop
|
99
99
|
// and letting hooks and component lifecycle methods to execute mount
|
100
100
|
return cy.wait(0, { log: false }).then(() => {
|
@@ -1,10 +1,12 @@
|
|
1
1
|
|
2
2
|
/**
|
3
3
|
* @cypress/svelte v0.0.0-development
|
4
|
-
* (c)
|
4
|
+
* (c) 2025 Cypress.io
|
5
5
|
* Released under the MIT License
|
6
6
|
*/
|
7
7
|
|
8
|
+
import { mount as mount$1, unmount } from 'svelte';
|
9
|
+
|
8
10
|
const ROOT_SELECTOR = '[data-cy-root]';
|
9
11
|
/**
|
10
12
|
* Gets the root element used to mount the component.
|
@@ -18,13 +20,6 @@ const getContainerEl = () => {
|
|
18
20
|
}
|
19
21
|
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.`);
|
20
22
|
};
|
21
|
-
function checkForRemovedStyleOptions(mountingOptions) {
|
22
|
-
for (const key of ['cssFile', 'cssFiles', 'style', 'styles', 'stylesheet', 'stylesheets']) {
|
23
|
-
if (mountingOptions[key]) {
|
24
|
-
Cypress.utils.throwErrByPath('mount.removed_style_mounting_options', key);
|
25
|
-
}
|
26
|
-
}
|
27
|
-
}
|
28
23
|
/**
|
29
24
|
* Utility function to register CT side effects and run cleanup code during the "test:before:run" Cypress hook
|
30
25
|
* @param optionalCallback Callback to be called before the next test runs
|
@@ -57,7 +52,9 @@ function setupHooks(optionalCallback) {
|
|
57
52
|
const DEFAULT_COMP_NAME = 'unknown';
|
58
53
|
let componentInstance;
|
59
54
|
const cleanup = () => {
|
60
|
-
|
55
|
+
if (componentInstance) {
|
56
|
+
unmount(componentInstance);
|
57
|
+
}
|
61
58
|
};
|
62
59
|
// Extract the component name from the object passed to mount
|
63
60
|
const getComponentDisplayName = (Component) => {
|
@@ -70,7 +67,7 @@ const getComponentDisplayName = (Component) => {
|
|
70
67
|
/**
|
71
68
|
* Mounts a Svelte component inside the Cypress browser
|
72
69
|
*
|
73
|
-
* @param {
|
70
|
+
* @param {Record<string, any>} Component Svelte component being mounted
|
74
71
|
* @param {MountReturn<T extends SvelteComponent>} options options to customize the component being mounted
|
75
72
|
* @returns Cypress.Chainable<MountReturn>
|
76
73
|
*
|
@@ -86,13 +83,16 @@ const getComponentDisplayName = (Component) => {
|
|
86
83
|
* @see {@link https://on.cypress.io/mounting-svelte} for more details.
|
87
84
|
*/
|
88
85
|
function mount(Component, options = {}) {
|
89
|
-
|
86
|
+
// In Svelte 5, the component name is no longer easily discoverable and logs as "wrapper"
|
87
|
+
// so we default the logging of it to false as it doesn't provide a lot of value
|
88
|
+
options.log = options.log || false;
|
90
89
|
return cy.then(() => {
|
91
90
|
// Remove last mounted component if cy.mount is called more than once in a test
|
92
91
|
cleanup();
|
93
92
|
const target = getContainerEl();
|
94
93
|
const ComponentConstructor = (Component.default || Component);
|
95
|
-
|
94
|
+
// @see https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes
|
95
|
+
componentInstance = mount$1(ComponentConstructor, Object.assign({ target }, options));
|
96
96
|
// by waiting, we are delaying test execution for the next tick of event loop
|
97
97
|
// and letting hooks and component lifecycle methods to execute mount
|
98
98
|
return cy.wait(0, { log: false }).then(() => {
|