|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
'use strict'; |
|
|
|
var ReactDOM = require('react-dom/client'); |
|
var React = require('react'); |
|
require('react-dom'); |
|
|
|
function _interopNamespaceDefault(e) { |
|
var n = Object.create(null); |
|
if (e) { |
|
Object.keys(e).forEach(function (k) { |
|
if (k !== 'default') { |
|
var d = Object.getOwnPropertyDescriptor(e, k); |
|
Object.defineProperty(n, k, d.get ? d : { |
|
enumerable: true, |
|
get: function () { return e[k]; } |
|
}); |
|
} |
|
}); |
|
} |
|
n.default = e; |
|
return Object.freeze(n); |
|
} |
|
|
|
var React__namespace = _interopNamespaceDefault(React); |
|
|
|
const ROOT_SELECTOR$1 = '[data-cy-root]'; |
|
|
|
|
|
|
|
|
|
|
|
const getContainerEl$1 = () => { |
|
const el = document.querySelector(ROOT_SELECTOR$1); |
|
if (el) { |
|
return el; |
|
} |
|
throw Error(`No element found that matches selector ${ROOT_SELECTOR$1}. 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.`); |
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function getDisplayName(node, fallbackName = 'Unknown') {
|
|
const type = node === null || node === void 0 ? void 0 : node.type;
|
|
if (!type) {
|
|
return fallbackName;
|
|
}
|
|
let displayName = null;
|
|
|
|
|
|
|
|
if (typeof type.displayName === 'string') {
|
|
displayName = type.displayName;
|
|
}
|
|
if (!displayName) {
|
|
displayName = type.name || fallbackName;
|
|
}
|
|
|
|
|
|
const match = displayName.match(/^(.*) \[from (.*)\]$/);
|
|
if (match) {
|
|
const componentName = match[1];
|
|
const moduleName = match[2];
|
|
if (componentName && moduleName) {
|
|
if (moduleName === componentName ||
|
|
moduleName.startsWith(`${componentName}.`)) {
|
|
displayName = componentName;
|
|
}
|
|
}
|
|
}
|
|
return displayName;
|
|
} |
|
|
|
const ROOT_SELECTOR = '[data-cy-root]'; |
|
|
|
|
|
|
|
|
|
|
|
const getContainerEl = () => { |
|
const el = document.querySelector(ROOT_SELECTOR); |
|
if (el) { |
|
return el; |
|
} |
|
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.`); |
|
}; |
|
function checkForRemovedStyleOptions(mountingOptions) { |
|
for (const key of ['cssFile', 'cssFiles', 'style', 'styles', 'stylesheet', 'stylesheets']) { |
|
if (mountingOptions[key]) { |
|
Cypress.utils.throwErrByPath('mount.removed_style_mounting_options', key); |
|
} |
|
} |
|
} |
|
|
|
|
|
|
|
|
|
function setupHooks(optionalCallback) { |
|
|
|
|
|
|
|
if (Cypress.testingType !== 'component') { |
|
return; |
|
} |
|
|
|
|
|
|
|
Cypress.Commands.overwrite('visit', () => { |
|
throw new Error('cy.visit from a component spec is not allowed'); |
|
}); |
|
Cypress.Commands.overwrite('session', () => { |
|
throw new Error('cy.session from a component spec is not allowed'); |
|
}); |
|
Cypress.Commands.overwrite('origin', () => { |
|
throw new Error('cy.origin from a component spec is not allowed'); |
|
}); |
|
|
|
Cypress.on('test:before:after:run:async', () => { |
|
optionalCallback === null || optionalCallback === void 0 ? void 0 : optionalCallback(); |
|
}); |
|
} |
|
|
|
let mountCleanup;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const makeMountFn = (type, jsx, options = {}, rerenderKey, internalMountOptions) => {
|
|
if (!internalMountOptions) {
|
|
throw Error('internalMountOptions must be provided with `render` and `reactDom` parameters');
|
|
}
|
|
|
|
if (options.alias) {
|
|
|
|
Cypress.utils.throwErrByPath('mount.alias', options.alias);
|
|
}
|
|
checkForRemovedStyleOptions(options);
|
|
mountCleanup = internalMountOptions.cleanup;
|
|
return cy
|
|
.then(() => {
|
|
var _a, _b, _c;
|
|
const reactDomToUse = internalMountOptions.reactDom;
|
|
const el = getContainerEl();
|
|
if (!el) {
|
|
throw new Error([
|
|
`[@cypress/react] 🔥 Hmm, cannot find root element to mount the component. Searched for ${ROOT_SELECTOR}`,
|
|
].join(' '));
|
|
}
|
|
const key = rerenderKey !== null && rerenderKey !== void 0 ? rerenderKey :
|
|
|
|
(((_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();
|
|
const props = {
|
|
key,
|
|
};
|
|
const reactComponent = React__namespace.createElement(options.strict ? React__namespace.StrictMode : React__namespace.Fragment, props, jsx);
|
|
|
|
|
|
const userComponent = reactComponent.props.children;
|
|
internalMountOptions.render(reactComponent, el, reactDomToUse);
|
|
return (cy.wrap(userComponent, { log: false })
|
|
.then(() => {
|
|
return cy.wrap({
|
|
component: userComponent,
|
|
rerender: (newComponent) => makeMountFn('rerender', newComponent, options, key, internalMountOptions),
|
|
unmount: () => {
|
|
|
|
Cypress.utils.throwErrByPath('mount.unmount');
|
|
},
|
|
}, { log: false });
|
|
})
|
|
|
|
|
|
|
|
.wait(0, { log: false })
|
|
.then(() => {
|
|
if (options.log !== false) {
|
|
|
|
|
|
const componentName = getDisplayName(jsx);
|
|
const jsxComponentName = `<${componentName} ... />`;
|
|
Cypress.log({
|
|
name: type,
|
|
type: 'parent',
|
|
message: [jsxComponentName],
|
|
|
|
$el: el.children.item(0),
|
|
consoleProps: () => {
|
|
return {
|
|
|
|
props: jsx === null || jsx === void 0 ? void 0 : jsx.props,
|
|
description: type === 'mount' ? 'Mounts React component' : 'Rerenders mounted React component',
|
|
home: 'https://github.com/cypress-io/cypress',
|
|
};
|
|
},
|
|
});
|
|
}
|
|
}));
|
|
|
|
});
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const makeUnmountFn = (options) => {
|
|
return cy.then(() => {
|
|
var _a;
|
|
const wasUnmounted = mountCleanup === null || mountCleanup === void 0 ? void 0 : mountCleanup();
|
|
if (wasUnmounted && options.log) {
|
|
Cypress.log({
|
|
name: 'unmount',
|
|
type: 'parent',
|
|
message: [(_a = options.boundComponentMessage) !== null && _a !== void 0 ? _a : 'Unmounted component'],
|
|
consoleProps: () => {
|
|
return {
|
|
description: 'Unmounts React component',
|
|
parent: getContainerEl().parentNode,
|
|
home: 'https://github.com/cypress-io/cypress',
|
|
};
|
|
},
|
|
});
|
|
}
|
|
});
|
|
};
|
|
|
|
|
|
|
|
const preMountCleanup = () => {
|
|
mountCleanup === null || mountCleanup === void 0 ? void 0 : mountCleanup();
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
setupHooks(preMountCleanup); |
|
|
|
const debug = ( |
|
typeof process === 'object' && |
|
process.env && |
|
process.env.NODE_DEBUG && |
|
/\bsemver\b/i.test(process.env.NODE_DEBUG) |
|
) ? (...args) => console.error('SEMVER', ...args) |
|
: () => {}; |
|
|
|
var debug_1 = debug; |
|
|
|
|
|
|
|
const SEMVER_SPEC_VERSION = '2.0.0'; |
|
|
|
const MAX_LENGTH$1 = 256; |
|
const MAX_SAFE_INTEGER$1 = Number.MAX_SAFE_INTEGER || |
|
9007199254740991; |
|
|
|
|
|
const MAX_SAFE_COMPONENT_LENGTH = 16; |
|
|
|
|
|
|
|
const MAX_SAFE_BUILD_LENGTH = MAX_LENGTH$1 - 6; |
|
|
|
const RELEASE_TYPES = [ |
|
'major', |
|
'premajor', |
|
'minor', |
|
'preminor', |
|
'patch', |
|
'prepatch', |
|
'prerelease', |
|
]; |
|
|
|
var constants = { |
|
MAX_LENGTH: MAX_LENGTH$1, |
|
MAX_SAFE_COMPONENT_LENGTH, |
|
MAX_SAFE_BUILD_LENGTH, |
|
MAX_SAFE_INTEGER: MAX_SAFE_INTEGER$1, |
|
RELEASE_TYPES, |
|
SEMVER_SPEC_VERSION, |
|
FLAG_INCLUDE_PRERELEASE: 0b001, |
|
FLAG_LOOSE: 0b010, |
|
}; |
|
|
|
function createCommonjsModule(fn) { |
|
var module = { exports: {} }; |
|
return fn(module, module.exports), module.exports; |
|
} |
|
|
|
createCommonjsModule(function (module, exports) { |
|
const { |
|
MAX_SAFE_COMPONENT_LENGTH, |
|
MAX_SAFE_BUILD_LENGTH, |
|
MAX_LENGTH, |
|
} = constants; |
|
|
|
exports = module.exports = {}; |
|
|
|
|
|
const re = exports.re = []; |
|
const safeRe = exports.safeRe = []; |
|
const src = exports.src = []; |
|
const t = exports.t = {}; |
|
let R = 0; |
|
|
|
const LETTERDASHNUMBER = '[a-zA-Z0-9-]'; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const safeRegexReplacements = [ |
|
['\\s', 1], |
|
['\\d', MAX_LENGTH], |
|
[LETTERDASHNUMBER, MAX_SAFE_BUILD_LENGTH], |
|
]; |
|
|
|
const makeSafeRegex = (value) => { |
|
for (const [token, max] of safeRegexReplacements) { |
|
value = value |
|
.split(`${token}*`).join(`${token}{0,${max}}`) |
|
.split(`${token}+`).join(`${token}{1,${max}}`); |
|
} |
|
return value |
|
}; |
|
|
|
const createToken = (name, value, isGlobal) => { |
|
const safe = makeSafeRegex(value); |
|
const index = R++; |
|
debug_1(name, index, value); |
|
t[name] = index; |
|
src[index] = value; |
|
re[index] = new RegExp(value, isGlobal ? 'g' : undefined); |
|
safeRe[index] = new RegExp(safe, isGlobal ? 'g' : undefined); |
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
createToken('NUMERICIDENTIFIER', '0|[1-9]\\d*'); |
|
createToken('NUMERICIDENTIFIERLOOSE', '\\d+'); |
|
|
|
|
|
|
|
|
|
|
|
createToken('NONNUMERICIDENTIFIER', `\\d*[a-zA-Z-]${LETTERDASHNUMBER}*`); |
|
|
|
|
|
|
|
|
|
createToken('MAINVERSION', `(${src[t.NUMERICIDENTIFIER]})\\.` + |
|
`(${src[t.NUMERICIDENTIFIER]})\\.` + |
|
`(${src[t.NUMERICIDENTIFIER]})`); |
|
|
|
createToken('MAINVERSIONLOOSE', `(${src[t.NUMERICIDENTIFIERLOOSE]})\\.` + |
|
`(${src[t.NUMERICIDENTIFIERLOOSE]})\\.` + |
|
`(${src[t.NUMERICIDENTIFIERLOOSE]})`); |
|
|
|
|
|
|
|
|
|
createToken('PRERELEASEIDENTIFIER', `(?:${src[t.NUMERICIDENTIFIER] |
|
}|${src[t.NONNUMERICIDENTIFIER]})`); |
|
|
|
createToken('PRERELEASEIDENTIFIERLOOSE', `(?:${src[t.NUMERICIDENTIFIERLOOSE] |
|
}|${src[t.NONNUMERICIDENTIFIER]})`); |
|
|
|
|
|
|
|
|
|
|
|
createToken('PRERELEASE', `(?:-(${src[t.PRERELEASEIDENTIFIER] |
|
}(?:\\.${src[t.PRERELEASEIDENTIFIER]})*))`); |
|
|
|
createToken('PRERELEASELOOSE', `(?:-?(${src[t.PRERELEASEIDENTIFIERLOOSE] |
|
}(?:\\.${src[t.PRERELEASEIDENTIFIERLOOSE]})*))`); |
|
|
|
|
|
|
|
|
|
createToken('BUILDIDENTIFIER', `${LETTERDASHNUMBER}+`); |
|
|
|
|
|
|
|
|
|
|
|
createToken('BUILD', `(?:\\+(${src[t.BUILDIDENTIFIER] |
|
}(?:\\.${src[t.BUILDIDENTIFIER]})*))`); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
createToken('FULLPLAIN', `v?${src[t.MAINVERSION] |
|
}${src[t.PRERELEASE]}?${ |
|
src[t.BUILD]}?`); |
|
|
|
createToken('FULL', `^${src[t.FULLPLAIN]}$`); |
|
|
|
|
|
|
|
|
|
createToken('LOOSEPLAIN', `[v=\\s]*${src[t.MAINVERSIONLOOSE] |
|
}${src[t.PRERELEASELOOSE]}?${ |
|
src[t.BUILD]}?`); |
|
|
|
createToken('LOOSE', `^${src[t.LOOSEPLAIN]}$`); |
|
|
|
createToken('GTLT', '((?:<|>)?=?)'); |
|
|
|
|
|
|
|
|
|
createToken('XRANGEIDENTIFIERLOOSE', `${src[t.NUMERICIDENTIFIERLOOSE]}|x|X|\\*`); |
|
createToken('XRANGEIDENTIFIER', `${src[t.NUMERICIDENTIFIER]}|x|X|\\*`); |
|
|
|
createToken('XRANGEPLAIN', `[v=\\s]*(${src[t.XRANGEIDENTIFIER]})` + |
|
`(?:\\.(${src[t.XRANGEIDENTIFIER]})` + |
|
`(?:\\.(${src[t.XRANGEIDENTIFIER]})` + |
|
`(?:${src[t.PRERELEASE]})?${ |
|
src[t.BUILD]}?` + |
|
`)?)?`); |
|
|
|
createToken('XRANGEPLAINLOOSE', `[v=\\s]*(${src[t.XRANGEIDENTIFIERLOOSE]})` + |
|
`(?:\\.(${src[t.XRANGEIDENTIFIERLOOSE]})` + |
|
`(?:\\.(${src[t.XRANGEIDENTIFIERLOOSE]})` + |
|
`(?:${src[t.PRERELEASELOOSE]})?${ |
|
src[t.BUILD]}?` + |
|
`)?)?`); |
|
|
|
createToken('XRANGE', `^${src[t.GTLT]}\\s*${src[t.XRANGEPLAIN]}$`); |
|
createToken('XRANGELOOSE', `^${src[t.GTLT]}\\s*${src[t.XRANGEPLAINLOOSE]}$`); |
|
|
|
|
|
|
|
createToken('COERCE', `${'(^|[^\\d])' + |
|
'(\\d{1,'}${MAX_SAFE_COMPONENT_LENGTH}})` + |
|
`(?:\\.(\\d{1,${MAX_SAFE_COMPONENT_LENGTH}}))?` + |
|
`(?:\\.(\\d{1,${MAX_SAFE_COMPONENT_LENGTH}}))?` + |
|
`(?:$|[^\\d])`); |
|
createToken('COERCERTL', src[t.COERCE], true); |
|
|
|
|
|
|
|
createToken('LONETILDE', '(?:~>?)'); |
|
|
|
createToken('TILDETRIM', `(\\s*)${src[t.LONETILDE]}\\s+`, true); |
|
exports.tildeTrimReplace = '$1~'; |
|
|
|
createToken('TILDE', `^${src[t.LONETILDE]}${src[t.XRANGEPLAIN]}$`); |
|
createToken('TILDELOOSE', `^${src[t.LONETILDE]}${src[t.XRANGEPLAINLOOSE]}$`); |
|
|
|
|
|
|
|
createToken('LONECARET', '(?:\\^)'); |
|
|
|
createToken('CARETTRIM', `(\\s*)${src[t.LONECARET]}\\s+`, true); |
|
exports.caretTrimReplace = '$1^'; |
|
|
|
createToken('CARET', `^${src[t.LONECARET]}${src[t.XRANGEPLAIN]}$`); |
|
createToken('CARETLOOSE', `^${src[t.LONECARET]}${src[t.XRANGEPLAINLOOSE]}$`); |
|
|
|
|
|
createToken('COMPARATORLOOSE', `^${src[t.GTLT]}\\s*(${src[t.LOOSEPLAIN]})$|^$`); |
|
createToken('COMPARATOR', `^${src[t.GTLT]}\\s*(${src[t.FULLPLAIN]})$|^$`); |
|
|
|
|
|
|
|
createToken('COMPARATORTRIM', `(\\s*)${src[t.GTLT] |
|
}\\s*(${src[t.LOOSEPLAIN]}|${src[t.XRANGEPLAIN]})`, true); |
|
exports.comparatorTrimReplace = '$1$2$3'; |
|
|
|
|
|
|
|
|
|
|
|
createToken('HYPHENRANGE', `^\\s*(${src[t.XRANGEPLAIN]})` + |
|
`\\s+-\\s+` + |
|
`(${src[t.XRANGEPLAIN]})` + |
|
`\\s*$`); |
|
|
|
createToken('HYPHENRANGELOOSE', `^\\s*(${src[t.XRANGEPLAINLOOSE]})` + |
|
`\\s+-\\s+` + |
|
`(${src[t.XRANGEPLAINLOOSE]})` + |
|
`\\s*$`); |
|
|
|
|
|
createToken('STAR', '(<|>)?=?\\s*\\*'); |
|
|
|
createToken('GTE0', '^\\s*>=\\s*0\\.0\\.0\\s*$'); |
|
createToken('GTE0PRE', '^\\s*>=\\s*0\\.0\\.0-0\\s*$'); |
|
}); |
|
|
|
|
|
let root;
|
|
const cleanup = () => {
|
|
if (root) {
|
|
root.unmount();
|
|
root = null;
|
|
return true;
|
|
}
|
|
return false;
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function mount(jsx, options = {}, rerenderKey) {
|
|
|
|
|
|
|
|
cleanup();
|
|
const internalOptions = {
|
|
reactDom: ReactDOM,
|
|
render: (reactComponent, el) => {
|
|
if (!root) {
|
|
root = ReactDOM.createRoot(el);
|
|
}
|
|
return root.render(reactComponent);
|
|
},
|
|
unmount: internalUnmount,
|
|
cleanup,
|
|
};
|
|
return makeMountFn('mount', jsx, Object.assign({ ReactDom: ReactDOM }, options), rerenderKey, internalOptions);
|
|
}
|
|
function internalUnmount(options = { log: true }) {
|
|
return makeUnmountFn(options);
|
|
}
|
|
|
|
|
|
|
|
|
|
function unmount(options = { log: true }) {
|
|
|
|
Cypress.utils.throwErrByPath('mount.unmount');
|
|
} |
|
|
|
exports.getContainerEl = getContainerEl$1; |
|
exports.mount = mount; |
|
exports.unmount = unmount; |
|
|