cypress 10.11.0 → 11.0.0

package/vue/package.json

@@ -8,7 +8,7 @@
     "cy:open": "node ../../scripts/cypress.js open --component --project ${PWD}",
     "cy:run": "node ../../scripts/cypress.js run --component --project ${PWD}",
     "build": "rimraf dist && rollup -c rollup.config.mjs",
-    "postbuild": "node --require @packages/ts/register ./inline-types.ts && node ../../scripts/sync-exported-npm-with-cli.js",
+    "postbuild": "node ../../scripts/sync-exported-npm-with-cli.js",
     "typecheck": "yarn tsd && vue-tsc --noEmit",
     "test": "yarn cy:run",
     "tsd": "yarn build && yarn tsc -p test-tsd/tsconfig.tsd.json",

package/vue2/CHANGELOG.md

@@ -1,3 +1,30 @@
+# [@cypress/vue2-v2.0.0](https://github.com/cypress-io/cypress/compare/@cypress/vue2-v1.1.2...@cypress/vue2-v2.0.0) (2022-11-07)
+
+
+### Bug Fixes
+
+* remove dependence on @cypress/<dep> types ([#24415](https://github.com/cypress-io/cypress/issues/24415)) ([58e0ab9](https://github.com/cypress-io/cypress/commit/58e0ab91604618ea6f75932622f7e66e419270e6))
+* remove last mounted component upon subsequent mount calls ([#24470](https://github.com/cypress-io/cypress/issues/24470)) ([f39eb1c](https://github.com/cypress-io/cypress/commit/f39eb1c19e0923bda7ae263168fc6448da942d54))
+* remove some CT functions and props ([#24419](https://github.com/cypress-io/cypress/issues/24419)) ([294985f](https://github.com/cypress-io/cypress/commit/294985f8b3e0fa00ed66d25f88c8814603766074))
+
+
+### Features
+
+* include component and wrapper in return type for vue mount adapter ([#24479](https://github.com/cypress-io/cypress/issues/24479)) ([33875d7](https://github.com/cypress-io/cypress/commit/33875d75505416b1f65ca7c6d5dedc46f3289f1b))
+
+
+### BREAKING CHANGES
+
+* remove last mounted component upon subsequent mount calls of mount
+* Vue mount returns wrapper and component rather than wrapper only
+
+# [@cypress/vue2-v1.1.2](https://github.com/cypress-io/cypress/compare/@cypress/vue2-v1.1.1...@cypress/vue2-v1.1.2) (2022-11-01)
+
+
+### Bug Fixes
+
+* Hovering over mount in command log does not show component in AUT ([#24346](https://github.com/cypress-io/cypress/issues/24346)) ([355d210](https://github.com/cypress-io/cypress/commit/355d2101d38ea4d1e93b9c571cf77babab2bbbfc))
+
 # [@cypress/vue2-v1.1.1](https://github.com/cypress-io/cypress/compare/@cypress/vue2-v1.1.0...@cypress/vue2-v1.1.1) (2022-10-13)
 
 

package/vue2/README.md

@@ -34,21 +34,17 @@ describe('HelloWorld component', () => {
 
 ### Options
 
-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, { propsData: { todo } })
 ```
 
 ### Global Vue Options

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

@@ -9,11 +9,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var require$$0$1 = require('vue');
+var Vue = require('vue');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var require$$0__default = /*#__PURE__*/_interopDefaultLegacy(require$$0$1);
+var Vue__default = /*#__PURE__*/_interopDefaultLegacy(Vue);
 
 var commonjsGlobal$1 = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -5737,15 +5737,11 @@ var build = /*#__PURE__*/Object.defineProperty({
 }, '__esModule', {value: true});
 
 try {
-  var vueVersion = require$$0__default["default"].version;
+  var vueVersion = Vue__default["default"].version;
 } catch (e) {}
 
 var vueTemplateCompiler = build;
 
-function _interopDefaultLegacy$1 (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var Vue__default = /*#__PURE__*/_interopDefaultLegacy$1(require$$0__default["default"]);
-
 // 
 
 function createVNodes(vm, slotValue, name) {
@@ -5791,7 +5787,7 @@ function createSlotVNodes(
   }, [])
 }
 
-var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof commonjsGlobal$1 !== 'undefined' ? commonjsGlobal$1 : typeof self !== 'undefined' ? self : {};
+var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
 function createCommonjsModule(fn, basedir, module) {
 	return module = {
@@ -7417,17 +7413,17 @@ var DOM_SELECTOR = 'DOM_SELECTOR';
 var INVALID_SELECTOR = 'INVALID_SELECTOR';
 
 var VUE_VERSION = Number(
-  ((Vue__default['default'].version.split('.')[0]) + "." + (Vue__default['default'].version.split('.')[1]))
+  ((Vue__default["default"].version.split('.')[0]) + "." + (Vue__default["default"].version.split('.')[1]))
 );
 
 var FUNCTIONAL_OPTIONS =
   VUE_VERSION >= 2.5 ? 'fnOptions' : 'functionalOptions';
 
-var BEFORE_RENDER_LIFECYCLE_HOOK = semver.gt(Vue__default['default'].version, '2.1.8')
+var BEFORE_RENDER_LIFECYCLE_HOOK = semver.gt(Vue__default["default"].version, '2.1.8')
   ? 'beforeCreate'
   : 'beforeMount';
 
-var CREATE_ELEMENT_ALIAS = semver.gt(Vue__default['default'].version, '2.1.5')
+var CREATE_ELEMENT_ALIAS = semver.gt(Vue__default["default"].version, '2.1.5')
   ? '_c'
   : '_h';
 
@@ -7501,7 +7497,7 @@ var isChrome = UA && /chrome\/\d+/.test(UA) && !isEdge;
 
 // get the event used to trigger v-model handler that updates bound data
 function getCheckedEvent() {
-  var version = Vue__default['default'].version;
+  var version = Vue__default["default"].version;
 
   if (semver.satisfies(version, '2.1.9 - 2.1.10')) {
     return 'click'
@@ -7521,9 +7517,9 @@ function getCheckedEvent() {
  * @return {Promise<R>}
  */
 function nextTick() {
-  if (VUE_VERSION > 2) { return Vue__default['default'].nextTick() }
+  if (VUE_VERSION > 2) { return Vue__default["default"].nextTick() }
   return new Promise(function (resolve) {
-    Vue__default['default'].nextTick(resolve);
+    Vue__default["default"].nextTick(resolve);
   })
 }
 
@@ -7567,7 +7563,7 @@ function addMocks(
       );
     }
     // $FlowIgnore
-    Vue__default['default'].util.defineReactive(_Vue, key, mockedProperties[key]);
+    Vue__default["default"].util.defineReactive(_Vue, key, mockedProperties[key]);
   });
 }
 
@@ -8068,8 +8064,8 @@ function createStubFromComponent(
   var tagName = (name || 'anonymous') + "-stub";
 
   // ignoreElements does not exist in Vue 2.0.x
-  if (Vue__default['default'].config.ignoredElements) {
-    Vue__default['default'].config.ignoredElements.push(tagName);
+  if (Vue__default["default"].config.ignoredElements) {
+    Vue__default["default"].config.ignoredElements.push(tagName);
   }
 
   return Object.assign({}, getCoreProperties(componentOptions),
@@ -14756,7 +14752,15 @@ ErrorWrapper.prototype.destroy = function destroy () {
  */
 
 function isStyleVisible(element) {
-  var ref = element.style;
+  if (!(element instanceof HTMLElement) && !(element instanceof SVGElement)) {
+    return false
+  }
+
+  // Per https://lists.w3.org/Archives/Public/www-style/2018May/0031.html
+  // getComputedStyle should only work with connected elements.
+  var ref = element.isConnected
+    ? getComputedStyle(element)
+    : element.style;
   var display = ref.display;
   var visibility = ref.visibility;
   var opacity = ref.opacity;
@@ -17064,36 +17068,6 @@ var VueWrapper = /*@__PURE__*/(function (Wrapper) {
 
 // 
 
-var isEnabled = false;
-var wrapperInstances = [];
-
-function enableAutoDestroy(hook) {
-  if (isEnabled) {
-    throwError('enableAutoDestroy cannot be called more than once');
-  }
-
-  isEnabled = true;
-
-  hook(function () {
-    wrapperInstances.forEach(function (wrapper) {
-      // skip child wrappers created by wrapper.find()
-      if (wrapper.vm || wrapper.isFunctionalComponent) {
-        wrapper.destroy();
-      }
-    });
-
-    wrapperInstances.length = 0;
-  });
-}
-
-function trackInstance(wrapper) {
-  if (!isEnabled) { return }
-
-  wrapperInstances.push(wrapper);
-}
-
-// 
-
 function createWrapper(
   node,
   options
@@ -17103,14 +17077,12 @@ function createWrapper(
   var componentInstance = node.child;
   if (componentInstance) {
     var wrapper$1 = new VueWrapper(componentInstance, options);
-    trackInstance(wrapper$1);
     return wrapper$1
   }
   var wrapper =
-    node instanceof Vue__default['default']
+    node instanceof Vue__default["default"]
       ? new VueWrapper(node, options)
       : new Wrapper(node, options);
-  trackInstance(wrapper);
   return wrapper
 }
 
@@ -19609,7 +19581,7 @@ function _createLocalVue(
   _Vue,
   config
 ) {
-  if ( _Vue === void 0 ) _Vue = Vue__default['default'];
+  if ( _Vue === void 0 ) _Vue = Vue__default["default"];
   if ( config === void 0 ) config = {};
 
   var instance = _Vue.extend();
@@ -19631,14 +19603,14 @@ function _createLocalVue(
   });
 
   // config is not enumerable
-  instance.config = cloneDeep_1(Vue__default['default'].config);
+  instance.config = cloneDeep_1(Vue__default["default"].config);
 
   // if a user defined errorHandler is defined by a localVue instance via createLocalVue, register it
   instance.config.errorHandler = config.errorHandler;
 
   // option merge strategies need to be exposed by reference
   // so that merge strats registered by plugins can work properly
-  instance.config.optionMergeStrategies = Vue__default['default'].config.optionMergeStrategies;
+  instance.config.optionMergeStrategies = Vue__default["default"].config.optionMergeStrategies;
 
   // make sure all extends are based on this instance.
   // this is important so that global components registered by plugins,
@@ -19759,8 +19731,8 @@ function validateOptions(options, component) {
   }
 }
 
-Vue__default['default'].config.productionTip = false;
-Vue__default['default'].config.devtools = false;
+Vue__default["default"].config.productionTip = false;
+Vue__default["default"].config.devtools = false;
 
 function mount$1(component, options) {
   if ( options === void 0 ) options = {};
@@ -19769,7 +19741,7 @@ function mount$1(component, options) {
 
   polyfill();
 
-  addGlobalErrorHandler(Vue__default['default']);
+  addGlobalErrorHandler(Vue__default["default"]);
 
   var _Vue = _createLocalVue(
     options.localVue,
@@ -19815,11 +19787,13 @@ function createLocalVue(config) {
 
   return _createLocalVue(undefined, config)
 }
-var createLocalVue_1 = createLocalVue;
-var enableAutoDestroy_1 = enableAutoDestroy;
-var mount_1 = mount$1;
 
 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) {
@@ -19827,122 +19801,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') {
@@ -19957,10 +19828,10 @@ function setupHooks(optionalCallback) {
     // @ts-ignore
     Cypress.on('test:before:run', () => {
         optionalCallback === null || optionalCallback === void 0 ? void 0 : optionalCallback();
-        cleanupStyles();
     });
 }
 
+/// <reference types="cypress" />
 const defaultOptions = [
     'vue',
     'extensions',
@@ -20027,6 +19898,10 @@ const resetStoreVM = (Vue, { store }) => {
     });
     return store;
 };
+const cleanup = () => {
+    var _a;
+    (_a = Cypress.vueWrapper) === null || _a === void 0 ? void 0 : _a.destroy();
+};
 /**
  * Direct Vue errors to the top error handler
  * where they will fail Cypress test
@@ -20040,15 +19915,6 @@ function failTestOnVueError(err, vm, info) {
         throw err;
     });
 }
-function registerAutoDestroy($destroy) {
-    Cypress.on('test:before:run', () => {
-        $destroy();
-    });
-}
-enableAutoDestroy_1(registerAutoDestroy);
-const injectStyles = (options) => {
-    return injectStylesBeforeElement(options, document, getContainerEl());
-};
 /**
  * Extract the component name from the object passed to mount
  * @param componentOptions the compoennt passed to mount
@@ -20071,18 +19937,25 @@ function getComponentDisplayName(componentOptions) {
 }
 /**
  * Mounts a Vue component inside Cypress browser.
- * @param {object} component imported from Vue file
+ * @param {VueComponent} component imported from Vue file
+ * @param {MountOptionsArgument} optionsOrProps used to pass options to component being mounted
+ * @returns {Cypress.Chainable<{wrapper: Wrapper<T>, component: T}
  * @example
- *  import Greeting from './Greeting.vue'
- *  import { mount } from '@cypress/vue2'
- *  it('works', () => {
- *    // pass props, additional extensions, etc
- *    mount(Greeting, { ... })
- *    // use any Cypress command to test the component
- *    cy.get('#greeting').should('be.visible')
- *  })
+ * 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')
+ * })
+ * @see {@link https://on.cypress.io/mounting-vue} for more details.
+ *
  */
 const mount = (component, optionsOrProps = {}) => {
+    checkForRemovedStyleOptions(optionsOrProps);
+    // Remove last mounted component if cy.mount is called more than once in a test
+    cleanup();
     const options = Cypress._.pick(optionsOrProps, defaultOptions);
     const props = Cypress._.omit(optionsOrProps, defaultOptions);
     const componentName = getComponentDisplayName(component);
@@ -20090,26 +19963,9 @@ const mount = (component, optionsOrProps = {}) => {
     return cy
         .window({
         log: false,
-    })
-        .then(() => {
-        const { style, stylesheets, stylesheet, styles, cssFiles, cssFile } = optionsOrProps;
-        injectStyles({
-            style,
-            stylesheets,
-            stylesheet,
-            styles,
-            cssFiles,
-            cssFile,
-        });
     })
         .then((win) => {
-        if (optionsOrProps.log !== false) {
-            Cypress.log({
-                name: 'mount',
-                message: [message],
-            }).snapshot('mounted').end();
-        }
-        const localVue = createLocalVue_1();
+        const localVue = createLocalVue();
         // @ts-ignore
         win.Vue = localVue;
         localVue.config.errorHandler = failTestOnVueError;
@@ -20135,9 +19991,23 @@ const mount = (component, optionsOrProps = {}) => {
         registerGlobalComponents(localVue, options);
         props.attachTo = componentNode;
         const wrapper = localVue.extend(component);
-        const VTUWrapper = mount_1(wrapper, Object.assign({ localVue }, props));
+        const VTUWrapper = mount$1(wrapper, Object.assign({ localVue }, props));
         Cypress.vue = VTUWrapper.vm;
         Cypress.vueWrapper = VTUWrapper;
+        return {
+            wrapper: VTUWrapper,
+            component: VTUWrapper.vm,
+        };
+    })
+        .then(() => {
+        if (optionsOrProps.log !== false) {
+            return Vue__default["default"].nextTick(() => {
+                Cypress.log({
+                    name: 'mount',
+                    message: [message],
+                });
+            });
+        }
     });
 };
 /**
@@ -20145,9 +20015,15 @@ const mount = (component, optionsOrProps = {}) => {
  * @example
  *  import {mountCallback} from '@cypress/vue2'
  *  beforeEach(mountVue(component, options))
+ *
+ * Removed as of Cypress 11.0.0.
+ * @see https://on.cypress.io/migration-11-0-0-component-testing-updates
  */
 const mountCallback = (component, options) => {
-    return () => mount(component, options);
+    return () => {
+        // @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
 // by creating an explicit function/import that the user can register in their 'component.js' support file,
@@ -20157,7 +20033,7 @@ const mountCallback = (component, options) => {
 //    import { registerCT } from 'cypress/<my-framework>'
 //    registerCT()
 // Note: This would be a breaking change
-setupHooks();
+setupHooks(cleanup);
 
 exports.mount = mount;
 exports.mountCallback = mountCallback;