From 0bb947fd1f32a2e54cf70066588ed3f53453e426 Mon Sep 17 00:00:00 2001 From: Take-John Date: Wed, 15 Jan 2025 23:53:49 +0900 Subject: [PATCH] fix: accept FunctionalComponent as selector Fixes #2594 --- docs/api/index.md | 10 +++++----- docs/fr/api/index.md | 10 +++++----- docs/zh/api/index.md | 10 +++++----- src/baseWrapper.ts | 18 ++++++++++-------- src/interfaces/wrapperLike.ts | 14 +++++++------- src/types.ts | 2 +- src/utils.ts | 2 +- test-dts/findComponent.d-test.ts | 27 +++++++++++++++++++++++++++ 8 files changed, 61 insertions(+), 32 deletions(-) diff --git a/docs/api/index.md b/docs/api/index.md index abf00506c..7e7818207 100644 --- a/docs/api/index.md +++ b/docs/api/index.md @@ -1106,8 +1106,8 @@ Finds a Vue Component instance and returns a `VueWrapper` if found. Returns `Err ```ts findComponent(selector: string): WrapperLike -findComponent(selector: T | Exclude): VueWrapper> -findComponent(selector: T | string): DOMWrapper +findComponent(selector: T | Exclude>): VueWrapper> +findComponent>(selector: T | string): DOMWrapper findComponent(selector: NameSelector | RefSelector): VueWrapper findComponent(selector: T | FindComponentSelector): VueWrapper findComponent(selector: FindComponentSelector): WrapperLike @@ -1224,9 +1224,9 @@ wrapper.findComponent('.foo') // returns VueWrapper ```ts findAllComponents(selector: string): WrapperLike[] -findAllComponents(selector: T | Exclude): VueWrapper>[] -findAllComponents(selector: string): DOMWrapper[] -findAllComponents(selector: T): DOMWrapper[] +findAllComponents(selector: T | Exclude>): VueWrapper>[] +findAllComponents>(selector: string): DOMWrapper[] +findAllComponents>(selector: T): DOMWrapper[] findAllComponents(selector: NameSelector): VueWrapper[] findAllComponents(selector: T | FindAllComponentsSelector): VueWrapper[] findAllComponents(selector: FindAllComponentsSelector): WrapperLike[] diff --git a/docs/fr/api/index.md b/docs/fr/api/index.md index c38698cf0..f58b3d926 100644 --- a/docs/fr/api/index.md +++ b/docs/fr/api/index.md @@ -1101,8 +1101,8 @@ Trouve une instance de composant Vue et renvoie un `VueWrapper` si trouvé. Renv ```ts findComponent(selector: string): WrapperLike -findComponent(selector: T | Exclude): VueWrapper> -findComponent(selector: T | string): DOMWrapper +findComponent(selector: T | Exclude>): VueWrapper> +findComponent>(selector: T | string): DOMWrapper findComponent(selector: NameSelector | RefSelector): VueWrapper findComponent(selector: T | FindComponentSelector): VueWrapper findComponent(selector: FindComponentSelector): WrapperLike @@ -1218,9 +1218,9 @@ wrapper.findComponent('.foo'); // retourne VueWrapper ```ts findAllComponents(selector: string): WrapperLike[] -findAllComponents(selector: T | Exclude): VueWrapper>[] -findAllComponents(selector: string): DOMWrapper[] -findAllComponents(selector: T): DOMWrapper[] +findAllComponents(selector: T | Exclude>): VueWrapper>[] +findAllComponents>(selector: string): DOMWrapper[] +findAllComponents>(selector: T): DOMWrapper[] findAllComponents(selector: NameSelector): VueWrapper[] findAllComponents(selector: T | FindAllComponentsSelector): VueWrapper[] findAllComponents(selector: FindAllComponentsSelector): WrapperLike[] diff --git a/docs/zh/api/index.md b/docs/zh/api/index.md index e99162693..6e3184ec3 100644 --- a/docs/zh/api/index.md +++ b/docs/zh/api/index.md @@ -1104,8 +1104,8 @@ test('findAll', () => { ```ts findComponent(selector: string): WrapperLike -findComponent(selector: T | Exclude): VueWrapper> -findComponent(selector: T | string): DOMWrapper +findComponent(selector: T | Exclude>): VueWrapper> +findComponent>(selector: T | string): DOMWrapper findComponent(selector: NameSelector | RefSelector): VueWrapper findComponent(selector: T | FindComponentSelector): VueWrapper findComponent(selector: FindComponentSelector): WrapperLike @@ -1222,9 +1222,9 @@ wrapper.findComponent('.foo') // returns VueWrapper ```ts findAllComponents(selector: string): WrapperLike[] -findAllComponents(selector: T | Exclude): VueWrapper>[] -findAllComponents(selector: string): DOMWrapper[] -findAllComponents(selector: T): DOMWrapper[] +findAllComponents(selector: T | Exclude>): VueWrapper>[] +findAllComponents>(selector: string): DOMWrapper[] +findAllComponents>(selector: T): DOMWrapper[] findAllComponents(selector: NameSelector): VueWrapper[] findAllComponents(selector: T | FindAllComponentsSelector): VueWrapper[] findAllComponents(selector: FindAllComponentsSelector): WrapperLike[] diff --git a/src/baseWrapper.ts b/src/baseWrapper.ts index 3972bcf24..63bc59772 100644 --- a/src/baseWrapper.ts +++ b/src/baseWrapper.ts @@ -133,11 +133,13 @@ export default abstract class BaseWrapper > // searching for component created via defineComponent results in VueWrapper of proper type findComponent( - selector: T | Exclude + selector: T | Exclude> ): VueWrapper> // searching for functional component results in DOMWrapper - findComponent(selector: T): DOMWrapper - findComponent( + findComponent>( + selector: T + ): DOMWrapper + findComponent>( selector: string ): DOMWrapper // searching by name or ref always results in VueWrapper @@ -189,12 +191,12 @@ export default abstract class BaseWrapper findAllComponents(selector: string): WrapperLike[] findAllComponents( - selector: T | Exclude + selector: T | Exclude> ): VueWrapper>[] - findAllComponents( + findAllComponents>( selector: T ): DOMWrapper[] - findAllComponents( + findAllComponents>( selector: string ): DOMWrapper[] findAllComponents(selector: NameSelector): VueWrapper[] @@ -296,10 +298,10 @@ export default abstract class BaseWrapper getComponent(selector: string): Omit getComponent( - selector: T | Exclude + selector: T | Exclude> ): Omit>, 'exists'> // searching for functional component results in DOMWrapper - getComponent( + getComponent>( selector: T | string ): Omit, 'exists'> // searching by name or ref always results in VueWrapper diff --git a/src/interfaces/wrapperLike.ts b/src/interfaces/wrapperLike.ts index 50728db60..3a09972eb 100644 --- a/src/interfaces/wrapperLike.ts +++ b/src/interfaces/wrapperLike.ts @@ -34,9 +34,9 @@ export default interface WrapperLike { findComponent(selector: string): WrapperLike findComponent( - selector: T | Exclude + selector: T | Exclude> ): VueWrapper> - findComponent( + findComponent>( selector: T | string ): DOMWrapper findComponent( @@ -49,12 +49,12 @@ export default interface WrapperLike { findAllComponents(selector: string): WrapperLike[] findAllComponents( - selector: T | Exclude + selector: T | Exclude> ): VueWrapper>[] - findAllComponents( + findAllComponents>( selector: string ): DOMWrapper[] - findAllComponents( + findAllComponents>( selector: T ): DOMWrapper[] findAllComponents(selector: NameSelector): VueWrapper[] @@ -78,10 +78,10 @@ export default interface WrapperLike { getComponent(selector: string): Omit getComponent( - selector: T | Exclude + selector: T | Exclude> ): Omit>, 'exists'> // searching for functional component results in DOMWrapper - getComponent( + getComponent>( selector: T | string ): Omit, 'exists'> getComponent( diff --git a/src/types.ts b/src/types.ts index 0db88d316..718a5577d 100644 --- a/src/types.ts +++ b/src/types.ts @@ -22,7 +22,7 @@ export interface NameSelector { export type FindAllComponentsSelector = | DefinedComponent - | FunctionalComponent + | FunctionalComponent | ComponentOptions | NameSelector | string diff --git a/src/utils.ts b/src/utils.ts index 3ff719c5d..e35e01983 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -139,7 +139,7 @@ export function isComponent( export function isFunctionalComponent( component: unknown -): component is FunctionalComponent { +): component is FunctionalComponent { return typeof component === 'function' && !isClassComponent(component) } diff --git a/test-dts/findComponent.d-test.ts b/test-dts/findComponent.d-test.ts index deb64e1d1..96dac42b5 100644 --- a/test-dts/findComponent.d-test.ts +++ b/test-dts/findComponent.d-test.ts @@ -5,6 +5,13 @@ import WrapperLike from '../src/interfaces/wrapperLike' const FuncComponent = () => 'hello' +const FuncComponentWithProps = (props: { a: string }) => 'hello' + +const FuncComponentWithEmits = ( + props: object, + ctx: { emit: (event: 'hi') => void } +) => 'hello' + const ComponentToFind = defineComponent({ props: { a: { @@ -43,6 +50,18 @@ expectType>>( const functionalComponentByType = wrapper.findComponent(FuncComponent) expectType>(functionalComponentByType) +// find by type - functional component with props +const functionalComponentWithPropsByType = wrapper.findComponent( + FuncComponentWithProps +) +expectType>(functionalComponentWithPropsByType) + +// find by type - functional component with emits +const functionalComponentWithEmitsByType = wrapper.findComponent( + FuncComponentWithEmits +) +expectType>(functionalComponentWithEmitsByType) + // find by string const componentByString = wrapper.findComponent('.foo') expectType(componentByString) @@ -58,6 +77,14 @@ const functionalComponentByStringWithParam = wrapper.findComponent('.foo') expectType>(functionalComponentByStringWithParam) +const functionalComponentWithPropsByString = + wrapper.findComponent('.foo') +expectType>(functionalComponentWithPropsByString) + +const functionalComponentWithEmitsByString = + wrapper.findComponent('.foo') +expectType>(functionalComponentWithEmitsByString) + // find by ref const componentByRef = wrapper.findComponent({ ref: 'foo' }) expectType(componentByRef)