Skip to content

Commit 7a4b35e

Browse files
makeupsomethingmakeupsomething
authored
Merge pull request #1 from testing-library/master
Rebase with head
2 parents e7cb193 + 59669db commit 7a4b35e

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

56 files changed

+9683
-6087
lines changed

‎.eslintignore

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
/node_modules/
2-
/npm/
3-
/coverage/
2+
/dist/
3+
/coverage/

‎.eslintrc.js

+6-15
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,25 @@
1-
// http://eslint.org/docs/user-guide/configuring
2-
31
module.exports = {
42
root: true,
53
parserOptions: {
64
parser: 'babel-eslint',
75
ecmaVersion: 2017,
8-
sourceType: "module"
6+
sourceType: 'module'
97
},
108
env: {
119
browser: true,
1210
jest: true
1311
},
14-
// https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
1512
extends: [
1613
'standard',
17-
'plugin:vue/recommended'
14+
'plugin:vue/recommended',
15+
'eslint:recommended',
16+
'prettier/vue',
17+
'plugin:prettier/recommended'
1818
],
19-
// required to lint *.vue files
2019
plugins: [
2120
'vue'
2221
],
23-
// add your custom rules here
2422
rules: {
25-
// allow paren-less arrow functions
26-
'arrow-parens': 0,
27-
// allow async-await
28-
'generator-star-spacing': 0,
29-
'vue/html-closing-bracket-newline': 0,
30-
'vue/singleline-html-element-content-newline': 0,
31-
'vue/multiline-html-element-content-newline': 0,
32-
'vue/html-closing-bracket-spacing': 0
23+
'no-console': 'off'
3324
}
3425
}

‎.github/ISSUE_TEMPLATE/bug_report.md

+50
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
---
2+
name: Bug report
3+
about: Create a report to help us improve
4+
title: ''
5+
labels: bug
6+
assignees: ''
7+
8+
---
9+
10+
<!-- Thanks for your interest in the project. We appreciate bugs filed and PRs submitted! -->
11+
12+
<!--
13+
- For questions related to using the library, please visit a support community
14+
instead of filing an issue on GitHub: https://spectrum.chat/testing-library
15+
16+
- Please fill out this template with all the relevant information so we can
17+
understand what's going on and fix the issue.
18+
19+
- If you're issue is regarding one of the query APIs (`getByText`,
20+
`getByLabelText`, etc), then please file it on the `@testing-library/dom`
21+
repository instead. Thanks :)
22+
--->
23+
24+
**Describe the bug**
25+
A clear and concise description of what the bug is.
26+
27+
**To Reproduce**
28+
Steps to reproduce the behavior:
29+
30+
<!-- Please try to provide a working demo using Codesandbox, a GitHub repo or similar! -->
31+
32+
**Expected behavior**
33+
<!-- A clear and concise description of what you expected to happen. -->
34+
35+
**Screenshots**
36+
<!-- If applicable, add screenshots to help explain your problem. -->
37+
38+
**Related information:**
39+
- `@testing-library/vue` version:
40+
- `Vue` version:
41+
- `node` version:
42+
- `npm` (or `yarn`) version:
43+
44+
Relevant code or config (if any)
45+
46+
```javascript
47+
```
48+
49+
**Additional context**
50+
<!-- Add any other context about the problem here. -->

‎.gitignore

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
node_modules
22
coverage
3-
npm
3+
dist
44
.opt-in
55
.opt-out
66
.DS_Store

‎.prettierignore

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
node_modules
2+
coverage
3+
dist
4+
build
5+
.build
6+
.vscode

‎.prettierrc.js

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
module.exports = {
2+
proseWrap: 'always',
3+
semi: false,
4+
singleQuote: true
5+
}

‎README.md

+73-111
Original file line numberDiff line numberDiff line change
@@ -1,162 +1,124 @@
11
<div align="center">
2-
<h1>vue-testing-library</h1>
2+
<h1>Vue Testing Library</h1>
33

4-
<p>Lightweight adapter allowing <a href="https://github.com/kentcdodds/dom-testing-library/">dom-testing-library</a> to be used to test <a href="https://github.com/vuejs/vue">Vue.js</a> components built on top of <a href="https://github.com/vuejs/vue-test-utils">@vue/test-utils</a></p>
4+
<p>Lightweight adapter allowing <a href="https://github.com/testing-library/dom-testing-library/">DOM Testing Library</a> to be used to test <a href="https://github.com/vuejs/vue">Vue.js</a> components. Built on top of <a href="https://github.com/vuejs/vue-test-utils">@vue/test-utils</a>.</p>
5+
6+
<br />
7+
8+
[**Read The Docs**](https://testing-library.com/vue) |
9+
[Edit the docs](https://github.com/testing-library/testing-library-docs)
10+
11+
<br />
512

613
</div>
714

815
<hr />
916

10-
[![Build Status](https://travis-ci.org/dfcook/vue-testing-library.svg?branch=master)](https://travis-ci.org/dfcook/vue-testing-library)&nbsp;&nbsp;
11-
[![Coverage Status](https://coveralls.io/repos/github/dfcook/vue-testing-library/badge.svg?branch=master)](https://coveralls.io/github/dfcook/vue-testing-library?branch=master)&nbsp;&nbsp;
12-
[![GitHub version](https://badge.fury.io/gh/dfcook%2Fvue-testing-library.svg)](https://badge.fury.io/gh/dfcook%2Fvue-testing-library)
17+
[![Build Status](https://travis-ci.org/testing-library/vue-testing-library.svg?branch=master)](https://travis-ci.org/testing-library/vue-testing-library)&nbsp;&nbsp;
18+
[![Coverage Status](https://coveralls.io/repos/github/testing-library/vue-testing-library/badge.svg?branch=master)](https://coveralls.io/github/testing-library/vue-testing-library?branch=master)&nbsp;&nbsp;
19+
[![GitHub version](https://badge.fury.io/gh/testing-library%2Fvue-testing-library.svg)](https://badge.fury.io/gh/testing-library%2Fvue-testing-library)
1320

1421
[![npm version](https://badge.fury.io/js/vue-testing-library.svg)](https://badge.fury.io/js/vue-testing-library)&nbsp;&nbsp;
15-
[![license](https://img.shields.io/github/license/dfcook/vue-testing-library.svg)](https://img.shields.io/github/license/dfcook/vue-testing-library)
16-
17-
## This library
22+
[![license](https://img.shields.io/github/license/testing-library/vue-testing-library.svg)](https://img.shields.io/github/license/testing-library/vue-testing-library)
1823

19-
The `vue-testing-library` is a an adapter that enables Vue testing using the framework-agnostic DOM testing library `dom-testing-library`
24+
<h2>Table of Contents</h2>
2025

21-
* [Installation](#installation)
22-
* [Usage](#usage)
23-
* [`render`](#render)
24-
* [`fireEvent`](#fireEvent)
25-
* [`wait`](#wait)
26-
* [Examples](#examples)
27-
* [LICENSE](#license)
26+
- [Installation](#installation)
27+
- [Examples](#examples)
28+
- [Docs](#docs)
29+
- [License](#license)
30+
- [Contributors](#contributors)
2831

2932
## Installation
3033

3134
This module is distributed via npm which is bundled with node and
3235
should be installed as one of your project's `devDependencies`:
3336

3437
```
35-
npm install --save-dev vue-testing-library
36-
37-
```
38-
39-
## Usage
40-
41-
```
42-
npm install --save-dev vue-testing-library
43-
jest
44-
vue-jest
45-
babel-jest
46-
babel-preset-env
47-
babel-plugin-transform-runtime
38+
npm install --save-dev @testing-library/vue
4839
```
4940

50-
```javascript
51-
// package.json
52-
"scripts": {
53-
"test": "jest"
54-
}
55-
56-
"jest": {
57-
"moduleDirectories": [
58-
"node_modules",
59-
"src"
60-
],
61-
"moduleFileExtensions": [
62-
"js",
63-
"vue"
64-
],
65-
"testPathIgnorePatterns": [
66-
"/node_modules/"
67-
],
68-
"transform": {
69-
"^.+\\.js$": "<rootDir>/node_modules/babel-jest",
70-
".*\\.(vue)$": "<rootDir>/node_modules/vue-jest"
71-
}
72-
}
41+
You may also be interested in installing `jest-dom` so you can use
42+
[the custom Jest matchers](https://github.com/gnapse/jest-dom#readme).
7343

74-
// .babelrc
75-
{
76-
"presets": [
77-
["env", {
78-
"modules": false,
79-
"targets": {
80-
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
81-
}
82-
}]
83-
],
84-
"plugins": [
85-
"transform-runtime"
86-
],
87-
"env": {
88-
"test": {
89-
"presets": ["env"]
90-
}
91-
}
92-
}
44+
## Examples
9345

94-
// src/TestComponent.vue
46+
```html
47+
<!-- TestComponent.vue -->
9548
<template>
9649
<div>
97-
<span data-testid="test1">Hello World</span>
50+
<p>Times clicked: {{ count }}</p>
51+
<button @click="increment">increment</button>
9852
</div>
9953
</template>
10054

101-
// src/TestComponent.spec.js
102-
import 'jest-dom/extend-expect'
103-
import { render } from 'vue-testing-library'
104-
import TestComponent from './TestComponent'
105-
106-
test('should render HelloWorld', () => {
107-
const { queryByTestId } = render(TestComponent)
108-
expect(queryByTestId('test1')).toHaveTextContent('Hello World')
109-
})
110-
55+
<script>
56+
export default {
57+
data: () => ({
58+
count: 0
59+
}),
60+
methods: {
61+
increment () {
62+
this.count++
63+
}
64+
}
65+
}
66+
</script>
11167
```
11268

113-
### render
114-
115-
The `render` function takes up to 3 parameters and returns an object with some helper methods
69+
```js
70+
// TestComponent.spec.js
71+
import { render, fireEvent, cleanup } from '@testing-library/vue'
72+
import TestComponent from './TestComponent.vue'
11673

117-
1. Component - the Vue component to be tested.
118-
2. RenderOptions - an object containing additional information to be passed to @vue/test-utils mount. This can be:
119-
* store - The object definition of a Vuex store, if present `render` will configure a Vuex store and pass to mount.
120-
* routes - A set of routes, if present render will configure VueRouter and pass to mount.
121-
All additional render options are passed to the vue-test-utils mount function in its options.
122-
3. configurationCb - A callback to be called passing the Vue instance when created. This allows 3rd party plugins to be installed prior to mount.
74+
// automatically unmount and cleanup DOM after the test is finished.
75+
afterEach(cleanup)
12376

124-
### fireEvent
77+
it('increments value on click', async () => {
78+
// The render method returns a collection of utilities to query your component.
79+
const { getByText } = render(TestComponent)
12580

126-
Lightweight wrapper around DOM element events and methods. Will call wait, so can be awaited to allow effects to propagate.
81+
// getByText returns the first matching node for the provided text, and
82+
// throws an error if no elements match or if more than one match is found.
83+
getByText('Times clicked: 0')
12784

128-
### wait
85+
const button = getByText('increment')
12986

130-
When in need to wait for non-deterministic periods of time you can use `wait`,
131-
to wait for your expectations to pass. The `wait` function is a small wrapper
132-
around the
133-
[`wait-for-expect`](https://github.com/TheBrainFamily/wait-for-expect) module.
87+
// Dispatch a native click event to our button element.
88+
await fireEvent.click(button)
89+
await fireEvent.click(button)
13490

135-
Waiting can be very important in Vue components, @vue/test-utils has succeeded in making the majority of updates happen
136-
synchronously however there are occasions when wait will allow the DOM to update. For example, see [`here`](https://github.com/dfcook/vue-testing-library/tree/master/tests/__tests__/validate-plugin.js)
137-
138-
## Examples
91+
getByText('Times clicked: 2')
92+
})
93+
```
13994

14095
You'll find examples of testing with different libraries in
141-
[the test directory](https://github.com/dfcook/vue-testing-library/tree/master/tests/__tests__).
96+
[the test directory](https://github.com/testing-library/vue-testing-library/tree/master/tests/__tests__).
97+
14298
Some included are:
14399

144-
* [`vuex`](https://github.com/dfcook/vue-testing-library/tree/master/tests/__tests__/vuex.js)
145-
* [`vue-router`](https://github.com/dfcook/vue-testing-library/tree/master/tests/__tests__/vue-router.js)
146-
* [`vee-validate`](https://github.com/dfcook/vue-testing-library/tree/master/tests/__tests__/validate-plugin.js)
100+
* [`vuex`](https://github.com/testing-library/vue-testing-library/tree/master/tests/__tests__/vuex.js)
101+
* [`vue-router`](https://github.com/testing-library/vue-testing-library/tree/master/tests/__tests__/vue-router.js)
102+
* [`vee-validate`](https://github.com/testing-library/vue-testing-library/tree/master/tests/__tests__/validate-plugin.js)
103+
104+
Feel free to contribute with more!
105+
106+
## Docs
147107

148-
Feel free to contribute more!
108+
[**Read The Docs**](https://testing-library.com/vue) |
109+
[Edit the docs](https://github.com/testing-library/testing-library-docs)
149110

150-
## LICENSE
111+
## License
151112

152113
MIT
153114

154-
## CONTRIBUTORS
115+
## Contributors
155116

156117
[![dfcook](https://avatars0.githubusercontent.com/u/10348212?v=3&s=200)](https://github.com/dfcook)
118+
[![afontcu](https://avatars3.githubusercontent.com/u/9197791?s=200&v=3)](https://github.com/afontcu)
157119
[![eunjae-lee](https://avatars0.githubusercontent.com/u/499898?v=3&s=200)](https://github.com/eunjae-lee)
158120
[![tim-maguire](https://avatars0.githubusercontent.com/u/29452317?v=3&s=200)](https://github.com/tim-maguire)
159121
[![samdelacruz](https://avatars0.githubusercontent.com/u/2040007?v=3&s=200)](https://github.com/samdelacruz)
160122
[![ankitsinghaniyaz](https://avatars0.githubusercontent.com/u/11331989?v=3&s=200)](https://github.com/ankitsinghaniyaz)
161123
[![lindgr3n](https://avatars0.githubusercontent.com/u/24882614?v=3&s=200)](https://github.com/lindgr3n)
162-
[![kentcdodds](https://avatars0.githubusercontent.com/u/1500684?v=3&s=200)](https://github.com/kentcdodds)
124+
[![kentcdodds](https://avatars0.githubusercontent.com/u/1500684?v=3&s=200)](https://github.com/kentcdodds)

‎cleanup-after-each.js

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
afterEach(require('./dist/vue-testing-library').cleanup)

‎jest.config.js

+7-12
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,9 @@
11
module.exports = {
2-
moduleDirectories: [
3-
'node_modules',
4-
'src'
5-
],
6-
moduleFileExtensions: [
7-
'js',
8-
'vue'
9-
],
2+
moduleDirectories: ['node_modules', 'src'],
3+
moduleFileExtensions: ['js', 'vue'],
4+
moduleNameMapper: {
5+
'@testing-library/vue': '<rootDir>/src/vue-testing-library.js'
6+
},
107
coverageDirectory: './coverage',
118
collectCoverageFrom: [
129
'**/src/**/*.js',
@@ -15,14 +12,12 @@ module.exports = {
1512
],
1613
testPathIgnorePatterns: [
1714
'/node_modules/',
18-
'<rootDir>/npm/',
15+
'<rootDir>/dist/',
1916
'<rootDir>/tests/__tests__/components/'
2017
],
2118
transform: {
2219
'^.+\\.js$': '<rootDir>/node_modules/babel-jest',
2320
'.*\\.(vue)$': '<rootDir>/node_modules/vue-jest'
2421
},
25-
snapshotSerializers: [
26-
'<rootDir>/node_modules/jest-serializer-vue'
27-
]
22+
snapshotSerializers: ['<rootDir>/node_modules/jest-serializer-vue']
2823
}

0 commit comments

Comments
 (0)