Merge pull request #1 from testing-library/master

Update with remote origin

Author: mediafreakch

.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')

.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

README.md

@@ -143,8 +143,7 @@ bundled with Vue Testing Library.
 ## ESLint support
 
 If you want to lint test files that use Vue Testing Library, you can use the
-official plugin:
-[eslint-plugin-testing-library](https://github.com/Belco90/eslint-plugin-testing-library).
+official plugin: [eslint-plugin-testing-library][eslint-plugin-testing-library].
 
 ## License
 
@@ -191,6 +190,7 @@ official plugin:
 
 [docs]: https://testing-library.com/vue
 [docs-edit]: https://github.com/testing-library/testing-library-docs
+[eslint-plugin-testing-library]: https://github.com/testing-library/eslint-plugin-testing-library
 
 [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

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",

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/)

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)

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()
+})

src/__tests__/stopwatch.js

@@ -0,0 +1,16 @@
+import '@testing-library/jest-dom'
+import {render} from '@testing-library/vue'
+
+import About from './components/Router/About.vue'
+
+const routes = []
+test('uses require("vue-router").default when require("vue-router") is undefined (useful for mocha users)', () => {
+  // Test for fix https://github.com/testing-library/vue-testing-library/issues/119
+  jest.mock('vue-router', () => {
+    return undefined
+  })
+
+  expect(() => render(About, {routes})).toThrowError(
+    new TypeError("Cannot read property 'default' of undefined"),
+  )
+})

src/__tests__/vue-router-mocha.js

@@ -3,7 +3,7 @@ import {createLocalVue, mount} from '@vue/test-utils'
 import {
   getQueriesForElement,
   logDOM,
-  wait,
+  waitFor,
   fireEvent as dtlFireEvent,
 } from '@testing-library/dom'
 
@@ -36,7 +36,8 @@ function render(
   }
 
   if (routes) {
-    const VueRouter = require('vue-router')
+    const requiredRouter = require('vue-router')
+    const VueRouter = requiredRouter.default || requiredRouter
     localVue.use(VueRouter)
     router = new VueRouter({
       routes,
@@ -76,7 +77,7 @@ function render(
     emitted: () => wrapper.emitted(),
     updateProps: _ => {
       wrapper.setProps(_)
-      return wait()
+      return waitFor(() => {})
     },
     ...getQueriesForElement(baseElement),
   }
@@ -107,13 +108,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(() => {})
   }
 })