cypress 10.10.0 → 11.0.0

package/vue/README.md

@@ -34,23 +34,19 @@ describe('HelloWorld component', () => {
 
 Look at the examples in [cypress/component](cypress/component) folder. Here is the list of examples showing various testing scenarios.
 
-### Options
+### Styles
 
-You can pass additional styles, css files and external stylesheets to load, see [docs/styles.md](./docs/styles.md) for full list.
+One option for styling your components is to import stylesheets into your test file. See [docs/styles.md](./docs/styles.md) for full list of options.
 
 ```js
 import Todo from './Todo.vue'
+import '../styles/main.css'
 const todo = {
   id: '123',
   title: 'Write more tests',
 }
 
-mount(Todo, {
-  propsData: { todo },
-  stylesheets: [
-    'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.css',
-  ],
-})
+mount(Todo, { props: { todo } })
 ```
 
 ### Global Vue Options

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

@@ -59,6 +59,11 @@ function __rest(s, e) {
 }
 
 const ROOT_SELECTOR = '[data-cy-root]';
+/**
+ * Gets the root element used to mount the component.
+ * @returns {HTMLElement} The root element
+ * @throws {Error} If the root element is not found
+ */
 const getContainerEl = () => {
     const el = document.querySelector(ROOT_SELECTOR);
     if (el) {
@@ -66,122 +71,19 @@ const getContainerEl = () => {
     }
     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);
+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);
         }
-    });
-}
-/**
- * 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.
+ * Utility function to register CT side effects and run cleanup code during the "test:before:run" Cypress hook
+ * @param optionalCallback Callback to be called before the next test runs
  */
-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
+    // 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') {
@@ -196,7 +98,6 @@ function setupHooks(optionalCallback) {
     // @ts-ignore
     Cypress.on('test:before:run', () => {
         optionalCallback === null || optionalCallback === void 0 ? void 0 : optionalCallback();
-        cleanupStyles();
     });
 }
 
@@ -13792,42 +13693,40 @@ mount: VTUmount,
 // available on the `VueTestUtils` import.
 shallowMount } = _VueTestUtils, VueTestUtils = __rest(_VueTestUtils, ["mount", "shallowMount"]);
 const DEFAULT_COMP_NAME = 'unknown';
-Cypress.on('run:start', () => {
-    // `mount` is designed to work with component testing only.
-    // it assumes ROOT_SELECTOR exists, which is not the case in e2e.
-    // if the user registers a custom command that imports `cypress/vue`,
-    // this event will be registered and cause an error when the user
-    // launches e2e (since it's common to use Cypress for both CT and E2E.
-    // https://github.com/cypress-io/cypress/issues/17438
-    if (Cypress.testingType !== 'component') {
-        return;
-    }
-    Cypress.on('test:before:run', () => {
-        var _a;
-        (_a = Cypress.vueWrapper) === null || _a === void 0 ? void 0 : _a.unmount();
-        const el = getContainerEl();
-        el.innerHTML = '';
-    });
-});
-// implementation
+const VUE_ROOT = '__cy_vue_root';
+const cleanup = () => {
+    var _a;
+    (_a = Cypress.vueWrapper) === null || _a === void 0 ? void 0 : _a.unmount();
+    Cypress.$(`#${VUE_ROOT}`).remove();
+    Cypress.vueWrapper = null;
+    Cypress.vue = null;
+};
+/**
+ * Mounts a component and returns an object containing the component and VueWrapper
+ * @param componentOptions
+ * @param options
+ * @returns {Cypress.Chainable<{wrapper: VueWrapper<T>, component: T}>}
+ * @see {@link https://on.cypress.io/mounting-vue} for more details.
+ * @example
+ * import { mount } from '@cypress/vue'
+ * import { Stepper } from './Stepper.vue'
+ *
+ * it('mounts', () => {
+ *   cy.mount(Stepper)
+ *   cy.get('[data-cy=increment]').click()
+ *   cy.get('[data-cy=counter]').should('have.text', '1')
+ * })
+ */
 function mount(componentOptions, options = {}) {
-    // TODO: get the real displayName and props from VTU shallowMount
-    const componentName = getComponentDisplayName(componentOptions);
-    const message = `<${componentName} ... />`;
-    let logInstance;
+    checkForRemovedStyleOptions(options);
+    // Remove last mounted component if cy.mount is called more than once in a test
+    cleanup();
     // then wait for cypress to load
     return cy.then(() => {
         var _a, _b;
-        if (options.log !== false) {
-            logInstance = Cypress.log({
-                name: 'mount',
-                message: [message],
-            });
-        }
         // @ts-ignore
         const document = cy.state('document');
         const el = getContainerEl();
-        injectStylesBeforeElement(options, document, el);
         // merge the extensions with global
         if (options.extensions) {
             options.extensions.plugins = (_a = []) === null || _a === void 0 ? void 0 : _a.concat(options.extensions.plugins || [], options.extensions.use || []);
@@ -13835,29 +13734,43 @@ function mount(componentOptions, options = {}) {
             options.global = Object.assign(Object.assign({}, options.extensions), options.global);
         }
         const componentNode = document.createElement('div');
-        componentNode.id = '__cy_vue_root';
+        componentNode.id = VUE_ROOT;
         el.append(componentNode);
         // mount the component using VTU and return the wrapper in Cypress.VueWrapper
         const wrapper = VTUmount(componentOptions, Object.assign({ attachTo: componentNode }, options));
         Cypress.vueWrapper = wrapper;
         Cypress.vue = wrapper.vm;
         return cy
-            .wrap(wrapper, { log: false })
             .wait(1, { log: false })
             .then(() => {
-            if (logInstance) {
-                logInstance.snapshot('mounted');
-                logInstance.end();
+            if (options.log !== false) {
+                // TODO: get the real displayName and props from VTU shallowMount
+                const message = `<${getComponentDisplayName(componentOptions)} ... />`;
+                Cypress.log({
+                    name: 'mount',
+                    message: [message],
+                });
             }
-            // by returning undefined we keep the previous subject
-            // which is the mounted component
-            return undefined;
+            const returnVal = {
+                wrapper,
+                component: wrapper.vm,
+            };
+            return new Proxy(Object.create(returnVal), {
+                get(obj, prop) {
+                    // throw an error if it looks like the caller is trying to call a method on the VueWrapper that was originally returned
+                    if (Reflect.get(wrapper, prop)) {
+                        // @ts-expect-error - internal API
+                        Cypress.utils.throwErrByPath('mount.vue_yielded_value');
+                    }
+                    return Reflect.get(obj, prop);
+                },
+            });
         });
     });
 }
 /**
- * Extract the compoennt name from the object passed to mount
- * @param componentOptions the compoennt passed to mount
+ * Extract the component name from the object passed to mount
+ * @param componentOptions the component passed to mount
  * @returns name of the component
  */
 function getComponentDisplayName(componentOptions) {
@@ -13880,10 +13793,14 @@ function getComponentDisplayName(componentOptions) {
  * @example
  *  import {mountCallback} from '@cypress/vue'
  *  beforeEach(mountVue(component, options))
+ *
+ * Removed as of Cypress 11.0.0.
+ * @see https://on.cypress.io/migration-11-0-0-component-testing-updates
  */
 function mountCallback(component, options = {}) {
     return () => {
-        return mount(component, options);
+        // @ts-expect-error - undocumented API
+        Cypress.utils.throwErrByPath('mount.mount_callback');
     };
 }
 // Side effects from "import { mount } from '@cypress/<my-framework>'" are annoying, we should avoid doing this
@@ -13894,7 +13811,7 @@ function mountCallback(component, options = {}) {
 //    import { registerCT } from 'cypress/<my-framework>'
 //    registerCT()
 // Note: This would be a breaking change
-setupHooks();
+setupHooks(cleanup);
 
 exports.VueTestUtils = VueTestUtils;
 exports.mount = mount;

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

@@ -36,6 +36,11 @@ function __rest(s, e) {
 }
 
 const ROOT_SELECTOR = '[data-cy-root]';
+/**
+ * Gets the root element used to mount the component.
+ * @returns {HTMLElement} The root element
+ * @throws {Error} If the root element is not found
+ */
 const getContainerEl = () => {
     const el = document.querySelector(ROOT_SELECTOR);
     if (el) {
@@ -43,122 +48,19 @@ const getContainerEl = () => {
     }
     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);
+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);
         }
-    });
-}
-/**
- * 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.
+ * Utility function to register CT side effects and run cleanup code during the "test:before:run" Cypress hook
+ * @param optionalCallback Callback to be called before the next test runs
  */
-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
+    // 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') {
@@ -173,7 +75,6 @@ function setupHooks(optionalCallback) {
     // @ts-ignore
     Cypress.on('test:before:run', () => {
         optionalCallback === null || optionalCallback === void 0 ? void 0 : optionalCallback();
-        cleanupStyles();
     });
 }
 
@@ -13769,42 +13670,40 @@ mount: VTUmount,
 // available on the `VueTestUtils` import.
 shallowMount } = _VueTestUtils, VueTestUtils = __rest(_VueTestUtils, ["mount", "shallowMount"]);
 const DEFAULT_COMP_NAME = 'unknown';
-Cypress.on('run:start', () => {
-    // `mount` is designed to work with component testing only.
-    // it assumes ROOT_SELECTOR exists, which is not the case in e2e.
-    // if the user registers a custom command that imports `cypress/vue`,
-    // this event will be registered and cause an error when the user
-    // launches e2e (since it's common to use Cypress for both CT and E2E.
-    // https://github.com/cypress-io/cypress/issues/17438
-    if (Cypress.testingType !== 'component') {
-        return;
-    }
-    Cypress.on('test:before:run', () => {
-        var _a;
-        (_a = Cypress.vueWrapper) === null || _a === void 0 ? void 0 : _a.unmount();
-        const el = getContainerEl();
-        el.innerHTML = '';
-    });
-});
-// implementation
+const VUE_ROOT = '__cy_vue_root';
+const cleanup = () => {
+    var _a;
+    (_a = Cypress.vueWrapper) === null || _a === void 0 ? void 0 : _a.unmount();
+    Cypress.$(`#${VUE_ROOT}`).remove();
+    Cypress.vueWrapper = null;
+    Cypress.vue = null;
+};
+/**
+ * Mounts a component and returns an object containing the component and VueWrapper
+ * @param componentOptions
+ * @param options
+ * @returns {Cypress.Chainable<{wrapper: VueWrapper<T>, component: T}>}
+ * @see {@link https://on.cypress.io/mounting-vue} for more details.
+ * @example
+ * import { mount } from '@cypress/vue'
+ * import { Stepper } from './Stepper.vue'
+ *
+ * it('mounts', () => {
+ *   cy.mount(Stepper)
+ *   cy.get('[data-cy=increment]').click()
+ *   cy.get('[data-cy=counter]').should('have.text', '1')
+ * })
+ */
 function mount(componentOptions, options = {}) {
-    // TODO: get the real displayName and props from VTU shallowMount
-    const componentName = getComponentDisplayName(componentOptions);
-    const message = `<${componentName} ... />`;
-    let logInstance;
+    checkForRemovedStyleOptions(options);
+    // Remove last mounted component if cy.mount is called more than once in a test
+    cleanup();
     // then wait for cypress to load
     return cy.then(() => {
         var _a, _b;
-        if (options.log !== false) {
-            logInstance = Cypress.log({
-                name: 'mount',
-                message: [message],
-            });
-        }
         // @ts-ignore
         const document = cy.state('document');
         const el = getContainerEl();
-        injectStylesBeforeElement(options, document, el);
         // merge the extensions with global
         if (options.extensions) {
             options.extensions.plugins = (_a = []) === null || _a === void 0 ? void 0 : _a.concat(options.extensions.plugins || [], options.extensions.use || []);
@@ -13812,29 +13711,43 @@ function mount(componentOptions, options = {}) {
             options.global = Object.assign(Object.assign({}, options.extensions), options.global);
         }
         const componentNode = document.createElement('div');
-        componentNode.id = '__cy_vue_root';
+        componentNode.id = VUE_ROOT;
         el.append(componentNode);
         // mount the component using VTU and return the wrapper in Cypress.VueWrapper
         const wrapper = VTUmount(componentOptions, Object.assign({ attachTo: componentNode }, options));
         Cypress.vueWrapper = wrapper;
         Cypress.vue = wrapper.vm;
         return cy
-            .wrap(wrapper, { log: false })
             .wait(1, { log: false })
             .then(() => {
-            if (logInstance) {
-                logInstance.snapshot('mounted');
-                logInstance.end();
+            if (options.log !== false) {
+                // TODO: get the real displayName and props from VTU shallowMount
+                const message = `<${getComponentDisplayName(componentOptions)} ... />`;
+                Cypress.log({
+                    name: 'mount',
+                    message: [message],
+                });
             }
-            // by returning undefined we keep the previous subject
-            // which is the mounted component
-            return undefined;
+            const returnVal = {
+                wrapper,
+                component: wrapper.vm,
+            };
+            return new Proxy(Object.create(returnVal), {
+                get(obj, prop) {
+                    // throw an error if it looks like the caller is trying to call a method on the VueWrapper that was originally returned
+                    if (Reflect.get(wrapper, prop)) {
+                        // @ts-expect-error - internal API
+                        Cypress.utils.throwErrByPath('mount.vue_yielded_value');
+                    }
+                    return Reflect.get(obj, prop);
+                },
+            });
         });
     });
 }
 /**
- * Extract the compoennt name from the object passed to mount
- * @param componentOptions the compoennt passed to mount
+ * Extract the component name from the object passed to mount
+ * @param componentOptions the component passed to mount
  * @returns name of the component
  */
 function getComponentDisplayName(componentOptions) {
@@ -13857,10 +13770,14 @@ function getComponentDisplayName(componentOptions) {
  * @example
  *  import {mountCallback} from '@cypress/vue'
  *  beforeEach(mountVue(component, options))
+ *
+ * Removed as of Cypress 11.0.0.
+ * @see https://on.cypress.io/migration-11-0-0-component-testing-updates
  */
 function mountCallback(component, options = {}) {
     return () => {
-        return mount(component, options);
+        // @ts-expect-error - undocumented API
+        Cypress.utils.throwErrByPath('mount.mount_callback');
     };
 }
 // Side effects from "import { mount } from '@cypress/<my-framework>'" are annoying, we should avoid doing this
@@ -13871,6 +13788,6 @@ function mountCallback(component, options = {}) {
 //    import { registerCT } from 'cypress/<my-framework>'
 //    registerCT()
 // Note: This would be a breaking change
-setupHooks();
+setupHooks(cleanup);
 
 export { VueTestUtils, mount, mountCallback };