From 9f97e8526093806fb821f26d55b60032a245e876 Mon Sep 17 00:00:00 2001 From: cexbrayat Date: Mon, 18 May 2020 15:39:26 +0200 Subject: [PATCH 1/2] chore: shallowMount overloads `shallowMount` now has the same signatures than `mount`, to which it delegates the heavy work. --- src/mount.ts | 34 ++++++++++- test-dts/shallowMount.d-test.ts | 101 ++++++++++++++++++++++++++++++++ 2 files changed, 134 insertions(+), 1 deletion(-) create mode 100644 test-dts/shallowMount.d-test.ts diff --git a/src/mount.ts b/src/mount.ts index f32817d4b..d95e7bf16 100644 --- a/src/mount.ts +++ b/src/mount.ts @@ -245,8 +245,40 @@ export function mount( return createWrapper(app, App, setProps) } +// Functional component +export function shallowMount( + originalComponent: TestedComponent, + options?: MountingOptions +): VueWrapper +// Component declared with defineComponent +export function shallowMount( + originalComponent: { new (): TestedComponent } & Component, + options?: MountingOptions +): VueWrapper +// Component declared with { props: { ... } } +export function shallowMount< + TestedComponent extends ComponentOptionsWithObjectProps +>( + originalComponent: TestedComponent, + options?: MountingOptions> +): VueWrapper> +// Component declared with { props: [] } +export function shallowMount< + TestedComponent extends ComponentOptionsWithArrayProps +>( + originalComponent: TestedComponent, + options?: MountingOptions> +): VueWrapper> +// Component declared with no props +export function shallowMount< + TestedComponent extends ComponentOptionsWithoutProps, + ComponentT extends ComponentOptionsWithoutProps & {} +>( + originalComponent: ComponentT extends { new (): any } ? never : ComponentT, + options?: MountingOptions +): VueWrapper> export function shallowMount( - originalComponent, + originalComponent: any, options?: MountingOptions ) { return mount(originalComponent, { ...options, shallow: true }) diff --git a/test-dts/shallowMount.d-test.ts b/test-dts/shallowMount.d-test.ts new file mode 100644 index 000000000..ade13dfdd --- /dev/null +++ b/test-dts/shallowMount.d-test.ts @@ -0,0 +1,101 @@ +import { expectError, expectType } from 'tsd' +import { defineComponent } from 'vue' +import { shallowMount } from '../src' + +const AppWithDefine = defineComponent({ + props: { + a: { + type: String, + required: true + }, + b: Number + }, + template: '' +}) + +// accept props +let wrapper = shallowMount(AppWithDefine, { + props: { a: 'Hello', b: 2 } +}) +// vm is properly typed +expectType(wrapper.vm.a) + +// can receive extra props +// ideally, it should not +// but the props have type { a: string } & VNodeProps +// which allows any property +shallowMount(AppWithDefine, { + props: { a: 'Hello', c: 2 } +}) + +// wrong prop type should not compile +expectError( + shallowMount(AppWithDefine, { + props: { a: 2 } + }) +) + +const AppWithProps = { + props: { + a: { + type: String, + required: true + } + }, + template: '' +} + +// accept props +wrapper = shallowMount(AppWithProps, { + props: { a: 'Hello' } +}) +// vm is properly typed +expectType(wrapper.vm.a) + +// can't receive extra props +expectError( + shallowMount(AppWithProps, { + props: { a: 'Hello', b: 2 } + }) +) + +// wrong prop type should not compile +expectError( + shallowMount(AppWithProps, { + props: { a: 2 } + }) +) + +const AppWithArrayProps = { + props: ['a'], + template: '' +} + +// accept props +wrapper = shallowMount(AppWithArrayProps, { + props: { a: 'Hello' } +}) +// vm is properly typed +expectType(wrapper.vm.a) + +// can receive extra props +// as they are declared as `string[]` +shallowMount(AppWithArrayProps, { + props: { a: 'Hello', b: 2 } +}) + +const AppWithoutProps = { + template: '' +} + +// can't receive extra props +expectError( + (wrapper = shallowMount(AppWithoutProps, { + props: { b: 'Hello' } + })) +) + +// except if explicitly cast +shallowMount(AppWithoutProps, { + props: { b: 'Hello' } as never +}) From 6fd0c7c53ec48ee7e90adf8a20769841df1f6073 Mon Sep 17 00:00:00 2001 From: cexbrayat Date: Mon, 18 May 2020 16:32:15 +0200 Subject: [PATCH 2/2] refactor: use mount signatures for shallowMount --- src/mount.ts | 39 ++------------------------------------- 1 file changed, 2 insertions(+), 37 deletions(-) diff --git a/src/mount.ts b/src/mount.ts index d95e7bf16..7e78481c5 100644 --- a/src/mount.ts +++ b/src/mount.ts @@ -245,41 +245,6 @@ export function mount( return createWrapper(app, App, setProps) } -// Functional component -export function shallowMount( - originalComponent: TestedComponent, - options?: MountingOptions -): VueWrapper -// Component declared with defineComponent -export function shallowMount( - originalComponent: { new (): TestedComponent } & Component, - options?: MountingOptions -): VueWrapper -// Component declared with { props: { ... } } -export function shallowMount< - TestedComponent extends ComponentOptionsWithObjectProps ->( - originalComponent: TestedComponent, - options?: MountingOptions> -): VueWrapper> -// Component declared with { props: [] } -export function shallowMount< - TestedComponent extends ComponentOptionsWithArrayProps ->( - originalComponent: TestedComponent, - options?: MountingOptions> -): VueWrapper> -// Component declared with no props -export function shallowMount< - TestedComponent extends ComponentOptionsWithoutProps, - ComponentT extends ComponentOptionsWithoutProps & {} ->( - originalComponent: ComponentT extends { new (): any } ? never : ComponentT, - options?: MountingOptions -): VueWrapper> -export function shallowMount( - originalComponent: any, - options?: MountingOptions -) { - return mount(originalComponent, { ...options, shallow: true }) +export const shallowMount: typeof mount = (component: any, options?: any) => { + return mount(component, { ...options, shallow: true }) }