Merge pull request #89 from cexbrayat/feat/get-component

feat: getComponent

Author: lmiller1990

src/vue-wrapper.ts

@@ -110,13 +110,21 @@ export class VueWrapper<T extends ComponentPublicInstance>
   get(selector: string): DOMWrapper<Element> {
     const result = this.find(selector)
     if (result instanceof ErrorWrapper) {
-      throw new Error(`Unable to find ${selector} within: ${this.html()}`)
+      throw new Error(`Unable to get ${selector} within: ${this.html()}`)
     }
 
     return result
   }
 
-  findComponent(selector: FindComponentSelector): VueWrapper<T> | ErrorWrapper {
+  findComponent<T extends ComponentPublicInstance>(
+    selector: new () => T
+  ): VueWrapper<T> | ErrorWrapper
+  findComponent<T extends ComponentPublicInstance>(
+    selector: FindComponentSelector
+  ): VueWrapper<T> | ErrorWrapper
+  findComponent<T extends ComponentPublicInstance>(
+    selector: any
+  ): VueWrapper<T> | ErrorWrapper {
     if (typeof selector === 'object' && 'ref' in selector) {
       const result = this.vm.$refs[selector.ref]
       return result
@@ -129,6 +137,25 @@ export class VueWrapper<T extends ComponentPublicInstance>
     return createWrapper(null, result[0])
   }
 
+  getComponent<T extends ComponentPublicInstance>(
+    selector: new () => T
+  ): VueWrapper<T>
+  getComponent<T extends ComponentPublicInstance>(
+    selector: FindComponentSelector
+  ): VueWrapper<T>
+  getComponent<T extends ComponentPublicInstance>(
+    selector: any
+  ): VueWrapper<T> {
+    const result = this.findComponent(selector)
+    if (result instanceof ErrorWrapper) {
+      throw new Error(
+        `Unable to get component with selector ${selector} within: ${this.html()}`
+      )
+    }
+
+    return result as VueWrapper<T>
+  }
+
   findAllComponents(selector: FindAllComponentsSelector): VueWrapper<T>[] {
     return find(this.vm.$.subTree, selector).map((c) => createWrapper(null, c))
   }

test-dts/getComponent.d-test.ts

@@ -0,0 +1,39 @@
+import { expectType } from 'tsd'
+import { defineComponent, ComponentPublicInstance } from 'vue'
+import { mount } from '../src'
+
+const ComponentToFind = defineComponent({
+  props: {
+    a: {
+      type: String,
+      required: true
+    }
+  },
+  template: ''
+})
+
+const AppWithDefine = defineComponent({
+  template: ''
+})
+
+const wrapper = mount(AppWithDefine)
+
+// get by type
+const componentByType = wrapper.getComponent(ComponentToFind)
+// returns a wrapper with properly typed vm
+expectType<string>(componentByType.vm.a)
+
+// get by name
+const componentByName = wrapper.getComponent({ name: 'ComponentToFind' })
+// returns a wrapper with a generic vm (any)
+expectType<ComponentPublicInstance>(componentByName.vm)
+
+// get by string
+const componentByString = wrapper.getComponent('other')
+// returns a wrapper with a generic vm (any)
+expectType<ComponentPublicInstance>(componentByString.vm)
+
+// get by ref
+const componentByRef = wrapper.getComponent({ ref: 'ref' })
+// returns a wrapper with a generic vm (any)
+expectType<ComponentPublicInstance>(componentByRef.vm)

tests/get.spec.ts

@@ -23,7 +23,7 @@ describe('get', () => {
 
     const wrapper = mount(Component)
     expect(() => wrapper.get('#other-span')).toThrowError(
-      'Unable to find #other-span within: <div><span id="my-span"></span></div>'
+      'Unable to get #other-span within: <div><span id="my-span"></span></div>'
     )
   })
 })

tests/getComponent.spec.ts

@@ -0,0 +1,23 @@
+import { defineComponent } from 'vue'
+import { mount } from '../src'
+import { VueWrapper } from '../src/vue-wrapper'
+
+const compA = defineComponent({
+  template: `<div class="A"></div>`
+})
+
+describe('getComponent', () => {
+  it('should delegate to findComponent', () => {
+    const wrapper = mount(compA)
+    jest.spyOn(wrapper, 'findComponent').mockReturnThis()
+    wrapper.getComponent('.domElement')
+    expect(wrapper.findComponent).toHaveBeenCalledWith('.domElement')
+  })
+
+  it('should throw if not found', () => {
+    const wrapper = mount(compA)
+    expect(() => wrapper.getComponent('.domElement')).toThrowError(
+      'Unable to get component with selector .domElement within: <div class="A"></div>'
+    )
+  })
+})