cypress 10.11.0 → 11.0.0

package/mount-utils/dist/index.js

@@ -1,4 +1,9 @@
 export 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
+ */
 export const getContainerEl = () => {
     const el = document.querySelector(ROOT_SELECTOR);
     if (el) {
@@ -6,122 +11,19 @@ export 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
- *
- */
-export function cleanupStyles() {
-    const styles = document.body.querySelectorAll('[data-cy=injected-style-tag]');
-    styles.forEach((styleElement) => {
-        if (styleElement.parentElement) {
-            styleElement.parentElement.removeChild(styleElement);
+export 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);
         }
-    });
-    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.
+ * 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
  */
-export 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);
-};
 export 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') {
@@ -136,6 +38,25 @@ export function setupHooks(optionalCallback) {
     // @ts-ignore
     Cypress.on('test:before:run', () => {
         optionalCallback === null || optionalCallback === void 0 ? void 0 : optionalCallback();
-        cleanupStyles();
     });
 }
+/**
+ * Remove any style or extra link elements from the iframe placeholder
+ * left from any previous test
+ *
+ * Removed as of Cypress 11.0.0
+ * @see https://on.cypress.io/migration-11-0-0-component-testing-updates
+ */
+export function cleanupStyles() {
+    Cypress.utils.throwErrByPath('mount.cleanup_styles');
+}
+/**
+ * Injects custom style text or CSS file or 3rd party style resources
+ * into the given document.
+ *
+ * Removed as of Cypress 11.0.0.
+ * @see https://on.cypress.io/migration-11-0-0-component-testing-updates
+ */
+export const injectStylesBeforeElement = (options, document, el) => {
+    Cypress.utils.throwErrByPath('mount.inject_styles_before_element');
+};

package/mount-utils/package.json

@@ -15,6 +15,7 @@
     "@rollup/plugin-commonjs": "^17.1.0",
     "@rollup/plugin-node-resolve": "^11.1.1",
     "rollup": "^2.38.5",
+    "rollup-plugin-dts": "^4.2.3",
     "rollup-plugin-typescript2": "^0.29.0",
     "typescript": "^4.7.4"
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cypress",
-  "version": "10.11.0",
+  "version": "11.0.0",
   "main": "index.js",
   "scripts": {
     "postinstall": "node index.js --exec install",
@@ -118,8 +118,8 @@
   },
   "buildInfo": {
     "commitBranch": "develop",
-    "commitSha": "75cce8187c5b888151bf06748ec03d7abf6ddfd5",
-    "commitDate": "2022-10-24T23:05:58.000Z",
+    "commitSha": "2513beac307e95267ab736a93a39cd1cd1280506",
+    "commitDate": "2022-11-08T20:29:47.000Z",
     "stable": true
   },
   "description": "Cypress is a next generation front end testing tool built for the modern web",

package/react/CHANGELOG.md

@@ -1,3 +1,30 @@
+# [@cypress/react-v7.0.1](https://github.com/cypress-io/cypress/compare/@cypress/react-v7.0.0...@cypress/react-v7.0.1) (2022-11-08)
+
+
+### Bug Fixes
+
+* make component derived info not throw ([#24571](https://github.com/cypress-io/cypress/issues/24571)) ([838dd4f](https://github.com/cypress-io/cypress/commit/838dd4fa2e0ec56633d0af2faf10a47d190b5594))
+
+# [@cypress/react-v7.0.0](https://github.com/cypress-io/cypress/compare/@cypress/react-v6.2.1...@cypress/react-v7.0.0) (2022-11-07)
+
+
+### Bug Fixes
+
+* 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))
+
+
+### BREAKING CHANGES
+
+* remove last mounted component upon subsequent mount calls of mount
+
+# [@cypress/react-v6.2.1](https://github.com/cypress-io/cypress/compare/@cypress/react-v6.2.0...@cypress/react-v6.2.1) (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/react-v6.2.0](https://github.com/cypress-io/cypress/compare/@cypress/react-v6.1.1...@cypress/react-v6.2.0) (2022-08-30)
 
 

package/react/README.md

@@ -31,8 +31,6 @@ For more information, please check the official docs for [running Cypress](https
 
 - `mount` is the most important function, allows to mount a given React component as a mini web application and interact with it using Cypress commands
 - `createMount` factory function that creates new `mount` function with default options
-- `unmount` removes previously mounted component, mostly useful to test how the component cleans up after itself
-- `mountHook` mounts a given React Hook in a test component for full testing, see `hooks` example
 
 ## Examples
 
@@ -65,20 +63,7 @@ it('looks right', () => {
 })
 ```
 
-### Extra styles
-
-You can pass additional styles, css files and external stylesheets to load, see [docs/styles.md](./docs/styles.md) for the full list of options.
-
-```js
-const todo = {
-  id: '123',
-  title: 'Write more tests',
-}
-mount(<Todo todo={todo} />, {
-  stylesheets: [
-    'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.css',
-  ],
-})
+See [docs/styles.md](./docs/styles.md) for full list of options.
 ```
 
 You may also specify the `ReactDOM` package to use. This can be useful in complex monorepo setups that have different versions of React and React DOM installed. If you see an error relating to [mismatching versions of React or React DOM](https://reactjs.org/warnings/invalid-hook-call-warning.html#mismatching-versions-of-react-and-react-dom), this may be the solution. You can do this using the `ReactDom` option:
@@ -87,12 +72,7 @@ You may also specify the `ReactDOM` package to use. This can be useful in comple
 // if you have multiple versions of ReactDom in your monorepo
 import ReactDom from 'react-dom'
 
-mount(<Todo todo={todo} />, {
-  stylesheets: [
-    'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.css',
-  ],
-  ReactDom
-})
+mount(<Todo todo={todo} />, { reactDom: ReactDom })
 ```
 
 ## Compatibility