cypress 10.9.0 → 10.11.0

package/angular/CHANGELOG.md

@@ -1,3 +1,43 @@
+# [@cypress/angular-v1.1.2](https://github.com/cypress-io/cypress/compare/@cypress/angular-v1.1.1...@cypress/angular-v1.1.2) (2022-10-11)
+
+
+### Bug Fixes
+
+* angular and nuxt ct tests now fail on uncaught exceptions ([#24122](https://github.com/cypress-io/cypress/issues/24122)) ([53eef4f](https://github.com/cypress-io/cypress/commit/53eef4fbd7e1caf32f0183cadbc0e4cf05524c34))
+
+# [@cypress/angular-v1.1.1](https://github.com/cypress-io/cypress/compare/@cypress/angular-v1.1.0...@cypress/angular-v1.1.1) (2022-10-04)
+
+
+### Bug Fixes
+
+* **angular:** call ngOnChanges after mount ([#23596](https://github.com/cypress-io/cypress/issues/23596)) ([670d438](https://github.com/cypress-io/cypress/commit/670d43830947c3ea93ef9fdc9c90932a817eb453))
+
+# [@cypress/angular-v1.1.0](https://github.com/cypress-io/cypress/compare/@cypress/angular-v1.0.0...@cypress/angular-v1.1.0) (2022-09-28)
+
+
+### Bug Fixes
+
+* angular 14.2 mount compilation error ([#23593](https://github.com/cypress-io/cypress/issues/23593)) ([2f337db](https://github.com/cypress-io/cypress/commit/2f337dbfa2bb212754c8fa82e3f4548a2f3a07a4))
+* Fix missing `it.skip` function in Angular tests ([#23829](https://github.com/cypress-io/cypress/issues/23829)) ([64c0f45](https://github.com/cypress-io/cypress/commit/64c0f45182456bd43f4b64b2311e816dde615236))
+
+
+### Features
+
+* adding svelte component testing support ([#23553](https://github.com/cypress-io/cypress/issues/23553)) ([f6eaad4](https://github.com/cypress-io/cypress/commit/f6eaad40e1836fa9db87c60defa5ae6f390c8fd8))
+
+# [@cypress/angular-v1.1.0](https://github.com/cypress-io/cypress/compare/@cypress/angular-v1.0.0...@cypress/angular-v1.1.0) (2022-09-27)
+
+
+### Bug Fixes
+
+* angular 14.2 mount compilation error ([#23593](https://github.com/cypress-io/cypress/issues/23593)) ([2f337db](https://github.com/cypress-io/cypress/commit/2f337dbfa2bb212754c8fa82e3f4548a2f3a07a4))
+* Fix missing `it.skip` function in Angular tests ([#23829](https://github.com/cypress-io/cypress/issues/23829)) ([64c0f45](https://github.com/cypress-io/cypress/commit/64c0f45182456bd43f4b64b2311e816dde615236))
+
+
+### Features
+
+* adding svelte component testing support ([#23553](https://github.com/cypress-io/cypress/issues/23553)) ([f6eaad4](https://github.com/cypress-io/cypress/commit/f6eaad40e1836fa9db87c60defa5ae6f390c8fd8))
+
 # [@cypress/angular-v1.1.0](https://github.com/cypress-io/cypress/compare/@cypress/angular-v1.0.0...@cypress/angular-v1.1.0) (2022-09-23)
 
 

package/angular/dist/index.js

@@ -8,7 +8,7 @@
 import 'zone.js';
 import 'zone.js/testing';
 import { CommonModule } from '@angular/common';
-import { Component, EventEmitter } from '@angular/core';
+import { Injectable, Component, EventEmitter, SimpleChange, ErrorHandler } from '@angular/core';
 import { getTestBed, TestBed } from '@angular/core/testing';
 import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
 
@@ -95,6 +95,14 @@ window.Mocha['__zone_patch__'] = false;
 // Written up under https://github.com/angular/angular/issues/46297 but is not seeing movement
 // so we'll patch here pending a fix in that library
 globalThis.it.skip = globalThis.xit;
+let CypressAngularErrorHandler = class CypressAngularErrorHandler {
+    handleError(error) {
+        throw error;
+    }
+};
+CypressAngularErrorHandler = __decorate([
+    Injectable()
+], CypressAngularErrorHandler);
 /**
  * Bootstraps the TestModuleMetaData passed to the TestBed
  *
@@ -110,6 +118,15 @@ function bootstrapModule(component, config) {
     if (!testModuleMetaData.imports) {
         testModuleMetaData.imports = [];
     }
+    if (!testModuleMetaData.providers) {
+        testModuleMetaData.providers = [];
+    }
+    // Replace default error handler since it will swallow uncaught exceptions.
+    // We want these to be uncaught so Cypress catches it and fails the test
+    testModuleMetaData.providers.push({
+        provide: ErrorHandler,
+        useClass: CypressAngularErrorHandler,
+    });
     // check if the component is a standalone component
     if (component.ɵcmp.standalone) {
         testModuleMetaData.imports.push(component);
@@ -198,6 +215,19 @@ function setupComponent(config, fixture) {
             }
         });
     }
+    // Manually call ngOnChanges when mounting components using the class syntax.
+    // This is necessary because we are assigning input values to the class directly
+    // on mount and therefore the ngOnChanges() lifecycle is not triggered.
+    if (component.ngOnChanges && config.componentProperties) {
+        const { componentProperties } = config;
+        const simpleChanges = Object.entries(componentProperties).reduce((acc, [key, value]) => {
+            acc[key] = new SimpleChange(null, value, true);
+            return acc;
+        }, {});
+        if (Object.keys(componentProperties).length > 0) {
+            component.ngOnChanges(simpleChanges);
+        }
+    }
     return component;
 }
 /**

package/mount-utils/README.md

@@ -8,6 +8,142 @@ It is used in:
 
 - [`@cypress/react`](https://github.com/cypress-io/cypress/tree/develop/npm/react)
 - [`@cypress/vue`](https://github.com/cypress-io/cypress/tree/develop/npm/vue)
+- [`@cypress/svelte`](https://github.com/cypress-io/cypress/tree/develop/npm/svelte)
+- [`@cypress/angular`](https://github.com/cypress-io/cypress/tree/develop/npm/angular)
+
+## What is a Mount Adapter?
+
+All Component Tests require a component to be **mounted**. This is generally done with a custom command, `cy.mount` by default.
+
+
+### Requirements
+
+All the functionality used to create the first party Mount adapters is available to support third parties adapters. At minimum, a Mount Adapter must:
+
+- Receive a component as the first argument. This could be class, function etc - depends on the framework.
+- Return a Cypress Chainable (for example using `cy.wrap`) that resolves whatever is idiomatic for your framework
+
+In addition, we recommend that Mount Adapters:
+
+- receive a second argument that extends `StyleOptions` from `@cypress/mount-utils`
+- calls `injectStylesBeforeElement` from `@cypress/mount-utils` before mounting the component
+- calls `setupHooks` to register the required lifecycle hooks for `@cypress/mount-utils` to work
+
+This will let the user inject styles `<style>...</style>` and stylesheets `<link rel="stylesheet">`, which is very useful for developing components.
+
+### Example Mount Adapter: Web Components 
+
+Here's a simple yet realistic example of Mount Adapter targeting Web Components. It uses utilities from this package (`@cypress/mount-utils`) This is recommended, so your adapter behaves similar to the first party Mount Adapters.
+
+```ts
+import {
+  ROOT_SELECTOR,
+  setupHooks,
+  injectStylesBeforeElement,
+  getContainerEl,
+  StyleOptions
+} from "@cypress/mount-utils";
+
+Cypress.on("run:start", () => {
+  // Consider doing a check to ensure your adapter only runs in Component Testing mode.
+  if (Cypress.testingType !== "component") {
+    return;
+  }
+
+  Cypress.on("test:before:run", () => {
+    // Do some cleanup from previous test - for example, clear the DOM.
+    getContainerEl().innerHTML = "";
+  });
+});
+
+function maybeRegisterComponent<T extends CustomElementConstructor>(
+  name: string,
+  webComponent: T
+) {
+  // Avoid double-registering a Web Component.
+  if (window.customElements.get(name)) {
+    return;
+  }
+
+  window.customElements.define(name, webComponent);
+}
+
+export function mount(
+  webComponent: CustomElementConstructor,
+  options?: Partial<StyleOptions>
+): Cypress.Chainable {
+  // Get root selector defined in `cypress/support.component-index.html
+  const $root = document.querySelector(ROOT_SELECTOR)!;
+
+  // Change to kebab-case to comply with Web Component naming convention
+  const name = webComponent.name
+    .replace(/([a-z0–9])([A-Z])/g, "$1-$2")
+    .toLowerCase();
+
+  /// Register Web Component
+  maybeRegisterComponent(name, webComponent);
+
+  // Inject user styles before mounting the component
+  injectStylesBeforeElement(options ?? {}, document, getContainerEl())
+
+  // Render HTML containing component.
+  $root.innerHTML = `<${name} id="root"></${name}>`;
+
+  // Log a messsage in the Command Log.
+  Cypress.log({
+    name: "mount",
+    message: [`<${name} ... />`],
+  });
+
+  // Return a `Cypress.Chainable` that returns whatever is idiomatic
+  // in the framework your mount adapter targets.
+  return cy.wrap(document.querySelector("#root"), { log: false });
+}
+
+// Setup Cypress lifecycle hooks. This tears down any styles
+// injected by injectStylesBeforeElement, etc.
+setupHooks();
+```
+
+Usage:
+
+```ts
+// User will generally register a `cy.mount` command in `cypress/support/component.js`:
+
+import { mount } from '@package/cypress-web-components'
+
+Cypress.Commands.add('mount', mount)
+
+// Test
+export class WebCounter extends HTMLElement {
+  constructor() {
+    super();
+  }
+
+  connectedCallback() {
+    this.innerHTML = `
+      <div>
+        <button>Counter</button>
+      </div>`;
+  }
+}
+
+
+describe('web-component.cy.ts', () => {
+  it('playground', () => {
+    cy.mount(WebCounter, {
+      styles: `
+        button {
+          background: lightblue;
+          color: white;
+        }
+      `
+    })
+  })
+})
+```
+
+For more robust, production ready examples, check out our first party adapters.
 
 ## Compatibility
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cypress",
-  "version": "10.9.0",
+  "version": "10.11.0",
   "main": "index.js",
   "scripts": {
     "postinstall": "node index.js --exec install",
@@ -118,11 +118,11 @@
   },
   "buildInfo": {
     "commitBranch": "develop",
-    "commitSha": "a75d3ec81f3405db6721a89875d89cdca0109013",
-    "commitDate": "2022-09-27T02:16:48.000Z",
+    "commitSha": "75cce8187c5b888151bf06748ec03d7abf6ddfd5",
+    "commitDate": "2022-10-24T23:05:58.000Z",
     "stable": true
   },
-  "description": "Cypress.io end to end testing tool",
+  "description": "Cypress is a next generation front end testing tool built for the modern web",
   "homepage": "https://github.com/cypress-io/cypress",
   "license": "MIT",
   "bugs": {
@@ -140,6 +140,7 @@
     "e2e",
     "end-to-end",
     "integration",
+    "component",
     "mocks",
     "runner",
     "spies",

package/react18/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [@cypress/react18-v1.1.1](https://github.com/cypress-io/cypress/compare/@cypress/react18-v1.1.0...@cypress/react18-v1.1.1) (2022-10-13)
+
+
+### Bug Fixes
+
+* cypress/react18 rerender ([#23360](https://github.com/cypress-io/cypress/issues/23360)) ([8b8f20e](https://github.com/cypress-io/cypress/commit/8b8f20eec77d4c0a704aee7f7077dc92dbafb93f))
+
 # [@cypress/react18-v1.1.0](https://github.com/cypress-io/cypress/compare/@cypress/react18-v1.0.1...@cypress/react18-v1.1.0) (2022-08-30)
 
 

package/svelte/CHANGELOG.md

@@ -1,3 +1,11 @@
+# [@cypress/svelte-v1.0.1](https://github.com/cypress-io/cypress/compare/@cypress/svelte-v1.0.0...@cypress/svelte-v1.0.1) (2022-09-29)
+
+
+### Bug Fixes
+
+* release svelte ([b86403f](https://github.com/cypress-io/cypress/commit/b86403fcbcc85ce5be1ca96bbf42357dd24c07dd))
+* **svelte:** default mount log to true ([#23771](https://github.com/cypress-io/cypress/issues/23771)) ([96b03ab](https://github.com/cypress-io/cypress/commit/96b03abc74cd7b27ef4bbd9b66d9464c1f9fc2f2))
+
 # @cypress/svelte-v1.0.0 (2022-08-30)
 
 

package/types/cypress-npm-api.d.ts

@@ -60,7 +60,7 @@ declare namespace CypressCommandLine {
      */
     headless: boolean
     /**
-     * Specify your secret record key
+     * Specify your secret Record Key
      */
     key: string
     /**

package/types/cypress.d.ts

@@ -641,12 +641,6 @@ declare namespace Cypress {
      */
     off: Actions
 
-    /**
-     * Used to import dependencies within the cy.origin() callback
-     * @see https://on.cypress.io/origin
-     */
-    require: (id: string) => any
-
     /**
      * Trigger action
      * @private
@@ -2814,12 +2808,32 @@ declare namespace Cypress {
      */
     supportFile: string | false
     /**
-     * The test isolation level applied to ensure a clean slate between tests.
-     *   - legacy - resets/clears aliases, intercepts, clock, viewport, cookies, and local storage before each test.
-     *   - strict - applies all resets/clears from legacy, plus clears the page by visiting 'about:blank' to ensure clean app state before each test.
-     * @default "legacy", however, when experimentalSessionAndOrigin=true, the default is "strict"
+     * The test isolation ensures a clean browser context between tests. This option is only available when
+     * `experimentalSessionAndOrigin=true`.
+     *
+     * Cypress will always reset/clear aliases, intercepts, clock, and viewport before each test
+     * to ensure a clean test slate; i.e. this configuration only impacts the browser context.
+     *
+     * Note: the [`cy.session()`](https://on.cypress.io/session) command will inherent this value to determine whether
+     * or not the page is cleared when the command executes. This command is only available in end-to-end testing.
+     *
+     *  - on - The page is cleared before each test. Cookies, local storage and session storage in all domains are cleared
+     *         before each test. The `cy.session()` command will also clear the page and current browser context when creating
+     *         or restoring the browser session.
+     *  - off - The current browser state will persist between tests. The page does not clear before the test and cookies, local
+     *          storage and session storage will be available in the next test. The `cy.session()` command will only clear the
+     *          current browser context when creating or restoring the browser session - the current page will not clear.
+     *
+     * Tradeoffs:
+     *      Turning test isolation off may improve performance of end-to-end tests, however, previous tests could impact the
+     *      browser state of the next test and cause inconsistency when using .only(). Be mindful to write isolated tests when
+     *      test isolation is off. If a test in the suite impacts the state of other tests and it were to fail, you could see
+     *      misleading errors in later tests which makes debugging clunky. See the [documentation](https://on.cypress.io/test-isolation)
+     *      for more information.
+     *
+     * @default null, when experimentalSessionAndOrigin=false. The default is 'on' when experimentalSessionAndOrigin=true.
      */
-    testIsolation: 'legacy' | 'strict'
+    testIsolation: null | 'on' | 'off'
     /**
      * Path to folder where videos will be saved after a headless or CI run
      * @default "cypress/videos"

package/vue/CHANGELOG.md

@@ -1,3 +1,11 @@
+# [@cypress/vue-v4.2.1](https://github.com/cypress-io/cypress/compare/@cypress/vue-v4.2.0...@cypress/vue-v4.2.1) (2022-10-13)
+
+
+### Bug Fixes
+
+* fix regression in npm/vue ([#23954](https://github.com/cypress-io/cypress/issues/23954)) ([78779a2](https://github.com/cypress-io/cypress/commit/78779a2db13ca6555a6b830dbabeefd3d37bbfe5))
+* **npm/vue:** update types ([#23890](https://github.com/cypress-io/cypress/issues/23890)) ([eb8ae02](https://github.com/cypress-io/cypress/commit/eb8ae02b61304d034136f7627da1ab23537e3ba4))
+
 # [@cypress/vue-v4.2.0](https://github.com/cypress-io/cypress/compare/@cypress/vue-v4.1.0...@cypress/vue-v4.2.0) (2022-08-30)
 
 

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

@@ -13856,8 +13856,8 @@ function mount(componentOptions, options = {}) {
     });
 }
 /**
- * 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) {

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

@@ -13833,8 +13833,8 @@ function mount(componentOptions, options = {}) {
     });
 }
 /**
- * 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) {

package/vue2/CHANGELOG.md

@@ -1,3 +1,11 @@
+# [@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)
+
+
+### Bug Fixes
+
+* angular and nuxt ct tests now fail on uncaught exceptions ([#24122](https://github.com/cypress-io/cypress/issues/24122)) ([53eef4f](https://github.com/cypress-io/cypress/commit/53eef4fbd7e1caf32f0183cadbc0e4cf05524c34))
+
+
 # [@cypress/vue2-v1.1.0](https://github.com/cypress-io/cypress/compare/@cypress/vue2-v1.0.2...@cypress/vue2-v1.1.0) (2022-08-30)
 
 

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

@@ -20034,11 +20034,11 @@ const resetStoreVM = (Vue, { store }) => {
  * @see https://github.com/cypress-io/cypress/issues/7910
  */
 function failTestOnVueError(err, vm, info) {
-    console.error(`Vue error`);
-    console.error(err);
-    console.error('component:', vm);
-    console.error('info:', info);
-    window.top.onerror(err);
+    // Vue 2 try catches the error-handler so push the error to be caught outside
+    // of the handler.
+    setTimeout(() => {
+        throw err;
+    });
 }
 function registerAutoDestroy($destroy) {
     Cypress.on('test:before:run', () => {

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

@@ -20026,11 +20026,11 @@ const resetStoreVM = (Vue, { store }) => {
  * @see https://github.com/cypress-io/cypress/issues/7910
  */
 function failTestOnVueError(err, vm, info) {
-    console.error(`Vue error`);
-    console.error(err);
-    console.error('component:', vm);
-    console.error('info:', info);
-    window.top.onerror(err);
+    // Vue 2 try catches the error-handler so push the error to be caught outside
+    // of the handler.
+    setTimeout(() => {
+        throw err;
+    });
 }
 function registerAutoDestroy($destroy) {
     Cypress.on('test:before:run', () => {