feat: update @testing-library/dom (#125)

BREAKING CHANGE: The latest version of DOM Testing Library has several breaking changes, so you will want to review its changelog to ensure you are unaffected.
Also, this release drops support for Node 8. Upgrade to Node 10 or greater.

Author: afontcu

Diff for: .prettierrc.js

@@ -1,11 +1 @@
-module.exports = {
-  printWidth: 80,
-  tabWidth: 2,
-  useTabs: false,
-  semi: false,
-  singleQuote: true,
-  trailingComma: 'all',
-  bracketSpacing: false,
-  jsxBracketSameLine: false,
-  proseWrap: 'always',
-}
+module.exports = require('kcd-scripts/prettier')

Diff for: .travis.yml

@@ -6,9 +6,9 @@ cache:
 notifications:
   email: false
 node_js:
-  - '8'
-  - '10'
-  - '12'
+  - 10.18
+  - 12
+  - node
 install: npm install
 script: npm run validate
 after_success: kcd-scripts travis-after-success

Diff for: package-lock.json

@@ -12,6 +12,9 @@
     "validate": "kcd-scripts validate",
     "setup": "npm install && npm run validate -s"
   },
+  "engines": {
+    "node": ">10.18"
+  },
   "files": [
     "dist",
     "cleanup-after-each.js"
@@ -37,27 +40,27 @@
   "author": "Daniel Cook",
   "license": "MIT",
   "dependencies": {
-    "@babel/runtime": "^7.8.4",
-    "@testing-library/dom": "^6.13.0",
+    "@babel/runtime": "^7.8.7",
+    "@testing-library/dom": "^7.0.2",
     "@types/testing-library__vue": "*",
-    "@vue/test-utils": "^1.0.0-beta.31"
+    "@vue/test-utils": "^1.0.0-beta.32"
   },
   "devDependencies": {
     "@babel/plugin-transform-runtime": "^7.8.3",
     "@testing-library/jest-dom": "^5.1.1",
     "axios": "^0.19.2",
-    "eslint-plugin-vue": "^6.2.1",
+    "eslint-plugin-vue": "^6.2.2",
     "jest-serializer-vue": "^2.0.2",
-    "kcd-scripts": "^5.3.0",
+    "kcd-scripts": "^5.4.0",
     "lodash.merge": "^4.6.2",
     "vee-validate": "^2.2.15",
     "vue": "^2.6.11",
-    "vue-i18n": "^8.15.4",
+    "vue-i18n": "^8.15.5",
     "vue-jest": "^4.0.0-beta.2",
     "vue-router": "^3.1.6",
     "vue-template-compiler": "^2.6.11",
-    "vuetify": "^2.2.15",
-    "vuex": "^3.1.2"
+    "vuetify": "^2.2.17",
+    "vuex": "^3.1.3"
   },
   "peerDependencies": {
     "vue": "^2.6.10",

Diff for: package.json

@@ -11,14 +11,12 @@ test('waits for the data to be loaded', async () => {
 
   // Following line reads as follows:
   // "Wait until element with text 'Loading...' is gone."
-  await waitForElementToBeRemoved(() => queryByText('Loading...'))
+  await waitForElementToBeRemoved(getByText('Loading...'))
   // It is equivalent to:
   //
-  // await wait(() => {
+  // await waitFor(() => {
   //   expect(queryByText('Loading...')).not.toBeInTheDocument()
   // })
-  //
-  // because `wait()` waits until the callback function passes or times out.
 
   // After 'Loading...' is gone, we can assert that fetched data is rendered.
   expect(queryByTestId('message')).toHaveTextContent(/Hello World/)

Diff for: src/__tests__/disappearance.js

@@ -159,13 +159,13 @@ test('triggers dblclick on doubleClick', async () => {
 
   const {getByRole} = render({
     render(h) {
-      return h('input', {
+      return h('button', {
         on: {dblclick: spy},
       })
     },
   })
 
-  const elem = getByRole('textbox')
+  const elem = getByRole('button')
 
   await fireEvent.doubleClick(elem)
   expect(spy).toHaveBeenCalledTimes(1)

Diff for: src/__tests__/fire-event.js

@@ -1,44 +1,53 @@
-import '@testing-library/jest-dom'
-import {render, wait, fireEvent} from '@testing-library/vue'
-import StopWatch from './components/StopWatch.vue'
-
-test('updates component state', async () => {
-  const {getByTestId, getByText} = render(StopWatch)
-
-  const startButton = getByText('Start')
-  const elapsedTime = getByTestId('elapsed')
-
-  // Assert initial state.
-  expect(elapsedTime).toHaveTextContent('0ms')
-  getByText('Start')
-
-  await fireEvent.click(startButton)
-
-  getByText('Stop')
-
-  // Wait for one tick of the event loop.
-  await wait()
-
-  // Stop the timer.
-  await fireEvent.click(startButton)
-
-  // We can't assert a specific amount of time. Instead, we assert that the
-  // content has changed.
-  expect(elapsedTime).not.toHaveTextContent('0ms')
-})
-
-test('unmounts a component', async () => {
-  jest.spyOn(console, 'error').mockImplementation(() => {})
-
-  const {unmount, isUnmounted, getByText} = render(StopWatch)
-  await fireEvent.click(getByText('Start'))
-
-  // Destroys a Vue component instance.
-  unmount()
-
-  expect(isUnmounted()).toBe(true)
-
-  await wait()
-
-  expect(console.error).not.toHaveBeenCalled()
-})
+import '@testing-library/jest-dom'
+import {render, waitFor, fireEvent} from '@testing-library/vue'
+import StopWatch from './components/StopWatch.vue'
+
+const sleep = ms => new Promise(resolve => setTimeout(resolve, ms))
+
+test('updates component state', async () => {
+  const {getByTestId, getByText} = render(StopWatch)
+
+  const startButton = getByText('Start')
+  const elapsedTime = getByTestId('elapsed')
+
+  // Assert initial state.
+  expect(elapsedTime).toHaveTextContent('0ms')
+  getByText('Start')
+
+  await fireEvent.click(startButton)
+
+  getByText('Stop')
+
+  // Wait for one tick of the event loop.
+  await waitFor(() => {
+    expect(elapsedTime).not.toHaveTextContent('0ms')
+  })
+  const timeBeforeStop = elapsedTime.textContent
+
+  // Stop the timer.
+  await fireEvent.click(startButton)
+
+  // Wait for a few milliseconds
+  await sleep(5)
+
+  // We can't assert a specific amount of time. Instead, we assert that the
+  // content has changed.
+  expect(elapsedTime).toHaveTextContent(timeBeforeStop)
+})
+
+test('unmounts a component', async () => {
+  jest.spyOn(console, 'error').mockImplementation(() => {})
+
+  const {unmount, isUnmounted, getByText} = render(StopWatch)
+  await fireEvent.click(getByText('Start'))
+
+  // Destroys a Vue component instance.
+  unmount()
+
+  expect(isUnmounted()).toBe(true)
+
+  // Wait for a few milliseconds
+  await sleep(5)
+
+  expect(console.error).not.toHaveBeenCalled()
+})

Diff for: src/__tests__/stopwatch.js

@@ -3,7 +3,7 @@ import {createLocalVue, mount} from '@vue/test-utils'
 import {
   getQueriesForElement,
   logDOM,
-  wait,
+  waitFor,
   fireEvent as dtlFireEvent,
 } from '@testing-library/dom'
 
@@ -76,7 +76,7 @@ function render(
     emitted: () => wrapper.emitted(),
     updateProps: _ => {
       wrapper.setProps(_)
-      return wait()
+      return waitFor(() => {})
     },
     ...getQueriesForElement(baseElement),
   }
@@ -107,13 +107,13 @@ function cleanupAtWrapper(wrapper) {
 // More info: https://vuejs.org/v2/guide/reactivity.html#Async-Update-Queue
 async function fireEvent(...args) {
   dtlFireEvent(...args)
-  await wait()
+  await waitFor(() => {})
 }
 
 Object.keys(dtlFireEvent).forEach(key => {
   fireEvent[key] = async (...args) => {
     dtlFireEvent[key](...args)
-    await wait()
+    await waitFor(() => {})
   }
 })