cypress 10.3.0 → 10.3.1

package/lib/exec/open.js

@@ -86,8 +86,7 @@ module.exports = {
         const args = processOpenOptions(options);
         return spawn.start(args, {
           dev: options.dev,
-          detached: Boolean(options.detached),
-          stdio: 'inherit'
+          detached: Boolean(options.detached)
         });
       } catch (err) {
         if (err.details) {

package/lib/exec/spawn.js

@@ -43,8 +43,13 @@ const isDbusWarning = /Failed to connect to the bus:/; // Electron began logging
 // ----- Certificate i=0 (OU=Cypress Proxy Server Certificate,O=Cypress Proxy CA,L=Internet,ST=Internet,C=Internet,CN=www.googletagmanager.com) -----
 // ERROR: No matching issuer found
 
-const isCertVerifyProcBuiltin = /(^\[.*ERROR:cert_verify_proc_builtin\.cc|^----- Certificate i=0 \(OU=Cypress Proxy|^ERROR: No matching issuer found$)/;
-const GARBAGE_WARNINGS = [isXlibOrLibudevRe, isHighSierraWarningRe, isRenderWorkerRe, isDbusWarning, isCertVerifyProcBuiltin];
+const isCertVerifyProcBuiltin = /(^\[.*ERROR:cert_verify_proc_builtin\.cc|^----- Certificate i=0 \(OU=Cypress Proxy|^ERROR: No matching issuer found$)/; // Electron logs a benign warning about WebSwapCGLLayer on MacOS v12 and Electron v18 due to a naming collision in shared libraries.
+// Once this is fixed upstream this regex can be removed: https://github.com/electron/electron/issues/33685
+// Sample:
+// objc[60540]: Class WebSwapCGLLayer is implemented in both /System/Library/Frameworks/WebKit.framework/Versions/A/Frameworks/WebCore.framework/Versions/A/Frameworks/libANGLE-shared.dylib (0x7ffa5a006318) and /{path/to/app}/node_modules/electron/dist/Electron.app/Contents/Frameworks/Electron Framework.framework/Versions/A/Libraries/libGLESv2.dylib (0x10f8a89c8). One of the two will be used. Which one is undefined.
+
+const isMacOSElectronWebSwapCGLLayerWarning = /^objc\[\d+\]: Class WebSwapCGLLayer is implemented in both.*Which one is undefined\./;
+const GARBAGE_WARNINGS = [isXlibOrLibudevRe, isHighSierraWarningRe, isRenderWorkerRe, isDbusWarning, isCertVerifyProcBuiltin, isMacOSElectronWebSwapCGLLayerWarning];
 
 const isGarbageLineWarning = str => {
   return _.some(GARBAGE_WARNINGS, re => {

package/mount-utils/dist/index.js

@@ -4,7 +4,7 @@ export const getContainerEl = () => {
     if (el) {
         return el;
     }
-    throw Error(`No element found that matches selector ${ROOT_SELECTOR}. Please use the mount utils to mount it properly`);
+    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
@@ -120,6 +120,13 @@ export const injectStylesBeforeElement = (options, document, el) => {
     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
+    // 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

package/mount-utils/package.json

@@ -17,6 +17,7 @@
   "files": [
     "dist"
   ],
+  "types": "dist/index.d.ts",
   "license": "MIT",
   "repository": {
     "type": "git",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cypress",
-  "version": "10.3.0",
+  "version": "10.3.1",
   "main": "index.js",
   "scripts": {
     "postinstall": "node index.js --exec install",
@@ -72,15 +72,18 @@
   "exports": {
     ".": {
       "import": "./index.mjs",
-      "require": "./index.js"
+      "require": "./index.js",
+      "types": "./types/index.d.ts"
     },
     "./vue": {
       "import": "./vue/dist/cypress-vue.esm-bundler.js",
-      "require": "./vue/dist/cypress-vue.cjs.js"
+      "require": "./vue/dist/cypress-vue.cjs.js",
+      "types": "./vue/dist/index.d.ts"
     },
     "./vue2": {
       "import": "./vue2/dist/cypress-vue2.esm-bundler.js",
-      "require": "./vue2/dist/cypress-vue2.cjs.js"
+      "require": "./vue2/dist/cypress-vue2.cjs.js",
+      "types": "./vue2/dist/index.d.ts"
     },
     "./package.json": {
       "import": "./package.json",
@@ -88,16 +91,18 @@
     },
     "./react": {
       "import": "./react/dist/cypress-react.esm-bundler.js",
-      "require": "./react/dist/cypress-react.cjs.js"
+      "require": "./react/dist/cypress-react.cjs.js",
+      "types": "./react/dist/index.d.ts"
     },
     "./mount-utils": {
-      "require": "./mount-utils/dist/index.js"
+      "require": "./mount-utils/dist/index.js",
+      "types": "./mount-utils/dist/index.d.ts"
     }
   },
   "buildInfo": {
     "commitBranch": "develop",
-    "commitSha": "f902b968970f1b6160f07215b881dab6c39c21f1",
-    "commitDate": "2022-06-28T16:27:27.000Z",
+    "commitSha": "0aebe4a47d49c94d519fc00af81967ed8da65483",
+    "commitDate": "2022-07-18T17:25:43.000Z",
     "stable": true
   },
   "description": "Cypress.io end to end testing tool",

package/react/dist/cypress-react.browser.js

@@ -106,7 +106,7 @@ var CypressReact = (function (exports, React, ReactDOM) {
         if (el) {
             return el;
         }
-        throw Error(`No element found that matches selector ${ROOT_SELECTOR}. Please use the mount utils to mount it properly`);
+        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
@@ -222,6 +222,13 @@ var CypressReact = (function (exports, React, ReactDOM) {
         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
@@ -419,6 +426,14 @@ var CypressReact = (function (exports, React, ReactDOM) {
             return mount(element, __assign(__assign({}, defaultOptions), options));
         };
     };
+    // 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
     // it is required to unmount component in beforeEach hook in order to provide a clean state inside test
     // because `mount` can be called after some preparation that can side effect unmount
     // @see npm/react/cypress/component/advanced/set-timeout-example/loading-indicator-spec.js

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

@@ -110,7 +110,7 @@ const getContainerEl = () => {
     if (el) {
         return el;
     }
-    throw Error(`No element found that matches selector ${ROOT_SELECTOR}. Please use the mount utils to mount it properly`);
+    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
@@ -226,6 +226,13 @@ const injectStylesBeforeElement = (options, document, el) => {
     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
@@ -423,6 +430,14 @@ var createMount = function (defaultOptions) {
         return mount(element, __assign(__assign({}, defaultOptions), options));
     };
 };
+// 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
 // it is required to unmount component in beforeEach hook in order to provide a clean state inside test
 // because `mount` can be called after some preparation that can side effect unmount
 // @see npm/react/cypress/component/advanced/set-timeout-example/loading-indicator-spec.js

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

@@ -85,7 +85,7 @@ const getContainerEl = () => {
     if (el) {
         return el;
     }
-    throw Error(`No element found that matches selector ${ROOT_SELECTOR}. Please use the mount utils to mount it properly`);
+    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
@@ -201,6 +201,13 @@ const injectStylesBeforeElement = (options, document, el) => {
     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
@@ -398,6 +405,14 @@ var createMount = function (defaultOptions) {
         return mount(element, __assign(__assign({}, defaultOptions), options));
     };
 };
+// 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
 // it is required to unmount component in beforeEach hook in order to provide a clean state inside test
 // because `mount` can be called after some preparation that can side effect unmount
 // @see npm/react/cypress/component/advanced/set-timeout-example/loading-indicator-spec.js

package/types/cypress.d.ts

@@ -2941,7 +2941,7 @@ declare namespace Cypress {
     /**
      * Hosts mappings to IP addresses.
      */
-    hosts: null | string[]
+    hosts: null | {[key: string]: string}
     /**
      * Whether Cypress was launched via 'cypress open' (interactive mode)
      */

package/vue/README.md

@@ -19,6 +19,7 @@ This package allows you to use the [Cypress](https://www.cypress.io/) test runne
 It uses [Vue Test Utils](https://github.com/vuejs/vue-test-utils) under the hood. This is more of a replacement for node-based testing than it is replacing Vue Test Utils and its API. Instead of running your tests in node (using Jest or Mocha), the Cypress Component Testing Library runs each component in the **real browser** with full power of the Cypress Framework: [live GUI, full API, screen recording, CI support, cross-platform](https://www.cypress.io/features/). One benefit to using Cypress instead of a node-based runner is that limitations of Vue Test Utils in Node (e.g. manually awaiting Vue's internal event loop) are hidden from the user due to Cypress's retry-ability logic.
 
 - If you like using `@testing-library/vue`, you can use `@testing-library/cypress` for the same `findBy`, `queryBy` commands, see one of the examples in the list below
+- If you need to access the underlying Vue Test Utils API, you can do so by importing it: `import { VueTestUtils } from 'cypress/vue'`.
 
 ### How is this different from @cypress/vue2?
 Cypress packages the current version of Vue under @cypress/vue, and older versions under separate package names. Use [@cypress/vue2](cypress-vue2-npm-url) if you're still using vue@2, and this package if you're on vue@3.

package/vue/dist/@vue/test-utils/baseWrapper.d.ts

@@ -0,0 +1,61 @@
+import type { TriggerOptions } from './createDomEvent';
+import { ComponentInternalInstance, ComponentPublicInstance, FunctionalComponent } from 'vue';
+import { DomEventNameWithModifier } from './constants/dom-events';
+import type { VueWrapper } from './vueWrapper';
+import { DefinedComponent, FindAllComponentsSelector, FindComponentSelector, NameSelector, RefSelector, VueNode } from './types';
+import WrapperLike from './interfaces/wrapperLike';
+import type { DOMWrapper } from './domWrapper';
+export default abstract class BaseWrapper<ElementType extends Node> implements WrapperLike {
+    protected readonly wrapperElement: VueNode<ElementType>;
+    protected abstract getRootNodes(): VueNode[];
+    get element(): VueNode<ElementType>;
+    constructor(element: ElementType);
+    protected findAllDOMElements(selector: string): Element[];
+    find<K extends keyof HTMLElementTagNameMap>(selector: K): DOMWrapper<HTMLElementTagNameMap[K]>;
+    find<K extends keyof SVGElementTagNameMap>(selector: K): DOMWrapper<SVGElementTagNameMap[K]>;
+    find<T extends Element = Element>(selector: string): DOMWrapper<T>;
+    find<T extends Node = Node>(selector: string | RefSelector): DOMWrapper<T>;
+    abstract findAll<K extends keyof HTMLElementTagNameMap>(selector: K): DOMWrapper<HTMLElementTagNameMap[K]>[];
+    abstract findAll<K extends keyof SVGElementTagNameMap>(selector: K): DOMWrapper<SVGElementTagNameMap[K]>[];
+    abstract findAll<T extends Element>(selector: string): DOMWrapper<T>[];
+    abstract findAll(selector: string): DOMWrapper<Element>[];
+    findComponent<T extends never>(selector: string): WrapperLike;
+    findComponent<T extends DefinedComponent>(selector: T | Exclude<FindComponentSelector, FunctionalComponent>): VueWrapper<InstanceType<T>>;
+    findComponent<T extends FunctionalComponent>(selector: T): DOMWrapper<Node>;
+    findComponent<T extends FunctionalComponent>(selector: string): DOMWrapper<Element>;
+    findComponent<T extends never>(selector: NameSelector | RefSelector): VueWrapper;
+    findComponent<T extends ComponentPublicInstance>(selector: T | FindComponentSelector): VueWrapper<T>;
+    findComponent<T extends never>(selector: FindComponentSelector): WrapperLike;
+    findAllComponents<T extends never>(selector: string): WrapperLike[];
+    findAllComponents<T extends DefinedComponent>(selector: T | Exclude<FindAllComponentsSelector, FunctionalComponent>): VueWrapper<InstanceType<T>>[];
+    findAllComponents<T extends FunctionalComponent>(selector: T): DOMWrapper<Node>[];
+    findAllComponents<T extends FunctionalComponent>(selector: string): DOMWrapper<Element>[];
+    findAllComponents<T extends never>(selector: NameSelector): VueWrapper[];
+    findAllComponents<T extends ComponentPublicInstance>(selector: T | FindAllComponentsSelector): VueWrapper<T>[];
+    findAllComponents<T extends never>(selector: FindAllComponentsSelector): WrapperLike[];
+    abstract setValue(value?: any): Promise<void>;
+    html(): string;
+    classes(): string[];
+    classes(className: string): boolean;
+    attributes(): {
+        [key: string]: string;
+    };
+    attributes(key: string): string | undefined;
+    text(): string;
+    exists(): boolean;
+    get<K extends keyof HTMLElementTagNameMap>(selector: K): Omit<DOMWrapper<HTMLElementTagNameMap[K]>, 'exists'>;
+    get<K extends keyof SVGElementTagNameMap>(selector: K): Omit<DOMWrapper<SVGElementTagNameMap[K]>, 'exists'>;
+    get<T extends Element = Element>(selector: string): Omit<DOMWrapper<T>, 'exists'>;
+    get<T extends Node = Node>(selector: string | RefSelector): Omit<DOMWrapper<T>, 'exists'>;
+    getComponent<T extends never>(selector: string): Omit<WrapperLike, 'exists'>;
+    getComponent<T extends DefinedComponent>(selector: T | Exclude<FindComponentSelector, FunctionalComponent>): Omit<VueWrapper<InstanceType<T>>, 'exists'>;
+    getComponent<T extends FunctionalComponent>(selector: T | string): Omit<DOMWrapper<Element>, 'exists'>;
+    getComponent<T extends never>(selector: NameSelector | RefSelector): Omit<VueWrapper, 'exists'>;
+    getComponent<T extends ComponentPublicInstance>(selector: T | FindComponentSelector): Omit<VueWrapper<T>, 'exists'>;
+    getComponent<T extends never>(selector: FindComponentSelector): Omit<WrapperLike, 'exists'>;
+    protected isDisabled: () => boolean;
+    isVisible(): boolean;
+    protected abstract getCurrentComponent(): ComponentInternalInstance | void;
+    trigger(eventString: DomEventNameWithModifier, options?: TriggerOptions): Promise<void>;
+    trigger(eventString: string, options?: TriggerOptions): Promise<void>;
+}

package/vue/dist/@vue/test-utils/components/RouterLinkStub.d.ts

@@ -0,0 +1,21 @@
+export declare const RouterLinkStub: import("vue").DefineComponent<{
+    to: {
+        type: (StringConstructor | ObjectConstructor)[];
+        required: true;
+    };
+    custom: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    to: {
+        type: (StringConstructor | ObjectConstructor)[];
+        required: true;
+    };
+    custom: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>>, {
+    custom: boolean;
+}>;

package/vue/dist/@vue/test-utils/config.d.ts

@@ -0,0 +1,28 @@
+import { GlobalMountOptions } from './types';
+import { VueWrapper } from './vueWrapper';
+import { DOMWrapper } from './domWrapper';
+import { CustomCreateStub } from './stubs';
+export interface GlobalConfigOptions {
+    global: Required<GlobalMountOptions>;
+    plugins: {
+        VueWrapper: Pluggable<VueWrapper>;
+        DOMWrapper: Pluggable<DOMWrapper<Node>>;
+        createStubs?: CustomCreateStub;
+    };
+    renderStubDefaultSlot: boolean;
+}
+interface Plugin<Instance, O> {
+    handler(instance: Instance): Record<string, any>;
+    handler(instance: Instance, options: O): Record<string, any>;
+    options: O;
+}
+declare class Pluggable<Instance = DOMWrapper<Node>> {
+    installedPlugins: Plugin<Instance, any>[];
+    install<O>(handler: (instance: Instance) => Record<string, any>): void;
+    install<O>(handler: (instance: Instance, options: O) => Record<string, any>, options: O): void;
+    extend(instance: Instance): void;
+    /** For testing */
+    reset(): void;
+}
+export declare const config: GlobalConfigOptions;
+export {};