diff --git a/README.md b/README.md index 4997c572..441e0a6e 100644 --- a/README.md +++ b/README.md @@ -1,12 +1,22 @@

Vue Testing Library

-

Lightweight adapter allowing DOM Testing Library to be used to test Vue.js components. Built on top of @vue/test-utils.

+ + lizard + + +

Simple and complete Vue.js testing utilities that encourage good testing practices.

+ +

Vue Testing Library is a lightweight adapter built on top of DOM Testing Library and @vue/test-utils.


-[**Read The Docs**](https://testing-library.com/vue) | -[Edit the docs](https://github.com/testing-library/testing-library-docs) +[**Read the Docs**][docs] | [Edit the docs][docs-edit]
@@ -14,34 +24,41 @@
-[![Build Status](https://travis-ci.org/testing-library/vue-testing-library.svg?branch=master)](https://travis-ci.org/testing-library/vue-testing-library)   -[![Coverage Status](https://img.shields.io/codecov/c/github/testing-library/vue-testing-library.svg)](https://codecov.io/github/testing-library/vue-testing-library)   -[![GitHub version](https://badge.fury.io/gh/testing-library%2Fvue-testing-library.svg)](https://badge.fury.io/gh/testing-library%2Fvue-testing-library) + +[![Build Status][build-badge]][build] +[![Coverage Status][coverage-badge]][coverage] +[![GitHub version][github-badge]][github] +[![npm version][npm-badge]][npm] -[![npm version](https://badge.fury.io/js/%40testing-library%2Fvue.svg)](https://badge.fury.io/js/%40testing-library%2Fvue)   -[![license](https://img.shields.io/github/license/testing-library/vue-testing-library.svg)](https://img.shields.io/github/license/testing-library/vue-testing-library) +[![MIT License][license-badge]][license] +[![Join the community on Spectrum][spectrum-badge]][spectrum] +

Table of Contents

- [Installation](#installation) -- [Examples](#examples) +- [A simple example](#a-simple-example) + - [More examples](#more-examples) - [Docs](#docs) - [License](#license) - [Contributors](#contributors) ## Installation -This module is distributed via npm which is bundled with node and -should be installed as one of your project's `devDependencies`: +This module is distributed via npm and should be installed as one of your +project's `devDependencies`: ``` npm install --save-dev @testing-library/vue ``` +This library has `peerDependencies` listings for `Vue` and +`vue-template-compiler`. + You may also be interested in installing `jest-dom` so you can use [the custom Jest matchers](https://github.com/gnapse/jest-dom#readme). -## Examples +## A simple example ```html @@ -53,28 +70,25 @@ You may also be interested in installing `jest-dom` so you can use ``` ```js // TestComponent.spec.js -import { render, fireEvent, cleanup } from '@testing-library/vue' +import { render, fireEvent } from '@testing-library/vue' import TestComponent from './TestComponent.vue' -// automatically unmount and cleanup DOM after the test is finished. -afterEach(cleanup) - -it('increments value on click', async () => { +test('increments value on click', async () => { // The render method returns a collection of utilities to query your component. const { getByText } = render(TestComponent) @@ -82,9 +96,10 @@ it('increments value on click', async () => { // throws an error if no elements match or if more than one match is found. getByText('Times clicked: 0') + // `button` is the actual DOM element. const button = getByText('increment') - // Dispatch a native click event to our button element. + // Dispatch a native click event. await fireEvent.click(button) await fireEvent.click(button) @@ -92,35 +107,61 @@ it('increments value on click', async () => { }) ``` -You'll find examples of testing with different libraries in -[the test directory](https://github.com/testing-library/vue-testing-library/tree/master/tests/__tests__). +### More examples + +You'll find examples of testing with different situations and popular libraries +in [the test directory][test-directory]. Some included are: -* [`vuex`](https://github.com/testing-library/vue-testing-library/tree/master/tests/__tests__/vuex.js) -* [`vue-router`](https://github.com/testing-library/vue-testing-library/tree/master/tests/__tests__/vue-router.js) -* [`vee-validate`](https://github.com/testing-library/vue-testing-library/tree/master/tests/__tests__/validate-plugin.js) +- [`vuex`][vuex-example] +- [`vue-router`][vue-router-example] +- [`vee-validate`][vee-validate-example] +- [`vue-i18n`][vue-i18n-example] -Feel free to contribute with more! +Feel free to contribute with more examples! ## Docs -[**Read The Docs**](https://testing-library.com/vue) | -[Edit the docs](https://github.com/testing-library/testing-library-docs) +[**Read the Docs**][docs] | [Edit the docs][docs-edit] ## License -MIT +[MIT][license] ## Contributors -[![dfcook](https://avatars0.githubusercontent.com/u/10348212?v=3&s=200)](https://github.com/dfcook) -[![afontcu](https://avatars3.githubusercontent.com/u/9197791?s=200&v=3)](https://github.com/afontcu) -[![eunjae-lee](https://avatars0.githubusercontent.com/u/499898?v=3&s=200)](https://github.com/eunjae-lee) -[![tim-maguire](https://avatars0.githubusercontent.com/u/29452317?v=3&s=200)](https://github.com/tim-maguire) -[![samdelacruz](https://avatars0.githubusercontent.com/u/2040007?v=3&s=200)](https://github.com/samdelacruz) -[![ankitsinghaniyaz](https://avatars0.githubusercontent.com/u/11331989?v=3&s=200)](https://github.com/ankitsinghaniyaz) -[![lindgr3n](https://avatars0.githubusercontent.com/u/24882614?v=3&s=200)](https://github.com/lindgr3n) -[![kentcdodds](https://avatars0.githubusercontent.com/u/1500684?v=3&s=200)](https://github.com/kentcdodds) -[![brennj](https://avatars2.githubusercontent.com/u/29227924?v=3&s=200)](https://github.com/brennj) -[![makeupsomething](https://avatars2.githubusercontent.com/u/7676733?v=3&s=200)](https://github.com/makeupsomething) +[![dfcook](https://avatars0.githubusercontent.com/u/10348212?v=3&s=170)](https://github.com/dfcook) +[![afontcu](https://avatars3.githubusercontent.com/u/9197791?s=170&v=3)](https://github.com/afontcu) +[![eunjae-lee](https://avatars0.githubusercontent.com/u/499898?v=3&s=170)](https://github.com/eunjae-lee) +[![tim-maguire](https://avatars0.githubusercontent.com/u/29452317?v=3&s=170)](https://github.com/tim-maguire) +[![samdelacruz](https://avatars0.githubusercontent.com/u/2040007?v=3&s=170)](https://github.com/samdelacruz) +[![ankitsinghaniyaz](https://avatars0.githubusercontent.com/u/11331989?v=3&s=170)](https://github.com/ankitsinghaniyaz) +[![lindgr3n](https://avatars0.githubusercontent.com/u/24882614?v=3&s=170)](https://github.com/lindgr3n) +[![kentcdodds](https://avatars0.githubusercontent.com/u/1500684?v=3&s=170)](https://github.com/kentcdodds) +[![brennj](https://avatars2.githubusercontent.com/u/29227924?v=3&s=170)](https://github.com/brennj) +[![makeupsomething](https://avatars2.githubusercontent.com/u/7676733?v=3&s=170)](https://github.com/makeupsomething) + + +[build-badge]: https://travis-ci.org/testing-library/vue-testing-library.svg?branch=master +[build]: https://travis-ci.org/testing-library/vue-testing-library +[spectrum-badge]: https://withspectrum.github.io/badge/badge.svg +[spectrum]: https://spectrum.chat/testing-library +[coverage-badge]: https://img.shields.io/codecov/c/github/testing-library/vue-testing-library.svg +[coverage]: https://codecov.io/github/testing-library/vue-testing-library +[github-badge]: https://badge.fury.io/gh/testing-library%2Fvue-testing-library.svg +[github]: https://badge.fury.io/gh/testing-library%2Fvue-testing-library +[npm-badge]: https://badge.fury.io/js/%40testing-library%2Fvue.svg +[npm]: https://badge.fury.io/js/%40testing-library%2Fvue +[license-badge]: https://img.shields.io/github/license/testing-library/vue-testing-library.svg +[license]: https://github.com/testing-library/vue-testing-library/blob/master/LICENSE + +[docs]: https://testing-library.com/vue +[docs-edit]: https://github.com/testing-library/testing-library-docs + +[test-directory]: https://github.com/testing-library/vue-testing-library/tree/master/tests/__tests__ +[vuex-example]: https://github.com/testing-library/vue-testing-library/tree/master/tests/__tests__/vuex.js +[vue-router-example]: https://github.com/testing-library/vue-testing-library/tree/master/tests/__tests__/vue-router.js +[vee-validate-example]: https://github.com/testing-library/vue-testing-library/tree/master/tests/__tests__/validate-plugin.js +[vue-i18n-example]: https://github.com/testing-library/vue-testing-library/blob/master/tests/__tests__/vueI18n.js + diff --git a/lizard.png b/lizard.png new file mode 100644 index 00000000..f528dff5 Binary files /dev/null and b/lizard.png differ diff --git a/package.json b/package.json index ba74787a..3eaf595a 100644 --- a/package.json +++ b/package.json @@ -82,6 +82,10 @@ "*.{js,vue}": [ "eslint --fix", "git add" + ], + "*.{md,html}": [ + "prettier --write", + "git add" ] } }