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 993c87f

Browse files
authored
docs: improve wording and structure (testing-library#91)
* Fix broken links * Improve wording * Fix TOC placement * Consistency is key
1 parent 6d5aefb commit 993c87f

File tree

15 files changed

+134
-70
lines changed

15 files changed

+134
-70
lines changed

‎README.md‎

Lines changed: 19 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
<div align="center">
22
<h1>Vue Testing Library</h1>
33

4+
<br />
5+
46
<a href="https://www.joypixels.com/emoji/1F98E">
57
<img
68
height="80"
@@ -16,7 +18,7 @@
1618

1719
<br />
1820

19-
[**Read the Docs**][docs] | [Edit the docs][docs-edit]
21+
[**Read the docs**][docs] | [Edit the docs][docs-edit]
2022

2123
<br />
2224

@@ -36,6 +38,9 @@
3638

3739
<h2>Table of Contents</h2>
3840

41+
<!-- START doctoc generated TOC please keep comment here to allow auto update -->
42+
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
43+
3944
- [Installation](#installation)
4045
- [A simple example](#a-simple-example)
4146
- [More examples](#more-examples)
@@ -44,9 +49,11 @@
4449
- [License](#license)
4550
- [Contributors](#contributors)
4651

52+
<!-- END doctoc generated TOC please keep comment here to allow auto update -->
53+
4754
## Installation
4855

49-
This module is distributed via npm and should be installed as one of your
56+
This module is distributed via `npm` and should be installed as one of your
5057
project's `devDependencies`:
5158

5259
```
@@ -57,7 +64,7 @@ This library has `peerDependencies` listings for `Vue` and
5764
`vue-template-compiler`.
5865

5966
You may also be interested in installing `jest-dom` so you can use
60-
[the custom Jest matchers](https://github.com/gnapse/jest-dom#readme).
67+
[the custom Jest matchers](https://github.com/testing-library/jest-dom#readme).
6168

6269
## A simple example
6370

@@ -90,7 +97,7 @@ import {render, fireEvent} from '@testing-library/vue'
9097
import TestComponent from './TestComponent.vue'
9198

9299
test('increments value on click', async () => {
93-
// The render method returns a collection of utilities to query your component.
100+
// The render method returns a collection of utilities to query the component.
94101
const {getByText} = render(TestComponent)
95102

96103
// getByText returns the first matching node for the provided text, and
@@ -100,7 +107,7 @@ test('increments value on click', async () => {
100107
// `button` is the actual DOM element.
101108
const button = getByText('increment')
102109

103-
// Dispatch a native click event.
110+
// Dispatch a couple of native click events.
104111
await fireEvent.click(button)
105112
await fireEvent.click(button)
106113

@@ -124,12 +131,12 @@ Feel free to contribute with more examples!
124131

125132
## Docs
126133

127-
[**Read the Docs**][docs] | [Edit the docs][docs-edit]
134+
[**Read the docs**][docs] | [Edit the docs][docs-edit]
128135

129136
## Typings
130137

131138
The TypeScript type definitions are in the
132-
[DefinitelyTyped repo](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/testing-library__vue)
139+
[DefinitelyTyped repo][types]
133140
and bundled with Vue Testing Library.
134141

135142
## License
@@ -166,13 +173,14 @@ and bundled with Vue Testing Library.
166173
[npm]: https://badge.fury.io/js/%40testing-library%2Fvue
167174
[license-badge]: https://img.shields.io/github/license/testing-library/vue-testing-library.svg
168175
[license]: https://github.com/testing-library/vue-testing-library/blob/master/LICENSE
176+
[types]: https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/testing-library__vue
169177

170178
[docs]: https://testing-library.com/vue
171179
[docs-edit]: https://github.com/testing-library/testing-library-docs
172180

173-
[test-directory]: https://github.com/testing-library/vue-testing-library/tree/master/tests/__tests__
174-
[vuex-example]: https://github.com/testing-library/vue-testing-library/tree/master/tests/__tests__/vuex.js
175-
[vue-router-example]: https://github.com/testing-library/vue-testing-library/tree/master/tests/__tests__/vue-router.js
176-
[vee-validate-example]: https://github.com/testing-library/vue-testing-library/tree/master/tests/__tests__/validate-plugin.js
181+
[test-directory]: https://github.com/testing-library/vue-testing-library/blob/master/src/__tests__
182+
[vuex-example]: https://github.com/testing-library/vue-testing-library/blob/master/src/__tests__/vuex.js
183+
[vue-router-example]: https://github.com/testing-library/vue-testing-library/blob/master/src/__tests__/vue-router.js
184+
[vee-validate-example]: https://github.com/testing-library/vue-testing-library/blob/master/src/__tests__/validate-plugin.js
177185
[vue-i18n-example]: https://github.com/testing-library/vue-testing-library/blob/master/tests/__tests__/vueI18n.js
178186
<!-- prettier-ignore-end -->

‎src/__tests__/__snapshots__/axios-mock.js.snap‎

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

‎src/__tests__/auto-cleanup-skip.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@ beforeAll(async () => {
55
render = vtl.render
66
})
77

8-
// This one verifies that if VTL_SKIP_AUTO_CLEANUP is set
9-
// then we DON'T auto-wire up the afterEach for folks
8+
// This test verifies that if VTL_SKIP_AUTO_CLEANUP is set then we DON'T
9+
// auto-wire up the afterEach cleanup for folks.
1010
test('first test render a vue component', () => {
1111
render({
1212
template: `<h1>Hello World</h1>`,

‎src/__tests__/auto-cleanup.js‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
import {render} from '@testing-library/vue'
22
import '@testing-library/jest-dom/extend-expect'
33

4-
// This just verifies that by importing VTL in an
5-
// environment which supports afterEach (like jest)
6-
// we'll get automatic cleanup between tests.
4+
// This just verifies that by importing VTL in an environment which supports
5+
// afterEach (like jest) we'll get automatic cleanup between tests.
76
test('render the first component', () => {
87
render({
98
template: `<h1>Hello World</h1>`,

‎src/__tests__/axios-mock.js‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1+
import '@testing-library/jest-dom/extend-expect'
12
import axiosMock from 'axios'
23
import {render, fireEvent} from '@testing-library/vue'
34
import Component from './components/Fetch.vue'
4-
import '@testing-library/jest-dom/extend-expect'
55

6-
test('makes an API call and displays the greeting when load-greeting is clicked', async () => {
6+
test('mocks an API call when load-greeting is clicked', async () => {
77
axiosMock.get.mockImplementationOnce(() =>
88
Promise.resolve({
99
data: {greeting: 'hello there'},
@@ -12,7 +12,6 @@ test('makes an API call and displays the greeting when load-greeting is clicked'
1212

1313
const {html, getByText} = render(Component, {props: {url: '/greeting'}})
1414

15-
// Act
1615
await fireEvent.click(getByText('Fetch'))
1716

1817
expect(axiosMock.get).toHaveBeenCalledTimes(1)
@@ -23,5 +22,11 @@ test('makes an API call and displays the greeting when load-greeting is clicked'
2322
// that Snapshot Testing should not be treated as a replacement for regular
2423
// tests.
2524
// More about the topic: https://twitter.com/searls/status/919594505938112512
26-
expect(html()).toMatchSnapshot()
25+
expect(html()).toMatchInlineSnapshot(`
26+
<div><button>
27+
Fetch
28+
</button> <span>
29+
hello there
30+
</span></div>
31+
`)
2732
})
Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<template>
2+
<div>
3+
<h2>{{ $t('Hello') }}</h2>
4+
<button @click="switchLocale('en')">English</button>
5+
<button @click="switchLocale('ja')">Japanese</button>
6+
</div>
7+
</template>
8+
9+
<script>
10+
export default {
11+
name: 'VueI18n',
12+
13+
methods: {
14+
switchLocale(locale) {
15+
this.$i18n.locale = locale
16+
},
17+
},
18+
}
19+
</script>

‎src/__tests__/debug.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ test('debug pretty prints the provided parameter', () => {
3434
expect.stringContaining('Lorem ipsum dolor sit amet'),
3535
)
3636

37-
// Notice the 'not' particle
37+
// Notice the 'not' particle.
3838
expect(console.log).not.toHaveBeenCalledWith(
3939
expect.stringContaining('Hello World'),
4040
)

‎src/__tests__/disappearance.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,15 +9,16 @@ test('waits for the data to be loaded', async () => {
99
getByText('Loading...')
1010
expect(queryByText(/Loadedthismessage/)).not.toBeInTheDocument()
1111

12-
// Line reads as follows: "Wait until element with text 'Loading...' is gone."
12+
// Following line reads as follows:
13+
// "Wait until element with text 'Loading...' is gone."
1314
await waitForElementToBeRemoved(() => queryByText('Loading...'))
1415
// It is equivalent to:
1516
//
1617
// await wait(() => {
1718
// expect(queryByText('Loading...')).not.toBeInTheDocument()
1819
// })
1920
//
20-
// `wait()` waits until the callback function passes or times out.
21+
// because `wait()` waits until the callback function passes or times out.
2122

2223
// After 'Loading...' is gone, we can assert that fetched data is rendered.
2324
expect(queryByTestId('message')).toHaveTextContent(/HelloWorld/)

‎src/__tests__/form.js‎

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ test('Review form submits', async () => {
2424

2525
const submitButton = getByText('Submit')
2626

27-
// Initially the submit button should be disabled
27+
// Initially the submit button should be disabled.
2828
expect(submitButton).toBeDisabled()
2929

3030
const titleInput = getByLabelText(/titleofthemovie/i)
@@ -33,7 +33,7 @@ test('Review form submits', async () => {
3333
const reviewTextarea = getByPlaceholderText('Write an awesome review')
3434
await fireEvent.update(reviewTextarea, fakeReview.review)
3535

36-
// Rating Radio buttons
36+
// Rating Radio buttons.
3737
const initiallySelectedInput = getByLabelText('Awful')
3838
const ratingSelect = getByLabelText('Wonderful')
3939

@@ -45,23 +45,20 @@ test('Review form submits', async () => {
4545
expect(ratingSelect.checked).toBe(true)
4646
expect(initiallySelectedInput.checked).toBe(false)
4747

48-
// Get the Input element by its implicit ARIA role
48+
// Get the Input element by its implicit ARIA role.
4949
const recommendInput = getByRole('checkbox')
5050

5151
expect(recommendInput.checked).toBe(false)
5252
await fireEvent.update(recommendInput)
5353
expect(recommendInput.checked).toBe(true)
5454

55-
// NOTE: in jsdom, it's not possible to trigger a form submission
56-
// by clicking on the submit button. This is really unfortunate.
57-
// So the next best thing is to fireEvent a submit on the form itself
58-
// then ensure that there's a submit button
55+
// Make sure the submit button is enabled.
5956
expect(submitButton).toBeEnabled()
6057
expect(submitButton).toHaveAttribute('type', 'submit')
6158

6259
await fireEvent.click(submitButton)
6360

64-
// Assert event has been emitted
61+
// Assert the right event has been emitted.
6562
expect(emitted()).toHaveProperty('submit')
6663
expect(emitted().submit[0][0]).toMatchObject(fakeReview)
6764
})

‎src/__tests__/functional.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,13 @@ const Functional = {
88
},
99
}
1010

11-
test('renders functional comp', () => {
11+
test('renders functional component', () => {
1212
const {getByText} = render(Functional)
1313

1414
getByText('Hi!')
1515
})
1616

17-
test('renders functional SFC comp', () => {
17+
test('renders functional SFC component', () => {
1818
const {getByText} = render(FunctionalSFC)
1919

2020
getByText('Hi!')

0 commit comments

Comments
(0)

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