Update to latest dom-testing-library

dfcook · dfcook · commit 9dfc31245daf · 2018-11-25T09:38:20.000Z
diff --git a/.babelrc b/.babelrc
@@ -1,8 +1,9 @@
 {
   "presets": [
-    ["env", {
-      "modules": false,
+    ["@babel/env", {
+      "modules": "commonjs",
       "targets": {
+        "node": "current",
         "browsers": [
           "> 1%",
           "last 2 versions",
@@ -12,12 +13,7 @@
     }]
   ],
   "plugins": [
-    "transform-object-rest-spread",
-    "transform-runtime"
-  ],
-  "env": {
-    "test": {
-      "presets": ["env"]
-    }
-  }
+    "@babel/plugin-proposal-object-rest-spread",
+    "@babel/plugin-transform-runtime"
+  ]
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -27,35 +27,35 @@
   "author": "Daniel Cook",
   "license": "MIT",
   "dependencies": {
-    "@vue/test-utils": "^1.0.0-beta.16",
-    "dom-testing-library": "^2.3.2",
-    "vue": "^2.5.16",
-    "vue-template-compiler": "^2.5.16"
+    "@vue/test-utils": "^1.0.0-beta.25",
+    "babel-core": "^7.0.0-bridge.0",
+    "dom-testing-library": "^3.12.4",
+    "vue": "^2.5.17",
+    "vue-template-compiler": "^2.5.17"
   },
   "devDependencies": {
+    "@babel/cli": "^7.1.5",
+    "@babel/core": "^7.1.6",
+    "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
+    "@babel/plugin-transform-runtime": "^7.1.0",
+    "@babel/preset-env": "^7.1.6",
     "axios": "^0.18.0",
-    "babel-cli": "^6.26.0",
-    "babel-core": "^6.26.3",
-    "babel-eslint": "^8.2.3",
-    "babel-jest": "^23.0.1",
-    "babel-plugin-transform-object-rest-spread": "^6.26.0",
-    "babel-plugin-transform-runtime": "^6.23.0",
-    "babel-preset-env": "^1.7.0",
-    "babel-preset-es2015": "^6.24.1",
-    "coveralls": "^3.0.1",
-    "eslint": "^4.19.1",
-    "eslint-config-standard": "^12.0.0-alpha.0",
-    "eslint-plugin-import": "^2.12.0",
-    "eslint-plugin-node": "^6.0.1",
-    "eslint-plugin-promise": "^3.8.0",
-    "eslint-plugin-standard": "^3.1.0",
-    "eslint-plugin-vue": "^4.5.0",
-    "jest": "^23.1.0",
+    "babel-eslint": "^10.0.1",
+    "babel-jest": "^23.6.0",
+    "coveralls": "^3.0.2",
+    "eslint": "^5.9.0",
+    "eslint-config-standard": "^12.0.0",
+    "eslint-plugin-import": "^2.14.0",
+    "eslint-plugin-node": "^8.0.0",
+    "eslint-plugin-promise": "^4.0.1",
+    "eslint-plugin-standard": "^4.0.0",
+    "eslint-plugin-vue": "^4.7.1",
+    "jest": "^23.6.0",
     "jest-in-case": "^1.0.2",
-    "jest-serializer-vue": "^2.0.0",
-    "vee-validate": "^2.1.0-beta.1",
-    "vue-jest": "^2.6.0",
-    "vue-router": "^3.0.1",
+    "jest-serializer-vue": "^2.0.2",
+    "vee-validate": "^2.1.3",
+    "vue-jest": "^3.0.0",
+    "vue-router": "^3.0.2",
     "vuex": "^3.0.1"
   },
   "jest": {
diff --git a/src/index.js b/src/index.js
@@ -1,6 +1,8 @@
 import { createLocalVue, mount } from '@vue/test-utils'
 import Simulate from './Simulate'
-import { getQueriesForElement, fireEvent, wait, waitForElement } from 'dom-testing-library'
+import { getQueriesForElement, prettyDOM, wait } from 'dom-testing-library'
+
+const mountedWrappers = new Set()
 
 function render (TestComponent, { props = null, store = null, routes = null } = {}, configurationCb) {
   const localVue = createLocalVue()
@@ -28,17 +30,35 @@ function render (TestComponent, { props = null, store = null, routes = null } =
     router,
     store: vuexStore,
     propsData: { ...props },
-    attachToDocument: true
+    attachToDocument: true,
+    sync: false
   })
 
   return {
+    debug: () => console.log(prettyDOM(wrapper.element)),
     unmount: () => wrapper.destroy(),
     isUnmounted: () => wrapper.vm._isDestroyed,
     html: () => wrapper.html(),
-    updateProps: _ => wrapper.setProps(_),
+    updateProps: _ => {
+      wrapper.setProps(_)
+      return wait()
+    },
     updateState: _ => wrapper.setData(_),
     ...getQueriesForElement(wrapper.element)
   }
 }
 
-export { render, Simulate, fireEvent, wait, waitForElement }
+function cleanup () {
+  mountedWrappers.forEach(cleanupAtWrapper)
+}
+
+function cleanupAtWrapper (wrapper) {
+  if (wrapper.parentNode === document.body) {
+    document.body.removeChild(wrapper)
+  }
+  wrapper.destroy()
+  mountedWrappers.delete(wrapper)
+}
+
+export * from 'dom-testing-library'
+export { cleanup, render, Simulate }
diff --git a/tests/__mocks__/axios.js b/tests/__mocks__/axios.js
@@ -1,3 +1,3 @@
 module.exports = {
-  get: jest.fn(() => Promise.resolve({data: {}}))
+  get: jest.fn(() => Promise.resolve({ data: {} }))
 }
diff --git a/tests/__tests__/__snapshots__/fetch.js.snap b/tests/__tests__/__snapshots__/fetch.js.snap
@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Fetch makes an API call and displays the greeting when load-greeting is clicked 1`] = `
-<div>
-  <button data-testid="load-greeting">
+<div><button data-testid="load-greeting">
     Fetch
-  </button> <span data-testid="greeting-text">hello there</span> {{ data ? : null}
+  </button> <span data-testid="greeting-text">hello there</span>
+  {{ data ?  : null}
 </div>
 `;
diff --git a/tests/__tests__/components/EndToEnd.vue b/tests/__tests__/components/EndToEnd.vue
@@ -16,7 +16,7 @@ const fetchAMessage = () =>
     // of an async operation calling a callback at a non-deterministic time
     const randomTimeout = Math.floor(Math.random() * 100)
     setTimeout(() => {
-      resolve({returnedMessage: 'Hello World'})
+      resolve({ returnedMessage: 'Hello World' })
     }, randomTimeout)
   })
 
diff --git a/tests/__tests__/components/HelloWorld.vue b/tests/__tests__/components/HelloWorld.vue
@@ -0,0 +1,3 @@
+<template>
+  <div>Hello World!</div>
+</template>
diff --git a/tests/__tests__/components/Login.vue b/tests/__tests__/components/Login.vue
@@ -4,8 +4,8 @@
       <label for="username-input">Username</label>
       <input
         id="username-input"
-        data-testid="username-input"
         v-model="username"
+        data-testid="username-input"
         placeholder="Username..."
         name="username" >
       <label id="password-label">Password</label>
diff --git a/tests/__tests__/components/Router/LocationDisplay.vue b/tests/__tests__/components/Router/LocationDisplay.vue
@@ -4,7 +4,6 @@
 
 <script>
 export default {
-  
+
 }
 </script>
-
diff --git a/tests/__tests__/components/Validate.vue b/tests/__tests__/components/Validate.vue
@@ -1,18 +1,25 @@
 <template>
   <form>
-    <label for="username-input">Username</label>
+    <label
+      id="username-label"
+      for="username">Username</label>
+
     <input
       v-validate="'required|email'"
-      id="username-input"
       v-model="username"
       placeholder="Username..."
-      name="username" >
+      name="username"
+      aria-labelledby="username-label"
+    >
 
     <span
-      v-if="errors.has('username')"
+      v-show="errors.has('username')"
       data-testid="username-errors">{{ errors.first('username') }}</span>
 
-    <label id="password-label">Password</label>
+    <label
+      id="password-label"
+      for="password"
+    >Password</label>
     <input
       v-model="password"
       placeholder="Password..."
@@ -26,11 +33,9 @@
 
 <script>
 export default {
-  data () {
-    return {
-      username: '',
-      password: ''
-    }
-  }
+  data: () => ({
+    username: '',
+    password: ''
+  })
 }
 </script>
diff --git a/tests/__tests__/debug.js b/tests/__tests__/debug.js
@@ -0,0 +1,20 @@
+import HelloWorld from './components/HelloWorld'
+import { cleanup, render } from '../../src'
+
+beforeEach(() => {
+  jest.spyOn(console, 'log').mockImplementation(() => {})
+})
+
+afterEach(() => {
+  cleanup()
+  console.log.mockRestore()
+})
+
+test('debug pretty prints the container', () => {
+  const { debug } = render(HelloWorld)
+  debug()
+  expect(console.log).toHaveBeenCalledTimes(1)
+  expect(console.log).toHaveBeenCalledWith(
+    expect.stringContaining('Hello World')
+  )
+})
diff --git a/tests/__tests__/fetch.js b/tests/__tests__/fetch.js
@@ -5,11 +5,11 @@ import Fetch from './components/Fetch.vue'
 test('Fetch makes an API call and displays the greeting when load-greeting is clicked', async () => {
   axiosMock.get.mockImplementationOnce(() =>
     Promise.resolve({
-      data: {greeting: 'hello there'}
+      data: { greeting: 'hello there' }
     })
   )
 
-  const {html, getByText} = render(Fetch, { props: { url: '/greeting' } })
+  const { html, getByText } = render(Fetch, { props: { url: '/greeting' } })
 
   // Act
   Simulate.click(getByText('Fetch'))
diff --git a/tests/__tests__/form.js b/tests/__tests__/form.js
@@ -2,7 +2,7 @@ import { render, Simulate } from '../../src'
 import Login from './components/Login'
 
 test('login form submits', async () => {
-  const fakeUser = {username: 'jackiechan', password: 'hiya! 🥋'}
+  const fakeUser = { username: 'jackiechan', password: 'hiya! 🥋' }
   const handleSubmit = jest.fn()
   const { getByText, updateState } = render(
     Login, { props: { onSubmit: handleSubmit } }
diff --git a/tests/__tests__/number-display.js b/tests/__tests__/number-display.js
@@ -1,11 +1,13 @@
 import NumberDisplay from './components/NumberDisplay.vue'
-import { render } from '../../src'
+import { render, wait } from '../../src'
 
-test('calling render with the same component but different props does not remount', () => {
+test('calling render with the same component but different props does not remount', async () => {
   const { queryByTestId, updateProps } = render(NumberDisplay, { props: { number: 1 } })
   expect(queryByTestId('number-display').textContent).toBe('1')
 
   updateProps({ number: 2 })
+  await wait()
+
   expect(queryByTestId('number-display').textContent).toBe('2')
   expect(queryByTestId('instance-id').textContent).toBe('1')
 })
diff --git a/tests/__tests__/vue-router.js b/tests/__tests__/vue-router.js
@@ -2,19 +2,20 @@ import App from './components/Router/App.vue'
 import Home from './components/Router/Home.vue'
 import About from './components/Router/About.vue'
 
-import { render, Simulate } from '../../src'
+import { render, Simulate, wait } from '../../src'
 
 const routes = [
   { path: '/', component: Home },
   { path: '/about', component: About },
   { path: '*', redirect: '/' }
 ]
 
-test('full app rendering/navigating', () => {
+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'))
+  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')
 })
diff --git a/tests/__tests__/vuex.js b/tests/__tests__/vuex.js
@@ -1,41 +1,45 @@
 import VuexTest from './components/VuexTest'
-import { render, Simulate } from '../../src'
+import { render, Simulate, wait } from '../../src'
 
 const store = {
   state: {
     count: 0
   },
   actions: {
-    increment: ({commit, state}) => commit('SET_COUNT', state.count + 1),
-    decrement: ({commit, state}) => commit('SET_COUNT', state.count - 1)
+    increment: ({ commit, state }) => commit('SET_COUNT', state.count + 1),
+    decrement: ({ commit, state }) => commit('SET_COUNT', state.count - 1)
   },
   mutations: {
     SET_COUNT: (state, count) => { state.count = count }
   }
 }
 
-test('can render with vuex with defaults', () => {
-  const {getByTestId, getByText} = render(VuexTest, { store })
+test('can render with vuex with defaults', async () => {
+  const { getByTestId, getByText } = render(VuexTest, { store })
   Simulate.click(getByText('+'))
+  await wait()
   expect(getByTestId('count-value').textContent).toBe('1')
 })
 
-test('can render with vuex with custom initial state', () => {
+test('can render with vuex with custom initial state', async () => {
   store.state.count = 3
-  const {getByTestId, getByText} = render(VuexTest, { store })
+  const { getByTestId, getByText } = render(VuexTest, { store })
   Simulate.click(getByText('-'))
+  await wait()
   expect(getByTestId('count-value').textContent).toBe('2')
 })
 
-test('can render with vuex with custom store', () => {
+test('can render with vuex with custom store', async () => {
   // this is a silly store that can never be changed
   jest.spyOn(console, 'error').mockImplementation(() => {})
 
   const store = { state: { count: 1000 } }
-  const {getByTestId, getByText} = render(VuexTest, { store })
+  const { getByTestId, getByText } = render(VuexTest, { store })
   Simulate.click(getByText('+'))
+  await wait()
   expect(getByTestId('count-value').textContent).toBe('1000')
   Simulate.click(getByText('-'))
+  await wait()
   expect(getByTestId('count-value').textContent).toBe('1000')
 
   expect(console.error).toHaveBeenCalled()

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,3 @@`
`1`	`1`	`module.exports = {`
`2`		`- get: jest.fn(() => Promise.resolve({data: {}}))`
	`2`	`+ get: jest.fn(() => Promise.resolve({ data: {} }))`
`3`	`3`	`}`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+<template>`
	`2`	`+ <div>Hello World!</div>`
	`3`	`+</template>`
Original file line number	Diff line number	Diff line change
`@@ -4,7 +4,6 @@`
`4`	`4`
`5`	`5`	`<script>`
`6`	`6`	`export default {`
`7`		`-`
	`7`	`+`
`8`	`8`	`}`
`9`	`9`	`</script>`
`10`		`-`