Skip to content
Permalink

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also or learn more about diff comparisons.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also . Learn more about diff comparisons here.
base repository: testing-library/vue-testing-library
Failed to load repositories. Confirm that selected base ref is valid, then try again.
Loading
base: v5.3.1
Choose a base ref
...
head repository: testing-library/vue-testing-library
Failed to load repositories. Confirm that selected head ref is valid, then try again.
Loading
compare: v5.4.0
Choose a head ref
  • 2 commits
  • 7 files changed
  • 2 contributors

Commits on Nov 15, 2020

  1. Copy the full SHA
    04932ce View commit details

Commits on Nov 17, 2020

  1. feat: Warn using fireEvent.input() or .change() and suggest fireEvent…

    ….update() (#166)
    
    * Add warning message to fireEvent input and change when called directly #83
    
    * Add user event test case
    
    * Reword warning message to include used event key
    
    * Fix template literal for warning messages
    jhack32 authored Nov 17, 2020
    Copy the full SHA
    8871d2f View commit details
Showing with 195 additions and 79 deletions.
  1. +6 −6 README.md
  2. +1 −0 package.json
  3. +73 −73 src/__tests__/components/Form.vue
  4. +34 −0 src/__tests__/fire-event.js
  5. +2 −0 src/__tests__/form.js
  6. +72 −0 src/__tests__/user-event.js
  7. +7 −0 src/vue-testing-library.js
12 changes: 6 additions & 6 deletions README.md
Original file line number Diff line number Diff line change
@@ -40,7 +40,6 @@
<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->


- [Installation](#installation)
- [A basic example](#a-basic-example)
- [More examples](#more-examples)
@@ -69,8 +68,8 @@ 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 `@testing-library/jest-dom` so you can use [the custom
Jest matchers][jest-dom].
You may also be interested in installing `@testing-library/jest-dom` so you can
use [the custom Jest matchers][jest-dom].

## A basic example

@@ -123,9 +122,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 [`@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()`.
> 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
@@ -234,6 +233,7 @@ instead of filing an issue on GitHub.
[![mediafreakch](https://avatars2.githubusercontent.com/u/777093?v=3&s=120)](https://github.com/mediafreakch)
[![afenton90](https://avatars2.githubusercontent.com/u/8963736?v=3&s=120)](https://github.com/afenton90)
[![cilice](https://avatars2.githubusercontent.com/u/835588?v=3&s=120)](https://github.com/cilice)
[![ITenthusiasm](https://avatars2.githubusercontent.com/u/47364027?v3&s=120)](https://github.com/ITenthusiasm)

<!-- prettier-ignore-start -->
[build-badge]: https://img.shields.io/github/workflow/status/testing-library/vue-testing-library/validate?logo=github
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
@@ -51,6 +51,7 @@
"@babel/plugin-transform-runtime": "^7.11.5",
"@testing-library/jest-dom": "^5.11.6",
"@types/estree": "0.0.45",
"@testing-library/user-event": "^12.1.10",
"apollo-boost": "^0.4.9",
"apollo-cache-inmemory": "^1.6.6",
"axios": "^0.20.0",
146 changes: 73 additions & 73 deletions src/__tests__/components/Form.vue
Original file line number Diff line number Diff line change
@@ -1,73 +1,73 @@
<template>
<div>
<h1>Movie Review</h1>
<form @submit.prevent="submit">
<label for="movie-input">Title of the movie</label>
<input id="movie-input" v-model="title" name="title" />

<label id="review-textarea">Your review</label>
<textarea
v-model="review"
name="review-textarea"
placeholder="Write an awesome review"
aria-labelledby="review-textarea"
/>

<label>
<input v-model="rating" type="radio" value="3" />
Wonderful
</label>
<label>
<input v-model="rating" type="radio" value="2" />
Average
</label>
<label>
<input v-model="rating" type="radio" value="1" />
Awful
</label>

<label id="recommend-label">Would you recommend this movie?</label>
<input
id="recommend"
v-model="recommend"
type="checkbox"
name="recommend"
/>

<button :disabled="submitDisabled" type="submit">
Submit
</button>
</form>
</div>
</template>

<script>
export default {
data() {
return {
title: '',
review: '',
rating: '1',
recommend: false,
}
},
computed: {
submitDisabled() {
return !this.title || !this.review
},
},
methods: {
submit() {
if (this.submitDisabled) return
this.$emit('submit', {
title: this.title,
review: this.review,
rating: this.rating,
recommend: this.recommend,
})
},
},
}
</script>
<template>
<div>
<h1>Movie Review</h1>
<form @submit.prevent="submit">
<label for="movie-input">Title of the movie</label>
<input id="movie-input" v-model="title" name="title" />

<label id="review-textarea">Your review</label>
<textarea
v-model="review"
name="review-textarea"
placeholder="Write an awesome review"
aria-labelledby="review-textarea"
/>

<label>
<input v-model="rating" type="radio" value="3" />
Wonderful
</label>
<label>
<input v-model="rating" type="radio" value="2" />
Average
</label>
<label>
<input v-model="rating" type="radio" value="1" />
Awful
</label>

<label id="recommend-label" for="recommend">
Would you recommend this movie?
</label>
<input
id="recommend"
v-model="recommend"
type="checkbox"
name="recommend"
/>

<button :disabled="submitDisabled" type="submit">Submit</button>
</form>
</div>
</template>

<script>
export default {
data() {
return {
title: '',
review: '',
rating: '1',
recommend: false,
}
},
computed: {
submitDisabled() {
return !this.title || !this.review
},
},
methods: {
submit() {
if (this.submitDisabled) return
this.$emit('submit', {
title: this.title,
review: this.review,
rating: this.rating,
recommend: this.recommend,
})
},
},
}
</script>
34 changes: 34 additions & 0 deletions src/__tests__/fire-event.js
Original file line number Diff line number Diff line change
@@ -119,6 +119,13 @@ const eventTypes = [
elementType: 'div',
},
]
beforeEach(() => {
jest.spyOn(console, 'warn').mockImplementation(() => {})
})

afterEach(() => {
console.warn.mockRestore()
})

// For each event type, we assert that the right events are being triggered
// when the associated fireEvent method is called.
@@ -181,6 +188,32 @@ test('calling `fireEvent` directly works too', async () => {

expect(emitted()).toHaveProperty('click')
})
const typingEvents = ['input', 'change']
typingEvents.forEach(event => {
test(`fireEvent.${event} prints a warning message to use fireEvent.update instead`, async () => {
const {getByTestId} = render({
template: `<input type="text" data-testid=test-${event}></input>`,
})

await fireEvent[event](getByTestId(`test-${event}`), 'hello')

expect(console.warn).toHaveBeenCalledTimes(1)
expect(console.warn).toHaveBeenCalledWith(
expect.stringContaining(
`Using "fireEvent.${event} may lead to unexpected results. Please use fireEvent.update() instead.`,
),
)
})
})
test('fireEvent.update does not trigger warning messages', async () => {
const {getByTestId} = render({
template: `<input type="text" data-testid=test-update></input>`,
})

await fireEvent.update(getByTestId('test-update'), 'hello')

expect(console.warn).not.toHaveBeenCalled()
})

test('fireEvent.update does not crash if non-input element is passed in', async () => {
const {getByText} = render({
@@ -194,4 +227,5 @@ test('fireEvent.update does not crash if non-input element is passed in', async
Hi
</div>
`)
expect(console.warn).not.toHaveBeenCalled()
})
2 changes: 2 additions & 0 deletions src/__tests__/form.js
Original file line number Diff line number Diff line change
@@ -8,6 +8,7 @@ import Form from './components/Form'
// Read 'What queries should I use?' for additional context:
// https://testing-library.com/docs/guide-which-query
test('Review form submits', async () => {
jest.spyOn(console, 'warn').mockImplementation(() => {})
const fakeReview = {
title: 'An Awesome Movie',
review: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
@@ -61,4 +62,5 @@ test('Review form submits', async () => {
// Assert the right event has been emitted.
expect(emitted()).toHaveProperty('submit')
expect(emitted().submit[0][0]).toMatchObject(fakeReview)
expect(console.warn).not.toHaveBeenCalled()
})
72 changes: 72 additions & 0 deletions src/__tests__/user-event.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
import '@testing-library/jest-dom'
import {render} from '@testing-library/vue'
import userEvent from '@testing-library/user-event'
import Form from './components/Form'
import Select from './components/Select'

beforeEach(() => {
jest.spyOn(console, 'warn').mockImplementation(() => {})
})

afterEach(() => {
console.warn.mockRestore()
})

test('User events in a form', async () => {
const fakeReview = {
title: 'An Awesome Movie',
review: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
rating: '3',
}
const {getByText, getByLabelText, emitted} = render(Form)

const submitButton = getByText('Submit')
expect(submitButton).toBeDisabled()

const titleInput = getByLabelText(/title of the movie/i)
await userEvent.type(titleInput, fakeReview.title)
expect(titleInput.value).toEqual(fakeReview.title)

const textArea = getByLabelText(/Your review/i)
await userEvent.type(textArea, 'The t-rex went insane!')
expect(textArea.value).toEqual('The t-rex went insane!')

await userEvent.clear(textArea)
expect(textArea.value).toEqual('')
await userEvent.type(textArea, fakeReview.review)
expect(textArea.value).toEqual(fakeReview.review)

const initialSelectedRating = getByLabelText(/Awful/i)
const wonderfulRadioInput = getByLabelText(/Wonderful/i)
expect(initialSelectedRating).toBeChecked()
expect(wonderfulRadioInput).not.toBeChecked()

await userEvent.click(wonderfulRadioInput)
expect(wonderfulRadioInput).toBeChecked()
expect(initialSelectedRating).not.toBeChecked()

const recommendInput = getByLabelText(/Would you recommend this movie?/i)
await userEvent.click(recommendInput)
expect(recommendInput).toBeChecked()

userEvent.tab()
expect(submitButton).toHaveFocus()
expect(submitButton).toBeEnabled()
await userEvent.type(submitButton, '{enter}')
expect(emitted().submit[0][0]).toMatchObject(fakeReview)

expect(console.warn).not.toHaveBeenCalled()
})

test('selecting option with user events', async () => {
const {getByDisplayValue} = render(Select)
const select = getByDisplayValue('Tyrannosaurus')
expect(select.value).toBe('dino1')

await userEvent.selectOptions(select, 'dino2')
expect(select.value).toBe('dino2')

await userEvent.selectOptions(select, 'dino3')
expect(select.value).not.toBe('dino2')
expect(select.value).toBe('dino3')
})
7 changes: 7 additions & 0 deletions src/vue-testing-library.js
Original file line number Diff line number Diff line change
@@ -112,9 +112,16 @@ async function fireEvent(...args) {
dtlFireEvent(...args)
await waitFor(() => {})
}
const changeOrInputEventCalledDirectly = (eventValue, eventKey) =>
eventValue && (eventKey === 'change' || eventKey === 'input')

Object.keys(dtlFireEvent).forEach(key => {
fireEvent[key] = async (...args) => {
if (changeOrInputEventCalledDirectly(args[1], key)) {
console.warn(
`Using "fireEvent.${key} may lead to unexpected results. Please use fireEvent.update() instead.`,
)
}
dtlFireEvent[key](...args)
await waitFor(() => {})
}