Skip to content

Commit 2afba2e

Browse files
author
Artemis330
committed
Add vue section to docs (#14)
* Add vue section to docs * Fix image url * Address feedback from Kent, update links and API description
1 parent 5f15a5d commit 2afba2e

File tree

5 files changed

+304
-1
lines changed

5 files changed

+304
-1
lines changed

‎docs/vue-testing-library/intro.md

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
---
2+
id: intro
3+
title: Introduction
4+
---
5+
6+
[`vue-testing-library`][gh] is a lightweight adapter allowing
7+
`dom-testing-library` to be used to test [Vue](https://vuejs.org/) components
8+
built on top of `@vue/test-utils`.
9+
10+
```
11+
npm install --save-dev vue vue-testing-library
12+
```
13+
14+
- [vue-testing-library on GitHub][gh]
15+
16+
## Usage
17+
18+
```
19+
npm install --save-dev vue-testing-library
20+
jest
21+
vue-jest
22+
babel-jest
23+
babel-preset-env
24+
babel-plugin-transform-runtime
25+
```
26+
27+
```
28+
// package.json
29+
"scripts": {
30+
"test": "jest"
31+
}
32+
33+
"jest": {
34+
"moduleDirectories": [
35+
"node_modules",
36+
"src"
37+
],
38+
"moduleFileExtensions": [
39+
"js",
40+
"vue"
41+
],
42+
"testPathIgnorePatterns": [
43+
"/node_modules/"
44+
],
45+
"transform": {
46+
"^.+\\.js$": "<rootDir>/node_modules/babel-jest",
47+
".*\\.(vue)$": "<rootDir>/node_modules/vue-jest"
48+
}
49+
}
50+
51+
// .babelrc
52+
{
53+
"presets": [
54+
["env", {
55+
"modules": false,
56+
"targets": {
57+
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
58+
}
59+
}]
60+
],
61+
"plugins": [
62+
"transform-runtime"
63+
],
64+
"env": {
65+
"test": {
66+
"presets": ["env"]
67+
}
68+
}
69+
}
70+
71+
// src/TestComponent.vue
72+
<template>
73+
<div>
74+
<span data-testid="test1">Hello World</span>
75+
</div>
76+
</template>
77+
78+
// src/TestComponent.spec.js
79+
import 'jest-dom/extend-expect'
80+
import { render } from 'vue-testing-library'
81+
import TestComponent from './TestComponent'
82+
83+
test('should render HelloWorld', () => {
84+
const { queryByTestId } = render(TestComponent)
85+
expect(queryByTestId('test1')).toHaveTextContent('Hello World')
86+
})
87+
```
88+
89+
You can now use all of `dom-testing-library`'s `getBy`, `getAllBy`, `queryBy`
90+
and `queryAllBy` commands. See [here](../api-queries) for usage.
91+
92+
### render
93+
94+
The `render` function takes up to 3 parameters and returns an object with some
95+
helper methods
96+
97+
1. Component - the Vue component to be tested.
98+
2. RenderOptions - an object containing additional information to be passed to
99+
@vue/test-utils mount. This can include:
100+
101+
- store - The object definition of a Vuex store, if present `render` will
102+
configure a Vuex store and pass to mount.
103+
- routes - A set of routes, if present render will configure VueRouter and pass
104+
to mount.
105+
106+
All additional render options are passed to the vue-test-utils mount function
107+
in its options.
108+
109+
3. configurationCb - A callback to be called passing the Vue instance when
110+
created. This allows 3rd party plugins to be installed prior to mount.
111+
112+
### Forwarded methods from dom-testing-library
113+
114+
vue-testing-library forwards all exports from dom-testing-library but it alters
115+
`fireEvent` so that all events are async (ie: `await fireEvent.click(button)`)
116+
117+
In particular, the `wait` utility can be very important in Vue components,
118+
@vue/test-utils has succeeded in making the majority of updates happen
119+
synchronously however there are occasions when wait will allow the DOM to
120+
update. For example, see
121+
[`here`](https://github.com/dfcook/vue-testing-library/tree/master/tests/__tests__/validate-plugin.js).
122+
123+
## Examples
124+
125+
You'll find examples of testing with different libraries in
126+
[the test directory](https://github.com/dfcook/vue-testing-library/tree/master/tests/__tests__).
127+
Some included are:
128+
129+
- [`vuex`](https://github.com/dfcook/vue-testing-library/tree/master/tests/__tests__/vuex.js)
130+
- [`vue-router`](https://github.com/dfcook/vue-testing-library/tree/master/tests/__tests__/vue-router.js)
131+
- [`vee-validate`](https://github.com/dfcook/vue-testing-library/tree/master/tests/__tests__/validate-plugin.js)
132+
133+
[gh]: https://github.com/dfcook/vue-testing-library

‎website/pages/en/index.js

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -182,7 +182,7 @@ class Index extends React.Component {
182182
)
183183

184184
const Ecosystem = () => (
185-
<Block layout="threeColumn" background={null}>
185+
<Block layout="fourColumn" background={null}>
186186
{[
187187
{
188188
content: 'For testing React Components',
@@ -196,6 +196,12 @@ class Index extends React.Component {
196196
imageAlign: 'top',
197197
title: '[Cypress Testing Library](./cypress)',
198198
},
199+
{
200+
content: 'For testing Vue Components',
201+
image: `${baseUrl}img/vue-400x400.png`,
202+
imageAlign: 'top',
203+
title: '[Vue Testing Library](./vue)',
204+
},
199205
{
200206
content: 'Explore the ecosystem',
201207
image: `${baseUrl}img/construction-128x128.png`,

‎website/pages/en/vue.js

Lines changed: 159 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,159 @@
1+
/**
2+
* Copyright (c) 2017-present, Facebook, Inc.
3+
*
4+
* This source code is licensed under the MIT license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*/
7+
8+
const React = require('react')
9+
10+
const CompLibrary = require('../../core/CompLibrary.js')
11+
12+
const MarkdownBlock = CompLibrary.MarkdownBlock /* Used to read markdown */
13+
const Container = CompLibrary.Container
14+
const GridBlock = CompLibrary.GridBlock
15+
16+
class HomeSplash extends React.Component {
17+
render() {
18+
const { siteConfig, language = '' } = this.props
19+
const { baseUrl, docsUrl } = siteConfig
20+
const docsPart = `${docsUrl ? `${docsUrl}/` : ''}`
21+
const langPart = `${language ? `${language}/` : ''}`
22+
const docUrl = doc => `${baseUrl}${docsPart}${langPart}${doc}`
23+
24+
const SplashContainer = props => (
25+
<div className="homeContainer">
26+
<div className="homeSplashFade">
27+
<div className="wrapper homeWrapper">{props.children}</div>
28+
</div>
29+
</div>
30+
)
31+
32+
const Logo = props => (
33+
<div className="projectLogo">
34+
<img src={props.img_src} alt="Project Logo" />
35+
</div>
36+
)
37+
38+
const ProjectTitle = () => (
39+
<div>
40+
<h2 className="projectTitle">Vue Testing Library</h2>
41+
<div className="projectTaglineWrapper">
42+
<p className="projectTagline">
43+
Simple and complete Vue DOM testing utilities that encourage good
44+
testing practices
45+
</p>
46+
</div>
47+
</div>
48+
)
49+
50+
const PromoSection = props => (
51+
<div className="section promoSection">
52+
<div className="promoRow">
53+
<div className="pluginRowBlock">{props.children}</div>
54+
</div>
55+
</div>
56+
)
57+
58+
const Button = props => (
59+
<div className="pluginWrapper buttonWrapper">
60+
<a className="button" href={props.href} target={props.target}>
61+
{props.children}
62+
</a>
63+
</div>
64+
)
65+
66+
return (
67+
<SplashContainer>
68+
<Logo img_src={`${baseUrl}img/vue-400x400.png`} />
69+
<div className="inner">
70+
<ProjectTitle siteConfig={siteConfig} />
71+
<PromoSection>
72+
<Button href={docUrl('vue-testing-library/intro')}>
73+
Read the Docs
74+
</Button>
75+
</PromoSection>
76+
</div>
77+
</SplashContainer>
78+
)
79+
}
80+
}
81+
82+
class Index extends React.Component {
83+
render() {
84+
const { config: siteConfig, language = '' } = this.props
85+
const { baseUrl } = siteConfig
86+
87+
const Block = props => (
88+
<Container
89+
padding={['bottom', 'top']}
90+
id={props.id}
91+
background={props.background}
92+
>
93+
<GridBlock
94+
align={props.align || 'center'}
95+
imageAlign={props.imageAlign || 'center'}
96+
contents={props.children}
97+
layout={props.layout}
98+
/>
99+
</Container>
100+
)
101+
102+
const FeatureCallout = () => (
103+
<Container className="" background={'light'} padding={['top', 'bottom']}>
104+
<div style={{ textAlign: 'center' }}>
105+
<p>
106+
<i>
107+
The more your tests resemble the way your software is used, <br />
108+
the more confidence they can give you.
109+
</i>
110+
</p>
111+
<MarkdownBlock>
112+
`npm install --save-dev vue-testing-library`
113+
</MarkdownBlock>
114+
</div>
115+
</Container>
116+
)
117+
118+
const Features = () => (
119+
<React.Fragment>
120+
<Block layout="threeColumn">
121+
{[
122+
{
123+
content:
124+
'Tests only break when your app breaks, not implementation details',
125+
image: `${baseUrl}img/wrench-128x128.png`,
126+
imageAlign: 'top',
127+
title: 'Write Maintainable Tests',
128+
},
129+
{
130+
content: 'Interact with your app the same way as your users',
131+
image: `${baseUrl}img/check-128x128.png`,
132+
imageAlign: 'top',
133+
title: 'Develop with Confidence',
134+
},
135+
{
136+
content:
137+
'Built-in selectors use semantic HTML and ARIA roles to help you write inclusive code',
138+
image: `${baseUrl}img/tada-128x128.png`,
139+
imageAlign: 'top',
140+
title: 'Accessible by Default',
141+
},
142+
]}
143+
</Block>
144+
</React.Fragment>
145+
)
146+
147+
return (
148+
<div>
149+
<HomeSplash siteConfig={siteConfig} language={language} />
150+
<div className="mainContainer">
151+
<FeatureCallout />
152+
<Features />
153+
</div>
154+
</div>
155+
)
156+
}
157+
}
158+
159+
module.exports = Index

‎website/sidebars.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,11 @@
3535
"type": "subcategory",
3636
"label": "Cypress Testing Library",
3737
"ids": ["cypress-testing-library/intro"]
38+
},
39+
{
40+
"type": "subcategory",
41+
"label": "Vue Testing Library",
42+
"ids": ["vue-testing-library/intro"]
3843
}
3944
],
4045
"Ecosystem": ["ecosystem-user-event", "ecosystem-jest-dom"],

‎website/static/img/vue-400x400.png

3.37 KB
Loading

0 commit comments

Comments
 (0)