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
@@ -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
|
|