Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 701f973

Browse files
authored
Merge pull request #34 from /issues/22-add-update-method
Add update method for model updates
2 parents afd75a8 + e7ae8b7 commit 701f973

File tree

5 files changed

+60
-10
lines changed

5 files changed

+60
-10
lines changed

‎package-lock.json‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@testing-library/vue",
3-
"version": "1.0.2",
3+
"version": "1.0.3",
44
"description": "Simple and complete Vue DOM testing utilities that encourage good testing practices.",
55
"main": "dist/vue-testing-library.js",
66
"scripts": {

‎src/vue-testing-library.js‎

Lines changed: 36 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,6 @@ function render (TestComponent, {
7373
wrapper.setProps(_)
7474
return wait()
7575
},
76-
updateState: _ => wrapper.setData(_),
7776
...getQueriesForElement(wrapper.element.parentNode)
7877
}
7978
}
@@ -103,6 +102,42 @@ fireEvent.touch = async (elem) => {
103102
await fireEvent.blur(elem)
104103
}
105104

105+
fireEvent.update = async (elem, value) => {
106+
const tagName = elem.tagName
107+
const type = elem.type
108+
109+
switch (tagName) {
110+
case 'OPTION':
111+
elem.selected = value
112+
113+
const parentElement = this.element.parentElement.tagName === 'OPTGROUP'
114+
? this.element.parentElement.parentElement
115+
: this.element.parentElement
116+
117+
return fireEvent.change(parentElement)
118+
119+
case 'INPUT':
120+
if (type === 'checkbox') {
121+
elem.checked = value
122+
return fireEvent.change(elem)
123+
} else if (type === 'radio') {
124+
elem.selected = value
125+
return fireEvent.change(elem)
126+
} else {
127+
elem.value = value
128+
return fireEvent.input(elem)
129+
}
130+
131+
case 'TEXTAREA':
132+
elem.value = value
133+
return fireEvent.input(elem)
134+
135+
case 'SELECT':
136+
elem.value = value
137+
return fireEvent.change(elem)
138+
}
139+
}
140+
106141
export * from '@testing-library/dom'
107142
export {
108143
cleanup,

‎tests/__tests__/components/Login.vue‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,14 @@
1616
name="password"
1717
aria-labelledby="password-label"
1818
>
19+
<label id="remember-me-label">Remember Me</label>
20+
<input
21+
type="checkbox"
22+
id="remember-me"
23+
name="remember-me"
24+
aria-labelledby="remember-me-label"
25+
v-model="rememberMe"
26+
/>
1927
<button type="submit">Submit</button>
2028
</form>
2129
</div>
@@ -32,14 +40,16 @@ export default {
3240
data () {
3341
return {
3442
username: '',
35-
password: ''
43+
password: '',
44+
rememberMe: false
3645
}
3746
},
3847
methods: {
3948
submit () {
4049
this.onSubmit({
4150
username: this.username,
42-
password: this.password
51+
password: this.password,
52+
rememberMe: this.rememberMe
4353
})
4454
}
4555
}

‎tests/__tests__/form.js‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,22 @@ import { render, fireEvent } from '@testing-library/vue'
22
import Login from './components/Login'
33

44
test('login form submits', async () => {
5-
const fakeUser = { username: 'jackiechan', password: 'hiya! 🥋' }
5+
const fakeUser = { username: 'jackiechan', password: 'hiya! 🥋',rememberMe: true }
66
const handleSubmit = jest.fn()
7-
const { getByText, updateState } = render(
7+
const { getByLabelText, getByText } = render(
88
Login, { props: { onSubmit: handleSubmit } }
99
)
1010

1111
const submitButtonNode = getByText('Submit')
1212

13-
// Act - this is waiting on an issue in @vue/test-utils to allow v-model to be updated by
14-
// changes to DOM elements
15-
updateState(fakeUser)
13+
const userNameInput = getByLabelText('Username')
14+
await fireEvent.update(userNameInput, fakeUser.username)
15+
16+
const passwordInput = getByLabelText('Password')
17+
await fireEvent.update(passwordInput, fakeUser.password)
18+
19+
const rememberMeInput = getByLabelText('Remember Me')
20+
await fireEvent.update(rememberMeInput, true)
1621

1722
// NOTE: in jsdom, it's not possible to trigger a form submission
1823
// by clicking on the submit button. This is really unfortunate.

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /