Replace Simulate with fireEvent

Author: dfcook

README.md

@@ -21,9 +21,9 @@ The `vue-testing-library` is a an adapter that enables Vue testing using the fra
 * [Installation](#installation)
 * [Usage](#usage)
   * [`render`](#render)
-  * [`Simulate`](#simulate)
+  * [`fireEvent`](#fireEvent)
   * [`wait`](#wait)
-* [Examples](#examples) 
+* [Examples](#examples)
 * [LICENSE](#license)
 
 ## Installation
@@ -120,9 +120,9 @@ The `render` function takes up to 3 parameters and returns an object with some h
 * routes - A set of routes, if present render will configure VueRouter and pass to mount.
 3. configurationCb - A callback to be called passing the Vue instance when created. This allows 3rd party plugins to be installed prior to mount.
 
-### Simulate
+### fireEvent
 
-Lightweight wrapper around DOM element methods
+Lightweight wrapper around DOM element events and methods
 
 ### wait
 

src/Simulate.js

@@ -2,11 +2,12 @@ import {
   createLocalVue,
   mount
 } from '@vue/test-utils'
-import Simulate from './Simulate'
+
 import {
   getQueriesForElement,
   prettyDOM,
-  wait
+  wait,
+  fireEvent
 } from 'dom-testing-library'
 
 const mountedWrappers = new Set()
@@ -74,9 +75,13 @@ function cleanupAtWrapper (wrapper) {
   mountedWrappers.delete(wrapper)
 }
 
+fireEvent.touch = (elem) => {
+  fireEvent.focus(elem)
+  fireEvent.blur(elem)
+}
+
 export * from 'dom-testing-library'
 export {
   cleanup,
-  render,
-  Simulate
+  render
 }

src/index.js

@@ -12,7 +12,7 @@
 <script>
 const fetchAMessage = () =>
   new Promise(resolve => {
-    // we are using random timeout here to simulate a real-time example
+    // we are using random timeout here to fireEvent a real-time example
     // of an async operation calling a callback at a non-deterministic time
     const randomTimeout = Math.floor(Math.random() * 100)
     setTimeout(() => {

tests/__tests__/components/EndToEnd.vue

@@ -1,5 +1,5 @@
 import axiosMock from 'axios'
-import { render, Simulate, wait } from '../../src'
+import { render, fireEvent, wait } from '../../src'
 import Fetch from './components/Fetch.vue'
 
 test('Fetch makes an API call and displays the greeting when load-greeting is clicked', async () => {
@@ -12,7 +12,7 @@ test('Fetch makes an API call and displays the greeting when load-greeting is cl
   const { html, getByText } = render(Fetch, { props: { url: '/greeting' } })
 
   // Act
-  Simulate.click(getByText('Fetch'))
+  fireEvent.click(getByText('Fetch'))
 
   await wait()
 

tests/__tests__/fetch.js

@@ -1,4 +1,4 @@
-import { render, Simulate } from '../../src'
+import { render, fireEvent } from '../../src'
 import Login from './components/Login'
 
 test('login form submits', async () => {
@@ -16,9 +16,9 @@ test('login form submits', async () => {
 
   // NOTE: in jsdom, it's not possible to trigger a form submission
   // by clicking on the submit button. This is really unfortunate.
-  // So the next best thing is to simulate a submit on the form itself
+  // So the next best thing is to fireEvent a submit on the form itself
   // then ensure that there's a submit button.
-  Simulate.click(submitButtonNode)
+  fireEvent.click(submitButtonNode)
 
   // Assert
   expect(handleSubmit).toHaveBeenCalledTimes(1)

tests/__tests__/form.js

@@ -1,11 +1,11 @@
 import StopWatch from './components/StopWatch.vue'
-import { render, wait, Simulate } from '../../src'
+import { render, wait, fireEvent } from '../../src'
 
 test('unmounts a component', async () => {
   jest.spyOn(console, 'error').mockImplementation(() => {})
 
   const { unmount, isUnmounted, getByText } = render(StopWatch)
-  Simulate.click(getByText('Start'))
+  fireEvent.click(getByText('Start'))
 
   await wait()
 
@@ -24,9 +24,9 @@ test('updates component state', async () => {
 
   expect(elapsedTime.textContent).toBe('0ms')
 
-  Simulate.click(startButton)
+  fireEvent.click(startButton)
   await wait()
-  Simulate.click(startButton)
+  fireEvent.click(startButton)
 
   expect(elapsedTime.textContent).not.toBe('0ms')
 })

tests/__tests__/stopwatch.js

@@ -1,14 +1,14 @@
 import VeeValidate from 'vee-validate'
 
-import { render, Simulate, wait } from '../../src'
+import { render, fireEvent, wait } from '../../src'
 import Validate from './components/Validate'
 
 test('can validate using plugin', async () => {
   const { getByPlaceholderText, queryByTestId } = render(Validate, {},
     vue => vue.use(VeeValidate, { events: 'blur' }))
 
   const usernameInput = getByPlaceholderText('Username...')
-  Simulate.touch(usernameInput)
+  fireEvent.touch(usernameInput)
 
   await wait()
 

tests/__tests__/validate-plugin.js

@@ -2,7 +2,7 @@ import App from './components/Router/App.vue'
 import Home from './components/Router/Home.vue'
 import About from './components/Router/About.vue'
 
-import { render, Simulate, wait } from '../../src'
+import { render, fireEvent, wait } from '../../src'
 
 const routes = [
   { path: '/', component: Home },
@@ -14,7 +14,7 @@ test('full app rendering/navigating', async () => {
   const { queryByTestId } = render(App, { routes })
   // normally I'd use a data-testid, but just wanted to show this is also possible
   expect(queryByTestId('location-display').textContent).toBe('/')
-  Simulate.click(queryByTestId('about-link'))
+  fireEvent.click(queryByTestId('about-link'))
   await wait()
   // normally I'd use a data-testid, but just wanted to show this is also possible
   expect(queryByTestId('location-display').textContent).toBe('/about')

tests/__tests__/vue-router.js

@@ -1,5 +1,5 @@
 import VuexTest from './components/VuexTest'
-import { render, Simulate, wait } from '../../src'
+import { render, fireEvent, wait } from '../../src'
 
 const store = {
   state: {
@@ -16,15 +16,15 @@ const store = {
 
 test('can render with vuex with defaults', async () => {
   const { getByTestId, getByText } = render(VuexTest, { store })
-  Simulate.click(getByText('+'))
+  fireEvent.click(getByText('+'))
   await wait()
   expect(getByTestId('count-value').textContent).toBe('1')
 })
 
 test('can render with vuex with custom initial state', async () => {
   store.state.count = 3
   const { getByTestId, getByText } = render(VuexTest, { store })
-  Simulate.click(getByText('-'))
+  fireEvent.click(getByText('-'))
   await wait()
   expect(getByTestId('count-value').textContent).toBe('2')
 })
@@ -35,10 +35,10 @@ test('can render with vuex with custom store', async () => {
 
   const store = { state: { count: 1000 } }
   const { getByTestId, getByText } = render(VuexTest, { store })
-  Simulate.click(getByText('+'))
+  fireEvent.click(getByText('+'))
   await wait()
   expect(getByTestId('count-value').textContent).toBe('1000')
-  Simulate.click(getByText('-'))
+  fireEvent.click(getByText('-'))
   await wait()
   expect(getByTestId('count-value').textContent).toBe('1000')