Skip to content

Commit

Permalink
Merge branch 'next'
Browse files Browse the repository at this point in the history
  • Loading branch information
afontcu committed Jun 8, 2022
2 parents 181765f + ba14df2 commit 11348c1
Show file tree
Hide file tree
Showing 68 changed files with 1,013 additions and 1,149 deletions.
8 changes: 0 additions & 8 deletions .babelrc

This file was deleted.

5 changes: 3 additions & 2 deletions .eslintrc.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,8 @@ module.exports = {
},
extends: [
'./node_modules/kcd-scripts/eslint.js',
'plugin:vue/recommended',
'plugin:vue/vue3-recommended',
'plugin:testing-library/vue',
'prettier',
],
plugins: ['vue'],
Expand All @@ -17,8 +18,8 @@ module.exports = {
'testing-library/prefer-screen-queries': 'off',
'testing-library/no-manual-cleanup': 'off',
'testing-library/no-await-sync-events': 'off',
'testing-library/await-fire-event': 'error',
'testing-library/prefer-user-event': 'off',
'testing-library/no-node-access': 'off',
'testing-library/await-fire-event': 'off',
},
}
3 changes: 3 additions & 0 deletions .github/workflows/validate.yml
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,9 @@ jobs:
uses: bahmutov/npm-install@v1
with:
useLockFile: false
# Needed because @vue/apollo-composable requires @vue/composition-api
# which has a peerDep on Vue 2.
install-command: npm i --legacy-peer-deps

- name: ▶️ Run validate script
run: npm run validate
Expand Down
56 changes: 25 additions & 31 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<div align="center">
<h1>Vue Testing Library</h1>
<h1>Vue Testing Library for Vue 3</h1>

<br />

Expand All @@ -15,11 +15,6 @@
<p>Simple and complete Vue.js testing utilities that encourage good testing practices.</p>

<p>Vue Testing Library is a lightweight adapter built on top of <a href="https://github.com/testing-library/dom-testing-library/">DOM Testing Library</a> and <a href="https://github.com/vuejs/vue-test-utils">@vue/test-utils</a>.</p>


<br />

<p>If you're looking for the Vue 3 version of Vue Testing Library, check out the <a href="https://github.com/testing-library/vue-testing-library/tree/next">next</a> branch.</p>

<br />

Expand Down Expand Up @@ -66,30 +61,29 @@
This module is distributed via `npm` and should be installed as one of your
project's `devDependencies`:

If using Vue 2
```
npm install --save-dev @testing-library/vue@5
```

If using Vue 3
```
npm install --save-dev @testing-library/vue
```

This library has `peerDependencies` listings for `Vue` and
This library has `peerDependencies` listings for `Vue 3` and
`vue-template-compiler`.

You may also be interested in installing `@testing-library/jest-dom` so you can
use [the custom Jest matchers][jest-dom].
You may also be interested in installing `jest-dom` so you can use [the custom
Jest matchers][jest-dom].

If you're using Vue 2, please install version 5 of the library:

```
npm install --save-dev @testing-library/vue@^5
```


## A basic example

```html
<template>
<div>
<p>Times clicked: {{ count }}</p>
<button @click="increment">increment</button>
</div>
<p>Times clicked: {{ count }}</p>
<button @click="increment">increment</button>
</template>

<script>
Expand Down Expand Up @@ -133,9 +127,9 @@ test('increments value on click', async () => {
})
```

> You might want to install [`@testing-library/jest-dom`][jest-dom] to add handy
> assertions such as `.toBeInTheDocument()`. In the example above, you could
> write `expect(screen.queryByText('Times clicked: 0')).toBeInTheDocument()`.
> You might want to install [`jest-dom`][jest-dom] to add handy assertions such
> as `.toBeInTheDocument()`. In the example above, you could write
> `expect(screen.queryByText('Times clicked: 0')).toBeInTheDocument()`.
> Using `byText` queries it's not the only nor the best way to query for
> elements. Read [Which query should I use?][which-query] to discover
Expand Down Expand Up @@ -258,8 +252,8 @@ instead of filing an issue on GitHub.
[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/main/LICENSE
[discord]: https://discord.gg/testing-library
[license]: https://github.com/testing-library/vue-testing-library/blob/master/LICENSE
[discord]: https://testing-library.com/discord
[discord-badge]: https://img.shields.io/discord/723559267868737556.svg?label=&logo=discord&logoColor=ffffff&color=7389D8&labelColor=6A7EC2&style=flat-square
[jest-dom]: https://github.com/testing-library/jest-dom
[which-query]: https://testing-library.com/docs/guide-which-query
Expand All @@ -274,11 +268,11 @@ instead of filing an issue on GitHub.
[add-issue-bug]: https://github.com/testing-library/vue-testing-library/issues/new?assignees=&labels=bug&template=bug_report.md&title=
[add-issue]: (https://github.com/testing-library/vue-testing-library/issues/new)

[types-directory]: https://github.com/testing-library/vue-testing-library/blob/main/types
[test-directory]: https://github.com/testing-library/vue-testing-library/blob/main/src/__tests__
[vuex-example]: https://github.com/testing-library/vue-testing-library/blob/main/src/__tests__/vuex.js
[vue-router-example]: https://github.com/testing-library/vue-testing-library/blob/main/src/__tests__/vue-router.js
[vee-validate-example]: https://github.com/testing-library/vue-testing-library/blob/main/src/__tests__/validate-plugin.js
[vue-i18n-example]: https://github.com/testing-library/vue-testing-library/blob/main/src/__tests__/translations-vue-i18n.js
[vuetify-example]: https://github.com/testing-library/vue-testing-library/blob/main/src/__tests__/vuetify.js
[types-directory]: https://github.com/testing-library/vue-testing-library/blob/master/types
[test-directory]: https://github.com/testing-library/vue-testing-library/blob/master/src/__tests__
[vuex-example]: https://github.com/testing-library/vue-testing-library/blob/master/src/__tests__/vuex.js
[vue-router-example]: https://github.com/testing-library/vue-testing-library/blob/master/src/__tests__/vue-router.js
[vee-validate-example]: https://github.com/testing-library/vue-testing-library/blob/master/src/__tests__/validate-plugin.js
[vue-i18n-example]: https://github.com/testing-library/vue-testing-library/blob/master/src/__tests__/vue-i18n.js
[vuetify-example]: https://github.com/testing-library/vue-testing-library/blob/master/src/__tests__/vuetify.js
<!-- prettier-ignore-end -->
14 changes: 14 additions & 0 deletions babel.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
module.exports = {
sourceType: 'module',
presets: [
[
'@babel/preset-env',
{
targets: {
node: 'current',
esmodules: true,
},
},
],
],
}
13 changes: 8 additions & 5 deletions jest.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,19 +4,22 @@ const config = require('kcd-scripts/jest')
module.exports = merge(config, {
testEnvironment: 'jsdom',
moduleFileExtensions: ['js', 'vue'],
moduleNameMapper: {
'@testing-library/vue': '<rootDir>/src/index.js',
},
coverageDirectory: './coverage',
collectCoverageFrom: ['**/src/**/*.js', '!**/src/__tests__/**'],
transform: {
'^.+\\.js$': '<rootDir>/node_modules/babel-jest',
'.*\\.(vue)$': '<rootDir>/node_modules/@vue/vue2-jest',
'.*\\.(vue)$': '<rootDir>/node_modules/vue-jest',
},
snapshotSerializers: ['<rootDir>/node_modules/jest-serializer-vue'],
testPathIgnorePatterns: [
'<rootDir>/node_modules',
'<rootDir>/node_modules/',
'<rootDir>/src/__tests__/components',
'<rootDir>/src/__tests__/directives',
],
moduleNameMapper: {
'@vue/apollo-composable': [
'<rootDir>/node_modules/@vue/apollo-composable/dist/index.js',
],
},
transformIgnorePatterns: ['node_modules/(?!(@vue/apollo-composable)/)'],
})
75 changes: 37 additions & 38 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -11,14 +11,14 @@
"test": "kcd-scripts test",
"test:update": "npm test -- --updateSnapshot --coverage",
"validate": "kcd-scripts validate",
"typecheck": "dtslint ./types/",
"typecheck": "tsd",
"setup": "npm install && npm run validate -s"
},
"engines": {
"node": ">10.18"
"node": ">=12"
},
"files": [
"types/*.d.ts",
"types",
"dist",
"cleanup-after-each.js"
],
Expand All @@ -35,52 +35,51 @@
"vue.js testing",
"vue",
"vue testing",
"vue.js 2",
"vue.js 2 testing",
"vue 2",
"vue 2 testing"
"vue.js 3",
"vue.js 3 testing",
"vue 3",
"vue 3 testing"
],
"author": "Daniel Cook",
"license": "MIT",
"dependencies": {
"@babel/runtime": "^7.12.5",
"@testing-library/dom": "^7.26.6",
"@vue/test-utils": "^1.1.0"
"@babel/runtime": "^7.15.4",
"@testing-library/dom": "^8.5.0",
"@vue/test-utils": "^2.0.0-rc.18"
},
"devDependencies": {
"@babel/plugin-transform-runtime": "^7.11.5",
"@testing-library/jest-dom": "^5.11.6",
"@testing-library/user-event": "^12.1.10",
"@types/estree": "0.0.46",
"@vue/vue2-jest": "^27.0.0-alpha.2",
"@apollo/client": "^3.4.11",
"@babel/plugin-transform-runtime": "^7.15.0",
"@testing-library/jest-dom": "^5.14.1",
"@testing-library/user-event": "^13.2.1",
"@types/estree": "^0.0.50",
"@vue/apollo-composable": "^4.0.0-alpha.14",
"@vue/compiler-sfc": "^3.2.12",
"apollo-boost": "^0.4.9",
"apollo-cache-inmemory": "^1.6.6",
"axios": "^0.21.1",
"dtslint": "^4.0.5",
"eslint": "^7.13.0",
"eslint-plugin-vue": "^7.6.0",
"graphql": "^15.3.0",
"graphql-tag": "^2.11.0",
"isomorphic-unfetch": "^3.0.0",
"axios": "^0.20.0",
"element-plus": "^1.3.0-beta.1",
"eslint-plugin-vue": "^8.2.0",
"graphql": "^15.5.3",
"graphql-tag": "^2.12.4",
"isomorphic-unfetch": "^3.1.0",
"jest-serializer-vue": "^2.0.2",
"kcd-scripts": "^11.1.0",
"kcd-scripts": "^10.0.0",
"lodash.merge": "^4.6.2",
"msw": "^0.35.0",
"portal-vue": "^2.1.7",
"semver": "^7.3.5",
"typescript": "^4.0.5",
"vee-validate": "^2.2.15",
"vue": "^2.6.12",
"vue-apollo": "^3.0.4",
"vue-i18n": "^8.21.1",
"vue-router": "^3.4.9",
"vue-template-compiler": "^2.6.12",
"vuetify": "^2.3.17",
"vuex": "^3.5.1"
"msw": "^0.21.3",
"tsd": "^0.19.1",
"typescript": "^4.4.3",
"vee-validate": "^4.3.5",
"vue": "^3.2.12",
"vue-apollo": "^3.0.5",
"vue-i18n": "^9.2.0-beta.26",
"vue-jest": "^5.0.0-alpha.10",
"vue-router": "^4.0.3",
"vuetify": "^v3.0.0-alpha.12",
"vuex": "^4.0.0"
},
"peerDependencies": {
"vue": "^2.6.10",
"vue-template-compiler": "^2.6.10"
"@vue/compiler-sfc": ">= 3",
"vue": ">= 3"
},
"husky": {
"hooks": {
Expand Down
21 changes: 0 additions & 21 deletions src/__tests__/about-vue-router-mocha.js

This file was deleted.

4 changes: 2 additions & 2 deletions src/__tests__/auto-cleanup-skip.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
let render
beforeAll(async () => {
beforeAll(() => {
process.env.VTL_SKIP_AUTO_CLEANUP = 'true'
const vtl = await require('@testing-library/vue')
const vtl = require('..')
render = vtl.render
})

Expand Down
11 changes: 5 additions & 6 deletions src/__tests__/auto-cleanup.js
Original file line number Diff line number Diff line change
@@ -1,12 +1,11 @@
import {render} from '@testing-library/vue'
import {render} from '..'
import '@testing-library/jest-dom'

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

expect(document.body.innerHTML).toMatchInlineSnapshot(`
<div>
<h1>Hello World</h1>
Expand Down
2 changes: 1 addition & 1 deletion src/__tests__/button-simple.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import {render, fireEvent} from '@testing-library/vue'
import {render, fireEvent} from '..'
import Button from './components/Button'
import '@testing-library/jest-dom'

Expand Down
23 changes: 4 additions & 19 deletions src/__tests__/card-slots.js
Original file line number Diff line number Diff line change
@@ -1,32 +1,17 @@
import '@testing-library/jest-dom'
import {render} from '@testing-library/vue'
import {render} from '..'
import Card from './components/Card'

// In this test file we demo how to test a component with slots and a scoped slot.

// Usage is the same as Vue Test Utils, since slots and scopedSlots
// in the render options are directly passed through to the Utils mount().
// For more, see: https://vue-test-utils.vuejs.org/api/options.html#slots
// Usage is the same as Vue Test Utils, since slots values are passed using the `slots`
// key from mount(). For more, see: https://vue-test-utils.vuejs.org/api/options.html#slots
test('Card component', () => {
const {getByText, queryByText} = render(Card, {
const {getByText} = render(Card, {
slots: {
header: '<h1>HEADER</h1>',
footer: '<div>FOOTER</div>',
},
scopedSlots: {
default: '<p>Yay! {{props.content}}</p>',
},
})

// The default slot should render the template above with the scoped prop "content".
expect(getByText('Yay! Scoped content!')).toBeInTheDocument()

// Instead of the default slot's fallback content.
expect(
queryByText('Nothing used the Scoped content!'),
).not.toBeInTheDocument()

// And the header and footer slots should be rendered with the given templates.
expect(getByText('HEADER')).toBeInTheDocument()
expect(getByText('FOOTER')).toBeInTheDocument()
})
Loading

0 comments on commit 11348c1

Please sign in to comment.