cypress 10.6.0 → 10.7.0

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

@@ -9,46 +9,19 @@ import ReactDOM from 'react-dom/client';
 import * as React from 'react';
 import '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();
+const 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);
+function getDisplayName(type, fallbackName = 'Unknown') {
+    const nameFromCache = cachedDisplayNames.get(type);
     if (nameFromCache != null) {
         return nameFromCache;
     }
-    var displayName = null;
+    let 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
@@ -60,13 +33,13 @@ function getDisplayName(type, 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 (.*)\]$/);
+    const match = displayName.match(/^(.*) \[from (.*)\]$/);
     if (match) {
-        var componentName = match[1];
-        var moduleName = match[2];
+        const componentName = match[1];
+        const moduleName = match[2];
         if (componentName && moduleName) {
             if (moduleName === componentName ||
-                moduleName.startsWith(componentName + ".")) {
+                moduleName.startsWith(`${componentName}.`)) {
                 displayName = componentName;
             }
         }
@@ -225,13 +198,13 @@ function setupHooks(optionalCallback) {
 /**
  * Inject custom style text or CSS file or 3rd party style resources
  */
-var injectStyles = function (options) {
-    return function () {
-        var el = getContainerEl();
+const injectStyles = (options) => {
+    return () => {
+        const el = getContainerEl();
         return injectStylesBeforeElement(options, document, el);
     };
 };
-var mountCleanup;
+let mountCleanup;
 /**
  * Create an `mount` function. Performs all the non-React-version specific
  * behavior related to mounting. The React-version-specific code
@@ -241,41 +214,40 @@ var mountCleanup;
  * This is designed to be consumed by `npm/react{16,17,18}`, and other React adapters,
  * or people writing adapters for third-party, custom adapters.
  */
-var makeMountFn = function (type, jsx, options, rerenderKey, internalMountOptions) {
-    if (options === void 0) { options = {}; }
+const makeMountFn = (type, jsx, options = {}, rerenderKey, internalMountOptions) => {
     if (!internalMountOptions) {
         throw Error('internalMountOptions must be provided with `render` and `reactDom` parameters');
     }
     mountCleanup = internalMountOptions.cleanup;
     // 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 + "\""
+    const componentName = getDisplayName(jsx.type, options.alias);
+    const displayName = options.alias || componentName;
+    const jsxComponentName = `<${componentName} ... />`;
+    const message = options.alias
+        ? `${jsxComponentName} as "${options.alias}"`
         : jsxComponentName;
     return cy
         .then(injectStyles(options))
-        .then(function () {
+        .then(() => {
         var _a, _b, _c;
-        var reactDomToUse = internalMountOptions.reactDom;
-        var el = getContainerEl();
+        const reactDomToUse = internalMountOptions.reactDom;
+        const el = getContainerEl();
         if (!el) {
             throw new Error([
-                "[@cypress/react] \uD83D\uDD25 Hmm, cannot find root element to mount the component. Searched for " + ROOT_SELECTOR,
+                `[@cypress/react] 🔥 Hmm, cannot find root element to mount the component. Searched for ${ROOT_SELECTOR}`,
             ].join(' '));
         }
-        var key = rerenderKey !== null && rerenderKey !== void 0 ? rerenderKey : 
+        const 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,
+        const props = {
+            key,
         };
-        var reactComponent = React.createElement(options.strict ? React.StrictMode : React.Fragment, props, jsx);
+        const 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;
+        const userComponent = reactComponent.props.children;
         internalMountOptions.render(reactComponent, el, reactDomToUse);
         if (options.log !== false) {
             Cypress.log({
@@ -284,7 +256,7 @@ var makeMountFn = function (type, jsx, options, rerenderKey, internalMountOption
                 message: [message],
                 // @ts-ignore
                 $el: el.children.item(0),
-                consoleProps: function () {
+                consoleProps: () => {
                     return {
                         // @ts-ignore protect the use of jsx functional components use ReactNode
                         props: jsx.props,
@@ -298,10 +270,10 @@ var makeMountFn = function (type, jsx, options, rerenderKey, internalMountOption
         // 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 () {
+            .then(() => {
             return cy.wrap({
                 component: userComponent,
-                rerender: function (newComponent) { return makeMountFn('rerender', newComponent, options, key, internalMountOptions); },
+                rerender: (newComponent) => makeMountFn('rerender', newComponent, options, key, internalMountOptions),
                 unmount: internalMountOptions.unmount,
             }, { log: false });
         })
@@ -319,16 +291,16 @@ var makeMountFn = function (type, jsx, options, rerenderKey, internalMountOption
  * This is designed to be consumed by `npm/react{16,17,18}`, and other React adapters,
  * or people writing adapters for third-party, custom adapters.
  */
-var makeUnmountFn = function (options) {
-    return cy.then(function () {
+const makeUnmountFn = (options) => {
+    return cy.then(() => {
         var _a;
-        var wasUnmounted = mountCleanup === null || mountCleanup === void 0 ? void 0 : mountCleanup();
+        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: function () {
+                consoleProps: () => {
                     return {
                         description: 'Unmounts React component',
                         parent: getContainerEl().parentNode,
@@ -342,7 +314,7 @@ var makeUnmountFn = function (options) {
 // Cleanup before each run
 // NOTE: we cannot use unmount here because
 // we are not in the context of a test
-var preMountCleanup = function () {
+const preMountCleanup = () => {
     mountCleanup === null || mountCleanup === void 0 ? void 0 : mountCleanup();
 };
 // Side effects from "import { mount } from '@cypress/<my-framework>'" are annoying, we should avoid doing this
@@ -576,29 +548,28 @@ createToken('GTE0', '^\\s*>=\\s*0\\.0\\.0\\s*$');
 createToken('GTE0PRE', '^\\s*>=\\s*0\\.0\\.0-0\\s*$');
 });
 
-var root;
-var cleanup = function () {
+// @ts-expect-error
+let root;
+const cleanup = () => {
     if (root) {
         root.unmount();
         return true;
     }
     return false;
 };
-function mount(jsx, options, rerenderKey) {
-    if (options === void 0) { options = {}; }
-    var internalOptions = {
+function mount(jsx, options = {}, rerenderKey) {
+    const internalOptions = {
         reactDom: ReactDOM,
-        render: function (reactComponent, el) {
+        render: (reactComponent, el) => {
             root = ReactDOM.createRoot(el);
             return root.render(reactComponent);
         },
-        unmount: unmount,
-        cleanup: cleanup,
+        unmount,
+        cleanup,
     };
-    return makeMountFn('mount', jsx, __assign({ ReactDom: ReactDOM }, options), rerenderKey, internalOptions);
+    return makeMountFn('mount', jsx, Object.assign({ ReactDom: ReactDOM }, options), rerenderKey, internalOptions);
 }
-function unmount(options) {
-    if (options === void 0) { options = { log: true }; }
+function unmount(options = { log: true }) {
     return makeUnmountFn(options);
 }
 

package/react18/dist/index.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="cypress" />
+/// <reference types="cypress" />
 import React from 'react';
 import type { MountOptions, UnmountArgs } from '@cypress/react';
 export declare function mount(jsx: React.ReactNode, options?: MountOptions, rerenderKey?: string): Cypress.Chainable<import("@cypress/react").MountReturn>;

package/react18/package.json

@@ -4,7 +4,7 @@
   "description": "Test React components using Cypress",
   "main": "dist/cypress-react.cjs.js",
   "scripts": {
-    "build": "rimraf dist && rollup -c rollup.config.js",
+    "build": "rimraf dist && rollup -c rollup.config.mjs",
     "postbuild": "node ../../scripts/sync-exported-npm-with-cli.js",
     "build-prod": "yarn build",
     "watch": "yarn build --watch --watch.exclude ./dist/**/*"
@@ -20,7 +20,7 @@
     "react-dom": "^16",
     "rollup": "^2.38.5",
     "rollup-plugin-typescript2": "^0.29.0",
-    "typescript": "^4.2.3"
+    "typescript": "^4.7.4"
   },
   "peerDependencies": {
     "@types/react": "^18",

package/svelte/README.md

@@ -0,0 +1,83 @@
+# @cypress/svelte
+
+Mount Svelte components in the open source [Cypress.io](https://www.cypress.io/) test runner **v10.7.0+**
+
+> **Note:** This package is bundled with the `cypress` package and should not need to be installed separately. See the [Svelte Component Testing Docs](https://docs.cypress.io/guides/component-testing/quickstart-svelte#Configuring-Component-Testing) for mounting Svelte components. Installing and importing `mount` from `@cypress/svelte` should only be used for advanced use-cases.
+
+## Install
+
+- Requires Svelte >= 3
+- Requires Cypress v10.7.0 or later
+- Requires [Node](https://nodejs.org/en/) version 12 or above
+
+```sh
+npm install --save-dev @cypress/svelte
+```
+
+## Run
+
+Open cypress test runner
+```
+npx cypress open --component
+```
+
+If you need to run test in CI
+```
+npx cypress run --component
+```
+
+For more information, please check the official docs for [running Cypress](https://on.cypress.io/guides/getting-started/opening-the-app#Quick-Configuration) and for [component testing](https://on.cypress.io/guides/component-testing/writing-your-first-component-test).
+
+## Example
+
+```js
+import { mount } from '@cypress/svelte'
+import HelloWorld from './HelloWorld.svelte'
+
+describe('HelloWorld component', () => {
+  it('works', () => {
+    mount(HelloWorld)
+    // now use standard Cypress commands
+    cy.contains('Hello World!').should('be.visible')
+  })
+})
+```
+
+## Options
+
+In most cases, the component already imports its own styles, thus it looks "right" during the test. If you need another CSS, the simplest way is to import it from the spec file:
+
+```js
+// src/HelloWorld.svelte
+import './styles/main.css'
+import HelloWorld from './HelloWorld.svelte'
+
+it('looks right', () => {
+  // styles are applied
+  mount(HelloWorld)
+})
+```
+
+> Note: Global styles can be imported in your component support file, allowing the styles to apply to all mounted components.
+
+## Compatibility
+
+| @cypress/svelte | cypress |
+| -------------- | ------- |
+| >= v1          | >= v10  |
+
+## Development
+
+Run `yarn build` to compile and sync packages to the `cypress` cli package.
+
+Run `yarn cy:open` to open Cypress component testing against real-world examples.
+
+Run `yarn test` to execute headless Cypress tests.
+
+## License
+
+[![license](https://img.shields.io/badge/license-MIT-green.svg)](https://github.com/cypress-io/cypress/blob/master/LICENSE)
+
+This project is licensed under the terms of the [MIT license](/LICENSE).
+
+## [Changelog](./CHANGELOG.md)

package/svelte/dist/cypress-svelte.cjs.js

@@ -0,0 +1,213 @@
+
+/**
+ * @cypress/svelte v0.0.0-development
+ * (c) 2022 Cypress.io
+ * Released under the MIT License
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+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.`);
+};
+/**
+ * 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) {
+    // Consumed by the framework "mount" libs. A user might register their own mount in the scaffolded 'commands.js'
+    // file that is imported by e2e and component support files by default. We don't want CT side effects to run when e2e
+    // testing so we early return.
+    // System test to verify CT side effects do not pollute e2e: system-tests/test/e2e_with_mount_import_spec.ts
+    if (Cypress.testingType !== 'component') {
+        return;
+    }
+    // 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();
+    });
+}
+
+const DEFAULT_COMP_NAME = 'unknown';
+let componentInstance;
+const cleanup = () => {
+    componentInstance === null || componentInstance === void 0 ? void 0 : componentInstance.$destroy();
+};
+// Extract the component name from the object passed to mount
+const getComponentDisplayName = (Component) => {
+    if (Component.name) {
+        const [_, match] = /Proxy\<(\w+)\>/.exec(Component.name) || [];
+        return match || Component.name;
+    }
+    return DEFAULT_COMP_NAME;
+};
+/**
+ * Mounts a Svelte component inside the Cypress browser
+ *
+ * @param {SvelteConstructor<T>} Component Svelte component being mounted
+ * @param {MountReturn<T extends SvelteComponent>} options options to customize the component being mounted
+ * @returns Cypress.Chainable<MountReturn>
+ *
+ * @example
+ * import Counter from './Counter.svelte'
+ * import { mount } from 'cypress/svelte'
+ *
+ * it('should render', () => {
+ *   mount(Counter, { props: { count: 42 } })
+ *   cy.get('button').contains(42)
+ * })
+ */
+function mount(Component, options = {}) {
+    return cy.then(() => {
+        const target = getContainerEl();
+        injectStylesBeforeElement(options, document, target);
+        const ComponentConstructor = (Component.default || Component);
+        componentInstance = new ComponentConstructor(Object.assign({ target }, options));
+        // by waiting, we are delaying test execution for the next tick of event loop
+        // and letting hooks and component lifecycle methods to execute mount
+        return cy.wait(0, { log: false }).then(() => {
+            if (options.log) {
+                const mountMessage = `<${getComponentDisplayName(Component)} ... />`;
+                Cypress.log({
+                    name: 'mount',
+                    message: [mountMessage],
+                }).snapshot('mounted').end();
+            }
+        })
+            .wrap({ component: componentInstance }, { log: false });
+    });
+}
+// Side effects from "import { mount } from '@cypress/<my-framework>'" are annoying, we should avoid doing this
+// by creating an explicit function/import that the user can register in their 'component.js' support file,
+// such as:
+//    import 'cypress/<my-framework>/support'
+// or
+//    import { registerCT } from 'cypress/<my-framework>'
+//    registerCT()
+// Note: This would be a breaking change
+setupHooks(cleanup);
+
+exports.mount = mount;