Merge branch 'master' of github.com:testing-library/vue-testing-library

Author: dfcook

README.md

@@ -1,7 +1,7 @@
 <div align="center">
 <h1>vue-testing-library</h1>
 
-<p>Lightweight adapter allowing <a href="https://github.com/kentcdodds/dom-testing-library/">dom-testing-library</a> to be used to test <a href="https://github.com/vuejs/vue">Vue.js</a> components built on top of <a href="https://github.com/vuejs/vue-test-utils">@vue/test-utils</a></p>
+<p>Lightweight adapter allowing <a href="https://github.com/testing-library/dom-testing-library/">dom-testing-library</a> to be used to test <a href="https://github.com/vuejs/vue">Vue.js</a> components built on top of <a href="https://github.com/vuejs/vue-test-utils">@vue/test-utils</a></p>
 
 </div>
 
@@ -16,7 +16,7 @@
 
 ## This library
 
-The `vue-testing-library` is a an adapter that enables Vue testing using the framework-agnostic DOM testing library `dom-testing-library`
+The `vue-testing-library` is an adapter that enables Vue testing using the framework-agnostic DOM testing library `dom-testing-library`
 
 * [Installation](#installation)
 * [Usage](#usage)
@@ -112,18 +112,18 @@ test('should render HelloWorld', () => {
 
 ### render
 
-The `render` function takes up to 3 parameters and returns an object with some helper methods
+The `render` function takes up to 3 parameters and returns an object with some helper methods.
 
 1. Component - the Vue component to be tested.
 2. RenderOptions - an object containing additional information to be passed to @vue/test-utils mount. This can be:
-* store - The object definition of a Vuex store, if present `render` will configure a Vuex store and pass to mount.
-* routes - A set of routes, if present render will configure VueRouter and pass to mount.
+* store - The object definition of a Vuex store. If present, `render` will configure a Vuex store and pass to mount.
+* routes - A set of routes. If present, render will configure VueRouter and pass to mount.
 All additional render options are passed to the vue-test-utils mount function in its options.
 3. configurationCb - A callback to be called passing the Vue instance when created, plus the store and router if specified. This allows 3rd party plugins to be installed prior to mount.
 
 ### fireEvent
 
-Lightweight wrapper around DOM element events and methods. Will call wait, so can be awaited to allow effects to propagate.
+Lightweight wrapper around DOM element events and methods. Will call `wait`, so can be awaited to allow effects to propagate.
 
 ### wait
 
@@ -133,7 +133,7 @@ around the
 [`wait-for-expect`](https://github.com/TheBrainFamily/wait-for-expect) module.
 
 Waiting can be very important in Vue components, @vue/test-utils has succeeded in making the majority of updates happen
-synchronously however there are occasions when wait will allow the DOM to update. For example, see [`here`](https://github.com/testing-library/vue-testing-library/tree/master/tests/__tests__/validate-plugin.js)
+synchronously however there are occasions when `wait` will allow the DOM to update. For example, see [`here`](https://github.com/testing-library/vue-testing-library/tree/master/tests/__tests__/end-to-end.js)
 
 ## Examples
 
@@ -145,7 +145,7 @@ Some included are:
 * [`vue-router`](https://github.com/testing-library/vue-testing-library/tree/master/tests/__tests__/vue-router.js)
 * [`vee-validate`](https://github.com/testing-library/vue-testing-library/tree/master/tests/__tests__/validate-plugin.js)
 
-Feel free to contribute more!
+Feel free to contribute with more!
 
 ## LICENSE
 

tests/__tests__/components/Button.vue

@@ -1,7 +1,7 @@
 <template>
   <button
     :class="typeClass"
-    @click="clicked"
+    @click="handleClick"
   >{{ text }}</button>
 </template>
 
@@ -12,10 +12,6 @@ export default {
       type: String,
       default: ''
     },
-    clicked: {
-      type: Function,
-      default: () => true
-    },
     type: {
       validator: (value) => ['primary', 'secondary'].includes(value),
       default: 'primary'
@@ -28,6 +24,11 @@ export default {
       }
       return 'button'
     }
+  },
+  methods: {
+    handleClick (e) {
+      this.$emit('click')
+    }
   }
 }
 </script>

tests/__tests__/router/programmatic-routing/components/Home.vue

@@ -1,7 +1,9 @@
 <template>
   <div>
     <div>You are home</div>
-    <button data-testid="go-to-about" @click="goToAbout">About</button>
+    <button
+      data-testid="go-to-about"
+      @click="goToAbout">About</button>
   </div>
 </template>
 
@@ -14,4 +16,3 @@ export default {
   }
 }
 </script>
-

tests/__tests__/simple-button.js

@@ -6,18 +6,17 @@ afterEach(cleanup)
 test('renders button with text', () => {
   const buttonText = "Click me; I'm sick"
   const { getByText } = render(SimpleButton, {
-    props: { text: buttonText, clicked: () => true }
+    props: { text: buttonText }
   })
 
   getByText(buttonText)
 })
 
-test('clicked prop is called when button is clicked', () => {
-  const clicked = jest.fn()
+test('click event is emitted when button is clicked', () => {
   const text = 'Click me'
-  const { getByText } = render(SimpleButton, {
-    props: { text, clicked }
+  const { getByText, emitted } = render(SimpleButton, {
+    props: { text }
   })
   fireEvent.click(getByText(text))
-  expect(clicked).toBeCalled()
+  expect(emitted().click).toHaveLength(1)
 })