rebase with master

Author: lmiller1990

README.md

@@ -59,7 +59,7 @@ mixins | ✅ | (new!) nested in [`global`](https://vuejs.github.io/vue-test-util
 plugins | ✅ | (new!) nested in [`global`](https://vuejs.github.io/vue-test-utils-next-docs/api/#global)
 component | ✅ | (new!) nested in [`global`](https://vuejs.github.io/vue-test-utils-next-docs/api/#global)
 directives | ✅ | (new!) nested in [`global`](https://vuejs.github.io/vue-test-utils-next-docs/api/#global)
-stubs | ❌ 
+stubs | ✅ 
 attachToDocument | ❌| will rename to `attachTo`. See [here](https://github.com/vuejs/vue-test-utils/pull/1492)
 attrs | ❌ |
 scopedSlots | ⚰️ | scopedSlots are merged with slots in Vue 3
@@ -85,8 +85,9 @@ setValue | ✅ | works for select, checkbox, radio button, input, textarea. Retu
 text | ✅ |
 trigger | ✅ | returns `nextTick`. You can do `await wrapper.find('button').trigger('click')`
 setProps | ✅ |
+props | ✅
 setData | ❌ | has PR
-destroy | ❌
+destroy | ✅ | renamed to `unmount` to match Vue 3 lifecycle hook name.
 props | ❌
 contains | ⚰️| use `find` 
 emittedByOrder | ⚰️ | use `emitted`

docs/API.md

@@ -348,6 +348,85 @@ test('findAll', () => {
 })
 ```
 
+### `findComponent`
+
+Finds a Vue Component instance and returns a `VueWrapper` if one is found, otherwise returns `ErrorWrapper`.
+
+**Supported syntax:**
+ 
+* **querySelector** - `findComponent('.component')` - Matches standard query selector.
+* **Name** - `findComponent({ name: 'myComponent' })` - matches PascalCase, snake-case, camelCase
+* **ref** - `findComponent({ ref: 'dropdown' })` - Can be used only on direct ref children of mounted component
+* **SFC** - `findComponent(ImportedComponent)` - Pass an imported component directly.
+
+```vue
+<template>
+  <div class="foo">
+    Foo
+  </div>
+</template>
+<script>
+export default { name: 'Foo' }
+</script>
+``` 
+ 
+```vue
+<template>
+  <div>
+    <span>Span</span>
+    <Foo data-test="foo" ref="foo"/>
+  </div>
+</template>
+```
+
+```js
+test('findComponent', () => {
+  const wrapper = mount(Component)
+
+  wrapper.findComponent('.foo') //=> found; returns VueWrapper
+  wrapper.findComponent('[data-test="foo"]') //=> found; returns VueWrapper
+  wrapper.findComponent({ name: 'Foo' }) //=> found; returns VueWrapper
+  wrapper.findComponent({ name: 'foo' }) //=> found; returns VueWrapper
+  wrapper.findComponent({ ref: 'foo' }) //=> found; returns VueWrapper
+  wrapper.findComponent(Foo) //=> found; returns VueWrapper
+})
+```
+
+### `findAllComponents`
+
+Similar to `findComponent` but finds all Vue Component instances that match the query and returns an array of `VueWrapper`. 
+
+**Supported syntax:**
+ 
+ * **querySelector** - `findAllComponents('.component')`
+ * **Name** - `findAllComponents({ name: 'myComponent' })`
+ * **SFC** - `findAllComponents(ImportedComponent)`
+ 
+**Note** - `Ref` is not supported here.
+ 
+ 
+```vue
+<template>
+  <div>
+    <FooComponent 
+      v-for="number in [1, 2, 3]"
+      :key="number"
+      data-test="number"
+    >
+      {{ number }}
+    </FooComponent>
+  </div>
+</template>
+```
+
+```js
+test('findAllComponents', () => {
+  const wrapper = mount(Component)
+
+  wrapper.findAllComponents('[data-test="number"]') //=> found; returns array of VueWrapper
+})
+```
+
 ### `trigger`
 
 Simulates an event, for example `click`, `submit` or `keyup`. Since events often cause a re-render, `trigger` returs `Vue.nextTick`. If you expect the event to trigger a re-render, you should use `await` when you call `trigger` to ensure that Vue updates the DOM before you make an assertion.

package.json

@@ -24,7 +24,7 @@
     "@types/jest": "^24.9.1",
     "@types/node": "12.12.35",
     "@types/lodash": "^4.14.149",
-    "@vue/compiler-sfc": "^3.0.0-alpha.13",
+    "@vue/compiler-sfc": "^3.0.0-beta.2",
     "babel-jest": "^25.2.3",
     "babel-preset-jest": "^25.2.1",
     "dom-event-types": "^1.0.0",
@@ -38,7 +38,7 @@
     "ts-jest": "^25.0.0",
     "tsd": "0.11.0",
     "typescript": "^3.7.5",
-    "vue": "^3.0.0-alpha.13",
+    "vue": "^3.0.0-beta.2",
     "vue-jest": "vuejs/vue-jest#next",
     "vuex": "^4.0.0-alpha.1"
   },

rollup.config.js

@@ -21,7 +21,7 @@ function createEntry(options) {
   const config = {
     input,
     external: [
-      'vue', 
+      'vue',
       'lodash/mergeWith',
       'lodash/camelCase',
       'lodash/upperFirst',
@@ -38,7 +38,7 @@ function createEntry(options) {
   }
 
   if (format === 'es') {
-    config.output.file = isBrowser ? pkg.browser : pkg.module 
+    config.output.file = isBrowser ? pkg.browser : pkg.module
   }
   if (format === 'cjs') {
     config.output.file = pkg.main

src/config.ts

@@ -0,0 +1,5 @@
+import { GlobalMountOptions } from './types'
+
+export const config: { global: GlobalMountOptions } = {
+  global: {}
+}

src/constants.ts

@@ -1 +1,3 @@
 export const MOUNT_ELEMENT_ID = 'app'
+export const MOUNT_COMPONENT_REF = 'VTU_COMPONENT'
+export const MOUNT_PARENT_NAME = 'VTU_ROOT'

src/create-dom-event.ts

@@ -14,7 +14,7 @@ interface EventParams {
   options?: TriggerOptions
 }
 
-const keyCodesByKeyName = {
+export const keyCodesByKeyName = {
   backspace: 8,
   tab: 9,
   enter: 13,

src/dom-wrapper.ts

@@ -43,26 +43,47 @@ export class DOMWrapper<ElementType extends Element> implements WrapperAPI {
     return this.element.outerHTML
   }
 
-  find<T extends Element>(selector: string): DOMWrapper<T> | ErrorWrapper {
-    const result = this.element.querySelector<T>(selector)
+  find<K extends keyof HTMLElementTagNameMap>(
+    selector: K
+  ): DOMWrapper<HTMLElementTagNameMap[K]> | ErrorWrapper
+  find<K extends keyof SVGElementTagNameMap>(
+    selector: K
+  ): DOMWrapper<SVGElementTagNameMap[K]> | ErrorWrapper
+  find<T extends Element>(selector: string): DOMWrapper<T> | ErrorWrapper
+  find(selector: string): DOMWrapper<Element> | ErrorWrapper {
+    const result = this.element.querySelector(selector)
     if (result) {
-      return new DOMWrapper<T>(result)
+      return new DOMWrapper(result)
     }
 
     return new ErrorWrapper({ selector })
   }
 
-  get<T extends Element>(selector: string): DOMWrapper<T> {
-    const result = this.find<T>(selector)
+  get<K extends keyof HTMLElementTagNameMap>(
+    selector: K
+  ): DOMWrapper<HTMLElementTagNameMap[K]>
+  get<K extends keyof SVGElementTagNameMap>(
+    selector: K
+  ): DOMWrapper<SVGElementTagNameMap[K]>
+  get<T extends Element>(selector: string): DOMWrapper<T>
+  get(selector: string): DOMWrapper<Element> {
+    const result = this.find(selector)
     if (result instanceof ErrorWrapper) {
       throw new Error(`Unable to find ${selector} within: ${this.html()}`)
     }
 
     return result
   }
 
-  findAll<T extends Element>(selector: string): DOMWrapper<T>[] {
-    return Array.from(this.element.querySelectorAll<T>(selector)).map(
+  findAll<K extends keyof HTMLElementTagNameMap>(
+    selector: K
+  ): DOMWrapper<HTMLElementTagNameMap[K]>[]
+  findAll<K extends keyof SVGElementTagNameMap>(
+    selector: K
+  ): DOMWrapper<SVGElementTagNameMap[K]>[]
+  findAll<T extends Element>(selector: string): DOMWrapper<T>[]
+  findAll(selector: string): DOMWrapper<Element>[] {
+    return Array.from(this.element.querySelectorAll(selector)).map(
       (x) => new DOMWrapper(x)
     )
   }

src/emitMixin.ts

@@ -1,10 +1,11 @@
 import { getCurrentInstance } from 'vue'
 
-export const createEmitMixin = () => {
-  const events: Record<string, unknown[]> = {}
-
-  const emitMixin = {
+export const attachEmitListener = () => {
+  return {
     beforeCreate() {
+      let events: Record<string, unknown[]> = {}
+      this.__emitted = events
+
       getCurrentInstance().emit = (event: string, ...args: unknown[]) => {
         events[event]
           ? (events[event] = [...events[event], [...args]])
@@ -14,9 +15,4 @@ export const createEmitMixin = () => {
       }
     }
   }
-
-  return {
-    events,
-    emitMixin
-  }
 }

src/error-wrapper.ts

@@ -1,9 +1,11 @@
+import { FindComponentSelector } from './types'
+
 interface Options {
-  selector: string
+  selector: FindComponentSelector
 }
 
 export class ErrorWrapper {
-  selector: string
+  selector: FindComponentSelector
   element: null
 
   constructor({ selector }: Options) {
@@ -14,6 +16,10 @@ export class ErrorWrapper {
     return Error(`Cannot call ${method} on an empty wrapper.`)
   }
 
+  vm(): Error {
+    throw this.wrapperError('vm')
+  }
+
   attributes() {
     throw this.wrapperError('attributes')
   }
@@ -30,12 +36,16 @@ export class ErrorWrapper {
     throw this.wrapperError('find')
   }
 
+  get(): never {
+    throw this.wrapperError('get')
+  }
+
   findAll(): never {
     throw this.wrapperError('findAll')
   }
 
-  setChecked() {
-    throw this.wrapperError('setChecked')
+  setProps() {
+    throw this.wrapperError('setProps')
   }
 
   setValue() {
@@ -49,4 +59,8 @@ export class ErrorWrapper {
   trigger() {
     throw this.wrapperError('trigger')
   }
+
+  unmount() {
+    throw this.wrapperError('unmount')
+  }
 }