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.