Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(test-utils): add type definitions for ExtendedVue #1789

Merged
merged 1 commit into from
Feb 24, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 15 additions & 2 deletions packages/test-utils/types/index.d.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import Vue, { VNodeData, ComponentOptions, FunctionalComponentOptions, Component } from 'vue'
import Vue, { VNodeData, ComponentOptions, FunctionalComponentOptions, Component, RenderContext } from 'vue'
import { DefaultProps, PropsDefinition } from 'vue/types/options'
import { ExtendedVue, CombinedVueInstance } from 'vue/types/vue'

/**
* Utility type to declare an extended Vue constructor
Expand Down Expand Up @@ -161,10 +162,18 @@ interface MountOptions<V extends Vue> extends ComponentOptions<V> {

type ThisTypedMountOptions<V extends Vue> = MountOptions<V> & ThisType<V>

interface FunctionalComponentMountOptions<V extends Vue> extends MountOptions<V> {
context?: Partial<RenderContext>
}

type ShallowMountOptions<V extends Vue> = MountOptions<V>

type ThisTypedShallowMountOptions<V extends Vue> = ShallowMountOptions<V> & ThisType<V>

interface FunctionalComponentShallowMountOptions<V extends Vue> extends ShallowMountOptions<V> {
context?: Partial<RenderContext>
}

interface VueTestUtilsConfigOptions {
stubs: Record<string, Component | boolean | string>
mocks: Record<string, any>
Expand All @@ -179,11 +188,15 @@ export declare let config: VueTestUtilsConfigOptions

export declare function mount<V extends Vue> (component: VueClass<V>, options?: ThisTypedMountOptions<V>): Wrapper<V>
export declare function mount<V extends Vue> (component: ComponentOptions<V>, options?: ThisTypedMountOptions<V>): Wrapper<V>
export declare function mount<Props = DefaultProps, PropDefs = PropsDefinition<Props>>(component: FunctionalComponentOptions<Props, PropDefs>, options?: MountOptions<Vue>): Wrapper<Vue>
export declare function mount<V extends Vue, Data, Methods, Computed, Props> (component: ExtendedVue<V, Data, Methods, Computed, Props>, options?: ThisTypedMountOptions<V>): Wrapper<CombinedVueInstance<V, Data, Methods, Computed, Props> & Vue>
export declare function mount<Props = DefaultProps, PropDefs = PropsDefinition<Props>> (component: FunctionalComponentOptions<Props, PropDefs>, options?: MountOptions<Vue>): Wrapper<Vue>
export declare function mount<V extends Vue, Props = DefaultProps> (component: ExtendedVue<V, {}, {}, {}, Props>, options?: FunctionalComponentMountOptions<V>): Wrapper<CombinedVueInstance<V, {}, {}, {}, Props> & Vue>

export declare function shallowMount<V extends Vue> (component: VueClass<V>, options?: ThisTypedShallowMountOptions<V>): Wrapper<V>
export declare function shallowMount<V extends Vue> (component: ComponentOptions<V>, options?: ThisTypedShallowMountOptions<V>): Wrapper<V>
export declare function shallowMount<V extends Vue, Data, Methods, Computed, Props> (component: ExtendedVue<V, Data, Methods, Computed, Props>, options?: ThisTypedShallowMountOptions<V>): Wrapper<CombinedVueInstance<V, Data, Methods, Computed, Props> & Vue>
export declare function shallowMount<Props = DefaultProps, PropDefs = PropsDefinition<Props>>(component: FunctionalComponentOptions<Props, PropDefs>, options?: ShallowMountOptions<Vue>): Wrapper<Vue>
export declare function shallowMount<V extends Vue, Props = DefaultProps> (component: ExtendedVue<V, {}, {}, {}, Props>, options?: FunctionalComponentShallowMountOptions<V>): Wrapper<CombinedVueInstance<V, {}, {}, {}, Props> & Vue>

export declare function createWrapper(node: Vue, options?: WrapperOptions): Wrapper<Vue>
export declare function createWrapper(node: HTMLElement, options?: WrapperOptions): Wrapper<null>
Expand Down
15 changes: 14 additions & 1 deletion packages/test-utils/types/test/mount.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import Vuex from 'vuex'
import VueTestUtils, { mount, createLocalVue, config } from '../'
import { normalOptions, functionalOptions, ClassComponent } from './resources'
import { normalOptions, functionalOptions, ClassComponent, extendedFunctionalComponent, extendedNormalComponent } from './resources'

/**
* Should create wrapper vm based on (function) component options or constructors
Expand All @@ -9,10 +9,14 @@ import { normalOptions, functionalOptions, ClassComponent } from './resources'
const normalWrapper = mount(normalOptions)
const normalFoo: string = normalWrapper.vm.foo

const extendedNormalWrapper = mount(extendedNormalComponent)
const extendedNormalFoo: string = extendedNormalWrapper.vm.foo

const classWrapper = mount(ClassComponent)
const classFoo: string = classWrapper.vm.bar

const functionalWrapper = mount(functionalOptions)
const extendedFunctionalWrapper = mount(extendedFunctionalComponent)

/**
* Test for mount options
Expand Down Expand Up @@ -62,6 +66,15 @@ mount(functionalOptions, {
stubs: ['child']
})

mount(extendedFunctionalComponent, {
context: {
props: { foo: 'test' },
data: {}
},
attachTo: document.createElement('div'),
stubs: ['child']
})

/**
* MountOptions should receive Vue's component options
*/
Expand Down
21 changes: 20 additions & 1 deletion packages/test-utils/types/test/resources.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import Vue, { ComponentOptions, FunctionalComponentOptions } from 'vue'
import Vue, { ComponentOptions, FunctionalComponentOptions, CreateElement, RenderContext, VNode } from 'vue'

/**
* Normal component options
Expand All @@ -15,6 +15,15 @@ export const normalOptions: ComponentOptions<Normal> = {
}
}

export const extendedNormalComponent = Vue.extend({
name: 'normal',
data() {
return {
foo: 'bar'
}
}
})

/**
* Functional component options
*/
Expand All @@ -25,6 +34,16 @@ export const functionalOptions: FunctionalComponentOptions = {
}
}

/**
* Functional component with Vue.extend()
*/
export const extendedFunctionalComponent = Vue.extend({
functional: true,
render: (createElement: CreateElement, context: RenderContext): VNode => {
return createElement('div')
}
})

/**
* Component constructor declared with vue-class-component etc.
*/
Expand Down
14 changes: 13 additions & 1 deletion packages/test-utils/types/test/shallow.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import Vuex from 'vuex'
import { shallowMount, createLocalVue } from '../'
import { normalOptions, functionalOptions, ClassComponent } from './resources'
import { normalOptions, functionalOptions, ClassComponent, extendedFunctionalComponent, extendedNormalComponent } from './resources'

/**
* Should create wrapper vm based on (function) component options or constructors
Expand All @@ -9,10 +9,14 @@ import { normalOptions, functionalOptions, ClassComponent } from './resources'
const normalWrapper = shallowMount(normalOptions)
const normalFoo: string = normalWrapper.vm.foo

const extendedNormalWrapper = shallowMount(extendedNormalComponent)
const extendedNormalFoo: string = extendedNormalWrapper.vm.foo

const classWrapper = shallowMount(ClassComponent)
const classFoo: string = classWrapper.vm.bar

const functinalWrapper = shallowMount(functionalOptions)
const extendedFunctionalWrapper = shallowMount(extendedFunctionalComponent)

/**
* Test for shallowMount options
Expand Down Expand Up @@ -54,6 +58,14 @@ shallowMount(functionalOptions, {
stubs: ['child']
})

shallowMount(extendedFunctionalComponent, {
context: {
props: { foo: 'test' },
data: {}
},
stubs: ['child']
})

/**
* ShallowMountOptions should receive Vue's component options
*/
Expand Down