Merge pull request #34 from /issues/22-add-update-method

Add update method for model updates

Author: dfcook

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@testing-library/vue",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "Simple and complete Vue DOM testing utilities that encourage good testing practices.",
   "main": "dist/vue-testing-library.js",
   "scripts": {

package.json

@@ -73,7 +73,6 @@ function render (TestComponent, {
       wrapper.setProps(_)
       return wait()
     },
-    updateState: _ => wrapper.setData(_),
     ...getQueriesForElement(wrapper.element.parentNode)
   }
 }
@@ -103,6 +102,42 @@ fireEvent.touch = async (elem) => {
   await fireEvent.blur(elem)
 }
 
+fireEvent.update = async (elem, value) => {
+  const tagName = elem.tagName
+  const type = elem.type
+
+  switch (tagName) {
+    case 'OPTION':
+      elem.selected = value
+
+      const parentElement = this.element.parentElement.tagName === 'OPTGROUP'
+        ? this.element.parentElement.parentElement
+        : this.element.parentElement
+
+      return fireEvent.change(parentElement)
+
+    case 'INPUT':
+      if (type === 'checkbox') {
+        elem.checked = value
+        return fireEvent.change(elem)
+      } else if (type === 'radio') {
+        elem.selected = value
+        return fireEvent.change(elem)
+      } else {
+        elem.value = value
+        return fireEvent.input(elem)
+      }
+
+    case 'TEXTAREA':
+      elem.value = value
+      return fireEvent.input(elem)
+
+    case 'SELECT':
+      elem.value = value
+      return fireEvent.change(elem)
+  }
+}
+
 export * from '@testing-library/dom'
 export {
   cleanup,

src/vue-testing-library.js

@@ -16,6 +16,14 @@
         name="password"
         aria-labelledby="password-label"
       >
+      <label id="remember-me-label">Remember Me</label>
+      <input 
+        type="checkbox" 
+        id="remember-me" 
+        name="remember-me" 
+        aria-labelledby="remember-me-label" 
+        v-model="rememberMe" 
+      />
       <button type="submit">Submit</button>
     </form>
   </div>
@@ -32,14 +40,16 @@ export default {
   data () {
     return {
       username: '',
-      password: ''
+      password: '',
+      rememberMe: false
     }
   },
   methods: {
     submit () {
       this.onSubmit({
         username: this.username,
-        password: this.password
+        password: this.password,
+        rememberMe: this.rememberMe
       })
     }
   }

tests/__tests__/components/Login.vue

@@ -2,17 +2,22 @@ import { render, fireEvent } from '@testing-library/vue'
 import Login from './components/Login'
 
 test('login form submits', async () => {
-  const fakeUser = { username: 'jackiechan', password: 'hiya! 🥋' }
+  const fakeUser = { username: 'jackiechan', password: 'hiya! 🥋', rememberMe: true }
   const handleSubmit = jest.fn()
-  const { getByText, updateState } = render(
+  const { getByLabelText, getByText } = render(
     Login, { props: { onSubmit: handleSubmit } }
   )
 
   const submitButtonNode = getByText('Submit')
 
-  // Act - this is waiting on an issue in @vue/test-utils to allow v-model to be updated by
-  // changes to DOM elements
-  updateState(fakeUser)
+  const userNameInput = getByLabelText('Username')
+  await fireEvent.update(userNameInput, fakeUser.username)
+
+  const passwordInput = getByLabelText('Password')
+  await fireEvent.update(passwordInput, fakeUser.password)
+
+  const rememberMeInput = getByLabelText('Remember Me')
+  await fireEvent.update(rememberMeInput, true)
 
   // NOTE: in jsdom, it's not possible to trigger a form submission
   // by clicking on the submit button. This is really unfortunate.