cypress 9.7.0 → 10.0.2

package/react/dist/cypress-react.esm-bundler.js

@@ -0,0 +1,467 @@
+
+/**
+ * @cypress/react v0.0.0-development
+ * (c) 2022 Cypress.io
+ * Released under the MIT License
+ */
+
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+var __assign = function() {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+
+var cachedDisplayNames = new WeakMap();
+/**
+ * Gets the display name of the component when possible.
+ * @param type {JSX} The type object returned from creating the react element.
+ * @param fallbackName {string} The alias, or fallback name to use when the name cannot be derived.
+ * @link https://github.com/facebook/react-devtools/blob/master/backend/getDisplayName.js
+ */
+function getDisplayName(type, fallbackName) {
+    if (fallbackName === void 0) { fallbackName = 'Unknown'; }
+    var nameFromCache = cachedDisplayNames.get(type);
+    if (nameFromCache != null) {
+        return nameFromCache;
+    }
+    var displayName = null;
+    // The displayName property is not guaranteed to be a string.
+    // It's only safe to use for our purposes if it's a string.
+    // github.com/facebook/react-devtools/issues/803
+    if (typeof type.displayName === 'string') {
+        displayName = type.displayName;
+    }
+    if (!displayName) {
+        displayName = type.name || fallbackName;
+    }
+    // Facebook-specific hack to turn "Image [from Image.react]" into just "Image".
+    // We need displayName with module name for error reports but it clutters the DevTools.
+    var match = displayName.match(/^(.*) \[from (.*)\]$/);
+    if (match) {
+        var componentName = match[1];
+        var moduleName = match[2];
+        if (componentName && moduleName) {
+            if (moduleName === componentName ||
+                moduleName.startsWith(componentName + ".")) {
+                displayName = componentName;
+            }
+        }
+    }
+    try {
+        cachedDisplayNames.set(type, displayName);
+    }
+    catch (e) {
+        // do nothing
+    }
+    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 use the mount utils to mount it properly`);
+};
+/**
+ * Remove any style or extra link elements from the iframe placeholder
+ * left from any previous test
+ *
+ */
+function cleanupStyles() {
+    const styles = document.body.querySelectorAll('[data-cy=injected-style-tag]');
+    styles.forEach((styleElement) => {
+        if (styleElement.parentElement) {
+            styleElement.parentElement.removeChild(styleElement);
+        }
+    });
+    const links = document.body.querySelectorAll('[data-cy=injected-stylesheet]');
+    links.forEach((link) => {
+        if (link.parentElement) {
+            link.parentElement.removeChild(link);
+        }
+    });
+}
+/**
+ * Insert links to external style resources.
+ */
+function insertStylesheets(stylesheets, document, el) {
+    stylesheets.forEach((href) => {
+        const link = document.createElement('link');
+        link.type = 'text/css';
+        link.rel = 'stylesheet';
+        link.href = href;
+        link.dataset.cy = 'injected-stylesheet';
+        document.body.insertBefore(link, el);
+    });
+}
+/**
+ * Inserts a single stylesheet element
+ */
+function insertStyles(styles, document, el) {
+    styles.forEach((style) => {
+        const styleElement = document.createElement('style');
+        styleElement.dataset.cy = 'injected-style-tag';
+        styleElement.appendChild(document.createTextNode(style));
+        document.body.insertBefore(styleElement, el);
+    });
+}
+function insertSingleCssFile(cssFilename, document, el, log) {
+    return cy.readFile(cssFilename, { log }).then((css) => {
+        const style = document.createElement('style');
+        style.appendChild(document.createTextNode(css));
+        document.body.insertBefore(style, el);
+    });
+}
+/**
+ * Reads the given CSS file from local file system
+ * and adds the loaded style text as an element.
+ */
+function insertLocalCssFiles(cssFilenames, document, el, log) {
+    return Cypress.Promise.mapSeries(cssFilenames, (cssFilename) => {
+        return insertSingleCssFile(cssFilename, document, el, log);
+    });
+}
+/**
+ * Injects custom style text or CSS file or 3rd party style resources
+ * into the given document.
+ */
+const injectStylesBeforeElement = (options, document, el) => {
+    if (!el)
+        return;
+    // first insert all stylesheets as Link elements
+    let stylesheets = [];
+    if (typeof options.stylesheet === 'string') {
+        stylesheets.push(options.stylesheet);
+    }
+    else if (Array.isArray(options.stylesheet)) {
+        stylesheets = stylesheets.concat(options.stylesheet);
+    }
+    if (typeof options.stylesheets === 'string') {
+        options.stylesheets = [options.stylesheets];
+    }
+    if (options.stylesheets) {
+        stylesheets = stylesheets.concat(options.stylesheets);
+    }
+    insertStylesheets(stylesheets, document, el);
+    // insert any styles as <style>...</style> elements
+    let styles = [];
+    if (typeof options.style === 'string') {
+        styles.push(options.style);
+    }
+    else if (Array.isArray(options.style)) {
+        styles = styles.concat(options.style);
+    }
+    if (typeof options.styles === 'string') {
+        styles.push(options.styles);
+    }
+    else if (Array.isArray(options.styles)) {
+        styles = styles.concat(options.styles);
+    }
+    insertStyles(styles, document, el);
+    // now load any css files by path and add their content
+    // as <style>...</style> elements
+    let cssFiles = [];
+    if (typeof options.cssFile === 'string') {
+        cssFiles.push(options.cssFile);
+    }
+    else if (Array.isArray(options.cssFile)) {
+        cssFiles = cssFiles.concat(options.cssFile);
+    }
+    if (typeof options.cssFiles === 'string') {
+        cssFiles.push(options.cssFiles);
+    }
+    else if (Array.isArray(options.cssFiles)) {
+        cssFiles = cssFiles.concat(options.cssFiles);
+    }
+    return insertLocalCssFiles(cssFiles, document, el, options.log);
+};
+function setupHooks(optionalCallback) {
+    // When running component specs, we cannot allow "cy.visit"
+    // because it will wipe out our preparation work, and does not make much sense
+    // thus we overwrite "cy.visit" to throw an error
+    Cypress.Commands.overwrite('visit', () => {
+        throw new Error('cy.visit from a component spec is not allowed');
+    });
+    // @ts-ignore
+    Cypress.on('test:before:run', () => {
+        optionalCallback === null || optionalCallback === void 0 ? void 0 : optionalCallback();
+        cleanupStyles();
+    });
+}
+
+/**
+ * Inject custom style text or CSS file or 3rd party style resources
+ */
+var injectStyles = function (options) {
+    return function () {
+        var el = getContainerEl();
+        return injectStylesBeforeElement(options, document, el);
+    };
+};
+/**
+ * Mount a React component in a blank document; register it as an alias
+ * To access: use an alias or original component reference
+ * @function   mount
+ * @param      {React.ReactElement}  jsx - component to mount
+ * @param      {MountOptions}  [options] - options, like alias, styles
+ * @see https://github.com/bahmutov/@cypress/react
+ * @see https://glebbahmutov.com/blog/my-vision-for-component-tests/
+ * @example
+ ```
+  import Hello from './hello.jsx'
+  import { mount } from '@cypress/react'
+  it('works', () => {
+    mount(<Hello onClick={cy.stub()} />)
+    // use Cypress commands
+    cy.contains('Hello').click()
+  })
+ ```
+ **/
+var mount = function (jsx, options) {
+    if (options === void 0) { options = {}; }
+    return _mount('mount', jsx, options);
+};
+var lastMountedReactDom;
+/**
+ * @see `mount`
+ * @param type The type of mount executed
+ * @param rerenderKey If specified, use the provided key rather than generating a new one
+ */
+var _mount = function (type, jsx, options, rerenderKey) {
+    if (options === void 0) { options = {}; }
+    // Get the display name property via the component constructor
+    // @ts-ignore FIXME
+    var componentName = getDisplayName(jsx.type, options.alias);
+    var displayName = options.alias || componentName;
+    var jsxComponentName = "<" + componentName + " ... />";
+    var message = options.alias
+        ? jsxComponentName + " as \"" + options.alias + "\""
+        : jsxComponentName;
+    return cy
+        .then(injectStyles(options))
+        .then(function () {
+        var _a, _b, _c;
+        var reactDomToUse = options.ReactDom || ReactDOM;
+        lastMountedReactDom = reactDomToUse;
+        var el = getContainerEl();
+        if (!el) {
+            throw new Error([
+                "[@cypress/react] \uD83D\uDD25 Hmm, cannot find root element to mount the component. Searched for " + ROOT_SELECTOR,
+            ].join(' '));
+        }
+        var key = rerenderKey !== null && rerenderKey !== void 0 ? rerenderKey : 
+        // @ts-ignore provide unique key to the the wrapped component to make sure we are rerendering between tests
+        (((_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();
+        var props = {
+            key: key,
+        };
+        var reactComponent = React.createElement(options.strict ? React.StrictMode : React.Fragment, props, jsx);
+        // since we always surround the component with a fragment
+        // let's get back the original component
+        var userComponent = reactComponent.props.children;
+        reactDomToUse.render(reactComponent, el);
+        if (options.log !== false) {
+            Cypress.log({
+                name: type,
+                type: 'parent',
+                message: [message],
+                // @ts-ignore
+                $el: el.children.item(0),
+                consoleProps: function () {
+                    return {
+                        // @ts-ignore protect the use of jsx functional components use ReactNode
+                        props: jsx.props,
+                        description: type === 'mount' ? 'Mounts React component' : 'Rerenders mounted React component',
+                        home: 'https://github.com/cypress-io/cypress',
+                    };
+                },
+            }).snapshot('mounted').end();
+        }
+        return (
+        // Separate alias and returned value. Alias returns the component only, and the thenable returns the additional functions
+        cy.wrap(userComponent, { log: false })
+            .as(displayName)
+            .then(function () {
+            return cy.wrap({
+                component: userComponent,
+                rerender: function (newComponent) { return _mount('rerender', newComponent, options, key); },
+                unmount: function () { return _unmount({ boundComponentMessage: jsxComponentName, log: true }); },
+            }, { log: false });
+        })
+            // by waiting, we delaying test execution for the next tick of event loop
+            // and letting hooks and component lifecycle methods to execute mount
+            // https://github.com/bahmutov/cypress-react-unit-test/issues/200
+            .wait(0, { log: false }));
+        // Bluebird types are terrible. I don't think the return type can be carried without this cast
+    });
+};
+/**
+ * Removes the mounted component. Notice this command automatically
+ * queues up the `unmount` into Cypress chain, thus you don't need `.then`
+ * to call it.
+ * @see https://github.com/cypress-io/cypress/tree/develop/npm/react/cypress/component/basic/unmount
+ * @example
+  ```
+  import { mount, unmount } from '@cypress/react'
+  it('works', () => {
+    mount(...)
+    // interact with the component using Cypress commands
+    // whenever you want to unmount
+    unmount()
+  })
+  ```
+ */
+// @ts-ignore
+var unmount = function (options) {
+    if (options === void 0) { options = { log: true }; }
+    return _unmount(options);
+};
+var _unmount = function (options) {
+    return cy.then(function () {
+        return cy.get(ROOT_SELECTOR, { log: false }).then(function ($el) {
+            var _a;
+            if (lastMountedReactDom) {
+                var wasUnmounted = lastMountedReactDom.unmountComponentAtNode($el[0]);
+                if (wasUnmounted && options.log) {
+                    Cypress.log({
+                        name: 'unmount',
+                        type: 'parent',
+                        message: [(_a = options.boundComponentMessage) !== null && _a !== void 0 ? _a : 'Unmounted component'],
+                        consoleProps: function () {
+                            return {
+                                description: 'Unmounts React component',
+                                parent: $el[0],
+                                home: 'https://github.com/cypress-io/cypress',
+                            };
+                        },
+                    });
+                }
+            }
+        });
+    });
+};
+// Cleanup before each run
+// NOTE: we cannot use unmount here because
+// we are not in the context of a test
+var preMountCleanup = function () {
+    var el = getContainerEl();
+    if (el && lastMountedReactDom) {
+        lastMountedReactDom.unmountComponentAtNode(el);
+    }
+};
+/**
+ * Creates new instance of `mount` function with default options
+ * @function   createMount
+ * @param      {MountOptions}  [defaultOptions] - defaultOptions for returned `mount` function
+ * @returns    new instance of `mount` with assigned options
+ * @example
+ * ```
+ * import Hello from './hello.jsx'
+ * import { createMount } from '@cypress/react'
+ *
+ * const mount = createMount({ strict: true, cssFile: 'path/to/any/css/file.css' })
+ *
+ * it('works', () => {
+ *   mount(<Hello />)
+ *   // use Cypress commands
+ *   cy.get('button').should('have.css', 'color', 'rgb(124, 12, 109)')
+ * })
+ ```
+ **/
+var createMount = function (defaultOptions) {
+    return function (element, options) {
+        return mount(element, __assign(__assign({}, defaultOptions), options));
+    };
+};
+// it is required to unmount component in beforeEach hook in order to provide a clean state inside test
+// because `mount` can be called after some preparation that can side effect unmount
+// @see npm/react/cypress/component/advanced/set-timeout-example/loading-indicator-spec.js
+setupHooks(preMountCleanup);
+
+// mounting hooks inside a test component mostly copied from
+// https://github.com/testing-library/react-hooks-testing-library/blob/master/src/pure.js
+function resultContainer() {
+    var value = null;
+    var error = null;
+    var resolvers = [];
+    var result = {
+        get current() {
+            if (error) {
+                throw error;
+            }
+            return value;
+        },
+        get error() {
+            return error;
+        },
+    };
+    var updateResult = function (val, err) {
+        if (err === void 0) { err = null; }
+        value = val;
+        error = err;
+        resolvers.splice(0, resolvers.length).forEach(function (resolve) { return resolve(); });
+    };
+    return {
+        result: result,
+        addResolver: function (resolver) {
+            resolvers.push(resolver);
+        },
+        setValue: function (val) { return updateResult(val); },
+        setError: function (err) { return updateResult(undefined, err); },
+    };
+}
+function TestHook(_a) {
+    var callback = _a.callback, onError = _a.onError, children = _a.children;
+    try {
+        children(callback());
+    }
+    catch (err) {
+        if ('then' in err) {
+            throw err;
+        }
+        else {
+            onError(err);
+        }
+    }
+    return null;
+}
+/**
+ * Mounts a React hook function in a test component for testing.
+ *
+ */
+var mountHook = function (hookFn) {
+    var _a = resultContainer(), result = _a.result, setValue = _a.setValue, setError = _a.setError;
+    var componentTest = React.createElement(TestHook, {
+        callback: hookFn,
+        onError: setError,
+        children: setValue,
+    });
+    return mount(componentTest).then(function () { return result; });
+};
+
+export { createMount, mount, mountHook, unmount };

package/react/dist/getDisplayName.d.ts

@@ -0,0 +1,8 @@
+import { JSX } from './mount';
+/**
+ * Gets the display name of the component when possible.
+ * @param type {JSX} The type object returned from creating the react element.
+ * @param fallbackName {string} The alias, or fallback name to use when the name cannot be derived.
+ * @link https://github.com/facebook/react-devtools/blob/master/backend/getDisplayName.js
+ */
+export default function getDisplayName(type: JSX, fallbackName?: string): string;

package/react/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from './mount';
+export * from './mountHook';

package/react/dist/mount.d.ts

@@ -0,0 +1,143 @@
+/// <reference types="cypress" />
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import { StyleOptions } from '@cypress/mount-utils';
+/**
+ * Mount a React component in a blank document; register it as an alias
+ * To access: use an alias or original component reference
+ * @function   mount
+ * @param      {React.ReactElement}  jsx - component to mount
+ * @param      {MountOptions}  [options] - options, like alias, styles
+ * @see https://github.com/bahmutov/@cypress/react
+ * @see https://glebbahmutov.com/blog/my-vision-for-component-tests/
+ * @example
+ ```
+  import Hello from './hello.jsx'
+  import { mount } from '@cypress/react'
+  it('works', () => {
+    mount(<Hello onClick={cy.stub()} />)
+    // use Cypress commands
+    cy.contains('Hello').click()
+  })
+ ```
+ **/
+export declare const mount: (jsx: React.ReactNode, options?: MountOptions) => globalThis.Cypress.Chainable<MountReturn>;
+/**
+ * Removes the mounted component. Notice this command automatically
+ * queues up the `unmount` into Cypress chain, thus you don't need `.then`
+ * to call it.
+ * @see https://github.com/cypress-io/cypress/tree/develop/npm/react/cypress/component/basic/unmount
+ * @example
+  ```
+  import { mount, unmount } from '@cypress/react'
+  it('works', () => {
+    mount(...)
+    // interact with the component using Cypress commands
+    // whenever you want to unmount
+    unmount()
+  })
+  ```
+ */
+export declare const unmount: (options?: {
+    log: boolean;
+}) => globalThis.Cypress.Chainable<JQuery<HTMLElement>>;
+/**
+ * Creates new instance of `mount` function with default options
+ * @function   createMount
+ * @param      {MountOptions}  [defaultOptions] - defaultOptions for returned `mount` function
+ * @returns    new instance of `mount` with assigned options
+ * @example
+ * ```
+ * import Hello from './hello.jsx'
+ * import { createMount } from '@cypress/react'
+ *
+ * const mount = createMount({ strict: true, cssFile: 'path/to/any/css/file.css' })
+ *
+ * it('works', () => {
+ *   mount(<Hello />)
+ *   // use Cypress commands
+ *   cy.get('button').should('have.css', 'color', 'rgb(124, 12, 109)')
+ * })
+ ```
+ **/
+export declare const createMount: (defaultOptions: MountOptions) => (element: React.ReactElement, options?: Partial<StyleOptions & MountReactComponentOptions> | undefined) => globalThis.Cypress.Chainable<MountReturn>;
+/** @deprecated Should be removed in the next major version */
+export default mount;
+export interface ReactModule {
+    name: string;
+    type: string;
+    location: string;
+    source: string;
+}
+export interface MountReactComponentOptions {
+    alias: string;
+    ReactDom: typeof ReactDOM;
+    /**
+     * Log the mounting command into Cypress Command Log,
+     * true by default.
+     */
+    log: boolean;
+    /**
+     * Render component in React [strict mode](https://reactjs.org/docs/strict-mode.html)
+     * It activates additional checks and warnings for child components.
+     */
+    strict: boolean;
+}
+export declare type MountOptions = Partial<StyleOptions & MountReactComponentOptions>;
+export interface MountReturn {
+    /**
+     * The component that was rendered.
+     */
+    component: React.ReactNode;
+    /**
+     * Rerenders the specified component with new props. This allows testing of components that store state (`setState`)
+     * or have asynchronous updates (`useEffect`, `useLayoutEffect`).
+     */
+    rerender: (component: React.ReactNode) => globalThis.Cypress.Chainable<MountReturn>;
+    /**
+     * Removes the mounted component.
+     * @see `unmount`
+     */
+    unmount: () => globalThis.Cypress.Chainable<JQuery<HTMLElement>>;
+}
+/**
+ * The `type` property from the transpiled JSX object.
+ * @example
+ * const { type } = React.createElement('div', null, 'Hello')
+ * const { type } = <div>Hello</div>
+ */
+export interface JSX extends Function {
+    displayName: string;
+}
+export declare namespace Cypress {
+    interface Cypress {
+        stylesCache: any;
+        React: string;
+        ReactDOM: string;
+        Styles: string;
+        modules: ReactModule[];
+    }
+    interface Chainable<Subject> {
+        state: (key: string) => any;
+        /**
+         * Mount a React component in a blank document; register it as an alias
+         * To access: use an alias or original component reference
+         *  @function   cy.mount
+         *  @param      {Object}  jsx - component to mount
+         *  @param      {string}  [Component] - alias to use later
+         *  @example
+        ```
+        import Hello from './hello.jsx'
+        // mount and access by alias
+        cy.mount(<Hello />, 'Hello')
+        // using default alias
+        cy.get('@Component')
+        // using specified alias
+        cy.get('@Hello').its('state').should(...)
+        // using original component
+        cy.get(Hello)
+        ```
+        **/
+        get<S = any>(alias: string | symbol | Function, options?: Partial<any>): Chainable<any>;
+    }
+}

package/react/dist/mountHook.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="cypress" />
+declare type MountHookResult<T> = {
+    readonly current: T | null | undefined;
+    readonly error: Error | null;
+};
+/**
+ * Mounts a React hook function in a test component for testing.
+ *
+ */
+export declare const mountHook: <T>(hookFn: (...args: any[]) => T) => Cypress.Chainable<MountHookResult<T>>;
+export {};