cypress 10.6.0 → 10.7.0
Sign up to get free protection for your applications and to get access to all the features.
- 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
@@ -9,46 +9,19 @@ import * as React from 'react';
|
|
9
9
|
import React__default from 'react';
|
10
10
|
import ReactDOM from 'react-dom';
|
11
11
|
|
12
|
-
|
13
|
-
Copyright (c) Microsoft Corporation.
|
14
|
-
|
15
|
-
Permission to use, copy, modify, and/or distribute this software for any
|
16
|
-
purpose with or without fee is hereby granted.
|
17
|
-
|
18
|
-
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
19
|
-
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
20
|
-
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
21
|
-
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
22
|
-
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
23
|
-
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
24
|
-
PERFORMANCE OF THIS SOFTWARE.
|
25
|
-
***************************************************************************** */
|
26
|
-
|
27
|
-
var __assign = function() {
|
28
|
-
__assign = Object.assign || function __assign(t) {
|
29
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
30
|
-
s = arguments[i];
|
31
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
|
32
|
-
}
|
33
|
-
return t;
|
34
|
-
};
|
35
|
-
return __assign.apply(this, arguments);
|
36
|
-
};
|
37
|
-
|
38
|
-
var cachedDisplayNames = new WeakMap();
|
12
|
+
const cachedDisplayNames = new WeakMap();
|
39
13
|
/**
|
40
14
|
* Gets the display name of the component when possible.
|
41
15
|
* @param type {JSX} The type object returned from creating the react element.
|
42
16
|
* @param fallbackName {string} The alias, or fallback name to use when the name cannot be derived.
|
43
17
|
* @link https://github.com/facebook/react-devtools/blob/master/backend/getDisplayName.js
|
44
18
|
*/
|
45
|
-
function getDisplayName(type, fallbackName) {
|
46
|
-
|
47
|
-
var nameFromCache = cachedDisplayNames.get(type);
|
19
|
+
function getDisplayName(type, fallbackName = 'Unknown') {
|
20
|
+
const nameFromCache = cachedDisplayNames.get(type);
|
48
21
|
if (nameFromCache != null) {
|
49
22
|
return nameFromCache;
|
50
23
|
}
|
51
|
-
|
24
|
+
let displayName = null;
|
52
25
|
// The displayName property is not guaranteed to be a string.
|
53
26
|
// It's only safe to use for our purposes if it's a string.
|
54
27
|
// github.com/facebook/react-devtools/issues/803
|
@@ -60,13 +33,13 @@ function getDisplayName(type, fallbackName) {
|
|
60
33
|
}
|
61
34
|
// Facebook-specific hack to turn "Image [from Image.react]" into just "Image".
|
62
35
|
// We need displayName with module name for error reports but it clutters the DevTools.
|
63
|
-
|
36
|
+
const match = displayName.match(/^(.*) \[from (.*)\]$/);
|
64
37
|
if (match) {
|
65
|
-
|
66
|
-
|
38
|
+
const componentName = match[1];
|
39
|
+
const moduleName = match[2];
|
67
40
|
if (componentName && moduleName) {
|
68
41
|
if (moduleName === componentName ||
|
69
|
-
moduleName.startsWith(componentName
|
42
|
+
moduleName.startsWith(`${componentName}.`)) {
|
70
43
|
displayName = componentName;
|
71
44
|
}
|
72
45
|
}
|
@@ -225,13 +198,13 @@ function setupHooks(optionalCallback) {
|
|
225
198
|
/**
|
226
199
|
* Inject custom style text or CSS file or 3rd party style resources
|
227
200
|
*/
|
228
|
-
|
229
|
-
return
|
230
|
-
|
201
|
+
const injectStyles = (options) => {
|
202
|
+
return () => {
|
203
|
+
const el = getContainerEl();
|
231
204
|
return injectStylesBeforeElement(options, document, el);
|
232
205
|
};
|
233
206
|
};
|
234
|
-
|
207
|
+
let mountCleanup;
|
235
208
|
/**
|
236
209
|
* Create an `mount` function. Performs all the non-React-version specific
|
237
210
|
* behavior related to mounting. The React-version-specific code
|
@@ -241,41 +214,40 @@ var mountCleanup;
|
|
241
214
|
* This is designed to be consumed by `npm/react{16,17,18}`, and other React adapters,
|
242
215
|
* or people writing adapters for third-party, custom adapters.
|
243
216
|
*/
|
244
|
-
|
245
|
-
if (options === void 0) { options = {}; }
|
217
|
+
const makeMountFn = (type, jsx, options = {}, rerenderKey, internalMountOptions) => {
|
246
218
|
if (!internalMountOptions) {
|
247
219
|
throw Error('internalMountOptions must be provided with `render` and `reactDom` parameters');
|
248
220
|
}
|
249
221
|
mountCleanup = internalMountOptions.cleanup;
|
250
222
|
// Get the display name property via the component constructor
|
251
223
|
// @ts-ignore FIXME
|
252
|
-
|
253
|
-
|
254
|
-
|
255
|
-
|
256
|
-
? jsxComponentName
|
224
|
+
const componentName = getDisplayName(jsx.type, options.alias);
|
225
|
+
const displayName = options.alias || componentName;
|
226
|
+
const jsxComponentName = `<${componentName} ... />`;
|
227
|
+
const message = options.alias
|
228
|
+
? `${jsxComponentName} as "${options.alias}"`
|
257
229
|
: jsxComponentName;
|
258
230
|
return cy
|
259
231
|
.then(injectStyles(options))
|
260
|
-
.then(
|
232
|
+
.then(() => {
|
261
233
|
var _a, _b, _c;
|
262
|
-
|
263
|
-
|
234
|
+
const reactDomToUse = internalMountOptions.reactDom;
|
235
|
+
const el = getContainerEl();
|
264
236
|
if (!el) {
|
265
237
|
throw new Error([
|
266
|
-
|
238
|
+
`[@cypress/react] 🔥 Hmm, cannot find root element to mount the component. Searched for ${ROOT_SELECTOR}`,
|
267
239
|
].join(' '));
|
268
240
|
}
|
269
|
-
|
241
|
+
const key = rerenderKey !== null && rerenderKey !== void 0 ? rerenderKey :
|
270
242
|
// @ts-ignore provide unique key to the the wrapped component to make sure we are rerendering between tests
|
271
243
|
(((_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();
|
272
|
-
|
273
|
-
key
|
244
|
+
const props = {
|
245
|
+
key,
|
274
246
|
};
|
275
|
-
|
247
|
+
const reactComponent = React.createElement(options.strict ? React.StrictMode : React.Fragment, props, jsx);
|
276
248
|
// since we always surround the component with a fragment
|
277
249
|
// let's get back the original component
|
278
|
-
|
250
|
+
const userComponent = reactComponent.props.children;
|
279
251
|
internalMountOptions.render(reactComponent, el, reactDomToUse);
|
280
252
|
if (options.log !== false) {
|
281
253
|
Cypress.log({
|
@@ -284,7 +256,7 @@ var makeMountFn = function (type, jsx, options, rerenderKey, internalMountOption
|
|
284
256
|
message: [message],
|
285
257
|
// @ts-ignore
|
286
258
|
$el: el.children.item(0),
|
287
|
-
consoleProps:
|
259
|
+
consoleProps: () => {
|
288
260
|
return {
|
289
261
|
// @ts-ignore protect the use of jsx functional components use ReactNode
|
290
262
|
props: jsx.props,
|
@@ -298,10 +270,10 @@ var makeMountFn = function (type, jsx, options, rerenderKey, internalMountOption
|
|
298
270
|
// Separate alias and returned value. Alias returns the component only, and the thenable returns the additional functions
|
299
271
|
cy.wrap(userComponent, { log: false })
|
300
272
|
.as(displayName)
|
301
|
-
.then(
|
273
|
+
.then(() => {
|
302
274
|
return cy.wrap({
|
303
275
|
component: userComponent,
|
304
|
-
rerender:
|
276
|
+
rerender: (newComponent) => makeMountFn('rerender', newComponent, options, key, internalMountOptions),
|
305
277
|
unmount: internalMountOptions.unmount,
|
306
278
|
}, { log: false });
|
307
279
|
})
|
@@ -319,16 +291,16 @@ var makeMountFn = function (type, jsx, options, rerenderKey, internalMountOption
|
|
319
291
|
* This is designed to be consumed by `npm/react{16,17,18}`, and other React adapters,
|
320
292
|
* or people writing adapters for third-party, custom adapters.
|
321
293
|
*/
|
322
|
-
|
323
|
-
return cy.then(
|
294
|
+
const makeUnmountFn = (options) => {
|
295
|
+
return cy.then(() => {
|
324
296
|
var _a;
|
325
|
-
|
297
|
+
const wasUnmounted = mountCleanup === null || mountCleanup === void 0 ? void 0 : mountCleanup();
|
326
298
|
if (wasUnmounted && options.log) {
|
327
299
|
Cypress.log({
|
328
300
|
name: 'unmount',
|
329
301
|
type: 'parent',
|
330
302
|
message: [(_a = options.boundComponentMessage) !== null && _a !== void 0 ? _a : 'Unmounted component'],
|
331
|
-
consoleProps:
|
303
|
+
consoleProps: () => {
|
332
304
|
return {
|
333
305
|
description: 'Unmounts React component',
|
334
306
|
parent: getContainerEl().parentNode,
|
@@ -342,16 +314,13 @@ var makeUnmountFn = function (options) {
|
|
342
314
|
// Cleanup before each run
|
343
315
|
// NOTE: we cannot use unmount here because
|
344
316
|
// we are not in the context of a test
|
345
|
-
|
317
|
+
const preMountCleanup = () => {
|
346
318
|
mountCleanup === null || mountCleanup === void 0 ? void 0 : mountCleanup();
|
347
319
|
};
|
348
|
-
|
349
|
-
|
350
|
-
return
|
351
|
-
};
|
352
|
-
var createMount = function (defaultOptions) {
|
353
|
-
return function (element, options) {
|
354
|
-
return _mount(element, __assign(__assign({}, defaultOptions), options));
|
320
|
+
const _mount = (jsx, options = {}) => makeMountFn('mount', jsx, options);
|
321
|
+
const createMount = (defaultOptions) => {
|
322
|
+
return (element, options) => {
|
323
|
+
return _mount(element, Object.assign(Object.assign({}, defaultOptions), options));
|
355
324
|
};
|
356
325
|
};
|
357
326
|
// Side effects from "import { mount } from '@cypress/<my-framework>'" are annoying, we should avoid doing this
|
@@ -911,45 +880,43 @@ var semver = SemVer;
|
|
911
880
|
const major = (a, loose) => new semver(a, loose).major;
|
912
881
|
var major_1 = major;
|
913
882
|
|
914
|
-
|
915
|
-
|
883
|
+
let lastReactDom;
|
884
|
+
const cleanup = () => {
|
916
885
|
if (lastReactDom) {
|
917
|
-
|
886
|
+
const root = getContainerEl();
|
918
887
|
lastReactDom.unmountComponentAtNode(root);
|
919
888
|
return true;
|
920
889
|
}
|
921
890
|
return false;
|
922
891
|
};
|
923
|
-
function mount(jsx, options, rerenderKey) {
|
924
|
-
if (options === void 0) { options = {}; }
|
892
|
+
function mount(jsx, options = {}, rerenderKey) {
|
925
893
|
if (major_1(React__default.version) === 18) {
|
926
|
-
|
894
|
+
const message = '[cypress/react]: You are using `cypress/react`, which is designed for React <= 17. Consider changing to `cypress/react18`, which is designed for React 18.';
|
927
895
|
console.error(message);
|
928
|
-
Cypress.log({ name: 'warning', message
|
896
|
+
Cypress.log({ name: 'warning', message });
|
929
897
|
}
|
930
|
-
|
898
|
+
const internalOptions = {
|
931
899
|
reactDom: ReactDOM,
|
932
|
-
render:
|
900
|
+
render: (reactComponent, el, reactDomToUse) => {
|
933
901
|
lastReactDom = (reactDomToUse || ReactDOM);
|
934
902
|
return lastReactDom.render(reactComponent, el);
|
935
903
|
},
|
936
|
-
unmount
|
937
|
-
cleanup
|
904
|
+
unmount,
|
905
|
+
cleanup,
|
938
906
|
};
|
939
|
-
return makeMountFn('mount', jsx,
|
907
|
+
return makeMountFn('mount', jsx, Object.assign({ ReactDom: ReactDOM }, options), rerenderKey, internalOptions);
|
940
908
|
}
|
941
|
-
function unmount(options) {
|
942
|
-
if (options === void 0) { options = { log: true }; }
|
909
|
+
function unmount(options = { log: true }) {
|
943
910
|
return makeUnmountFn(options);
|
944
911
|
}
|
945
912
|
|
946
913
|
// mounting hooks inside a test component mostly copied from
|
947
914
|
// https://github.com/testing-library/react-hooks-testing-library/blob/master/src/pure.js
|
948
915
|
function resultContainer() {
|
949
|
-
|
950
|
-
|
951
|
-
|
952
|
-
|
916
|
+
let value = null;
|
917
|
+
let error = null;
|
918
|
+
const resolvers = [];
|
919
|
+
const result = {
|
953
920
|
get current() {
|
954
921
|
if (error) {
|
955
922
|
throw error;
|
@@ -960,23 +927,21 @@ function resultContainer() {
|
|
960
927
|
return error;
|
961
928
|
},
|
962
929
|
};
|
963
|
-
|
964
|
-
if (err === void 0) { err = null; }
|
930
|
+
const updateResult = (val, err = null) => {
|
965
931
|
value = val;
|
966
932
|
error = err;
|
967
|
-
resolvers.splice(0, resolvers.length).forEach(
|
933
|
+
resolvers.splice(0, resolvers.length).forEach((resolve) => resolve());
|
968
934
|
};
|
969
935
|
return {
|
970
|
-
result
|
971
|
-
addResolver:
|
936
|
+
result,
|
937
|
+
addResolver: (resolver) => {
|
972
938
|
resolvers.push(resolver);
|
973
939
|
},
|
974
|
-
setValue:
|
975
|
-
setError:
|
940
|
+
setValue: (val) => updateResult(val),
|
941
|
+
setError: (err) => updateResult(undefined, err),
|
976
942
|
};
|
977
943
|
}
|
978
|
-
function TestHook(
|
979
|
-
var callback = _a.callback, onError = _a.onError, children = _a.children;
|
944
|
+
function TestHook({ callback, onError, children }) {
|
980
945
|
try {
|
981
946
|
children(callback());
|
982
947
|
}
|
@@ -994,14 +959,14 @@ function TestHook(_a) {
|
|
994
959
|
* Mounts a React hook function in a test component for testing.
|
995
960
|
*
|
996
961
|
*/
|
997
|
-
|
998
|
-
|
999
|
-
|
962
|
+
const mountHook = (hookFn) => {
|
963
|
+
const { result, setValue, setError } = resultContainer();
|
964
|
+
const componentTest = React.createElement(TestHook, {
|
1000
965
|
callback: hookFn,
|
1001
966
|
onError: setError,
|
1002
967
|
children: setValue,
|
1003
968
|
});
|
1004
|
-
return mount(componentTest).then(
|
969
|
+
return mount(componentTest).then(() => result);
|
1005
970
|
};
|
1006
971
|
|
1007
972
|
export { createMount, makeMountFn, makeUnmountFn, mount, mountHook, unmount };
|
package/react/dist/mount.d.ts
CHANGED
@@ -1,4 +1,5 @@
|
|
1
1
|
/// <reference types="cypress" />
|
2
|
+
/// <reference types="cypress" />
|
2
3
|
import React from 'react';
|
3
4
|
import type { MountOptions } from './types';
|
4
5
|
export declare function mount(jsx: React.ReactNode, options?: MountOptions, rerenderKey?: string): Cypress.Chainable<import("./types").MountReturn>;
|
package/react/dist/types.d.ts
CHANGED
package/react/package.json
CHANGED
@@ -4,7 +4,7 @@
|
|
4
4
|
"description": "Test React components using Cypress",
|
5
5
|
"main": "dist/cypress-react.cjs.js",
|
6
6
|
"scripts": {
|
7
|
-
"build": "rimraf dist && rollup -c rollup.config.
|
7
|
+
"build": "rimraf dist && rollup -c rollup.config.mjs",
|
8
8
|
"postbuild": "node ../../scripts/sync-exported-npm-with-cli.js",
|
9
9
|
"build-prod": "yarn build",
|
10
10
|
"cy:open": "node ../../scripts/cypress.js open --component",
|
@@ -16,8 +16,6 @@
|
|
16
16
|
},
|
17
17
|
"devDependencies": {
|
18
18
|
"@cypress/mount-utils": "0.0.0-development",
|
19
|
-
"@rollup/plugin-commonjs": "^17.1.0",
|
20
|
-
"@rollup/plugin-node-resolve": "^11.1.1",
|
21
19
|
"@types/semver": "7.3.9",
|
22
20
|
"@vitejs/plugin-react": "1.3.1",
|
23
21
|
"axios": "0.21.2",
|
@@ -27,10 +25,8 @@
|
|
27
25
|
"react-dom": "16.8.6",
|
28
26
|
"react-router": "6.0.0-alpha.1",
|
29
27
|
"react-router-dom": "6.0.0-alpha.1",
|
30
|
-
"rollup": "^2.38.5",
|
31
|
-
"rollup-plugin-typescript2": "^0.29.0",
|
32
28
|
"semver": "^7.3.2",
|
33
|
-
"typescript": "^4.
|
29
|
+
"typescript": "^4.7.4",
|
34
30
|
"vite": "3.0.3",
|
35
31
|
"vite-plugin-require-transform": "1.0.3"
|
36
32
|
},
|
@@ -16,66 +16,39 @@ require('react-dom');
|
|
16
16
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
17
17
|
|
18
18
|
function _interopNamespace(e) {
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
});
|
29
|
-
}
|
19
|
+
if (e && e.__esModule) return e;
|
20
|
+
var n = Object.create(null);
|
21
|
+
if (e) {
|
22
|
+
Object.keys(e).forEach(function (k) {
|
23
|
+
if (k !== 'default') {
|
24
|
+
var d = Object.getOwnPropertyDescriptor(e, k);
|
25
|
+
Object.defineProperty(n, k, d.get ? d : {
|
26
|
+
enumerable: true,
|
27
|
+
get: function () { return e[k]; }
|
30
28
|
});
|
31
|
-
|
32
|
-
|
33
|
-
|
29
|
+
}
|
30
|
+
});
|
31
|
+
}
|
32
|
+
n["default"] = e;
|
33
|
+
return Object.freeze(n);
|
34
34
|
}
|
35
35
|
|
36
36
|
var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
|
37
37
|
var React__namespace = /*#__PURE__*/_interopNamespace(React);
|
38
38
|
|
39
|
-
|
40
|
-
Copyright (c) Microsoft Corporation.
|
41
|
-
|
42
|
-
Permission to use, copy, modify, and/or distribute this software for any
|
43
|
-
purpose with or without fee is hereby granted.
|
44
|
-
|
45
|
-
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
46
|
-
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
47
|
-
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
48
|
-
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
49
|
-
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
50
|
-
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
51
|
-
PERFORMANCE OF THIS SOFTWARE.
|
52
|
-
***************************************************************************** */
|
53
|
-
|
54
|
-
var __assign = function() {
|
55
|
-
__assign = Object.assign || function __assign(t) {
|
56
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
57
|
-
s = arguments[i];
|
58
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
|
59
|
-
}
|
60
|
-
return t;
|
61
|
-
};
|
62
|
-
return __assign.apply(this, arguments);
|
63
|
-
};
|
64
|
-
|
65
|
-
var cachedDisplayNames = new WeakMap();
|
39
|
+
const cachedDisplayNames = new WeakMap();
|
66
40
|
/**
|
67
41
|
* Gets the display name of the component when possible.
|
68
42
|
* @param type {JSX} The type object returned from creating the react element.
|
69
43
|
* @param fallbackName {string} The alias, or fallback name to use when the name cannot be derived.
|
70
44
|
* @link https://github.com/facebook/react-devtools/blob/master/backend/getDisplayName.js
|
71
45
|
*/
|
72
|
-
function getDisplayName(type, fallbackName) {
|
73
|
-
|
74
|
-
var nameFromCache = cachedDisplayNames.get(type);
|
46
|
+
function getDisplayName(type, fallbackName = 'Unknown') {
|
47
|
+
const nameFromCache = cachedDisplayNames.get(type);
|
75
48
|
if (nameFromCache != null) {
|
76
49
|
return nameFromCache;
|
77
50
|
}
|
78
|
-
|
51
|
+
let displayName = null;
|
79
52
|
// The displayName property is not guaranteed to be a string.
|
80
53
|
// It's only safe to use for our purposes if it's a string.
|
81
54
|
// github.com/facebook/react-devtools/issues/803
|
@@ -87,13 +60,13 @@ function getDisplayName(type, fallbackName) {
|
|
87
60
|
}
|
88
61
|
// Facebook-specific hack to turn "Image [from Image.react]" into just "Image".
|
89
62
|
// We need displayName with module name for error reports but it clutters the DevTools.
|
90
|
-
|
63
|
+
const match = displayName.match(/^(.*) \[from (.*)\]$/);
|
91
64
|
if (match) {
|
92
|
-
|
93
|
-
|
65
|
+
const componentName = match[1];
|
66
|
+
const moduleName = match[2];
|
94
67
|
if (componentName && moduleName) {
|
95
68
|
if (moduleName === componentName ||
|
96
|
-
moduleName.startsWith(componentName
|
69
|
+
moduleName.startsWith(`${componentName}.`)) {
|
97
70
|
displayName = componentName;
|
98
71
|
}
|
99
72
|
}
|
@@ -252,13 +225,13 @@ function setupHooks(optionalCallback) {
|
|
252
225
|
/**
|
253
226
|
* Inject custom style text or CSS file or 3rd party style resources
|
254
227
|
*/
|
255
|
-
|
256
|
-
return
|
257
|
-
|
228
|
+
const injectStyles = (options) => {
|
229
|
+
return () => {
|
230
|
+
const el = getContainerEl();
|
258
231
|
return injectStylesBeforeElement(options, document, el);
|
259
232
|
};
|
260
233
|
};
|
261
|
-
|
234
|
+
let mountCleanup;
|
262
235
|
/**
|
263
236
|
* Create an `mount` function. Performs all the non-React-version specific
|
264
237
|
* behavior related to mounting. The React-version-specific code
|
@@ -268,41 +241,40 @@ var mountCleanup;
|
|
268
241
|
* This is designed to be consumed by `npm/react{16,17,18}`, and other React adapters,
|
269
242
|
* or people writing adapters for third-party, custom adapters.
|
270
243
|
*/
|
271
|
-
|
272
|
-
if (options === void 0) { options = {}; }
|
244
|
+
const makeMountFn = (type, jsx, options = {}, rerenderKey, internalMountOptions) => {
|
273
245
|
if (!internalMountOptions) {
|
274
246
|
throw Error('internalMountOptions must be provided with `render` and `reactDom` parameters');
|
275
247
|
}
|
276
248
|
mountCleanup = internalMountOptions.cleanup;
|
277
249
|
// Get the display name property via the component constructor
|
278
250
|
// @ts-ignore FIXME
|
279
|
-
|
280
|
-
|
281
|
-
|
282
|
-
|
283
|
-
? jsxComponentName
|
251
|
+
const componentName = getDisplayName(jsx.type, options.alias);
|
252
|
+
const displayName = options.alias || componentName;
|
253
|
+
const jsxComponentName = `<${componentName} ... />`;
|
254
|
+
const message = options.alias
|
255
|
+
? `${jsxComponentName} as "${options.alias}"`
|
284
256
|
: jsxComponentName;
|
285
257
|
return cy
|
286
258
|
.then(injectStyles(options))
|
287
|
-
.then(
|
259
|
+
.then(() => {
|
288
260
|
var _a, _b, _c;
|
289
|
-
|
290
|
-
|
261
|
+
const reactDomToUse = internalMountOptions.reactDom;
|
262
|
+
const el = getContainerEl();
|
291
263
|
if (!el) {
|
292
264
|
throw new Error([
|
293
|
-
|
265
|
+
`[@cypress/react] 🔥 Hmm, cannot find root element to mount the component. Searched for ${ROOT_SELECTOR}`,
|
294
266
|
].join(' '));
|
295
267
|
}
|
296
|
-
|
268
|
+
const key = rerenderKey !== null && rerenderKey !== void 0 ? rerenderKey :
|
297
269
|
// @ts-ignore provide unique key to the the wrapped component to make sure we are rerendering between tests
|
298
270
|
(((_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();
|
299
|
-
|
300
|
-
key
|
271
|
+
const props = {
|
272
|
+
key,
|
301
273
|
};
|
302
|
-
|
274
|
+
const reactComponent = React__namespace.createElement(options.strict ? React__namespace.StrictMode : React__namespace.Fragment, props, jsx);
|
303
275
|
// since we always surround the component with a fragment
|
304
276
|
// let's get back the original component
|
305
|
-
|
277
|
+
const userComponent = reactComponent.props.children;
|
306
278
|
internalMountOptions.render(reactComponent, el, reactDomToUse);
|
307
279
|
if (options.log !== false) {
|
308
280
|
Cypress.log({
|
@@ -311,7 +283,7 @@ var makeMountFn = function (type, jsx, options, rerenderKey, internalMountOption
|
|
311
283
|
message: [message],
|
312
284
|
// @ts-ignore
|
313
285
|
$el: el.children.item(0),
|
314
|
-
consoleProps:
|
286
|
+
consoleProps: () => {
|
315
287
|
return {
|
316
288
|
// @ts-ignore protect the use of jsx functional components use ReactNode
|
317
289
|
props: jsx.props,
|
@@ -325,10 +297,10 @@ var makeMountFn = function (type, jsx, options, rerenderKey, internalMountOption
|
|
325
297
|
// Separate alias and returned value. Alias returns the component only, and the thenable returns the additional functions
|
326
298
|
cy.wrap(userComponent, { log: false })
|
327
299
|
.as(displayName)
|
328
|
-
.then(
|
300
|
+
.then(() => {
|
329
301
|
return cy.wrap({
|
330
302
|
component: userComponent,
|
331
|
-
rerender:
|
303
|
+
rerender: (newComponent) => makeMountFn('rerender', newComponent, options, key, internalMountOptions),
|
332
304
|
unmount: internalMountOptions.unmount,
|
333
305
|
}, { log: false });
|
334
306
|
})
|
@@ -346,16 +318,16 @@ var makeMountFn = function (type, jsx, options, rerenderKey, internalMountOption
|
|
346
318
|
* This is designed to be consumed by `npm/react{16,17,18}`, and other React adapters,
|
347
319
|
* or people writing adapters for third-party, custom adapters.
|
348
320
|
*/
|
349
|
-
|
350
|
-
return cy.then(
|
321
|
+
const makeUnmountFn = (options) => {
|
322
|
+
return cy.then(() => {
|
351
323
|
var _a;
|
352
|
-
|
324
|
+
const wasUnmounted = mountCleanup === null || mountCleanup === void 0 ? void 0 : mountCleanup();
|
353
325
|
if (wasUnmounted && options.log) {
|
354
326
|
Cypress.log({
|
355
327
|
name: 'unmount',
|
356
328
|
type: 'parent',
|
357
329
|
message: [(_a = options.boundComponentMessage) !== null && _a !== void 0 ? _a : 'Unmounted component'],
|
358
|
-
consoleProps:
|
330
|
+
consoleProps: () => {
|
359
331
|
return {
|
360
332
|
description: 'Unmounts React component',
|
361
333
|
parent: getContainerEl().parentNode,
|
@@ -369,7 +341,7 @@ var makeUnmountFn = function (options) {
|
|
369
341
|
// Cleanup before each run
|
370
342
|
// NOTE: we cannot use unmount here because
|
371
343
|
// we are not in the context of a test
|
372
|
-
|
344
|
+
const preMountCleanup = () => {
|
373
345
|
mountCleanup === null || mountCleanup === void 0 ? void 0 : mountCleanup();
|
374
346
|
};
|
375
347
|
// Side effects from "import { mount } from '@cypress/<my-framework>'" are annoying, we should avoid doing this
|
@@ -603,29 +575,28 @@ createToken('GTE0', '^\\s*>=\\s*0\\.0\\.0\\s*$');
|
|
603
575
|
createToken('GTE0PRE', '^\\s*>=\\s*0\\.0\\.0-0\\s*$');
|
604
576
|
});
|
605
577
|
|
606
|
-
|
607
|
-
|
578
|
+
// @ts-expect-error
|
579
|
+
let root;
|
580
|
+
const cleanup = () => {
|
608
581
|
if (root) {
|
609
582
|
root.unmount();
|
610
583
|
return true;
|
611
584
|
}
|
612
585
|
return false;
|
613
586
|
};
|
614
|
-
function mount(jsx, options, rerenderKey) {
|
615
|
-
|
616
|
-
var internalOptions = {
|
587
|
+
function mount(jsx, options = {}, rerenderKey) {
|
588
|
+
const internalOptions = {
|
617
589
|
reactDom: ReactDOM__default["default"],
|
618
|
-
render:
|
590
|
+
render: (reactComponent, el) => {
|
619
591
|
root = ReactDOM__default["default"].createRoot(el);
|
620
592
|
return root.render(reactComponent);
|
621
593
|
},
|
622
|
-
unmount
|
623
|
-
cleanup
|
594
|
+
unmount,
|
595
|
+
cleanup,
|
624
596
|
};
|
625
|
-
return makeMountFn('mount', jsx,
|
597
|
+
return makeMountFn('mount', jsx, Object.assign({ ReactDom: ReactDOM__default["default"] }, options), rerenderKey, internalOptions);
|
626
598
|
}
|
627
|
-
function unmount(options) {
|
628
|
-
if (options === void 0) { options = { log: true }; }
|
599
|
+
function unmount(options = { log: true }) {
|
629
600
|
return makeUnmountFn(options);
|
630
601
|
}
|
631
602
|
|