Merge pull request #16 from vuejs/alpha-3

Catch up with alpha-3

Author: afontcu

src/.vuepress/config.js

@@ -30,7 +30,7 @@ module.exports = {
   locales: {
     '/': {
       lang: 'en-US',
-      title: 'Vue Test Utils (2.0.0-alpha-2)'
+      title: 'Vue Test Utils (2.0.0-alpha.3)'
     }
   },
   themeConfig: {

src/api/README.md

@@ -54,7 +54,7 @@ test('mounts on a specific element', () => {
     attachTo: document.getElementById('app')
   })
 
-  console.log(document.body.innerHTML) 
+  console.log(document.body.innerHTML)
   /*
    * <div>
    *   <h1>Non Vue app</h1>
@@ -695,23 +695,23 @@ export default {
 ```js
 import Foo from '@/Foo.vue'
 
-test('find', () => {
+test('findComponent', () => {
   const wrapper = mount(Component)
 
   // All the following queries would return a VueWrapper
 
   // Using a standard querySelector query
-  wrapper.find('.foo')
-  wrapper.find('[data-test="foo"]')
+  wrapper.findComponent('.foo')
+  wrapper.findComponent('[data-test="foo"]')
 
   // Using component's name
-  wrapper.find({ name: 'Foo' })
+  wrapper.findComponent({ name: 'Foo' })
 
   // Using ref attribute. Can be used only on direct children of the mounted component
-  wrapper.find({ ref: 'foo' })
+  wrapper.findComponent({ ref: 'foo' })
 
   // Using imported component
-  wrapper.find(Foo)
+  wrapper.findComponent(Foo)
 })
 ```
 
@@ -750,6 +750,92 @@ test('findAllComponents', () => {
 })
 ```
 
+
+### `get`
+
+Similar to `find`, `get` looks for an element and returns a `DOMWrapper` if one is found. Otherwise it throws an error.
+
+`Component.vue`:
+
+```vue
+<template>
+  <span>Span</span>
+  <span data-test="span">Span</span>
+</template>
+```
+
+`Component.spec.js`:
+
+```js
+test('get', () => {
+  const wrapper = mount(Component)
+
+  wrapper.get('span') //=> found; returns DOMWrapper
+  wrapper.get('[data-test="span"]') //=> found; returns DOMWrapper
+
+  expect(() => wrapper.getComponent('p')).toThrowError()
+})
+```
+
+
+### `getComponent`
+
+Similar to `findComponent`, `getComponent` looks for a Vue Component instance and returns a `VueWrapper` if one is found. Otherwise it throws an error.
+
+**Supported syntax:**
+
+* **querySelector** - `getComponent('.component')` - Matches standard query selector.
+* **Name** - `getComponent({ name: 'myComponent' })` - matches PascalCase, snake-case, camelCase
+* **ref** - `getComponent({ ref: 'dropdown' })` - Can be used only on direct ref children of mounted component
+* **SFC** - `getComponent(ImportedComponent)` - Pass an imported component directly.
+
+`Foo.vue`
+
+```vue
+<template>
+  <div class="foo">
+    Foo
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Foo'
+}
+</script>
+```
+
+`Component.vue`:
+
+```vue
+<template>
+  <Foo />
+</template>
+
+<script>
+import Foo from '@/Foo'
+
+export default {
+  components: { Foo },
+}
+</script>
+```
+
+`Component.spec.js`
+
+```js
+import Foo from '@/Foo.vue'
+
+test('getComponent', () => {
+  const wrapper = mount(Component)
+
+  wrapper.getComponent({ name: 'foo' }) // returns a VueWrapper
+  wrapper.getComponent(Foo) // returns a VueWrapper
+
+  expect(() => wrapper.getComponent('.not-there')).toThrowError()
+})
+```
+
 ### `html`
 
 Returns the HTML (via `outerHTML`) of an element. Useful for debugging.
@@ -814,7 +900,7 @@ test('props', () => {
   const wrapper = mount(Component, {
       global: { stubs: ['Foo'] }
   })
-  const foo = wrapper.findComponent({ name: 'Foo' })
+  const foo = wrapper.getComponent({ name: 'Foo' })
 
   expect(foo.props('truthy')).toBe(true)
   expect(foo.props('object')).toEqual({})