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 b58d8ff

Browse files
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‎

Lines changed: 105 additions & 22 deletions
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‎

Lines changed: 0 additions & 57 deletions
This file was deleted.

‎tests/__tests__/components/Stubs.vue‎

Lines changed: 22 additions & 0 deletions
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‎

Lines changed: 49 additions & 20 deletions
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-
constpasswordInput=getByLabelText('Password')
17-
awaitfireEvent.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(/titleofthemovie/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‎

Lines changed: 2 additions & 2 deletions
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)

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