/// 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 | Vue.VueConstructor; /** * Options to pass to the component when creating it, like * props. * * @interface ComponentOptions */ declare type ComponentOptions = Record; declare type VueLocalComponents = Record; 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/master/npm/vue#examples */ interface MountOptionsExtensions { /** * Extra local components * * @memberof MountOptionsExtensions * @see https://github.com/cypress-io/cypress/tree/master/npm/vue#examples * @example * import Hello from './Hello.vue' * // imagine Hello needs AppComponent * // that it uses in its template like * // 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/master/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/master/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/master/npm/vue#examples */ mixins?: VueMixins; /** * A single plugin or multiple plugins. * * @see https://github.com/cypress-io/cypress/tree/master/npm/vue#examples * @alias plugins * @memberof MountOptionsExtensions */ use?: VuePlugins; /** * A single plugin or multiple plugins. * * @see https://github.com/cypress-io/cypress/tree/master/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/master/npm/vue#examples */ extensions: MountOptionsExtensions; } /** * Utility type for union of options passed to "mount(..., options)" */ declare type MountOptionsArgument = Partial; 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; } } } /** * 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; /** * 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; export {};