cypress 10.10.0 → 11.0.0

package/vue2/dist/index.d.ts

@@ -1,172 +1,341 @@
-/// <reference types="cypress" />
-/// <reference types="cypress" />
-import Vue from 'vue';
-import { VueTestUtilsConfigOptions, Wrapper } from '@vue/test-utils';
-import { StyleOptions } from '@cypress/mount-utils';
-/**
- * Type for component passed to "mount"
- *
- * @interface VueComponent
- * @example
- *  import Hello from './Hello.vue'
- *         ^^^^^ this type
- *  mount(Hello)
- */
-declare type VueComponent = Vue.ComponentOptions<any> | Vue.VueConstructor;
-/**
- * Options to pass to the component when creating it, like
- * props.
- *
- * @interface ComponentOptions
- */
-declare type ComponentOptions = Record<string, unknown>;
-declare type VueLocalComponents = Record<string, VueComponent>;
-declare type VueFilters = {
-    [key: string]: (value: string) => string;
-};
-declare type VueMixin = unknown;
-declare type VueMixins = VueMixin | VueMixin[];
-declare type VuePluginOptions = unknown;
-declare type VuePlugin = unknown | [unknown, VuePluginOptions];
-/**
- * A single Vue plugin or a list of plugins to register
- */
-declare type VuePlugins = VuePlugin[];
-/**
- * Additional Vue services to register while mounting the component, like
- * local components, plugins, etc.
- *
- * @interface MountOptionsExtensions
- * @see https://github.com/cypress-io/cypress/tree/develop/npm/vue#examples
- */
-interface MountOptionsExtensions {
-    /**
-     * Extra local components
-     *
-     * @memberof MountOptionsExtensions
-     * @see https://github.com/cypress-io/cypress/tree/develop/npm/vue#examples
-     * @example
-     *  import Hello from './Hello.vue'
-     *  // imagine Hello needs AppComponent
-     *  // that it uses in its template like <app-component ... />
-     *  // during testing we can replace it with a mock component
-     *  const appComponent = ...
-     *  const components = {
-     *    'app-component': appComponent
-     *  },
-     *  mount(Hello, { extensions: { components }})
-     */
-    components?: VueLocalComponents;
-    /**
-     * Optional Vue filters to install while mounting the component
-     *
-     * @memberof MountOptionsExtensions
-     * @see https://github.com/cypress-io/cypress/tree/develop/npm/vue#examples
-     * @example
-     *  const filters = {
-     *    reverse: (s) => s.split('').reverse().join(''),
-     *  }
-     *  mount(Hello, { extensions: { filters }})
-     */
-    filters?: VueFilters;
-    /**
-     * Optional Vue mixin(s) to install when mounting the component
-     *
-     * @memberof MountOptionsExtensions
-     * @alias mixins
-     * @see https://github.com/cypress-io/cypress/tree/develop/npm/vue#examples
-     */
-    mixin?: VueMixins;
-    /**
-     * Optional Vue mixin(s) to install when mounting the component
-     *
-     * @memberof MountOptionsExtensions
-     * @alias mixin
-     * @see https://github.com/cypress-io/cypress/tree/develop/npm/vue#examples
-     */
-    mixins?: VueMixins;
-    /**
-     * A single plugin or multiple plugins.
-     *
-     * @see https://github.com/cypress-io/cypress/tree/develop/npm/vue#examples
-     * @alias plugins
-     * @memberof MountOptionsExtensions
-     */
-    use?: VuePlugins;
-    /**
-     * A single plugin or multiple plugins.
-     *
-     * @see https://github.com/cypress-io/cypress/tree/develop/npm/vue#examples
-     * @alias use
-     * @memberof MountOptionsExtensions
-     */
-    plugins?: VuePlugins;
-}
-/**
- * Options controlling how the component is going to be mounted,
- * including global Vue plugins and extensions.
- *
- * @interface MountOptions
- */
-interface MountOptions {
-    /**
-     * Vue instance to use.
-     *
-     * @deprecated
-     * @memberof MountOptions
-     */
-    vue: unknown;
-    /**
-     * Extra Vue plugins, mixins, local components to register while
-     * mounting this component
-     *
-     * @memberof MountOptions
-     * @see https://github.com/cypress-io/cypress/tree/develop/npm/vue#examples
-     */
-    extensions: MountOptionsExtensions;
-}
-/**
- * Utility type for union of options passed to "mount(..., options)"
- */
-declare type MountOptionsArgument = Partial<ComponentOptions & MountOptions & StyleOptions & VueTestUtilsConfigOptions>;
-declare global {
-    namespace Cypress {
-        interface Cypress {
-            /**
-             * Mounted Vue instance is available under Cypress.vue
-             * @memberof Cypress
-             * @example
-             *  mount(Greeting)
-             *  .then(() => {
-             *    Cypress.vue.message = 'Hello There'
-             *  })
-             *  // new message is displayed
-             *  cy.contains('Hello There').should('be.visible')
-             */
-            vue: Vue;
-            vueWrapper: Wrapper<Vue>;
-        }
-    }
-}
-/**
- * Mounts a Vue component inside Cypress browser.
- * @param {object} component imported from Vue file
- * @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')
- *  })
- */
-export declare const mount: (component: VueComponent, optionsOrProps?: MountOptionsArgument) => Cypress.Chainable<Cypress.AUTWindow>;
-/**
- * Helper function for mounting a component quickly in test hooks.
- * @example
- *  import {mountCallback} from '@cypress/vue2'
- *  beforeEach(mountVue(component, options))
- */
-export declare const mountCallback: (component: VueComponent, options?: MountOptionsArgument) => () => Cypress.Chainable<Cypress.AUTWindow>;
-export {};
+/// <reference types="cypress" />
+
+import Vue, { ComponentOptions as ComponentOptions$1, FunctionalComponentOptions, Component } from 'vue';
+
+type Prop<T> = { (): T } | { new(...args: never[]): T & object } | { new(...args: string[]): Function }
+
+type PropType<T> = Prop<T> | Prop<T>[];
+
+type PropValidator<T> = PropOptions<T> | PropType<T>;
+
+interface PropOptions<T=any> {
+  type?: PropType<T>;
+  required?: boolean;
+  default?: T | null | undefined | (() => T | null | undefined);
+  validator?(value: T): boolean;
+}
+
+type RecordPropsDefinition<T> = {
+  [K in keyof T]: PropValidator<T[K]>
+}
+type ArrayPropsDefinition<T> = (keyof T)[];
+type PropsDefinition<T> = ArrayPropsDefinition<T> | RecordPropsDefinition<T>;
+
+type DefaultProps = Record<string, any>;
+
+/**
+ * Utility type to declare an extended Vue constructor
+ */
+type VueClass<V extends Vue> = (new (...args: any[]) => V) & typeof Vue
+
+/**
+ * Utility type for a selector
+ */
+type Selector = string | Component
+
+/**
+ * Utility type for ref options object that can be used as a Selector
+ */
+type RefSelector = {
+  ref: string
+}
+
+/**
+ * Utility type for name options object that can be used as a Selector
+ */
+type NameSelector = {
+  name: string
+}
+
+/**
+ * Base class of Wrapper and WrapperArray
+ * It has common methods on both Wrapper and WrapperArray
+ */
+interface BaseWrapper {
+  contains (selector: Selector): boolean
+  exists (): boolean
+  isVisible (): boolean
+
+  attributes(): { [name: string]: string }
+  attributes(key: string): string | void
+  classes(): Array<string>
+  classes(className: string): boolean
+  props(): { [name: string]: any }
+  props(key: string): any | void
+  overview(): void
+
+  is (selector: Selector): boolean
+  isEmpty (): boolean
+  isVueInstance (): boolean
+
+  setData (data: object): Promise<void> | void
+  setMethods (data: object): void
+  setProps (props: object): Promise<void> | void
+
+  setValue (value: any): Promise<void> | void
+  setChecked (checked?: boolean): Promise<void> | void
+  setSelected (): Promise<void> | void
+
+  trigger (eventName: string, options?: object): Promise<void> | void
+  destroy (): void
+  selector: Selector | void
+}
+
+interface Wrapper<V extends Vue | null, el extends Element = Element> extends BaseWrapper {
+  readonly vm: V
+  readonly element: el
+  readonly options: WrapperOptions
+
+  get<R extends Vue> (selector: VueClass<R>): Wrapper<R>
+  get<R extends Vue> (selector: ComponentOptions$1<R>): Wrapper<R>
+  get<Props = DefaultProps, PropDefs = PropsDefinition<Props>>(selector: FunctionalComponentOptions<Props, PropDefs>): Wrapper<Vue>
+  get<el extends Element>(selector: string): Wrapper<Vue, el>
+  get (selector: RefSelector): Wrapper<Vue>
+  get (selector: NameSelector): Wrapper<Vue>
+
+  getComponent<R extends Vue> (selector: VueClass<R>): Wrapper<R>
+  getComponent<R extends Vue> (selector: ComponentOptions$1<R>): Wrapper<R>
+  getComponent<Props = DefaultProps, PropDefs = PropsDefinition<Props>>(selector: FunctionalComponentOptions<Props, PropDefs>): Wrapper<Vue>
+  getComponent (selector: RefSelector): Wrapper<Vue>
+  getComponent (selector: NameSelector): Wrapper<Vue>
+
+  find<R extends Vue> (selector: VueClass<R>): Wrapper<R>
+  find<R extends Vue> (selector: ComponentOptions$1<R>): Wrapper<R>
+  find<Props = DefaultProps, PropDefs = PropsDefinition<Props>>(selector: FunctionalComponentOptions<Props, PropDefs>): Wrapper<Vue>
+  find<el extends Element>(selector: string): Wrapper<Vue, el>
+  find (selector: RefSelector): Wrapper<Vue>
+  find (selector: NameSelector): Wrapper<Vue>
+
+  findAll<R extends Vue> (selector: VueClass<R>): WrapperArray<R>
+  findAll<R extends Vue> (selector: ComponentOptions$1<R>): WrapperArray<R>
+  findAll<Props = DefaultProps, PropDefs = PropsDefinition<Props>>(selector: FunctionalComponentOptions<Props, PropDefs>): WrapperArray<Vue>
+  findAll (selector: string): WrapperArray<Vue>
+  findAll (selector: RefSelector): WrapperArray<Vue>
+  findAll (selector: NameSelector): WrapperArray<Vue>
+
+  findComponent<R extends Vue> (selector: VueClass<R>): Wrapper<R>
+  findComponent<R extends Vue> (selector: ComponentOptions$1<R>): Wrapper<R>
+  findComponent<Props = DefaultProps, PropDefs = PropsDefinition<Props>>(selector: FunctionalComponentOptions<Props, PropDefs>): Wrapper<Vue>
+  findComponent (selector: RefSelector): Wrapper<Vue>
+  findComponent (selector: NameSelector): Wrapper<Vue>
+
+  findAllComponents<R extends Vue> (selector: VueClass<R>): WrapperArray<R>
+  findAllComponents<R extends Vue> (selector: ComponentOptions$1<R>): WrapperArray<R>
+  findAllComponents<Props = DefaultProps, PropDefs = PropsDefinition<Props>>(selector: FunctionalComponentOptions<Props, PropDefs>): WrapperArray<Vue>
+  findAllComponents(selector: RefSelector): WrapperArray<Vue>
+  findAllComponents(selector: NameSelector): WrapperArray<Vue>
+
+  html (): string
+  text (): string
+  name (): string
+
+  emitted (): { [name: string]: Array<Array<any>>|undefined }
+  emitted (event: string): Array<any>|undefined
+  emittedByOrder (): Array<{ name: string, args: Array<any> }>
+}
+
+interface WrapperArray<V extends Vue> extends BaseWrapper {
+  readonly length: number;
+  readonly wrappers: Array<Wrapper<V>>;
+
+  at(index: number): Wrapper<V>;
+  filter(
+    predicate: (
+      value: Wrapper<V>,
+      index: number,
+      array: Wrapper<V>[]
+    ) => any
+  ): WrapperArray<Vue>;
+}
+
+interface WrapperOptions {
+  attachedToDocument?: boolean
+}
+
+interface VueTestUtilsConfigOptions {
+  stubs: Record<string, Component | boolean | string>
+  mocks: Record<string, any>
+  methods: Record<string, Function>
+  provide?: Record<string, any>,
+  showDeprecationWarnings?: boolean
+  deprecationWarningHandler?: Function
+}
+
+/**
+ * Type for component passed to "mount"
+ *
+ * @interface VueComponent
+ * @example
+ *  import Hello from './Hello.vue'
+ *         ^^^^^ this type
+ *  mount(Hello)
+ */
+declare type VueComponent = Vue.ComponentOptions<any> | Vue.VueConstructor;
+/**
+ * Options to pass to the component when creating it, like
+ * props.
+ *
+ * @interface ComponentOptions
+ */
+declare type ComponentOptions = Record<string, unknown>;
+declare type VueLocalComponents = Record<string, VueComponent>;
+declare type VueFilters = {
+    [key: string]: (value: string) => string;
+};
+declare type VueMixin = unknown;
+declare type VueMixins = VueMixin | VueMixin[];
+declare type VuePluginOptions = unknown;
+declare type VuePlugin = unknown | [unknown, VuePluginOptions];
+/**
+ * A single Vue plugin or a list of plugins to register
+ */
+declare type VuePlugins = VuePlugin[];
+/**
+ * Additional Vue services to register while mounting the component, like
+ * local components, plugins, etc.
+ *
+ * @interface MountOptionsExtensions
+ * @see https://github.com/cypress-io/cypress/tree/develop/npm/vue#examples
+ */
+interface MountOptionsExtensions {
+    /**
+     * Extra local components
+     *
+     * @memberof MountOptionsExtensions
+     * @see https://github.com/cypress-io/cypress/tree/develop/npm/vue#examples
+     * @example
+     *  import Hello from './Hello.vue'
+     *  // imagine Hello needs AppComponent
+     *  // that it uses in its template like <app-component ... />
+     *  // during testing we can replace it with a mock component
+     *  const appComponent = ...
+     *  const components = {
+     *    'app-component': appComponent
+     *  },
+     *  mount(Hello, { extensions: { components }})
+     */
+    components?: VueLocalComponents;
+    /**
+     * Optional Vue filters to install while mounting the component
+     *
+     * @memberof MountOptionsExtensions
+     * @see https://github.com/cypress-io/cypress/tree/develop/npm/vue#examples
+     * @example
+     *  const filters = {
+     *    reverse: (s) => s.split('').reverse().join(''),
+     *  }
+     *  mount(Hello, { extensions: { filters }})
+     */
+    filters?: VueFilters;
+    /**
+     * Optional Vue mixin(s) to install when mounting the component
+     *
+     * @memberof MountOptionsExtensions
+     * @alias mixins
+     * @see https://github.com/cypress-io/cypress/tree/develop/npm/vue#examples
+     */
+    mixin?: VueMixins;
+    /**
+     * Optional Vue mixin(s) to install when mounting the component
+     *
+     * @memberof MountOptionsExtensions
+     * @alias mixin
+     * @see https://github.com/cypress-io/cypress/tree/develop/npm/vue#examples
+     */
+    mixins?: VueMixins;
+    /**
+     * A single plugin or multiple plugins.
+     *
+     * @see https://github.com/cypress-io/cypress/tree/develop/npm/vue#examples
+     * @alias plugins
+     * @memberof MountOptionsExtensions
+     */
+    use?: VuePlugins;
+    /**
+     * A single plugin or multiple plugins.
+     *
+     * @see https://github.com/cypress-io/cypress/tree/develop/npm/vue#examples
+     * @alias use
+     * @memberof MountOptionsExtensions
+     */
+    plugins?: VuePlugins;
+}
+/**
+ * Options controlling how the component is going to be mounted,
+ * including global Vue plugins and extensions.
+ *
+ * @interface MountOptions
+ */
+interface MountOptions {
+    /**
+     * Vue instance to use.
+     *
+     * @deprecated
+     * @memberof MountOptions
+     */
+    vue: unknown;
+    /**
+     * Extra Vue plugins, mixins, local components to register while
+     * mounting this component
+     *
+     * @memberof MountOptions
+     * @see https://github.com/cypress-io/cypress/tree/develop/npm/vue#examples
+     */
+    extensions: MountOptionsExtensions;
+}
+/**
+ * Utility type for union of options passed to "mount(..., options)"
+ */
+declare type MountOptionsArgument = Partial<ComponentOptions & MountOptions & VueTestUtilsConfigOptions>;
+declare global {
+    namespace Cypress {
+        interface Cypress {
+            /**
+             * Mounted Vue instance is available under Cypress.vue
+             * @memberof Cypress
+             * @example
+             *  mount(Greeting)
+             *  .then(() => {
+             *    Cypress.vue.message = 'Hello There'
+             *  })
+             *  // new message is displayed
+             *  cy.contains('Hello There').should('be.visible')
+             */
+            vue: Vue;
+            vueWrapper: Wrapper<Vue>;
+        }
+    }
+}
+/**
+ * Mounts a Vue component inside Cypress browser.
+ * @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 { 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.
+ *
+ */
+declare const mount: (component: VueComponent, optionsOrProps?: MountOptionsArgument) => Cypress.Chainable<{
+    wrapper: Wrapper<Vue, Element>;
+    component: Wrapper<Vue, Element>['vm'];
+}>;
+/**
+ * Helper function for mounting a component quickly in test hooks.
+ * @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
+ */
+declare const mountCallback: (component: VueComponent, options?: MountOptionsArgument) => () => void;
+
+export { mount, mountCallback };

package/vue2/package.json

@@ -11,13 +11,11 @@
     "test": "echo \"Tests for @cypress/vue2 are run from system-tests\"",
     "watch": "yarn build --watch --watch.exclude ./dist/**/*"
   },
-  "dependencies": {
-    "@vue/test-utils": "^1.1.3"
-  },
   "devDependencies": {
     "@cypress/mount-utils": "0.0.0-development",
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-replace": "^2.3.1",
+    "@vue/test-utils": "^1.3.1",
     "tslib": "^2.1.0",
     "typescript": "^4.7.4",
     "vue": "2.6.12"

package/angular/dist/mount.d.ts

@@ -1,112 +0,0 @@
-/// <reference types="cypress" />
-/// <reference types="cypress" />
-import 'zone.js';
-import 'zone.js/testing';
-import { Type } from '@angular/core';
-import { ComponentFixture, TestModuleMetadata } from '@angular/core/testing';
-/**
- * Additional module configurations needed while mounting the component, like
- * providers, declarations, imports and even component @Inputs()
- *
- *
- * @interface MountConfig
- * @see https://angular.io/api/core/testing/TestModuleMetadata
- */
-export interface MountConfig<T> extends TestModuleMetadata {
-    /**
-     * @memberof MountConfig
-     * @description flag to automatically create a cy.spy() for every component @Output() property
-     * @example
-     * export class ButtonComponent {
-     *  @Output clicked = new EventEmitter()
-     * }
-     *
-     * cy.mount(ButtonComponent, { autoSpyOutputs: true })
-     * cy.get('@clickedSpy).should('have.been.called')
-     */
-    autoSpyOutputs?: boolean;
-    /**
-     * @memberof MountConfig
-     * @description flag defaulted to true to automatically detect changes in your components
-     */
-    autoDetectChanges?: boolean;
-    /**
-     * @memberof MountConfig
-     * @example
-     * import { ButtonComponent } from 'button/button.component'
-     * it('renders a button with Save text', () => {
-     *  cy.mount(ButtonComponent, { componentProperties: { text: 'Save' }})
-     *  cy.get('button').contains('Save')
-     * })
-     *
-     * it('renders a button with a cy.spy() replacing EventEmitter', () => {
-     *  cy.mount(ButtonComponent, {
-     *    componentProperties: {
-     *      clicked: cy.spy().as('mySpy)
-     *    }
-     *  })
-     *  cy.get('button').click()
-     *  cy.get('@mySpy').should('have.been.called')
-     * })
-     */
-    componentProperties?: Partial<{
-        [P in keyof T]: T[P];
-    }>;
-}
-/**
- * Type that the `mount` function returns
- * @type MountResponse<T>
- */
-export declare type MountResponse<T> = {
-    /**
-     * Fixture for debugging and testing a component.
-     *
-     * @memberof MountResponse
-     * @see https://angular.io/api/core/testing/ComponentFixture
-     */
-    fixture: ComponentFixture<T>;
-    /**
-     * The instance of the root component class
-     *
-     * @memberof MountResponse
-     * @see https://angular.io/api/core/testing/ComponentFixture#componentInstance
-     */
-    component: T;
-};
-/**
- * Mounts an Angular component inside Cypress browser
- *
- * @param {Type<T> | string} component Angular component being mounted or its template
- * @param {MountConfig<T>} config configuration used to configure the TestBed
- * @example
- * import { HelloWorldComponent } from 'hello-world/hello-world.component'
- * import { MyService } from 'services/my.service'
- * import { SharedModule } from 'shared/shared.module';
- * import { mount } from '@cypress/angular'
- * it('can mount', () => {
- *  mount(HelloWorldComponent, {
- *    providers: [MyService],
- *    imports: [SharedModule]
- *  })
- *  cy.get('h1').contains('Hello World')
- * })
- *
- * or
- *
- * it('can mount with template', () => {
- *  mount('<app-hello-world></app-hello-world>', {
- *    declarations: [HelloWorldComponent],
- *    providers: [MyService],
- *    imports: [SharedModule]
- *  })
- * })
- * @returns Cypress.Chainable<MountResponse<T>>
- */
-export declare function mount<T>(component: Type<T> | string, config?: MountConfig<T>): Cypress.Chainable<MountResponse<T>>;
-/**
- * Creates a new Event Emitter and then spies on it's `emit` method
- *
- * @param {string} alias name you want to use for your cy.spy() alias
- * @returns EventEmitter<T>
- */
-export declare const createOutputSpy: <T>(alias: string) => any;