cypress 10.3.1 → 10.6.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.
Files changed (50) hide show
  1. package/angular/CHANGELOG.md +55 -0
  2. package/angular/README.md +154 -0
  3. package/angular/dist/index.d.ts +1 -0
  4. package/angular/dist/index.js +263 -0
  5. package/angular/dist/mount.d.ts +111 -0
  6. package/angular/package.json +70 -0
  7. package/lib/exec/open.js +6 -0
  8. package/lib/tasks/download.js +4 -3
  9. package/mount-utils/CHANGELOG.md +7 -1
  10. package/mount-utils/README.md +7 -0
  11. package/package.json +16 -5
  12. package/react/CHANGELOG.md +20 -19
  13. package/react/README.md +28 -323
  14. package/react/dist/createMount.d.ts +28 -0
  15. package/react/dist/cypress-react.cjs.js +627 -98
  16. package/react/dist/cypress-react.esm-bundler.js +624 -99
  17. package/react/dist/getDisplayName.d.ts +1 -1
  18. package/react/dist/index.d.ts +2 -0
  19. package/react/dist/mount.d.ts +5 -141
  20. package/react/dist/types.d.ts +44 -0
  21. package/react/package.json +3 -5
  22. package/react18/CHANGELOG.md +13 -0
  23. package/react18/dist/cypress-react.cjs.js +633 -0
  24. package/react18/dist/cypress-react.esm-bundler.js +605 -0
  25. package/react18/dist/index.d.ts +5 -0
  26. package/react18/package.json +59 -0
  27. package/types/cypress.d.ts +28 -2
  28. package/types/index.d.ts +1 -1
  29. package/types/{net-stubbing.ts → net-stubbing.d.ts} +0 -0
  30. package/vue/CHANGELOG.md +16 -17
  31. package/vue/README.md +17 -608
  32. package/vue/dist/@vue/test-utils/baseWrapper.d.ts +3 -1
  33. package/vue/dist/@vue/test-utils/config.d.ts +4 -2
  34. package/vue/dist/@vue/test-utils/emit.d.ts +1 -0
  35. package/vue/dist/@vue/test-utils/index.d.ts +2 -1
  36. package/vue/dist/@vue/test-utils/interfaces/wrapperLike.d.ts +2 -2
  37. package/vue/dist/@vue/test-utils/mount.d.ts +2 -0
  38. package/vue/dist/@vue/test-utils/stubs.d.ts +2 -6
  39. package/vue/dist/@vue/test-utils/types.d.ts +1 -1
  40. package/vue/dist/@vue/test-utils/vueWrapper.d.ts +2 -1
  41. package/vue/dist/cypress-vue.cjs.js +5379 -5090
  42. package/vue/dist/cypress-vue.esm-bundler.js +5380 -5091
  43. package/vue/dist/index.d.ts +1 -0
  44. package/vue/package.json +2 -3
  45. package/vue2/CHANGELOG.md +7 -0
  46. package/vue2/README.md +11 -627
  47. package/vue2/dist/cypress-vue2.browser.js +251 -260
  48. package/vue2/dist/cypress-vue2.cjs.js +250 -259
  49. package/vue2/dist/cypress-vue2.esm-bundler.js +248 -257
  50. package/react/dist/cypress-react.browser.js +0 -512
@@ -1,512 +0,0 @@
1
-
2
- /**
3
- * @cypress/react v0.0.0-development
4
- * (c) 2022 Cypress.io
5
- * Released under the MIT License
6
- */
7
-
8
- var CypressReact = (function (exports, React, ReactDOM) {
9
- 'use strict';
10
-
11
- function _interopNamespace(e) {
12
- if (e && e.__esModule) return e;
13
- var n = Object.create(null);
14
- if (e) {
15
- Object.keys(e).forEach(function (k) {
16
- if (k !== 'default') {
17
- var d = Object.getOwnPropertyDescriptor(e, k);
18
- Object.defineProperty(n, k, d.get ? d : {
19
- enumerable: true,
20
- get: function () { return e[k]; }
21
- });
22
- }
23
- });
24
- }
25
- n["default"] = e;
26
- return Object.freeze(n);
27
- }
28
-
29
- var React__namespace = /*#__PURE__*/_interopNamespace(React);
30
- var ReactDOM__namespace = /*#__PURE__*/_interopNamespace(ReactDOM);
31
-
32
- /******************************************************************************
33
- Copyright (c) Microsoft Corporation.
34
-
35
- Permission to use, copy, modify, and/or distribute this software for any
36
- purpose with or without fee is hereby granted.
37
-
38
- THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
39
- REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
40
- AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
41
- INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
42
- LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
43
- OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
44
- PERFORMANCE OF THIS SOFTWARE.
45
- ***************************************************************************** */
46
-
47
- var __assign = function() {
48
- __assign = Object.assign || function __assign(t) {
49
- for (var s, i = 1, n = arguments.length; i < n; i++) {
50
- s = arguments[i];
51
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
52
- }
53
- return t;
54
- };
55
- return __assign.apply(this, arguments);
56
- };
57
-
58
- var cachedDisplayNames = new WeakMap();
59
- /**
60
- * Gets the display name of the component when possible.
61
- * @param type {JSX} The type object returned from creating the react element.
62
- * @param fallbackName {string} The alias, or fallback name to use when the name cannot be derived.
63
- * @link https://github.com/facebook/react-devtools/blob/master/backend/getDisplayName.js
64
- */
65
- function getDisplayName(type, fallbackName) {
66
- if (fallbackName === void 0) { fallbackName = 'Unknown'; }
67
- var nameFromCache = cachedDisplayNames.get(type);
68
- if (nameFromCache != null) {
69
- return nameFromCache;
70
- }
71
- var displayName = null;
72
- // The displayName property is not guaranteed to be a string.
73
- // It's only safe to use for our purposes if it's a string.
74
- // github.com/facebook/react-devtools/issues/803
75
- if (typeof type.displayName === 'string') {
76
- displayName = type.displayName;
77
- }
78
- if (!displayName) {
79
- displayName = type.name || fallbackName;
80
- }
81
- // Facebook-specific hack to turn "Image [from Image.react]" into just "Image".
82
- // We need displayName with module name for error reports but it clutters the DevTools.
83
- var match = displayName.match(/^(.*) \[from (.*)\]$/);
84
- if (match) {
85
- var componentName = match[1];
86
- var moduleName = match[2];
87
- if (componentName && moduleName) {
88
- if (moduleName === componentName ||
89
- moduleName.startsWith(componentName + ".")) {
90
- displayName = componentName;
91
- }
92
- }
93
- }
94
- try {
95
- cachedDisplayNames.set(type, displayName);
96
- }
97
- catch (e) {
98
- // do nothing
99
- }
100
- return displayName;
101
- }
102
-
103
- const ROOT_SELECTOR = '[data-cy-root]';
104
- const getContainerEl = () => {
105
- const el = document.querySelector(ROOT_SELECTOR);
106
- if (el) {
107
- return el;
108
- }
109
- 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.`);
110
- };
111
- /**
112
- * Remove any style or extra link elements from the iframe placeholder
113
- * left from any previous test
114
- *
115
- */
116
- function cleanupStyles() {
117
- const styles = document.body.querySelectorAll('[data-cy=injected-style-tag]');
118
- styles.forEach((styleElement) => {
119
- if (styleElement.parentElement) {
120
- styleElement.parentElement.removeChild(styleElement);
121
- }
122
- });
123
- const links = document.body.querySelectorAll('[data-cy=injected-stylesheet]');
124
- links.forEach((link) => {
125
- if (link.parentElement) {
126
- link.parentElement.removeChild(link);
127
- }
128
- });
129
- }
130
- /**
131
- * Insert links to external style resources.
132
- */
133
- function insertStylesheets(stylesheets, document, el) {
134
- stylesheets.forEach((href) => {
135
- const link = document.createElement('link');
136
- link.type = 'text/css';
137
- link.rel = 'stylesheet';
138
- link.href = href;
139
- link.dataset.cy = 'injected-stylesheet';
140
- document.body.insertBefore(link, el);
141
- });
142
- }
143
- /**
144
- * Inserts a single stylesheet element
145
- */
146
- function insertStyles(styles, document, el) {
147
- styles.forEach((style) => {
148
- const styleElement = document.createElement('style');
149
- styleElement.dataset.cy = 'injected-style-tag';
150
- styleElement.appendChild(document.createTextNode(style));
151
- document.body.insertBefore(styleElement, el);
152
- });
153
- }
154
- function insertSingleCssFile(cssFilename, document, el, log) {
155
- return cy.readFile(cssFilename, { log }).then((css) => {
156
- const style = document.createElement('style');
157
- style.appendChild(document.createTextNode(css));
158
- document.body.insertBefore(style, el);
159
- });
160
- }
161
- /**
162
- * Reads the given CSS file from local file system
163
- * and adds the loaded style text as an element.
164
- */
165
- function insertLocalCssFiles(cssFilenames, document, el, log) {
166
- return Cypress.Promise.mapSeries(cssFilenames, (cssFilename) => {
167
- return insertSingleCssFile(cssFilename, document, el, log);
168
- });
169
- }
170
- /**
171
- * Injects custom style text or CSS file or 3rd party style resources
172
- * into the given document.
173
- */
174
- const injectStylesBeforeElement = (options, document, el) => {
175
- if (!el)
176
- return;
177
- // first insert all stylesheets as Link elements
178
- let stylesheets = [];
179
- if (typeof options.stylesheet === 'string') {
180
- stylesheets.push(options.stylesheet);
181
- }
182
- else if (Array.isArray(options.stylesheet)) {
183
- stylesheets = stylesheets.concat(options.stylesheet);
184
- }
185
- if (typeof options.stylesheets === 'string') {
186
- options.stylesheets = [options.stylesheets];
187
- }
188
- if (options.stylesheets) {
189
- stylesheets = stylesheets.concat(options.stylesheets);
190
- }
191
- insertStylesheets(stylesheets, document, el);
192
- // insert any styles as <style>...</style> elements
193
- let styles = [];
194
- if (typeof options.style === 'string') {
195
- styles.push(options.style);
196
- }
197
- else if (Array.isArray(options.style)) {
198
- styles = styles.concat(options.style);
199
- }
200
- if (typeof options.styles === 'string') {
201
- styles.push(options.styles);
202
- }
203
- else if (Array.isArray(options.styles)) {
204
- styles = styles.concat(options.styles);
205
- }
206
- insertStyles(styles, document, el);
207
- // now load any css files by path and add their content
208
- // as <style>...</style> elements
209
- let cssFiles = [];
210
- if (typeof options.cssFile === 'string') {
211
- cssFiles.push(options.cssFile);
212
- }
213
- else if (Array.isArray(options.cssFile)) {
214
- cssFiles = cssFiles.concat(options.cssFile);
215
- }
216
- if (typeof options.cssFiles === 'string') {
217
- cssFiles.push(options.cssFiles);
218
- }
219
- else if (Array.isArray(options.cssFiles)) {
220
- cssFiles = cssFiles.concat(options.cssFiles);
221
- }
222
- return insertLocalCssFiles(cssFiles, document, el, options.log);
223
- };
224
- function setupHooks(optionalCallback) {
225
- // Consumed by the framework "mount" libs. A user might register their own mount in the scaffolded 'commands.js'
226
- // file that is imported by e2e and component support files by default. We don't want CT side effects to run when e2e
227
- // testing so we early return.
228
- // System test to verify CT side effects do not pollute e2e: system-tests/test/e2e_with_mount_import_spec.ts
229
- if (Cypress.testingType !== 'component') {
230
- return;
231
- }
232
- // When running component specs, we cannot allow "cy.visit"
233
- // because it will wipe out our preparation work, and does not make much sense
234
- // thus we overwrite "cy.visit" to throw an error
235
- Cypress.Commands.overwrite('visit', () => {
236
- throw new Error('cy.visit from a component spec is not allowed');
237
- });
238
- // @ts-ignore
239
- Cypress.on('test:before:run', () => {
240
- optionalCallback === null || optionalCallback === void 0 ? void 0 : optionalCallback();
241
- cleanupStyles();
242
- });
243
- }
244
-
245
- /**
246
- * Inject custom style text or CSS file or 3rd party style resources
247
- */
248
- var injectStyles = function (options) {
249
- return function () {
250
- var el = getContainerEl();
251
- return injectStylesBeforeElement(options, document, el);
252
- };
253
- };
254
- /**
255
- * Mount a React component in a blank document; register it as an alias
256
- * To access: use an alias or original component reference
257
- * @function mount
258
- * @param {React.ReactElement} jsx - component to mount
259
- * @param {MountOptions} [options] - options, like alias, styles
260
- * @see https://github.com/bahmutov/@cypress/react
261
- * @see https://glebbahmutov.com/blog/my-vision-for-component-tests/
262
- * @example
263
- ```
264
- import Hello from './hello.jsx'
265
- import { mount } from '@cypress/react'
266
- it('works', () => {
267
- mount(<Hello onClick={cy.stub()} />)
268
- // use Cypress commands
269
- cy.contains('Hello').click()
270
- })
271
- ```
272
- **/
273
- var mount = function (jsx, options) {
274
- if (options === void 0) { options = {}; }
275
- return _mount('mount', jsx, options);
276
- };
277
- var lastMountedReactDom;
278
- /**
279
- * @see `mount`
280
- * @param type The type of mount executed
281
- * @param rerenderKey If specified, use the provided key rather than generating a new one
282
- */
283
- var _mount = function (type, jsx, options, rerenderKey) {
284
- if (options === void 0) { options = {}; }
285
- // Get the display name property via the component constructor
286
- // @ts-ignore FIXME
287
- var componentName = getDisplayName(jsx.type, options.alias);
288
- var displayName = options.alias || componentName;
289
- var jsxComponentName = "<" + componentName + " ... />";
290
- var message = options.alias
291
- ? jsxComponentName + " as \"" + options.alias + "\""
292
- : jsxComponentName;
293
- return cy
294
- .then(injectStyles(options))
295
- .then(function () {
296
- var _a, _b, _c;
297
- var reactDomToUse = options.ReactDom || ReactDOM__namespace;
298
- lastMountedReactDom = reactDomToUse;
299
- var el = getContainerEl();
300
- if (!el) {
301
- throw new Error([
302
- "[@cypress/react] \uD83D\uDD25 Hmm, cannot find root element to mount the component. Searched for " + ROOT_SELECTOR,
303
- ].join(' '));
304
- }
305
- var key = rerenderKey !== null && rerenderKey !== void 0 ? rerenderKey :
306
- // @ts-ignore provide unique key to the the wrapped component to make sure we are rerendering between tests
307
- (((_c = (_b = (_a = Cypress === null || Cypress === void 0 ? void 0 : Cypress.mocha) === null || _a === void 0 ? void 0 : _a.getRunner()) === null || _b === void 0 ? void 0 : _b.test) === null || _c === void 0 ? void 0 : _c.title) || '') + Math.random();
308
- var props = {
309
- key: key,
310
- };
311
- var reactComponent = React__namespace.createElement(options.strict ? React__namespace.StrictMode : React__namespace.Fragment, props, jsx);
312
- // since we always surround the component with a fragment
313
- // let's get back the original component
314
- var userComponent = reactComponent.props.children;
315
- reactDomToUse.render(reactComponent, el);
316
- if (options.log !== false) {
317
- Cypress.log({
318
- name: type,
319
- type: 'parent',
320
- message: [message],
321
- // @ts-ignore
322
- $el: el.children.item(0),
323
- consoleProps: function () {
324
- return {
325
- // @ts-ignore protect the use of jsx functional components use ReactNode
326
- props: jsx.props,
327
- description: type === 'mount' ? 'Mounts React component' : 'Rerenders mounted React component',
328
- home: 'https://github.com/cypress-io/cypress',
329
- };
330
- },
331
- }).snapshot('mounted').end();
332
- }
333
- return (
334
- // Separate alias and returned value. Alias returns the component only, and the thenable returns the additional functions
335
- cy.wrap(userComponent, { log: false })
336
- .as(displayName)
337
- .then(function () {
338
- return cy.wrap({
339
- component: userComponent,
340
- rerender: function (newComponent) { return _mount('rerender', newComponent, options, key); },
341
- unmount: function () { return _unmount({ boundComponentMessage: jsxComponentName, log: true }); },
342
- }, { log: false });
343
- })
344
- // by waiting, we delaying test execution for the next tick of event loop
345
- // and letting hooks and component lifecycle methods to execute mount
346
- // https://github.com/bahmutov/cypress-react-unit-test/issues/200
347
- .wait(0, { log: false }));
348
- // Bluebird types are terrible. I don't think the return type can be carried without this cast
349
- });
350
- };
351
- /**
352
- * Removes the mounted component. Notice this command automatically
353
- * queues up the `unmount` into Cypress chain, thus you don't need `.then`
354
- * to call it.
355
- * @see https://github.com/cypress-io/cypress/tree/develop/npm/react/cypress/component/basic/unmount
356
- * @example
357
- ```
358
- import { mount, unmount } from '@cypress/react'
359
- it('works', () => {
360
- mount(...)
361
- // interact with the component using Cypress commands
362
- // whenever you want to unmount
363
- unmount()
364
- })
365
- ```
366
- */
367
- // @ts-ignore
368
- var unmount = function (options) {
369
- if (options === void 0) { options = { log: true }; }
370
- return _unmount(options);
371
- };
372
- var _unmount = function (options) {
373
- return cy.then(function () {
374
- return cy.get(ROOT_SELECTOR, { log: false }).then(function ($el) {
375
- var _a;
376
- if (lastMountedReactDom) {
377
- var wasUnmounted = lastMountedReactDom.unmountComponentAtNode($el[0]);
378
- if (wasUnmounted && options.log) {
379
- Cypress.log({
380
- name: 'unmount',
381
- type: 'parent',
382
- message: [(_a = options.boundComponentMessage) !== null && _a !== void 0 ? _a : 'Unmounted component'],
383
- consoleProps: function () {
384
- return {
385
- description: 'Unmounts React component',
386
- parent: $el[0],
387
- home: 'https://github.com/cypress-io/cypress',
388
- };
389
- },
390
- });
391
- }
392
- }
393
- });
394
- });
395
- };
396
- // Cleanup before each run
397
- // NOTE: we cannot use unmount here because
398
- // we are not in the context of a test
399
- var preMountCleanup = function () {
400
- var el = getContainerEl();
401
- if (el && lastMountedReactDom) {
402
- lastMountedReactDom.unmountComponentAtNode(el);
403
- }
404
- };
405
- /**
406
- * Creates new instance of `mount` function with default options
407
- * @function createMount
408
- * @param {MountOptions} [defaultOptions] - defaultOptions for returned `mount` function
409
- * @returns new instance of `mount` with assigned options
410
- * @example
411
- * ```
412
- * import Hello from './hello.jsx'
413
- * import { createMount } from '@cypress/react'
414
- *
415
- * const mount = createMount({ strict: true, cssFile: 'path/to/any/css/file.css' })
416
- *
417
- * it('works', () => {
418
- * mount(<Hello />)
419
- * // use Cypress commands
420
- * cy.get('button').should('have.css', 'color', 'rgb(124, 12, 109)')
421
- * })
422
- ```
423
- **/
424
- var createMount = function (defaultOptions) {
425
- return function (element, options) {
426
- return mount(element, __assign(__assign({}, defaultOptions), options));
427
- };
428
- };
429
- // Side effects from "import { mount } from '@cypress/<my-framework>'" are annoying, we should avoid doing this
430
- // by creating an explicit function/import that the user can register in their 'component.js' support file,
431
- // such as:
432
- // import 'cypress/<my-framework>/support'
433
- // or
434
- // import { registerCT } from 'cypress/<my-framework>'
435
- // registerCT()
436
- // Note: This would be a breaking change
437
- // it is required to unmount component in beforeEach hook in order to provide a clean state inside test
438
- // because `mount` can be called after some preparation that can side effect unmount
439
- // @see npm/react/cypress/component/advanced/set-timeout-example/loading-indicator-spec.js
440
- setupHooks(preMountCleanup);
441
-
442
- // mounting hooks inside a test component mostly copied from
443
- // https://github.com/testing-library/react-hooks-testing-library/blob/master/src/pure.js
444
- function resultContainer() {
445
- var value = null;
446
- var error = null;
447
- var resolvers = [];
448
- var result = {
449
- get current() {
450
- if (error) {
451
- throw error;
452
- }
453
- return value;
454
- },
455
- get error() {
456
- return error;
457
- },
458
- };
459
- var updateResult = function (val, err) {
460
- if (err === void 0) { err = null; }
461
- value = val;
462
- error = err;
463
- resolvers.splice(0, resolvers.length).forEach(function (resolve) { return resolve(); });
464
- };
465
- return {
466
- result: result,
467
- addResolver: function (resolver) {
468
- resolvers.push(resolver);
469
- },
470
- setValue: function (val) { return updateResult(val); },
471
- setError: function (err) { return updateResult(undefined, err); },
472
- };
473
- }
474
- function TestHook(_a) {
475
- var callback = _a.callback, onError = _a.onError, children = _a.children;
476
- try {
477
- children(callback());
478
- }
479
- catch (err) {
480
- if ('then' in err) {
481
- throw err;
482
- }
483
- else {
484
- onError(err);
485
- }
486
- }
487
- return null;
488
- }
489
- /**
490
- * Mounts a React hook function in a test component for testing.
491
- *
492
- */
493
- var mountHook = function (hookFn) {
494
- var _a = resultContainer(), result = _a.result, setValue = _a.setValue, setError = _a.setError;
495
- var componentTest = React__namespace.createElement(TestHook, {
496
- callback: hookFn,
497
- onError: setError,
498
- children: setValue,
499
- });
500
- return mount(componentTest).then(function () { return result; });
501
- };
502
-
503
- exports.createMount = createMount;
504
- exports.mount = mount;
505
- exports.mountHook = mountHook;
506
- exports.unmount = unmount;
507
-
508
- Object.defineProperty(exports, '__esModule', { value: true });
509
-
510
- return exports;
511
-
512
- })({}, React, ReactDOM);