Nov 14, 2023 · Nov 15, 2023 · Nov 16, 2023 · Nov 16, 2023 · Nov 16, 2023 · Nov 16, 2023
diff --git a/src/baseWrapper.ts b/src/baseWrapper.ts
 import { textContent } from './utils'
 import type { TriggerOptions } from './createDomEvent'
 import {
  ComponentDefineOptions,
  ComponentInjectOptions,
  ComponentInstance,
  ComponentInternalInstance,
  ComponentOptions,
  ComponentOptionsMixin,
  ComponentPublicInstance,
  ComputedOptions,
  CreateComponentPublicInstance,
  EmitsOptions,
  FunctionalComponent,
  MethodOptions,
  SlotsType,
  nextTick
 } from 'vue'
 import { createDOMEvent } from './createDomEvent'

  // searching by string without specifying component results in WrapperLike object
  findComponent<T extends never>(selector: string): WrapperLike

  // Find Component Options aka plain object
  findComponent<
    Props,
    RawBindings = any,
    D = any,
    C extends ComputedOptions = ComputedOptions,
    M extends MethodOptions = MethodOptions
    Props = {},
    RawBindings = {},
    D = {},
    C extends ComputedOptions = {},
    M extends MethodOptions = {},
    Mixin extends ComponentOptionsMixin = ComponentOptionsMixin,
    Extends extends ComponentOptionsMixin = ComponentOptionsMixin,
    E extends EmitsOptions = {},
    EE extends string = string,
    I extends ComponentInjectOptions = {},
    II extends string = string,
    S extends SlotsType = {},
    Options = {}
  >(
    selector: ComponentOptions<Props, RawBindings, D, C, M>
  ): VueWrapper<CreateComponentPublicInstance<Props, RawBindings, D, C, M>>
    selector: ComponentDefineOptions<
      Props,
      RawBindings,
      D,
      C,
      M,
      Mixin,
      Extends,
      E,
      EE,
      I,
      II,
      S,
      Options
    >
  ): VueWrapper<
    Props extends DefinedComponent
      ? ComponentInstance<Props>
      : CreateComponentPublicInstance<
          Props,
          RawBindings,
          D,
          C,
          M,
          Mixin,
          Extends,
          E,
          Props,
          {},
          true,
          I,
          S,
          Options
        >
  >
  findComponent<T extends ComponentOptions>(
    selector: string
  ): VueWrapper<
      infer M
    >
      ? CreateComponentPublicInstance<Props, RawBindings, D, C, M>
      :VueWrapper<CreateComponentPublicInstance>
      : CreateComponentPublicInstance
  >
  // searching for component created via defineComponent results in VueWrapper of proper type
  findComponent<T extends DefinedComponent>(
    selector: T | Exclude<FindComponentSelector, FunctionalComponent>
  ): VueWrapper<InstanceType<T>>
  // searching for functional component results in DOMWrapper
  findComponent<T extends FunctionalComponent>(selector: T): DOMWrapper<Node>
  findComponent<T extends FunctionalComponent>(
    selector: string
  ): DOMWrapper<Element>

  // searching for component created via defineComponent results in VueWrapper of proper type
  findComponent<T extends DefinedComponent>(
    selector: T | Exclude<FindComponentSelector, FunctionalComponent>
  ): VueWrapper<ComponentInstance<T>>

  // searching by name or ref always results in VueWrapper
  findComponent<T extends never>(
    selector: NameSelector | RefSelector
  findAllComponents<T extends never>(selector: string): WrapperLike[]
  findAllComponents<T extends DefinedComponent>(
    selector: T | Exclude<FindAllComponentsSelector, FunctionalComponent>
  ): VueWrapper<InstanceType<T>>[]
  ): VueWrapper<ComponentInstance<T>>[]
  findAllComponents<T extends FunctionalComponent>(
    selector: T
  ): DOMWrapper<Node>[]
  getComponent<T extends never>(selector: string): Omit<WrapperLike, 'exists'>
  getComponent<T extends DefinedComponent>(
    selector: T | Exclude<FindComponentSelector, FunctionalComponent>
  ): Omit<VueWrapper<InstanceType<T>>, 'exists'>
  ): Omit<VueWrapper<ComponentInstance<T>>, 'exists'>
  // searching for functional component results in DOMWrapper
  getComponent<T extends FunctionalComponent>(
    selector: T | string
diff --git a/src/interfaces/wrapperLike.ts b/src/interfaces/wrapperLike.ts
  RefSelector
 } from '../types'
 import { VueWrapper } from '../vueWrapper'
 import { ComponentPublicInstance, FunctionalComponent } from 'vue'
 import {
  ComponentInstance,
  ComponentPublicInstance,
  FunctionalComponent
 } from 'vue'
 import type { DOMWrapper } from '../domWrapper'

 export default interface WrapperLike {
  findComponent<T extends never>(selector: string): WrapperLike
  findComponent<T extends DefinedComponent>(
    selector: T | Exclude<FindComponentSelector, FunctionalComponent>
  ): VueWrapper<InstanceType<T>>
  ): VueWrapper<ComponentInstance<T>>
  findComponent<T extends FunctionalComponent>(
    selector: T | string
  ): DOMWrapper<Element>
  findAllComponents<T extends never>(selector: string): WrapperLike[]
  findAllComponents<T extends DefinedComponent>(
    selector: T | Exclude<FindAllComponentsSelector, FunctionalComponent>
  ): VueWrapper<InstanceType<T>>[]
  ): VueWrapper<ComponentInstance<T>>[]
  findAllComponents<T extends FunctionalComponent>(
    selector: string
  ): DOMWrapper<Element>[]
  getComponent<T extends never>(selector: string): Omit<WrapperLike, 'exists'>
  getComponent<T extends DefinedComponent>(
    selector: T | Exclude<FindComponentSelector, FunctionalComponent>
  ): Omit<VueWrapper<InstanceType<T>>, 'exists'>
  ): Omit<VueWrapper<ComponentInstance<T>>, 'exists'>
  // searching for functional component results in DOMWrapper
  getComponent<T extends FunctionalComponent>(
    selector: T | string
diff --git a/src/mount.ts b/src/mount.ts
  }
 } & Record<string, unknown>

 // export function mount<T extends { new (): { $props: any } }>(
 //   originalComponent: T,
 //   options?: ComponentMountingOptions<T, ComponentProps<T>>
 // ): //VueWrapper<ComponentInstance<T>>
 // {
 //   props: ComponentProps<T>
 // }

 // defineComponent
 export function mount<
  T extends DefineComponent<
  originalComponent: T,
  options?: ComponentMountingOptions<T, ComponentProps<T>>
 ): VueWrapper<ComponentInstance<T>>

 // implementation
 export function mount(
  inputComponent: any,
diff --git a/src/types.ts b/src/types.ts

 export type VueElement = VueNode<Element>

 export type DefinedComponent =new (...args: any[]) => any
 export type DefinedComponent =Component
diff --git a/src/vueWrapper.ts b/src/vueWrapper.ts
  App,
  ComponentPublicInstance,
  VNode,
  ExtractComponentEmits
  ExtractComponentEmits,
  ComponentCustomProperties
 } from 'vue'

 import { config } from './config'
      }
  : never

 declare const aaa: keyof Omit<
  ComponentPublicInstance,
  keyof ComponentCustomProperties
 >

 // type BetterKeys = keyof Omit<
 //   ComponentPublicInstance,
 //   keyof ComponentCustomProperties
 // >
 // export type ComponentInstance = {
 //   [K in keyof ComponentPublicInstance]?: any
 // } & Record<PropertyKey, any>

 export class VueWrapper<
  T extends ComponentPublicInstance = ComponentPublicInstance
  T extends Omit<ComponentPublicInstance, '$emit'> & {
    $emit: any
  } = ComponentPublicInstance
 > extends BaseWrapper<Node> {
  private readonly componentVM: T
  private readonly rootVM: ComponentPublicInstance | undefined | null
diff --git a/test-dts/findComponent.d-test.ts b/test-dts/findComponent.d-test.ts
 import { expectType } from './index'
 import { defineComponent } from 'vue'
 import {ComponentInstance,defineComponent } from 'vue'
 import { DOMWrapper, mount, VueWrapper } from '../src'
 import WrapperLike from '../src/interfaces/wrapperLike'


 // find by type - component definition
 const componentByType = wrapper.findComponent(ComponentToFind)
 expectType<VueWrapper<InstanceType<typeof ComponentToFind>>>(componentByType)
 expectType<VueWrapper<ComponentInstance<typeof ComponentToFind>>>(
  componentByType
 )

 // find by type - component definition with emits
 const componentWithEmitsByType = wrapper.findComponent(ComponentWithEmits)
 expectType<VueWrapper<InstanceType<typeof ComponentWithEmits>>>(
 expectType<VueWrapper<ComponentInstance<typeof ComponentWithEmits>>>(
  componentWithEmitsByType
 )

 // findi by string with specifying component
 const componentByStringWithParam =
  wrapper.findComponent<typeof ComponentToFind>('.foo')
 expectType<VueWrapper<InstanceType<typeof ComponentToFind>>>(
 expectType<VueWrapper<ComponentInstance<typeof ComponentToFind>>>(
  componentByStringWithParam
 )

 const componentByRefWithType = wrapper.findComponent<typeof ComponentToFind>({
  ref: 'foo'
 })
 expectType<VueWrapper<InstanceType<typeof ComponentToFind>>>(
 expectType<VueWrapper<ComponentInstance<typeof ComponentToFind>>>(
  componentByRefWithType
 )

 const componentByNameWithType = wrapper.findComponent<typeof ComponentToFind>({
  name: 'foo'
 })
 expectType<VueWrapper<InstanceType<typeof ComponentToFind>>>(


 declare const aaa : ComponentInstance<typeof ComponentToFind>
 aaa.$props
 componentByNameWithType.vm.$props

 expectType<VueWrapper<ComponentInstance<typeof ComponentToFind>>>(
  componentByNameWithType
 )
diff --git a/test-dts/mount.d-test.ts b/test-dts/mount.d-test.ts

 expectError(
  mount(AppWithProps, {
 // @ts-expect-error wrong prop type should not compile
  // @ts-expect-error wrong prop type should not compile
    props: { a: 2 }
  })
 )
diff --git a/test-dts/wrapper.d-test.ts b/test-dts/wrapper.d-test.ts
 import { mount } from '../src'

 const AppWithDefine = defineComponent({
  emits: {
    increment: (arg: { count: number }) => true
  },
  template: ''
 })


 // event name without specific type
 let incrementEventWithoutType = wrapper.emitted('increment')
 expectType<unknown[][] | undefined>(incrementEventWithoutType)
 expectType<{ count: number }[] | undefined>(incrementEventWithoutType)

 // event name
 let incrementEvent = wrapper.emitted<{ count: number }>('increment')
 let incrementEvent = wrapper.emitted('increment')
 expectType<{ count: number }[] | undefined>(incrementEvent)
 expectType<{ count: number }>(incrementEvent![0])
Original file line number	Diff line number	Diff line change
		@@ -1,13 +1,19 @@
		import { textContent } from './utils'
		import type { TriggerOptions } from './createDomEvent'
		import {
		ComponentDefineOptions,
		ComponentInjectOptions,
		ComponentInstance,
		ComponentInternalInstance,
		ComponentOptions,
		ComponentOptionsMixin,
		ComponentPublicInstance,
		ComputedOptions,
		CreateComponentPublicInstance,
		EmitsOptions,
		FunctionalComponent,
		MethodOptions,
		SlotsType,
		nextTick
		} from 'vue'
		import { createDOMEvent } from './createDomEvent'
Expand DownExpand Up		@@ -108,16 +114,58 @@ export default abstract class BaseWrapper<ElementType extends Node>

		// searching by string without specifying component results in WrapperLike object
		findComponent<T extends never>(selector: string): WrapperLike

		// Find Component Options aka plain object
		findComponent<
		Props,
		RawBindings = any,
		D = any,
		C extends ComputedOptions = ComputedOptions,
		M extends MethodOptions = MethodOptions
		Props = {},
		RawBindings = {},
		D = {},
		C extends ComputedOptions = {},
		M extends MethodOptions = {},
		Mixin extends ComponentOptionsMixin = ComponentOptionsMixin,
		Extends extends ComponentOptionsMixin = ComponentOptionsMixin,
		E extends EmitsOptions = {},
		EE extends string = string,
		I extends ComponentInjectOptions = {},
		II extends string = string,
		S extends SlotsType = {},
		Options = {}
		>(
		selector: ComponentOptions<Props, RawBindings, D, C, M>
		): VueWrapper<CreateComponentPublicInstance<Props, RawBindings, D, C, M>>
		selector: ComponentDefineOptions<
		Props,
		RawBindings,
		D,
		C,
		M,
		Mixin,
		Extends,
		E,
		EE,
		I,
		II,
		S,
		Options
		>
		): VueWrapper<
		Props extends DefinedComponent
		? ComponentInstance<Props>
		: CreateComponentPublicInstance<
		Props,
		RawBindings,
		D,
		C,
		M,
		Mixin,
		Extends,
		E,
		Props,
		{},
		true,
		I,
		S,
		Options
		>
		>
		findComponent<T extends ComponentOptions>(
		selector: string
		): VueWrapper<
Expand All		@@ -129,17 +177,19 @@ export default abstract class BaseWrapper<ElementType extends Node>
		infer M
		>
		? CreateComponentPublicInstance<Props, RawBindings, D, C, M>
		:VueWrapper<CreateComponentPublicInstance>
		: CreateComponentPublicInstance
		>
		// searching for component created via defineComponent results in VueWrapper of proper type
		findComponent<T extends DefinedComponent>(
		selector: T \| Exclude<FindComponentSelector, FunctionalComponent>
		): VueWrapper<InstanceType<T>>
		// searching for functional component results in DOMWrapper
		findComponent<T extends FunctionalComponent>(selector: T): DOMWrapper<Node>
		findComponent<T extends FunctionalComponent>(
		selector: string
		): DOMWrapper<Element>

		// searching for component created via defineComponent results in VueWrapper of proper type
		findComponent<T extends DefinedComponent>(
		selector: T \| Exclude<FindComponentSelector, FunctionalComponent>
		): VueWrapper<ComponentInstance<T>>

		// searching by name or ref always results in VueWrapper
		findComponent<T extends never>(
		selector: NameSelector \| RefSelector
Expand DownExpand Up		@@ -185,7 +235,7 @@ export default abstract class BaseWrapper<ElementType extends Node>
		findAllComponents<T extends never>(selector: string): WrapperLike[]
		findAllComponents<T extends DefinedComponent>(
		selector: T \| Exclude<FindAllComponentsSelector, FunctionalComponent>
		): VueWrapper<InstanceType<T>>[]
		): VueWrapper<ComponentInstance<T>>[]
		findAllComponents<T extends FunctionalComponent>(
		selector: T
		): DOMWrapper<Node>[]
Expand DownExpand Up		@@ -292,7 +342,7 @@ export default abstract class BaseWrapper<ElementType extends Node>
		getComponent<T extends never>(selector: string): Omit<WrapperLike, 'exists'>
		getComponent<T extends DefinedComponent>(
		selector: T \| Exclude<FindComponentSelector, FunctionalComponent>
		): Omit<VueWrapper<InstanceType<T>>, 'exists'>
		): Omit<VueWrapper<ComponentInstance<T>>, 'exists'>
		// searching for functional component results in DOMWrapper
		getComponent<T extends FunctionalComponent>(
		selector: T \| string
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -8,7 +8,11 @@ import {
		RefSelector
		} from '../types'
		import { VueWrapper } from '../vueWrapper'
		import { ComponentPublicInstance, FunctionalComponent } from 'vue'
		import {
		ComponentInstance,
		ComponentPublicInstance,
		FunctionalComponent
		} from 'vue'
		import type { DOMWrapper } from '../domWrapper'

		export default interface WrapperLike {
Expand All		@@ -35,7 +39,7 @@ export default interface WrapperLike {
		findComponent<T extends never>(selector: string): WrapperLike
		findComponent<T extends DefinedComponent>(
		selector: T \| Exclude<FindComponentSelector, FunctionalComponent>
		): VueWrapper<InstanceType<T>>
		): VueWrapper<ComponentInstance<T>>
		findComponent<T extends FunctionalComponent>(
		selector: T \| string
		): DOMWrapper<Element>
Expand All		@@ -50,7 +54,7 @@ export default interface WrapperLike {
		findAllComponents<T extends never>(selector: string): WrapperLike[]
		findAllComponents<T extends DefinedComponent>(
		selector: T \| Exclude<FindAllComponentsSelector, FunctionalComponent>
		): VueWrapper<InstanceType<T>>[]
		): VueWrapper<ComponentInstance<T>>[]
		findAllComponents<T extends FunctionalComponent>(
		selector: string
		): DOMWrapper<Element>[]
Expand DownExpand Up		@@ -79,7 +83,7 @@ export default interface WrapperLike {
		getComponent<T extends never>(selector: string): Omit<WrapperLike, 'exists'>
		getComponent<T extends DefinedComponent>(
		selector: T \| Exclude<FindComponentSelector, FunctionalComponent>
		): Omit<VueWrapper<InstanceType<T>>, 'exists'>
		): Omit<VueWrapper<ComponentInstance<T>>, 'exists'>
		// searching for functional component results in DOMWrapper
		getComponent<T extends FunctionalComponent>(
		selector: T \| string
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -35,6 +35,14 @@ export type ComponentMountingOptions<T, P> = Omit<
		}
		} & Record<string, unknown>

		// export function mount<T extends { new (): { $props: any } }>(
		// originalComponent: T,
		// options?: ComponentMountingOptions<T, ComponentProps<T>>
		// ): //VueWrapper<ComponentInstance<T>>
		// {
		// props: ComponentProps<T>
		// }

		// defineComponent
		export function mount<
		T extends DefineComponent<
Expand All		@@ -54,7 +62,6 @@ export function mount<
		originalComponent: T,
		options?: ComponentMountingOptions<T, ComponentProps<T>>
		): VueWrapper<ComponentInstance<T>>

		// implementation
		export function mount(
		inputComponent: any,
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -166,4 +166,4 @@ export type VueNode<T extends Node = Node> = T & {

		export type VueElement = VueNode<Element>

		export type DefinedComponent =new (...args: any[]) => any
		export type DefinedComponent =Component
Original file line number	Diff line number	Diff line change
Expand Up		@@ -3,7 +3,8 @@ import {
		App,
		ComponentPublicInstance,
		VNode,
		ExtractComponentEmits
		ExtractComponentEmits,
		ComponentCustomProperties
		} from 'vue'

		import { config } from './config'
Expand DownExpand Up		@@ -94,8 +95,23 @@ type ResolveEmitRecord<T> = ExtractComponentEmits<T> extends infer E
		}
		: never

		declare const aaa: keyof Omit<
		ComponentPublicInstance,
		keyof ComponentCustomProperties
		>

		// type BetterKeys = keyof Omit<
		// ComponentPublicInstance,
		// keyof ComponentCustomProperties
		// >
		// export type ComponentInstance = {
		// [K in keyof ComponentPublicInstance]?: any
		// } & Record<PropertyKey, any>

		export class VueWrapper<
		T extends ComponentPublicInstance = ComponentPublicInstance
		T extends Omit<ComponentPublicInstance, '$emit'> & {
		$emit: any
		} = ComponentPublicInstance
		> extends BaseWrapper<Node> {
		private readonly componentVM: T
		private readonly rootVM: ComponentPublicInstance \| undefined \| null
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -1,5 +1,5 @@
		import { expectType } from './index'
		import { defineComponent } from 'vue'
		import {ComponentInstance,defineComponent } from 'vue'
		import { DOMWrapper, mount, VueWrapper } from '../src'
		import WrapperLike from '../src/interfaces/wrapperLike'

Expand DownExpand Up		@@ -31,11 +31,13 @@ const wrapper = mount(AppWithDefine)

		// find by type - component definition
		const componentByType = wrapper.findComponent(ComponentToFind)
		expectType<VueWrapper<InstanceType<typeof ComponentToFind>>>(componentByType)
		expectType<VueWrapper<ComponentInstance<typeof ComponentToFind>>>(
		componentByType
		)

		// find by type - component definition with emits
		const componentWithEmitsByType = wrapper.findComponent(ComponentWithEmits)
		expectType<VueWrapper<InstanceType<typeof ComponentWithEmits>>>(
		expectType<VueWrapper<ComponentInstance<typeof ComponentWithEmits>>>(
		componentWithEmitsByType
		)

Expand All		@@ -50,7 +52,7 @@ expectType<WrapperLike>(componentByString)
		// findi by string with specifying component
		const componentByStringWithParam =
		wrapper.findComponent<typeof ComponentToFind>('.foo')
		expectType<VueWrapper<InstanceType<typeof ComponentToFind>>>(
		expectType<VueWrapper<ComponentInstance<typeof ComponentToFind>>>(
		componentByStringWithParam
		)

Expand All		@@ -66,7 +68,7 @@ expectType<VueWrapper>(componentByRef)
		const componentByRefWithType = wrapper.findComponent<typeof ComponentToFind>({
		ref: 'foo'
		})
		expectType<VueWrapper<InstanceType<typeof ComponentToFind>>>(
		expectType<VueWrapper<ComponentInstance<typeof ComponentToFind>>>(
		componentByRefWithType
		)

Expand All		@@ -78,6 +80,12 @@ expectType<VueWrapper>(componentByName)
		const componentByNameWithType = wrapper.findComponent<typeof ComponentToFind>({
		name: 'foo'
		})
		expectType<VueWrapper<InstanceType<typeof ComponentToFind>>>(


		declare const aaa : ComponentInstance<typeof ComponentToFind>
		aaa.$props
		componentByNameWithType.vm.$props

		expectType<VueWrapper<ComponentInstance<typeof ComponentToFind>>>(
		componentByNameWithType
		)
Original file line number	Diff line number	Diff line change
Expand Up		@@ -85,7 +85,7 @@ mount(AppWithProps, {

		expectError(
		mount(AppWithProps, {
		// @ts-expect-error wrong prop type should not compile
		// @ts-expect-error wrong prop type should not compile
		props: { a: 2 }
		})
		)
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -3,6 +3,9 @@ import { defineComponent } from 'vue'
		import { mount } from '../src'

		const AppWithDefine = defineComponent({
		emits: {
		increment: (arg: { count: number }) => true
		},
		template: ''
		})

Expand DownExpand Up		@@ -65,10 +68,10 @@ expectType<Element \| undefined>(byClassArray[0].element)

		// event name without specific type
		let incrementEventWithoutType = wrapper.emitted('increment')
		expectType<unknown[][] \| undefined>(incrementEventWithoutType)
		expectType<{ count: number }[] \| undefined>(incrementEventWithoutType)

		// event name
		let incrementEvent = wrapper.emitted<{ count: number }>('increment')
		let incrementEvent = wrapper.emitted('increment')
		expectType<{ count: number }[] \| undefined>(incrementEvent)
		expectType<{ count: number }>(incrementEvent![0])

Expand Down