cypress 10.6.0 → 10.7.0
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/CHANGELOG.md +31 -0
- package/angular/README.md +43 -112
- package/angular/dist/index.js +8 -6
- package/angular/dist/mount.d.ts +1 -0
- package/angular/package.json +6 -8
- package/mount-utils/package.json +5 -1
- package/package.json +10 -4
- package/react/dist/createMount.d.ts +5 -2
- package/react/dist/cypress-react.cjs.js +80 -115
- package/react/dist/cypress-react.esm-bundler.js +66 -101
- package/react/dist/mount.d.ts +1 -0
- package/react/dist/mountHook.d.ts +1 -0
- package/react/dist/types.d.ts +1 -0
- package/react/package.json +2 -6
- package/react18/dist/cypress-react.cjs.js +59 -88
- package/react18/dist/cypress-react.esm-bundler.js +45 -74
- package/react18/dist/index.d.ts +1 -0
- package/react18/package.json +2 -2
- package/svelte/CHANGELOG.md +0 -0
- package/svelte/README.md +83 -0
- package/svelte/dist/cypress-svelte.cjs.js +213 -0
- package/svelte/dist/cypress-svelte.esm-bundler.js +209 -0
- package/svelte/dist/index.d.ts +1 -0
- package/svelte/dist/mount.d.ts +30 -0
- package/svelte/package.json +43 -0
- package/types/cypress-type-helpers.d.ts +3 -1
- package/types/cypress.d.ts +43 -4
- package/vue/dist/cypress-vue.cjs.js +30 -38
- package/vue/dist/cypress-vue.esm-bundler.js +30 -38
- package/vue/dist/index.d.ts +1 -0
- package/vue/package.json +2 -7
- package/vue2/dist/cypress-vue2.cjs.js +53 -84
- package/vue2/dist/cypress-vue2.esm-bundler.js +53 -84
- package/vue2/dist/index.d.ts +1 -0
- package/vue2/package.json +2 -5
- package/vue2/dist/cypress-vue2.browser.js +0 -20197
@@ -0,0 +1,209 @@
|
|
1
|
+
|
2
|
+
/**
|
3
|
+
* @cypress/svelte v0.0.0-development
|
4
|
+
* (c) 2022 Cypress.io
|
5
|
+
* Released under the MIT License
|
6
|
+
*/
|
7
|
+
|
8
|
+
const ROOT_SELECTOR = '[data-cy-root]';
|
9
|
+
const getContainerEl = () => {
|
10
|
+
const el = document.querySelector(ROOT_SELECTOR);
|
11
|
+
if (el) {
|
12
|
+
return el;
|
13
|
+
}
|
14
|
+
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.`);
|
15
|
+
};
|
16
|
+
/**
|
17
|
+
* Remove any style or extra link elements from the iframe placeholder
|
18
|
+
* left from any previous test
|
19
|
+
*
|
20
|
+
*/
|
21
|
+
function cleanupStyles() {
|
22
|
+
const styles = document.body.querySelectorAll('[data-cy=injected-style-tag]');
|
23
|
+
styles.forEach((styleElement) => {
|
24
|
+
if (styleElement.parentElement) {
|
25
|
+
styleElement.parentElement.removeChild(styleElement);
|
26
|
+
}
|
27
|
+
});
|
28
|
+
const links = document.body.querySelectorAll('[data-cy=injected-stylesheet]');
|
29
|
+
links.forEach((link) => {
|
30
|
+
if (link.parentElement) {
|
31
|
+
link.parentElement.removeChild(link);
|
32
|
+
}
|
33
|
+
});
|
34
|
+
}
|
35
|
+
/**
|
36
|
+
* Insert links to external style resources.
|
37
|
+
*/
|
38
|
+
function insertStylesheets(stylesheets, document, el) {
|
39
|
+
stylesheets.forEach((href) => {
|
40
|
+
const link = document.createElement('link');
|
41
|
+
link.type = 'text/css';
|
42
|
+
link.rel = 'stylesheet';
|
43
|
+
link.href = href;
|
44
|
+
link.dataset.cy = 'injected-stylesheet';
|
45
|
+
document.body.insertBefore(link, el);
|
46
|
+
});
|
47
|
+
}
|
48
|
+
/**
|
49
|
+
* Inserts a single stylesheet element
|
50
|
+
*/
|
51
|
+
function insertStyles(styles, document, el) {
|
52
|
+
styles.forEach((style) => {
|
53
|
+
const styleElement = document.createElement('style');
|
54
|
+
styleElement.dataset.cy = 'injected-style-tag';
|
55
|
+
styleElement.appendChild(document.createTextNode(style));
|
56
|
+
document.body.insertBefore(styleElement, el);
|
57
|
+
});
|
58
|
+
}
|
59
|
+
function insertSingleCssFile(cssFilename, document, el, log) {
|
60
|
+
return cy.readFile(cssFilename, { log }).then((css) => {
|
61
|
+
const style = document.createElement('style');
|
62
|
+
style.appendChild(document.createTextNode(css));
|
63
|
+
document.body.insertBefore(style, el);
|
64
|
+
});
|
65
|
+
}
|
66
|
+
/**
|
67
|
+
* Reads the given CSS file from local file system
|
68
|
+
* and adds the loaded style text as an element.
|
69
|
+
*/
|
70
|
+
function insertLocalCssFiles(cssFilenames, document, el, log) {
|
71
|
+
return Cypress.Promise.mapSeries(cssFilenames, (cssFilename) => {
|
72
|
+
return insertSingleCssFile(cssFilename, document, el, log);
|
73
|
+
});
|
74
|
+
}
|
75
|
+
/**
|
76
|
+
* Injects custom style text or CSS file or 3rd party style resources
|
77
|
+
* into the given document.
|
78
|
+
*/
|
79
|
+
const injectStylesBeforeElement = (options, document, el) => {
|
80
|
+
if (!el)
|
81
|
+
return;
|
82
|
+
// first insert all stylesheets as Link elements
|
83
|
+
let stylesheets = [];
|
84
|
+
if (typeof options.stylesheet === 'string') {
|
85
|
+
stylesheets.push(options.stylesheet);
|
86
|
+
}
|
87
|
+
else if (Array.isArray(options.stylesheet)) {
|
88
|
+
stylesheets = stylesheets.concat(options.stylesheet);
|
89
|
+
}
|
90
|
+
if (typeof options.stylesheets === 'string') {
|
91
|
+
options.stylesheets = [options.stylesheets];
|
92
|
+
}
|
93
|
+
if (options.stylesheets) {
|
94
|
+
stylesheets = stylesheets.concat(options.stylesheets);
|
95
|
+
}
|
96
|
+
insertStylesheets(stylesheets, document, el);
|
97
|
+
// insert any styles as <style>...</style> elements
|
98
|
+
let styles = [];
|
99
|
+
if (typeof options.style === 'string') {
|
100
|
+
styles.push(options.style);
|
101
|
+
}
|
102
|
+
else if (Array.isArray(options.style)) {
|
103
|
+
styles = styles.concat(options.style);
|
104
|
+
}
|
105
|
+
if (typeof options.styles === 'string') {
|
106
|
+
styles.push(options.styles);
|
107
|
+
}
|
108
|
+
else if (Array.isArray(options.styles)) {
|
109
|
+
styles = styles.concat(options.styles);
|
110
|
+
}
|
111
|
+
insertStyles(styles, document, el);
|
112
|
+
// now load any css files by path and add their content
|
113
|
+
// as <style>...</style> elements
|
114
|
+
let cssFiles = [];
|
115
|
+
if (typeof options.cssFile === 'string') {
|
116
|
+
cssFiles.push(options.cssFile);
|
117
|
+
}
|
118
|
+
else if (Array.isArray(options.cssFile)) {
|
119
|
+
cssFiles = cssFiles.concat(options.cssFile);
|
120
|
+
}
|
121
|
+
if (typeof options.cssFiles === 'string') {
|
122
|
+
cssFiles.push(options.cssFiles);
|
123
|
+
}
|
124
|
+
else if (Array.isArray(options.cssFiles)) {
|
125
|
+
cssFiles = cssFiles.concat(options.cssFiles);
|
126
|
+
}
|
127
|
+
return insertLocalCssFiles(cssFiles, document, el, options.log);
|
128
|
+
};
|
129
|
+
function setupHooks(optionalCallback) {
|
130
|
+
// Consumed by the framework "mount" libs. A user might register their own mount in the scaffolded 'commands.js'
|
131
|
+
// file that is imported by e2e and component support files by default. We don't want CT side effects to run when e2e
|
132
|
+
// testing so we early return.
|
133
|
+
// System test to verify CT side effects do not pollute e2e: system-tests/test/e2e_with_mount_import_spec.ts
|
134
|
+
if (Cypress.testingType !== 'component') {
|
135
|
+
return;
|
136
|
+
}
|
137
|
+
// When running component specs, we cannot allow "cy.visit"
|
138
|
+
// because it will wipe out our preparation work, and does not make much sense
|
139
|
+
// thus we overwrite "cy.visit" to throw an error
|
140
|
+
Cypress.Commands.overwrite('visit', () => {
|
141
|
+
throw new Error('cy.visit from a component spec is not allowed');
|
142
|
+
});
|
143
|
+
// @ts-ignore
|
144
|
+
Cypress.on('test:before:run', () => {
|
145
|
+
optionalCallback === null || optionalCallback === void 0 ? void 0 : optionalCallback();
|
146
|
+
cleanupStyles();
|
147
|
+
});
|
148
|
+
}
|
149
|
+
|
150
|
+
const DEFAULT_COMP_NAME = 'unknown';
|
151
|
+
let componentInstance;
|
152
|
+
const cleanup = () => {
|
153
|
+
componentInstance === null || componentInstance === void 0 ? void 0 : componentInstance.$destroy();
|
154
|
+
};
|
155
|
+
// Extract the component name from the object passed to mount
|
156
|
+
const getComponentDisplayName = (Component) => {
|
157
|
+
if (Component.name) {
|
158
|
+
const [_, match] = /Proxy\<(\w+)\>/.exec(Component.name) || [];
|
159
|
+
return match || Component.name;
|
160
|
+
}
|
161
|
+
return DEFAULT_COMP_NAME;
|
162
|
+
};
|
163
|
+
/**
|
164
|
+
* Mounts a Svelte component inside the Cypress browser
|
165
|
+
*
|
166
|
+
* @param {SvelteConstructor<T>} Component Svelte component being mounted
|
167
|
+
* @param {MountReturn<T extends SvelteComponent>} options options to customize the component being mounted
|
168
|
+
* @returns Cypress.Chainable<MountReturn>
|
169
|
+
*
|
170
|
+
* @example
|
171
|
+
* import Counter from './Counter.svelte'
|
172
|
+
* import { mount } from 'cypress/svelte'
|
173
|
+
*
|
174
|
+
* it('should render', () => {
|
175
|
+
* mount(Counter, { props: { count: 42 } })
|
176
|
+
* cy.get('button').contains(42)
|
177
|
+
* })
|
178
|
+
*/
|
179
|
+
function mount(Component, options = {}) {
|
180
|
+
return cy.then(() => {
|
181
|
+
const target = getContainerEl();
|
182
|
+
injectStylesBeforeElement(options, document, target);
|
183
|
+
const ComponentConstructor = (Component.default || Component);
|
184
|
+
componentInstance = new ComponentConstructor(Object.assign({ target }, options));
|
185
|
+
// by waiting, we are delaying test execution for the next tick of event loop
|
186
|
+
// and letting hooks and component lifecycle methods to execute mount
|
187
|
+
return cy.wait(0, { log: false }).then(() => {
|
188
|
+
if (options.log) {
|
189
|
+
const mountMessage = `<${getComponentDisplayName(Component)} ... />`;
|
190
|
+
Cypress.log({
|
191
|
+
name: 'mount',
|
192
|
+
message: [mountMessage],
|
193
|
+
}).snapshot('mounted').end();
|
194
|
+
}
|
195
|
+
})
|
196
|
+
.wrap({ component: componentInstance }, { log: false });
|
197
|
+
});
|
198
|
+
}
|
199
|
+
// Side effects from "import { mount } from '@cypress/<my-framework>'" are annoying, we should avoid doing this
|
200
|
+
// by creating an explicit function/import that the user can register in their 'component.js' support file,
|
201
|
+
// such as:
|
202
|
+
// import 'cypress/<my-framework>/support'
|
203
|
+
// or
|
204
|
+
// import { registerCT } from 'cypress/<my-framework>'
|
205
|
+
// registerCT()
|
206
|
+
// Note: This would be a breaking change
|
207
|
+
setupHooks(cleanup);
|
208
|
+
|
209
|
+
export { mount };
|
@@ -0,0 +1 @@
|
|
1
|
+
export * from './mount';
|
@@ -0,0 +1,30 @@
|
|
1
|
+
/// <reference types="cypress" />
|
2
|
+
/// <reference types="cypress" />
|
3
|
+
import { StyleOptions } from '@cypress/mount-utils';
|
4
|
+
import type { ComponentConstructorOptions, ComponentProps, SvelteComponent } from 'svelte';
|
5
|
+
declare type SvelteConstructor<T> = new (...args: any[]) => T;
|
6
|
+
declare type SvelteComponentOptions<T extends SvelteComponent> = Omit<ComponentConstructorOptions<ComponentProps<T>>, 'hydrate' | 'target' | '$$inline'>;
|
7
|
+
export interface MountOptions<T extends SvelteComponent> extends SvelteComponentOptions<T>, Partial<StyleOptions> {
|
8
|
+
log?: boolean;
|
9
|
+
}
|
10
|
+
export interface MountReturn<T extends SvelteComponent> {
|
11
|
+
component: T;
|
12
|
+
}
|
13
|
+
/**
|
14
|
+
* Mounts a Svelte component inside the Cypress browser
|
15
|
+
*
|
16
|
+
* @param {SvelteConstructor<T>} Component Svelte component being mounted
|
17
|
+
* @param {MountReturn<T extends SvelteComponent>} options options to customize the component being mounted
|
18
|
+
* @returns Cypress.Chainable<MountReturn>
|
19
|
+
*
|
20
|
+
* @example
|
21
|
+
* import Counter from './Counter.svelte'
|
22
|
+
* import { mount } from 'cypress/svelte'
|
23
|
+
*
|
24
|
+
* it('should render', () => {
|
25
|
+
* mount(Counter, { props: { count: 42 } })
|
26
|
+
* cy.get('button').contains(42)
|
27
|
+
* })
|
28
|
+
*/
|
29
|
+
export declare function mount<T extends SvelteComponent>(Component: SvelteConstructor<T>, options?: MountOptions<T>): Cypress.Chainable<MountReturn<T>>;
|
30
|
+
export {};
|
@@ -0,0 +1,43 @@
|
|
1
|
+
{
|
2
|
+
"name": "@cypress/svelte",
|
3
|
+
"version": "0.0.0-development",
|
4
|
+
"description": "Browser-based Component Testing for Svelte.js with Cypress.io 🧡",
|
5
|
+
"main": "dist/cypress-svelte.cjs.js",
|
6
|
+
"scripts": {
|
7
|
+
"prebuild": "rimraf dist",
|
8
|
+
"build": "rollup -c rollup.config.mjs",
|
9
|
+
"postbuild": "node ../../scripts/sync-exported-npm-with-cli.js",
|
10
|
+
"build-prod": "yarn build",
|
11
|
+
"check-ts": "tsc --noEmit"
|
12
|
+
},
|
13
|
+
"devDependencies": {
|
14
|
+
"@cypress/mount-utils": "0.0.0-development",
|
15
|
+
"svelte": "^3.49.0",
|
16
|
+
"typescript": "^4.7.4"
|
17
|
+
},
|
18
|
+
"peerDependencies": {
|
19
|
+
"cypress": ">=10.6.0",
|
20
|
+
"svelte": ">=3.0.0"
|
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/blob/master/npm/svelte/#readme",
|
32
|
+
"bugs": "https://github.com/cypress-io/cypress/issues/new?assignees=&labels=npm%3A%20%40cypress%2Fsvelte&template=1-bug-report.md&title=",
|
33
|
+
"keywords": [
|
34
|
+
"cypress",
|
35
|
+
"svelte",
|
36
|
+
"testing",
|
37
|
+
"component testing"
|
38
|
+
],
|
39
|
+
"module": "dist/cypress-svelte.esm-bundler.js",
|
40
|
+
"publishConfig": {
|
41
|
+
"access": "public"
|
42
|
+
}
|
43
|
+
}
|
package/types/cypress.d.ts
CHANGED
@@ -1,5 +1,6 @@
|
|
1
1
|
/// <reference path="./cypress-npm-api.d.ts" />
|
2
2
|
/// <reference path="./cypress-eventemitter.d.ts" />
|
3
|
+
/// <reference path="./cypress-type-helpers.d.ts" />
|
3
4
|
|
4
5
|
declare namespace Cypress {
|
5
6
|
type FileContents = string | any[] | object
|
@@ -2866,10 +2867,15 @@ declare namespace Cypress {
|
|
2866
2867
|
*/
|
2867
2868
|
experimentalModifyObstructiveThirdPartyCode: boolean
|
2868
2869
|
/**
|
2869
|
-
*
|
2870
|
+
* Enables AST-based JS/HTML rewriting. This may fix issues caused by the existing regex-based JS/HTML replacement algorithm.
|
2870
2871
|
* @default false
|
2871
2872
|
*/
|
2872
2873
|
experimentalSourceRewriting: boolean
|
2874
|
+
/**
|
2875
|
+
* Generate and save commands directly to your test suite by interacting with your app as an end user would.
|
2876
|
+
* @default false
|
2877
|
+
*/
|
2878
|
+
experimentalStudio: boolean
|
2873
2879
|
/**
|
2874
2880
|
* Number of times to retry a failed test.
|
2875
2881
|
* If a number is set, tests will retry in both runMode and openMode.
|
@@ -3047,19 +3053,32 @@ declare namespace Cypress {
|
|
3047
3053
|
|
3048
3054
|
type PickConfigOpt<T> = T extends keyof DefineDevServerConfig ? DefineDevServerConfig[T] : any
|
3049
3055
|
|
3056
|
+
interface AngularDevServerProjectConfig {
|
3057
|
+
root: string,
|
3058
|
+
sourceRoot: string,
|
3059
|
+
buildOptions: Record<string, any>
|
3060
|
+
}
|
3061
|
+
|
3050
3062
|
type DevServerFn<ComponentDevServerOpts = any> = (cypressDevServerConfig: DevServerConfig, devServerConfig: ComponentDevServerOpts) => ResolvedDevServerConfig | Promise<ResolvedDevServerConfig>
|
3051
3063
|
|
3052
3064
|
type DevServerConfigOptions = {
|
3053
3065
|
bundler: 'webpack'
|
3054
|
-
framework: 'react' | 'vue' | 'vue-cli' | 'nuxt' | 'create-react-app' | 'next' | '
|
3066
|
+
framework: 'react' | 'vue' | 'vue-cli' | 'nuxt' | 'create-react-app' | 'next' | 'svelte'
|
3055
3067
|
webpackConfig?: PickConfigOpt<'webpackConfig'>
|
3056
3068
|
} | {
|
3057
3069
|
bundler: 'vite'
|
3058
|
-
framework: 'react' | 'vue'
|
3070
|
+
framework: 'react' | 'vue' | 'svelte'
|
3059
3071
|
viteConfig?: Omit<Exclude<PickConfigOpt<'viteConfig'>, undefined>, 'base' | 'root'>
|
3072
|
+
} | {
|
3073
|
+
bundler: 'webpack',
|
3074
|
+
framework: 'angular',
|
3075
|
+
webpackConfig?: PickConfigOpt<'webpackConfig'>,
|
3076
|
+
options?: {
|
3077
|
+
projectConfig: AngularDevServerProjectConfig
|
3078
|
+
}
|
3060
3079
|
}
|
3061
3080
|
|
3062
|
-
interface ComponentConfigOptions<ComponentDevServerOpts = any> extends Omit<CoreConfigOptions, 'baseUrl' | 'experimentalSessionAndOrigin'> {
|
3081
|
+
interface ComponentConfigOptions<ComponentDevServerOpts = any> extends Omit<CoreConfigOptions, 'baseUrl' | 'experimentalSessionAndOrigin' | 'experimentalStudio'> {
|
3063
3082
|
devServer: DevServerFn<ComponentDevServerOpts> | DevServerConfigOptions
|
3064
3083
|
devServerConfig?: ComponentDevServerOpts
|
3065
3084
|
/**
|
@@ -5783,6 +5802,26 @@ declare namespace Cypress {
|
|
5783
5802
|
* cy.clock().invoke('restore')
|
5784
5803
|
*/
|
5785
5804
|
restore(): void
|
5805
|
+
/**
|
5806
|
+
* Change the time without invoking any timers.
|
5807
|
+
*
|
5808
|
+
* Default value with no argument or undefined is 0.
|
5809
|
+
*
|
5810
|
+
* This can be useful if you need to change the time by an hour
|
5811
|
+
* while there is a setInterval registered that may otherwise run thousands
|
5812
|
+
* of times.
|
5813
|
+
* @see https://on.cypress.io/clock
|
5814
|
+
* @example
|
5815
|
+
* cy.clock()
|
5816
|
+
* cy.visit('/')
|
5817
|
+
* ...
|
5818
|
+
* cy.clock().then(clock => {
|
5819
|
+
* clock.setSystemTime(60 * 60 * 1000)
|
5820
|
+
* })
|
5821
|
+
* // or use this shortcut
|
5822
|
+
* cy.clock().invoke('setSystemTime', 60 * 60 * 1000)
|
5823
|
+
*/
|
5824
|
+
setSystemTime(now?: number | Date): void
|
5786
5825
|
}
|
5787
5826
|
|
5788
5827
|
interface Cookie {
|
@@ -46,17 +46,6 @@ OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
|
46
46
|
PERFORMANCE OF THIS SOFTWARE.
|
47
47
|
***************************************************************************** */
|
48
48
|
|
49
|
-
var __assign$1 = function() {
|
50
|
-
__assign$1 = Object.assign || function __assign(t) {
|
51
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
52
|
-
s = arguments[i];
|
53
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
|
54
|
-
}
|
55
|
-
return t;
|
56
|
-
};
|
57
|
-
return __assign$1.apply(this, arguments);
|
58
|
-
};
|
59
|
-
|
60
49
|
function __rest(s, e) {
|
61
50
|
var t = {};
|
62
51
|
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
@@ -13721,7 +13710,7 @@ function mount$1(inputComponent, options) {
|
|
13721
13710
|
trackInstance(wrapper);
|
13722
13711
|
return wrapper;
|
13723
13712
|
}
|
13724
|
-
var shallowMount = function (component, options) {
|
13713
|
+
var shallowMount$1 = function (component, options) {
|
13725
13714
|
return mount$1(component, __assign(__assign({}, options), { shallow: true }));
|
13726
13715
|
};
|
13727
13716
|
|
@@ -13790,15 +13779,20 @@ var _VueTestUtils = /*#__PURE__*/Object.freeze({
|
|
13790
13779
|
enableAutoUnmount: enableAutoUnmount,
|
13791
13780
|
flushPromises: flushPromises,
|
13792
13781
|
mount: mount$1,
|
13793
|
-
shallowMount: shallowMount
|
13782
|
+
shallowMount: shallowMount$1
|
13794
13783
|
});
|
13795
13784
|
|
13796
|
-
|
13785
|
+
const {
|
13786
|
+
// We do not expose the `mount` from VueTestUtils, instead, we wrap it and expose a
|
13797
13787
|
// Cypress-compatible `mount` API.
|
13798
|
-
VTUmount
|
13799
|
-
|
13800
|
-
|
13801
|
-
|
13788
|
+
mount: VTUmount,
|
13789
|
+
// We do not expose shallowMount. It doesn't make much sense in the context of Cypress.
|
13790
|
+
// It might be useful for people who like to migrate some Test Utils tests to Cypress,
|
13791
|
+
// so if we decide it is useful to expose, just remove the next line, and it will be
|
13792
|
+
// available on the `VueTestUtils` import.
|
13793
|
+
shallowMount } = _VueTestUtils, VueTestUtils = __rest(_VueTestUtils, ["mount", "shallowMount"]);
|
13794
|
+
const DEFAULT_COMP_NAME = 'unknown';
|
13795
|
+
Cypress.on('run:start', () => {
|
13802
13796
|
// `mount` is designed to work with component testing only.
|
13803
13797
|
// it assumes ROOT_SELECTOR exists, which is not the case in e2e.
|
13804
13798
|
// if the user registers a custom command that imports `cypress/vue`,
|
@@ -13808,22 +13802,21 @@ Cypress.on('run:start', function () {
|
|
13808
13802
|
if (Cypress.testingType !== 'component') {
|
13809
13803
|
return;
|
13810
13804
|
}
|
13811
|
-
Cypress.on('test:before:run',
|
13805
|
+
Cypress.on('test:before:run', () => {
|
13812
13806
|
var _a;
|
13813
13807
|
(_a = Cypress.vueWrapper) === null || _a === void 0 ? void 0 : _a.unmount();
|
13814
|
-
|
13808
|
+
const el = getContainerEl();
|
13815
13809
|
el.innerHTML = '';
|
13816
13810
|
});
|
13817
13811
|
});
|
13818
13812
|
// implementation
|
13819
|
-
function mount(componentOptions, options) {
|
13820
|
-
if (options === void 0) { options = {}; }
|
13813
|
+
function mount(componentOptions, options = {}) {
|
13821
13814
|
// TODO: get the real displayName and props from VTU shallowMount
|
13822
|
-
|
13823
|
-
|
13824
|
-
|
13815
|
+
const componentName = getComponentDisplayName(componentOptions);
|
13816
|
+
const message = `<${componentName} ... />`;
|
13817
|
+
let logInstance;
|
13825
13818
|
// then wait for cypress to load
|
13826
|
-
return cy.then(
|
13819
|
+
return cy.then(() => {
|
13827
13820
|
var _a, _b;
|
13828
13821
|
if (options.log !== false) {
|
13829
13822
|
logInstance = Cypress.log({
|
@@ -13832,26 +13825,26 @@ function mount(componentOptions, options) {
|
|
13832
13825
|
});
|
13833
13826
|
}
|
13834
13827
|
// @ts-ignore
|
13835
|
-
|
13836
|
-
|
13828
|
+
const document = cy.state('document');
|
13829
|
+
const el = getContainerEl();
|
13837
13830
|
injectStylesBeforeElement(options, document, el);
|
13838
13831
|
// merge the extensions with global
|
13839
13832
|
if (options.extensions) {
|
13840
13833
|
options.extensions.plugins = (_a = []) === null || _a === void 0 ? void 0 : _a.concat(options.extensions.plugins || [], options.extensions.use || []);
|
13841
13834
|
options.extensions.mixins = (_b = []) === null || _b === void 0 ? void 0 : _b.concat(options.extensions.mixins || [], options.extensions.mixin || []);
|
13842
|
-
options.global =
|
13835
|
+
options.global = Object.assign(Object.assign({}, options.extensions), options.global);
|
13843
13836
|
}
|
13844
|
-
|
13837
|
+
const componentNode = document.createElement('div');
|
13845
13838
|
componentNode.id = '__cy_vue_root';
|
13846
13839
|
el.append(componentNode);
|
13847
13840
|
// mount the component using VTU and return the wrapper in Cypress.VueWrapper
|
13848
|
-
|
13841
|
+
const wrapper = VTUmount(componentOptions, Object.assign({ attachTo: componentNode }, options));
|
13849
13842
|
Cypress.vueWrapper = wrapper;
|
13850
13843
|
Cypress.vue = wrapper.vm;
|
13851
13844
|
return cy
|
13852
13845
|
.wrap(wrapper, { log: false })
|
13853
13846
|
.wait(1, { log: false })
|
13854
|
-
.then(
|
13847
|
+
.then(() => {
|
13855
13848
|
if (logInstance) {
|
13856
13849
|
logInstance.snapshot('mounted');
|
13857
13850
|
logInstance.end();
|
@@ -13873,10 +13866,10 @@ function getComponentDisplayName(componentOptions) {
|
|
13873
13866
|
return componentOptions.name;
|
13874
13867
|
}
|
13875
13868
|
if (componentOptions.__file) {
|
13876
|
-
|
13877
|
-
|
13869
|
+
const filepathSplit = componentOptions.__file.split('/');
|
13870
|
+
const fileName = (_a = filepathSplit[filepathSplit.length - 1]) !== null && _a !== void 0 ? _a : DEFAULT_COMP_NAME;
|
13878
13871
|
// remove the extension .js, .ts or .vue from the filename to get the name of the component
|
13879
|
-
|
13872
|
+
const baseFileName = fileName.replace(/\.(js|ts|vue)?$/, '');
|
13880
13873
|
// if the filename is index, then we can use the direct parent foldername, else use the name itself
|
13881
13874
|
return (baseFileName === 'index' ? filepathSplit[filepathSplit.length - 2] : baseFileName);
|
13882
13875
|
}
|
@@ -13888,9 +13881,8 @@ function getComponentDisplayName(componentOptions) {
|
|
13888
13881
|
* import {mountCallback} from '@cypress/vue'
|
13889
13882
|
* beforeEach(mountVue(component, options))
|
13890
13883
|
*/
|
13891
|
-
function mountCallback(component, options) {
|
13892
|
-
|
13893
|
-
return function () {
|
13884
|
+
function mountCallback(component, options = {}) {
|
13885
|
+
return () => {
|
13894
13886
|
return mount(component, options);
|
13895
13887
|
};
|
13896
13888
|
}
|
@@ -23,17 +23,6 @@ OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
|
23
23
|
PERFORMANCE OF THIS SOFTWARE.
|
24
24
|
***************************************************************************** */
|
25
25
|
|
26
|
-
var __assign$1 = function() {
|
27
|
-
__assign$1 = Object.assign || function __assign(t) {
|
28
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
29
|
-
s = arguments[i];
|
30
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
|
31
|
-
}
|
32
|
-
return t;
|
33
|
-
};
|
34
|
-
return __assign$1.apply(this, arguments);
|
35
|
-
};
|
36
|
-
|
37
26
|
function __rest(s, e) {
|
38
27
|
var t = {};
|
39
28
|
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
@@ -13698,7 +13687,7 @@ function mount$1(inputComponent, options) {
|
|
13698
13687
|
trackInstance(wrapper);
|
13699
13688
|
return wrapper;
|
13700
13689
|
}
|
13701
|
-
var shallowMount = function (component, options) {
|
13690
|
+
var shallowMount$1 = function (component, options) {
|
13702
13691
|
return mount$1(component, __assign(__assign({}, options), { shallow: true }));
|
13703
13692
|
};
|
13704
13693
|
|
@@ -13767,15 +13756,20 @@ var _VueTestUtils = /*#__PURE__*/Object.freeze({
|
|
13767
13756
|
enableAutoUnmount: enableAutoUnmount,
|
13768
13757
|
flushPromises: flushPromises,
|
13769
13758
|
mount: mount$1,
|
13770
|
-
shallowMount: shallowMount
|
13759
|
+
shallowMount: shallowMount$1
|
13771
13760
|
});
|
13772
13761
|
|
13773
|
-
|
13762
|
+
const {
|
13763
|
+
// We do not expose the `mount` from VueTestUtils, instead, we wrap it and expose a
|
13774
13764
|
// Cypress-compatible `mount` API.
|
13775
|
-
VTUmount
|
13776
|
-
|
13777
|
-
|
13778
|
-
|
13765
|
+
mount: VTUmount,
|
13766
|
+
// We do not expose shallowMount. It doesn't make much sense in the context of Cypress.
|
13767
|
+
// It might be useful for people who like to migrate some Test Utils tests to Cypress,
|
13768
|
+
// so if we decide it is useful to expose, just remove the next line, and it will be
|
13769
|
+
// available on the `VueTestUtils` import.
|
13770
|
+
shallowMount } = _VueTestUtils, VueTestUtils = __rest(_VueTestUtils, ["mount", "shallowMount"]);
|
13771
|
+
const DEFAULT_COMP_NAME = 'unknown';
|
13772
|
+
Cypress.on('run:start', () => {
|
13779
13773
|
// `mount` is designed to work with component testing only.
|
13780
13774
|
// it assumes ROOT_SELECTOR exists, which is not the case in e2e.
|
13781
13775
|
// if the user registers a custom command that imports `cypress/vue`,
|
@@ -13785,22 +13779,21 @@ Cypress.on('run:start', function () {
|
|
13785
13779
|
if (Cypress.testingType !== 'component') {
|
13786
13780
|
return;
|
13787
13781
|
}
|
13788
|
-
Cypress.on('test:before:run',
|
13782
|
+
Cypress.on('test:before:run', () => {
|
13789
13783
|
var _a;
|
13790
13784
|
(_a = Cypress.vueWrapper) === null || _a === void 0 ? void 0 : _a.unmount();
|
13791
|
-
|
13785
|
+
const el = getContainerEl();
|
13792
13786
|
el.innerHTML = '';
|
13793
13787
|
});
|
13794
13788
|
});
|
13795
13789
|
// implementation
|
13796
|
-
function mount(componentOptions, options) {
|
13797
|
-
if (options === void 0) { options = {}; }
|
13790
|
+
function mount(componentOptions, options = {}) {
|
13798
13791
|
// TODO: get the real displayName and props from VTU shallowMount
|
13799
|
-
|
13800
|
-
|
13801
|
-
|
13792
|
+
const componentName = getComponentDisplayName(componentOptions);
|
13793
|
+
const message = `<${componentName} ... />`;
|
13794
|
+
let logInstance;
|
13802
13795
|
// then wait for cypress to load
|
13803
|
-
return cy.then(
|
13796
|
+
return cy.then(() => {
|
13804
13797
|
var _a, _b;
|
13805
13798
|
if (options.log !== false) {
|
13806
13799
|
logInstance = Cypress.log({
|
@@ -13809,26 +13802,26 @@ function mount(componentOptions, options) {
|
|
13809
13802
|
});
|
13810
13803
|
}
|
13811
13804
|
// @ts-ignore
|
13812
|
-
|
13813
|
-
|
13805
|
+
const document = cy.state('document');
|
13806
|
+
const el = getContainerEl();
|
13814
13807
|
injectStylesBeforeElement(options, document, el);
|
13815
13808
|
// merge the extensions with global
|
13816
13809
|
if (options.extensions) {
|
13817
13810
|
options.extensions.plugins = (_a = []) === null || _a === void 0 ? void 0 : _a.concat(options.extensions.plugins || [], options.extensions.use || []);
|
13818
13811
|
options.extensions.mixins = (_b = []) === null || _b === void 0 ? void 0 : _b.concat(options.extensions.mixins || [], options.extensions.mixin || []);
|
13819
|
-
options.global =
|
13812
|
+
options.global = Object.assign(Object.assign({}, options.extensions), options.global);
|
13820
13813
|
}
|
13821
|
-
|
13814
|
+
const componentNode = document.createElement('div');
|
13822
13815
|
componentNode.id = '__cy_vue_root';
|
13823
13816
|
el.append(componentNode);
|
13824
13817
|
// mount the component using VTU and return the wrapper in Cypress.VueWrapper
|
13825
|
-
|
13818
|
+
const wrapper = VTUmount(componentOptions, Object.assign({ attachTo: componentNode }, options));
|
13826
13819
|
Cypress.vueWrapper = wrapper;
|
13827
13820
|
Cypress.vue = wrapper.vm;
|
13828
13821
|
return cy
|
13829
13822
|
.wrap(wrapper, { log: false })
|
13830
13823
|
.wait(1, { log: false })
|
13831
|
-
.then(
|
13824
|
+
.then(() => {
|
13832
13825
|
if (logInstance) {
|
13833
13826
|
logInstance.snapshot('mounted');
|
13834
13827
|
logInstance.end();
|
@@ -13850,10 +13843,10 @@ function getComponentDisplayName(componentOptions) {
|
|
13850
13843
|
return componentOptions.name;
|
13851
13844
|
}
|
13852
13845
|
if (componentOptions.__file) {
|
13853
|
-
|
13854
|
-
|
13846
|
+
const filepathSplit = componentOptions.__file.split('/');
|
13847
|
+
const fileName = (_a = filepathSplit[filepathSplit.length - 1]) !== null && _a !== void 0 ? _a : DEFAULT_COMP_NAME;
|
13855
13848
|
// remove the extension .js, .ts or .vue from the filename to get the name of the component
|
13856
|
-
|
13849
|
+
const baseFileName = fileName.replace(/\.(js|ts|vue)?$/, '');
|
13857
13850
|
// if the filename is index, then we can use the direct parent foldername, else use the name itself
|
13858
13851
|
return (baseFileName === 'index' ? filepathSplit[filepathSplit.length - 2] : baseFileName);
|
13859
13852
|
}
|
@@ -13865,9 +13858,8 @@ function getComponentDisplayName(componentOptions) {
|
|
13865
13858
|
* import {mountCallback} from '@cypress/vue'
|
13866
13859
|
* beforeEach(mountVue(component, options))
|
13867
13860
|
*/
|
13868
|
-
function mountCallback(component, options) {
|
13869
|
-
|
13870
|
-
return function () {
|
13861
|
+
function mountCallback(component, options = {}) {
|
13862
|
+
return () => {
|
13871
13863
|
return mount(component, options);
|
13872
13864
|
};
|
13873
13865
|
}
|