diff --git a/package-lock.json b/package-lock.json
index 95515b8f..ef6c86d5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
{
"name": "vue-testing-library",
- "version": "1.0.2",
+ "version": "1.0.3",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
diff --git a/package.json b/package.json
index 19d1c250..686d9093 100644
--- a/package.json
+++ b/package.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": {
diff --git a/src/vue-testing-library.js b/src/vue-testing-library.js
index 0460d667..078a091f 100644
--- a/src/vue-testing-library.js
+++ b/src/vue-testing-library.js
@@ -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,
diff --git a/tests/__tests__/components/Login.vue b/tests/__tests__/components/Login.vue
index 49b5792d..1f841f6f 100644
--- a/tests/__tests__/components/Login.vue
+++ b/tests/__tests__/components/Login.vue
@@ -16,6 +16,14 @@
name="password"
aria-labelledby="password-label"
>
+
+
@@ -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
})
}
}
diff --git a/tests/__tests__/form.js b/tests/__tests__/form.js
index ac28c579..a5a215b6 100644
--- a/tests/__tests__/form.js
+++ b/tests/__tests__/form.js
@@ -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.