Merge branch 'master' into feat/find-by-component

# Conflicts:
#	src/mount.ts

Author: dobromir-hristov

.github/workflows/ci.yml

@@ -30,3 +30,4 @@ jobs:
     - run: yarn build
       env:
         CI: true
+    - run: yarn tsd

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
@@ -79,15 +79,15 @@ exists | ✅
 find | ✅ | only `querySelector` syntax is supported. `find(Comp)` under discussion [here](https://github.com/vuejs/vue-test-utils/issues/1498)
 emitted | ✅
 findAll | ✅ | see above. `.vm` is different to Vue 2. We are exploring options.
+get | ✅
 html | ✅
 setValue | ✅ | works for select, checkbox, radio button, input, textarea. Returns `nextTick`.
 text | ✅ |
 trigger | ✅ | returns `nextTick`. You can do `await wrapper.find('button').trigger('click')`
 setProps | ✅ |
+props | ✅
 setData | ❌ | has PR
 destroy | ❌
-get | ❌
-props | ❌
 contains | ⚰️| use `find` 
 emittedByOrder | ⚰️ | use `emitted`
 setSelected | ⚰️ | now part of `setValue` 

package.json

@@ -9,7 +9,8 @@
   "module": "dist/vue-test-utils.esm-bundler.js",
   "files": [
     "dist",
-    "README.md"
+    "README.md",
+    "dist/index.d.ts"
   ],
   "dependencies": {
     "lodash": "^4.17.15"
@@ -21,8 +22,9 @@
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@types/estree": "^0.0.42",
     "@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",
     "flush-promises": "^1.0.2",
@@ -33,8 +35,9 @@
     "rollup": "^1.31.1",
     "rollup-plugin-typescript2": "^0.26.0",
     "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"
   },
@@ -48,6 +51,7 @@
   },
   "scripts": {
     "test": "yarn jest --runInBand tests",
+    "tsd": "tsd",
     "build": "yarn rollup -c rollup.config.js",
     "lint": "prettier -c --parser typescript \"(src|tests)/**/*.ts?(x)\"",
     "lint:fix": "yarn lint --write"
@@ -61,5 +65,12 @@
     "*.ts": [
       "prettier --parser=typescript --write"
     ]
+  },
+  "tsd": {
+    "directory": "test-dts",
+    "compilerOptions": {
+      "strict": false,
+      "lib": ["esnext", "dom"]
+    }
   }
 }

src/mount.ts

@@ -45,14 +45,18 @@ interface MountingOptions {
   stubs?: Record<string, any>
 }
 
-export function mount<T extends any>(
-  originalComponent: any,
+export function mount<TestedComponent extends ComponentPublicInstance>(
+  originalComponent: new () => TestedComponent,
+  options?: MountingOptions
+): VueWrapper<TestedComponent>
+export function mount(
+  originalComponent: Component,
   options?: MountingOptions
 ): VueWrapper<any>
-export function mount<T extends ComponentPublicInstance>(
-  originalComponent: new () => T,
+export function mount(
+  originalComponent: any,
   options?: MountingOptions
-): VueWrapper<T> {
+): VueWrapper<any> {
   const component = { ...originalComponent }
 
   // Reset the document.body
@@ -161,5 +165,5 @@ export function mount<T extends ComponentPublicInstance>(
   // mount the app!
   const app = vm.mount(el)
   const App = app.$refs[MOUNT_COMPONENT_REF] as T
-  return createWrapper<T>(App, setProps)
+  return createWrapper(App, setProps)
 }

src/stubs.ts

@@ -23,6 +23,14 @@ const resolveComponentStubByName = (
   const componentPascalName = pascalCase(componentName)
   const componentKebabName = kebabCase(componentName)
 
+  if (Array.isArray(stubs) && stubs.length) {
+    // ['Foo', 'Bar'] => { Foo: true, Bar: true }
+    stubs = stubs.reduce((acc, current) => {
+      acc[current] = true
+      return acc
+    }, {})
+  }
+
   for (const [stubKey, value] of Object.entries(stubs)) {
     if (
       stubKey === componentPascalName ||

src/vue-wrapper.ts

@@ -43,6 +43,12 @@ export class VueWrapper<T extends ComponentPublicInstance>
     return this.componentVM
   }
 
+  props(selector?: string) {
+    return selector
+      ? this.componentVM.$props[selector]
+      : this.componentVM.$props
+  }
+
   classes(className?: string) {
     return new DOMWrapper(this.element).classes(className)
   }

test-dts/index.d-test.ts

@@ -0,0 +1,23 @@
+import { expectType } from 'tsd'
+import { defineComponent } from 'vue'
+import { mount } from '../src'
+
+const App = defineComponent({
+  props: {
+    a: String
+  },
+  template: ''
+})
+
+let wrapper = mount(App)
+expectType<string>(wrapper.vm.a)
+
+const AppWithoutDefine = {
+  props: {
+    a: String
+  },
+  template: ''
+}
+
+wrapper = mount(AppWithoutDefine)
+expectType<string>(wrapper.vm.a)

tests/mountingOptions/stubs.global.spec.ts

@@ -4,6 +4,27 @@ import { mount } from '../../src'
 import Hello from '../components/Hello.vue'
 
 describe('mounting options: stubs', () => {
+  it('handles Array syntax', () => {
+    const Foo = {
+      name: 'Foo',
+      render() {
+        return h('p')
+      }
+    }
+    const Component: ComponentOptions = {
+      render() {
+        return h(() => [h('div'), h(Foo)])
+      }
+    }
+
+    const wrapper = mount(Component, {
+      global: {
+        stubs: ['foo']
+      }
+    })
+
+    expect(wrapper.html()).toBe('<div></div><foo-stub></foo-stub>')
+  })
   it('stubs in a fragment', () => {
     const Foo = {
       name: 'Foo',

tests/props.spec.ts

@@ -0,0 +1,25 @@
+import { mount } from '../src'
+import WithProps from './components/WithProps.vue'
+import Hello from './components/Hello.vue'
+
+describe('props', () => {
+  it('returns a single prop applied to a component', () => {
+    const wrapper = mount(WithProps, { props: { msg: 'ABC' } })
+    expect(wrapper.props('msg')).toEqual('ABC')
+  })
+
+  it('returns all props applied to a component', () => {
+    const wrapper = mount(WithProps, { props: { msg: 'ABC' } })
+    expect(wrapper.props()).toEqual({ msg: 'ABC' })
+  })
+
+  it('returns undefined if props does not exist', () => {
+    const wrapper = mount(WithProps, { props: { msg: 'ABC' } })
+    expect(wrapper.props('foo')).toEqual(undefined)
+  })
+
+  it('returns empty object for components without props', () => {
+    const wrapper = mount(Hello)
+    expect(wrapper.props()).toEqual({})
+  })
+})