208 lines
6.3 KiB
TypeScript
208 lines
6.3 KiB
TypeScript
/// <reference types="cypress" />
|
|
|
|
import Vue from 'vue';
|
|
import { Wrapper, VueTestUtilsConfigOptions } from '@vue/test-utils';
|
|
import { ComponentPublicInstanceConstructor } from 'vue/types/v3-component-public-instance';
|
|
|
|
/**
|
|
* Type for component passed to "mount"
|
|
*
|
|
* @interface VueComponent
|
|
* @example
|
|
* import Hello from './Hello.vue'
|
|
* ^^^^^ this type
|
|
* mount(Hello)
|
|
*/
|
|
type VueComponent = Vue.ComponentOptions<any> | Vue.VueConstructor | ComponentPublicInstanceConstructor;
|
|
/**
|
|
* Options to pass to the component when creating it, like
|
|
* props.
|
|
*
|
|
* @interface ComponentOptions
|
|
*/
|
|
type ComponentOptions = Record<string, unknown>;
|
|
type VueLocalComponents = Record<string, VueComponent>;
|
|
type VueFilters = {
|
|
[key: string]: (value: string) => string;
|
|
};
|
|
type VueDirectives = {
|
|
[key: string]: Function | Object;
|
|
};
|
|
type VueMixin = unknown;
|
|
type VueMixins = VueMixin | VueMixin[];
|
|
type VuePluginOptions = unknown;
|
|
type VuePlugin = unknown | [unknown, VuePluginOptions];
|
|
/**
|
|
* A single Vue plugin or a list of plugins to register
|
|
*/
|
|
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;
|
|
/**
|
|
* Optional Vue directives to install while mounting the component
|
|
*
|
|
* @memberof MountOptionsExtensions
|
|
* @see https://github.com/cypress-io/cypress/tree/develop/npm/vue#examples
|
|
* @example
|
|
* const directives = {
|
|
* custom: {
|
|
* name: 'custom',
|
|
* bind (el, binding) {
|
|
* el.dataset['custom'] = binding.value
|
|
* },
|
|
* unbind (el) {
|
|
* el.removeAttribute('data-custom')
|
|
* },
|
|
* },
|
|
* }
|
|
* mount(Hello, { extensions: { directives }})
|
|
*/
|
|
directives?: VueDirectives;
|
|
}
|
|
/**
|
|
* 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)"
|
|
*/
|
|
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 };
|