Skip to content

Commit b58d8ff

Browse files
dfcookdfcook
authored
Merge branch 'master' into master
2 parents b41805a + c2ae9b8 commit b58d8ff

File tree

5 files changed

+178
-101
lines changed

5 files changed

+178
-101
lines changed

‎tests/__tests__/components/Form.vue

+105-22
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,105 @@
1-
<template>
2-
<form>
3-
<label for="search">
4-
<FontAwesomeIcon icon="search"/> Search
5-
</label>
6-
<input
7-
id="search"
8-
type="text"
9-
name="search"
10-
>
11-
<VButton text="Search now" />
12-
</form>
13-
</template>
14-
15-
<script>
16-
import VButton from './Button'
17-
18-
export default {
19-
name: 'SearchForm',
20-
components: { VButton }
21-
}
22-
</script>
1+
<template>
2+
<div>
3+
<h1>Movie Review</h1>
4+
<form @submit.prevent="submit">
5+
<label for="movie-input">Title of the movie</label>
6+
<input
7+
id="movie-input"
8+
v-model="title"
9+
name="title"
10+
>
11+
12+
<label id="review-textarea">Your review</label>
13+
<textarea
14+
v-model="review"
15+
name="review-textarea"
16+
placeholder="Write an awesome review"
17+
aria-labelledby="review-textarea"
18+
/>
19+
20+
<label>
21+
<input
22+
v-model="rating"
23+
type="radio"
24+
value="3"
25+
>
26+
Wonderful
27+
</label>
28+
<label>
29+
<input
30+
v-model="rating"
31+
type="radio"
32+
value="2"
33+
>
34+
Average
35+
</label>
36+
<label>
37+
<input
38+
v-model="rating"
39+
type="radio"
40+
value="1"
41+
>
42+
Awful
43+
</label>
44+
45+
<label for="genre-select">Movie genre</label>
46+
<select
47+
id="genre-select"
48+
v-model="genre"
49+
>
50+
<option>Comedy</option>
51+
<option>Action</option>
52+
<option>Romance</option>
53+
<option>None of the above</option>
54+
</select>
55+
56+
<label id="recommend-label">Would you recommend this movie?</label>
57+
<input
58+
id="recommend"
59+
v-model="recommend"
60+
type="checkbox"
61+
name="recommend"
62+
data-testid="recommend-checkbox"
63+
>
64+
65+
<button
66+
:disabled="submitDisabled"
67+
type="submit"
68+
>
69+
Submit
70+
</button>
71+
</form>
72+
</div>
73+
</template>
74+
75+
<script>
76+
export default {
77+
data () {
78+
return {
79+
title: '',
80+
review: '',
81+
rating: '1',
82+
genre: 'Comedy',
83+
recommend: false
84+
}
85+
},
86+
computed: {
87+
submitDisabled () {
88+
return !this.title || !this.review
89+
}
90+
},
91+
methods: {
92+
submit () {
93+
if (this.submitDisabled) return
94+
95+
this.$emit('submit', {
96+
title: this.title,
97+
review: this.review,
98+
rating: this.rating,
99+
genre: this.genre,
100+
recommend: this.recommend
101+
})
102+
}
103+
}
104+
}
105+
</script>

‎tests/__tests__/components/Login.vue

-57
This file was deleted.

‎tests/__tests__/components/Stubs.vue

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<template>
2+
<form>
3+
<label for="search">
4+
<FontAwesomeIcon icon="search"/> Search
5+
</label>
6+
<input
7+
id="search"
8+
type="text"
9+
name="search"
10+
>
11+
<VButton text="Search now" />
12+
</form>
13+
</template>
14+
15+
<script>
16+
import VButton from './Button'
17+
18+
export default {
19+
name: 'SearchForm',
20+
components: { VButton }
21+
}
22+
</script>

‎tests/__tests__/form.js

+49-20
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,62 @@
11
import { render, fireEvent } from '@testing-library/vue'
2-
import Login from './components/Login'
2+
import 'jest-dom/extend-expect'
3+
import Form from './components/Form'
34

4-
test('login form submits', async () => {
5-
const fakeUser = { username: 'jackiechan', password: 'hiya! 🥋', rememberMe: true }
6-
const handleSubmit = jest.fn()
7-
const { getByLabelText, getByText } = render(
8-
Login, { props: { onSubmit: handleSubmit } }
9-
)
5+
test('Review form submits', async () => {
6+
const fakeReview = {
7+
title: 'An Awesome Movie',
8+
review: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
9+
rating: '3',
10+
genre: 'Action',
11+
recommend: true
12+
}
1013

11-
const submitButtonNode = getByText('Submit')
14+
const {
15+
getByLabelText,
16+
getByText,
17+
getByTestId,
18+
getByDisplayValue,
19+
getByPlaceholderText,
20+
emitted
21+
} = render(Form)
1222

13-
const userNameInput = getByLabelText('Username')
14-
await fireEvent.update(userNameInput, fakeUser.username)
23+
const submitButton = getByText('Submit')
1524

16-
const passwordInput = getByLabelText('Password')
17-
await fireEvent.update(passwordInput, fakeUser.password)
25+
// Initially the submit button should be disabled
26+
expect(submitButton).toBeDisabled()
1827

19-
const rememberMeInput = getByLabelText('Remember Me')
20-
await fireEvent.update(rememberMeInput, true)
28+
// In this test we showcase several ways of targetting DOM elements.
29+
// However, `getByLabelText` should be your top preference when handling
30+
// form elements.
31+
// Read 'What queries should I use?' for additional context:
32+
// https://testing-library.com/docs/guide-which-query
33+
34+
const titleInput = getByLabelText(/title of the movie/i)
35+
await fireEvent.update(titleInput, fakeReview.title)
36+
37+
const reviewTextarea = getByPlaceholderText('Write an awesome review')
38+
await fireEvent.update(reviewTextarea, fakeReview.review)
39+
40+
const ratingSelect = getByLabelText('Wonderful')
41+
await fireEvent.update(ratingSelect, fakeReview.rating)
42+
43+
// Get the Select element by using the initially displayed value.
44+
const genreSelect = getByDisplayValue('Comedy')
45+
await fireEvent.update(genreSelect, fakeReview.genre)
46+
47+
const recommendInput = getByTestId('recommend-checkbox')
48+
await fireEvent.update(recommendInput, fakeReview.recommend)
2149

2250
// NOTE: in jsdom, it's not possible to trigger a form submission
2351
// by clicking on the submit button. This is really unfortunate.
2452
// So the next best thing is to fireEvent a submit on the form itself
2553
// then ensure that there's a submit button.
26-
await fireEvent.click(submitButtonNode)
54+
expect(submitButton).toBeEnabled()
55+
expect(submitButton).toHaveAttribute('type', 'submit')
56+
57+
await fireEvent.click(submitButton)
2758

28-
// Assert
29-
expect(handleSubmit).toHaveBeenCalledTimes(1)
30-
expect(handleSubmit).toHaveBeenCalledWith(fakeUser)
31-
// make sure the form is submittable
32-
expect(submitButtonNode.type).toBe('submit')
59+
// Assert event has been emitted.
60+
expect(emitted().submit).toHaveLength(1)
61+
expect(emitted().submit[0]).toEqual([ fakeReview ])
3362
})

‎tests/__tests__/integration-with-stubs.js renamed to ‎tests/__tests__/stubs.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import { render, cleanup } from '@testing-library/vue'
2-
import Form from './components/Form'
2+
import Stubs from './components/Stubs'
33

44
afterEach(cleanup)
55

66
test('Form contains search button', () => {
7-
const { getByText } = render(Form, {
7+
const { getByText } = render(Stubs, {
88
stubs: ['FontAwesomeIcon']
99
})
1010
getByText('Search now')

0 commit comments

Comments
 (0)