Merge branch 'master' into immutable-fireevent

Author: afontcu

package-lock.json

@@ -31,7 +31,7 @@
   "author": "Daniel Cook",
   "license": "MIT",
   "dependencies": {
-    "@testing-library/dom": "^5.6.0",
+    "@testing-library/dom": "^6.0.0",
     "@vue/test-utils": "^1.0.0-beta.29"
   },
   "devDependencies": {
@@ -55,17 +55,17 @@
     "eslint-plugin-promise": "^4.2.1",
     "eslint-plugin-standard": "^4.0.0",
     "eslint-plugin-vue": "^5.2.3",
-    "husky": "^3.0.2",
+    "husky": "^3.0.3",
     "jest": "^24.8.0",
     "jest-in-case": "^1.0.2",
     "jest-serializer-vue": "^2.0.2",
     "lint-staged": "^9.2.1",
     "prettier": "^1.18.2",
     "vee-validate": "^2.2.13",
     "vue": "^2.6.10",
-    "vue-i18n": "^8.12.0",
+    "vue-i18n": "^8.13.0",
     "vue-jest": "^3.0.4",
-    "vue-router": "^3.0.7",
+    "vue-router": "^3.1.2",
     "vue-template-compiler": "^2.6.10",
     "vuex": "^3.1.1"
   },

package.json

@@ -2,7 +2,7 @@ import { createLocalVue, mount } from '@vue/test-utils'
 
 import {
   getQueriesForElement,
-  prettyDOM,
+  logDOM,
   wait,
   fireEvent as dtlFireEvent
 } from '@testing-library/dom'
@@ -63,7 +63,7 @@ function render(
   return {
     container: wrapper.element.parentNode,
     baseElement: document.body,
-    debug: (el = wrapper.element) => console.log(prettyDOM(el)),
+    debug: (el = wrapper.element) => logDOM(el),
     unmount: () => wrapper.destroy(),
     isUnmounted: () => wrapper.vm._isDestroyed,
     html: () => wrapper.html(),

src/vue-testing-library.js

@@ -11,8 +11,7 @@ test('Review form submits', async () => {
   const fakeReview = {
     title: 'An Awesome Movie',
     review: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-    rating: '3',
-    recommend: true
+    rating: '3'
   }
 
   const {
@@ -46,7 +45,7 @@ test('Review form submits', async () => {
   expect(ratingSelect.checked).toBe(true)
   expect(initiallySelectedInput.checked).toBe(false)
 
-  // Get the Input element by its implicit ARIA role.
+  // Get the Input element by its implicit ARIA role
   const recommendInput = getByRole('checkbox')
 
   expect(recommendInput.checked).toBe(false)
@@ -56,13 +55,13 @@ test('Review 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 fireEvent a submit on the form itself
-  // then ensure that there's a submit button.
+  // then ensure that there's a submit button
   expect(submitButton).toBeEnabled()
   expect(submitButton).toHaveAttribute('type', 'submit')
 
   await fireEvent.click(submitButton)
 
-  // Assert event has been emitted.
-  expect(emitted().submit).toHaveLength(1)
-  expect(emitted().submit[0]).toEqual([fakeReview])
+  // Assert event has been emitted
+  expect(emitted()).toHaveProperty('submit')
+  expect(emitted().submit[0][0]).toMatchObject(fakeReview)
 })

tests/__tests__/form.js

@@ -12,7 +12,10 @@ test('renders button with text', () => {
     props: { text }
   })
 
-  expect(getByRole('button')).toHaveTextContent(text)
+  // Get the only element with a 'button' role
+  const button = getByRole('button')
+
+  expect(button).toHaveTextContent(text)
 })
 
 test('click event is emitted when button is clicked', async () => {
@@ -22,8 +25,10 @@ test('click event is emitted when button is clicked', async () => {
     props: { text }
   })
 
-  // Send a click event to the element with a 'button' role
+  // Send a click event
   await fireEvent.click(getByRole('button'))
 
-  expect(emitted().click).toHaveLength(1)
+  // Expect that the event emitted a "click" event. We should test for emitted
+  // events has they are part of the public API of the component
+  expect(emitted()).toHaveProperty('click')
 })