From 6cf41ff75a21367dfad430a3016f04d82713e49d Mon Sep 17 00:00:00 2001 From: Danie Cook Date: Sat, 1 Jun 2019 17:32:44 +0100 Subject: [PATCH 1/4] Add update method for model updates --- package.json | 2 +- src/vue-testing-library.js | 36 ++++++++++++++++++++++++++++ tests/__tests__/components/Login.vue | 14 +++++++++-- tests/__tests__/form.js | 15 ++++++++---- 4 files changed, 59 insertions(+), 8 deletions(-) diff --git a/package.json b/package.json index 19d1c250..7a2225aa 100644 --- a/package.json +++ b/package.json @@ -1,4 +1,4 @@ -{ +{ "name": "@testing-library/vue", "version": "1.0.2", "description": "Simple and complete Vue DOM testing utilities that encourage good testing practices.", diff --git a/src/vue-testing-library.js b/src/vue-testing-library.js index 0460d667..3ef123c2 100644 --- a/src/vue-testing-library.js +++ b/src/vue-testing-library.js @@ -103,6 +103,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 + await 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. From a9fe708e4ca0862d65636c8b2b84b246a2222ca2 Mon Sep 17 00:00:00 2001 From: Danie Cook Date: Sat, 1 Jun 2019 18:16:59 +0100 Subject: [PATCH 2/4] Return promise rather than await --- src/vue-testing-library.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/vue-testing-library.js b/src/vue-testing-library.js index 3ef123c2..c33fe43f 100644 --- a/src/vue-testing-library.js +++ b/src/vue-testing-library.js @@ -135,7 +135,7 @@ fireEvent.update = async (elem, value) => { case 'SELECT': elem.value = value - await fireEvent.change(elem) + return fireEvent.change(elem) } } From cf4936028ccc10af8cd0661321e6c53b682be8ee Mon Sep 17 00:00:00 2001 From: Danie Cook Date: Sat, 1 Jun 2019 18:56:01 +0100 Subject: [PATCH 3/4] Remove updateState - v-model now supported through update --- src/vue-testing-library.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/vue-testing-library.js b/src/vue-testing-library.js index c33fe43f..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) } } From 11d7bc1dfc035bf1c3ae0912c7f94d12e8b6d911 Mon Sep 17 00:00:00 2001 From: Danie Cook Date: Sat, 1 Jun 2019 21:00:11 +0100 Subject: [PATCH 4/4] 1.0.3 --- package-lock.json | 2 +- package.json | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) 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 7a2225aa..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": {