From ebe6f6e656e9bdd3a32d4affabe4131f070e1a18 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Fontcuberta?= <afontcu@gmail.com>
Date: Mon, 10 Jun 2019 20:00:00 +0200
Subject: [PATCH 1/9] Update DOM Testing Library

---
 package-lock.json | 24 +++++++++++++++++++-----
 package.json      |  2 +-
 2 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 2c6f66cb..0e3aa9e2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1491,12 +1491,13 @@
       "integrity": "sha512-vTCdPp/T/Q3oSqwHmZ5Kpa9oI7iLtGl3RQaA/NyLHikvcrPxACkkKVr/XzkSPJWXHRhKGzVvb0urJsbMlRxi1Q=="
     },
     "@testing-library/dom": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-5.0.1.tgz",
-      "integrity": "sha512-HmyN4b/PmSaSB1ku0tWjgnTtyrwNBXEpp44wgfNaDhyj6IJTCWp1GAf4AANoLGItgMsYjepwWOdMyuJ/8iyStQ==",
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-5.2.0.tgz",
+      "integrity": "sha512-nFaZes/bzDfMqwZpQXdiPyj3WXU16FYf5k5NCFu/qJM4JdRJLHEtSRYtrETmk7nCf+qLVoHCqRduGi/4KE83Gw==",
       "requires": {
         "@babel/runtime": "^7.4.5",
         "@sheerun/mutationobserver-shim": "^0.3.2",
+        "aria-query": "3.0.0",
         "pretty-format": "^24.8.0",
         "wait-for-expect": "^1.2.0"
       }
@@ -1721,6 +1722,15 @@
         "sprintf-js": "~1.0.2"
       }
     },
+    "aria-query": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-3.0.0.tgz",
+      "integrity": "sha1-ZbP8wcoRVajJrmTW7uKX8V1RM8w=",
+      "requires": {
+        "ast-types-flow": "0.0.7",
+        "commander": "^2.11.0"
+      }
+    },
     "arr-diff": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-4.0.0.tgz",
@@ -1803,6 +1813,11 @@
       "integrity": "sha1-WWZ/QfrdTyDMvCu5a41Pf3jsA2c=",
       "dev": true
     },
+    "ast-types-flow": {
+      "version": "0.0.7",
+      "resolved": "https://registry.npmjs.org/ast-types-flow/-/ast-types-flow-0.0.7.tgz",
+      "integrity": "sha1-9wtzXGvKGlycItmCw+Oef+ujva0="
+    },
     "astral-regex": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/astral-regex/-/astral-regex-1.0.0.tgz",
@@ -2541,8 +2556,7 @@
     "commander": {
       "version": "2.19.0",
       "resolved": "https://registry.npmjs.org/commander/-/commander-2.19.0.tgz",
-      "integrity": "sha512-6tvAOO+D6OENvRAh524Dh9jcfKTYDQAqvqezbCW82xj5X0pSrcpxtvRKHLG0yBY6SD7PSDrJaj+0AiOcKVd1Xg==",
-      "dev": true
+      "integrity": "sha512-6tvAOO+D6OENvRAh524Dh9jcfKTYDQAqvqezbCW82xj5X0pSrcpxtvRKHLG0yBY6SD7PSDrJaj+0AiOcKVd1Xg=="
     },
     "component-emitter": {
       "version": "1.3.0",
diff --git a/package.json b/package.json
index 982c50f2..e69913f4 100644
--- a/package.json
+++ b/package.json
@@ -31,7 +31,7 @@
   "author": "Daniel Cook",
   "license": "MIT",
   "dependencies": {
-    "@testing-library/dom": "^5.0.1",
+    "@testing-library/dom": "^5.2.0",
     "@vue/test-utils": "^1.0.0-beta.29",
     "vue": "^2.6.10",
     "vue-template-compiler": "^2.6.10"

From 069cef6575b050d076a3f606d0f93d6ef9853eb0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Fontcuberta?= <afontcu@gmail.com>
Date: Mon, 10 Jun 2019 20:00:17 +0200
Subject: [PATCH 2/9] Remove unused files

---
 .../__tests__/components/queries/AltText.vue  |  3 ---
 .../components/queries/Attribute.vue          |  5 -----
 tests/__tests__/components/queries/Empty.vue  |  3 ---
 .../components/queries/GetByAltText.vue       |  6 -----
 .../components/queries/JestHelpers.vue        |  3 ---
 .../components/queries/LabelText.vue          | 13 -----------
 .../queries/LabelWithNoFormControl.vue        |  3 ---
 .../components/queries/Placeholder.vue        |  3 ---
 .../components/queries/TotallyEmptyLabel.vue  |  3 ---
 tests/__tests__/components/queries/index.js   | 21 ------------------
 .../programmatic-routing/components/About.vue |  3 ---
 .../programmatic-routing/components/App.vue   | 12 ----------
 .../programmatic-routing/components/Home.vue  | 16 --------------
 .../components/LocationDisplay.vue            |  3 ---
 .../components/NoMatch.vue                    |  3 ---
 .../router/programmatic-routing/index.js      | 22 -------------------
 16 files changed, 122 deletions(-)
 delete mode 100644 tests/__tests__/components/queries/AltText.vue
 delete mode 100644 tests/__tests__/components/queries/Attribute.vue
 delete mode 100644 tests/__tests__/components/queries/Empty.vue
 delete mode 100644 tests/__tests__/components/queries/GetByAltText.vue
 delete mode 100644 tests/__tests__/components/queries/JestHelpers.vue
 delete mode 100644 tests/__tests__/components/queries/LabelText.vue
 delete mode 100644 tests/__tests__/components/queries/LabelWithNoFormControl.vue
 delete mode 100644 tests/__tests__/components/queries/Placeholder.vue
 delete mode 100644 tests/__tests__/components/queries/TotallyEmptyLabel.vue
 delete mode 100644 tests/__tests__/components/queries/index.js
 delete mode 100644 tests/__tests__/router/programmatic-routing/components/About.vue
 delete mode 100644 tests/__tests__/router/programmatic-routing/components/App.vue
 delete mode 100644 tests/__tests__/router/programmatic-routing/components/Home.vue
 delete mode 100644 tests/__tests__/router/programmatic-routing/components/LocationDisplay.vue
 delete mode 100644 tests/__tests__/router/programmatic-routing/components/NoMatch.vue
 delete mode 100644 tests/__tests__/router/programmatic-routing/index.js

diff --git a/tests/__tests__/components/queries/AltText.vue b/tests/__tests__/components/queries/AltText.vue
deleted file mode 100644
index 8e08c4cd..00000000
--- a/tests/__tests__/components/queries/AltText.vue
+++ /dev/null
@@ -1,3 +0,0 @@
-<template>
-  <span data-testid="count-value">2</span>
-</template>
diff --git a/tests/__tests__/components/queries/Attribute.vue b/tests/__tests__/components/queries/Attribute.vue
deleted file mode 100644
index 1197b8fb..00000000
--- a/tests/__tests__/components/queries/Attribute.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-  <button data-testid="ok-button" type="submit" disabled>
-    OK
-  </button>
-</template>
diff --git a/tests/__tests__/components/queries/Empty.vue b/tests/__tests__/components/queries/Empty.vue
deleted file mode 100644
index 04d85e1b..00000000
--- a/tests/__tests__/components/queries/Empty.vue
+++ /dev/null
@@ -1,3 +0,0 @@
-<template>
-  <div />
-</template>
diff --git a/tests/__tests__/components/queries/GetByAltText.vue b/tests/__tests__/components/queries/GetByAltText.vue
deleted file mode 100644
index 33d3f365..00000000
--- a/tests/__tests__/components/queries/GetByAltText.vue
+++ /dev/null
@@ -1,6 +0,0 @@
-<template>
-  <div>
-    <input data-info="no alt here" />
-    <img alt="finding nemo poster" src="/finding-nemo.png" />
-  </div>
-</template>
diff --git a/tests/__tests__/components/queries/JestHelpers.vue b/tests/__tests__/components/queries/JestHelpers.vue
deleted file mode 100644
index 8e08c4cd..00000000
--- a/tests/__tests__/components/queries/JestHelpers.vue
+++ /dev/null
@@ -1,3 +0,0 @@
-<template>
-  <span data-testid="count-value">2</span>
-</template>
diff --git a/tests/__tests__/components/queries/LabelText.vue b/tests/__tests__/components/queries/LabelText.vue
deleted file mode 100644
index d51363fd..00000000
--- a/tests/__tests__/components/queries/LabelText.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<template>
-  <div>
-    <label> 1st<input id="first-id" /> </label>
-    <div>
-      <label for="second-id">2nd</label>
-      <input id="second-id" />
-    </div>
-    <div>
-      <label id="third-label">3rd</label>
-      <input id="third-id" aria-labelledby="third-label" />
-    </div>
-  </div>
-</template>
diff --git a/tests/__tests__/components/queries/LabelWithNoFormControl.vue b/tests/__tests__/components/queries/LabelWithNoFormControl.vue
deleted file mode 100644
index 9808ee2f..00000000
--- a/tests/__tests__/components/queries/LabelWithNoFormControl.vue
+++ /dev/null
@@ -1,3 +0,0 @@
-<template>
-  <label>All alone</label>
-</template>
diff --git a/tests/__tests__/components/queries/Placeholder.vue b/tests/__tests__/components/queries/Placeholder.vue
deleted file mode 100644
index 9e92cb1a..00000000
--- a/tests/__tests__/components/queries/Placeholder.vue
+++ /dev/null
@@ -1,3 +0,0 @@
-<template>
-  <input id="username-id" placeholder="username" />
-</template>
diff --git a/tests/__tests__/components/queries/TotallyEmptyLabel.vue b/tests/__tests__/components/queries/TotallyEmptyLabel.vue
deleted file mode 100644
index 4a50296f..00000000
--- a/tests/__tests__/components/queries/TotallyEmptyLabel.vue
+++ /dev/null
@@ -1,3 +0,0 @@
-<template>
-  <label />
-</template>
diff --git a/tests/__tests__/components/queries/index.js b/tests/__tests__/components/queries/index.js
deleted file mode 100644
index 81c1cf97..00000000
--- a/tests/__tests__/components/queries/index.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import AltText from './AltText'
-import Attribute from './Attribute'
-import Empty from './Empty'
-import LabelText from './LabelText'
-import Placeholder from './Placeholder'
-import TotallyEmptyLabel from './TotallyEmptyLabel'
-import LabelWithNoFormControl from './LabelWithNoFormControl'
-import GetByAltText from './GetByAltText'
-import JestHelpers from './JestHelpers'
-
-export {
-  AltText,
-  Attribute,
-  Empty,
-  GetByAltText,
-  LabelText,
-  JestHelpers,
-  Placeholder,
-  TotallyEmptyLabel,
-  LabelWithNoFormControl
-}
diff --git a/tests/__tests__/router/programmatic-routing/components/About.vue b/tests/__tests__/router/programmatic-routing/components/About.vue
deleted file mode 100644
index f66ade72..00000000
--- a/tests/__tests__/router/programmatic-routing/components/About.vue
+++ /dev/null
@@ -1,3 +0,0 @@
-<template>
-  <div>You are on the about page</div>
-</template>
diff --git a/tests/__tests__/router/programmatic-routing/components/App.vue b/tests/__tests__/router/programmatic-routing/components/App.vue
deleted file mode 100644
index c8451c7a..00000000
--- a/tests/__tests__/router/programmatic-routing/components/App.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<template>
-  <div>
-    <RouterLink to="/" data-testid="home-link">
-      Home
-    </RouterLink>
-    <RouterLink to="/about" data-testid="about-link">
-      About
-    </RouterLink>
-    <RouterView />
-    <div data-testid="location-display">{{ $route.fullPath }}</div>
-  </div>
-</template>
diff --git a/tests/__tests__/router/programmatic-routing/components/Home.vue b/tests/__tests__/router/programmatic-routing/components/Home.vue
deleted file mode 100644
index a53fbda1..00000000
--- a/tests/__tests__/router/programmatic-routing/components/Home.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<template>
-  <div>
-    <div>You are home</div>
-    <button data-testid="go-to-about" @click="goToAbout">About</button>
-  </div>
-</template>
-
-<script>
-export default {
-  methods: {
-    goToAbout() {
-      this.$router.push('/about')
-    }
-  }
-}
-</script>
diff --git a/tests/__tests__/router/programmatic-routing/components/LocationDisplay.vue b/tests/__tests__/router/programmatic-routing/components/LocationDisplay.vue
deleted file mode 100644
index eecf2959..00000000
--- a/tests/__tests__/router/programmatic-routing/components/LocationDisplay.vue
+++ /dev/null
@@ -1,3 +0,0 @@
-<template>
-  <div data-testid="location-display">{{ $route.fullPath }}</div>
-</template>
diff --git a/tests/__tests__/router/programmatic-routing/components/NoMatch.vue b/tests/__tests__/router/programmatic-routing/components/NoMatch.vue
deleted file mode 100644
index 8118731c..00000000
--- a/tests/__tests__/router/programmatic-routing/components/NoMatch.vue
+++ /dev/null
@@ -1,3 +0,0 @@
-<template functional>
-  <div>No match</div>
-</template>
diff --git a/tests/__tests__/router/programmatic-routing/index.js b/tests/__tests__/router/programmatic-routing/index.js
deleted file mode 100644
index 7396f3ff..00000000
--- a/tests/__tests__/router/programmatic-routing/index.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import 'jest-dom/extend-expect'
-
-import App from './components/App.vue'
-import Home from './components/Home.vue'
-import About from './components/About.vue'
-
-import { render, fireEvent } from '@testing-library/vue'
-
-const routes = [
-  { path: '/', component: Home },
-  { path: '/about', component: About },
-  { path: '*', redirect: '/about' }
-]
-
-test('navigating programmatically', async () => {
-  const { queryByTestId } = render(App, { routes })
-
-  expect(queryByTestId('location-display')).toHaveTextContent('/')
-  await fireEvent.click(queryByTestId('go-to-about'))
-
-  expect(queryByTestId('location-display')).toHaveTextContent('/about')
-})

From 290e2025793f6ab298969ea60c3645b6233d1d36 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Fontcuberta?= <afontcu@gmail.com>
Date: Mon, 10 Jun 2019 20:00:49 +0200
Subject: [PATCH 3/9] Remove unused properties

---
 tests/__tests__/components/Button.vue | 16 ++--------------
 1 file changed, 2 insertions(+), 14 deletions(-)

diff --git a/tests/__tests__/components/Button.vue b/tests/__tests__/components/Button.vue
index 7b9ea7ee..cfbf37f1 100644
--- a/tests/__tests__/components/Button.vue
+++ b/tests/__tests__/components/Button.vue
@@ -1,5 +1,5 @@
 <template>
-  <button :class="typeClass" @click="handleClick">{{ text }}</button>
+  <button @click="handleClick">{{ text }}</button>
 </template>
 
 <script>
@@ -7,19 +7,7 @@ export default {
   props: {
     text: {
       type: String,
-      default: ''
-    },
-    type: {
-      validator: value => ['primary', 'secondary'].includes(value),
-      default: 'primary'
-    }
-  },
-  computed: {
-    typeClass: function() {
-      if (this.type) {
-        return `button button--${this.type}`
-      }
-      return 'button'
+      required: true
     }
   },
   methods: {

From 6739874379beb5f5e0c8919ba4dced3970183d50 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Fontcuberta?= <afontcu@gmail.com>
Date: Mon, 10 Jun 2019 20:01:43 +0200
Subject: [PATCH 4/9] Add explanations

---
 tests/__tests__/simple-button.js   | 23 +++++++++++++++--------
 tests/__tests__/stopwatch.js       | 13 +++++++++++++
 tests/__tests__/validate-plugin.js | 16 +++++++++++++---
 tests/__tests__/vue-router.js      |  6 +++++-
 4 files changed, 46 insertions(+), 12 deletions(-)

diff --git a/tests/__tests__/simple-button.js b/tests/__tests__/simple-button.js
index 7112dbaf..27da8ac2 100644
--- a/tests/__tests__/simple-button.js
+++ b/tests/__tests__/simple-button.js
@@ -1,22 +1,29 @@
 import { render, cleanup, fireEvent } from '@testing-library/vue'
-import SimpleButton from './components/Button'
+import Button from './components/Button'
+import 'jest-dom/extend-expect'
 
 afterEach(cleanup)
 
 test('renders button with text', () => {
-  const buttonText = "Click me; I'm sick"
-  const { getByText } = render(SimpleButton, {
-    props: { text: buttonText }
+  const text = "Click me; I'm sick"
+
+  // Set the prop value by using the second argument of `render()`
+  const { getByRole } = render(Button, {
+    props: { text }
   })
 
-  getByText(buttonText)
+  expect(getByRole('button')).toHaveTextContent(text)
 })
 
-test('click event is emitted when button is clicked', () => {
+test('click event is emitted when button is clicked', async () => {
   const text = 'Click me'
-  const { getByText, emitted } = render(SimpleButton, {
+
+  const { getByRole, emitted } = render(Button, {
     props: { text }
   })
-  fireEvent.click(getByText(text))
+
+  // Send a click event to the element with a 'button' role
+  await fireEvent.click(getByRole('button'))
+
   expect(emitted().click).toHaveLength(1)
 })
diff --git a/tests/__tests__/stopwatch.js b/tests/__tests__/stopwatch.js
index 363f860d..505f4ce8 100644
--- a/tests/__tests__/stopwatch.js
+++ b/tests/__tests__/stopwatch.js
@@ -10,10 +10,13 @@ test('unmounts a component', async () => {
   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()
 })
 
@@ -23,11 +26,21 @@ test('updates component state', async () => {
   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')
 })
diff --git a/tests/__tests__/validate-plugin.js b/tests/__tests__/validate-plugin.js
index 9b933a94..d562f20a 100644
--- a/tests/__tests__/validate-plugin.js
+++ b/tests/__tests__/validate-plugin.js
@@ -5,14 +5,24 @@ import { render, fireEvent } from '@testing-library/vue'
 import Validate from './components/Validate'
 
 test('can validate using plugin', async () => {
-  const { getByPlaceholderText, queryByTestId } = render(Validate, {}, vue =>
-    vue.use(VeeValidate, { events: 'blur' })
+  // The third argument of `render` is a callback function that receives the
+  // Vue instance as a parameter. This way, we can register plugins such as
+  // VeeValidate.
+  const { getByPlaceholderText, queryByTestId, getByTestId } = render(
+    Validate,
+    {},
+    vue => vue.use(VeeValidate, { events: 'blur' })
   )
 
+  // Assert error messages are not in the DOM when rendering the component.
+  expect(queryByTestId('username-errors')).toBeNull()
+
   const usernameInput = getByPlaceholderText('Username...')
   await fireEvent.touch(usernameInput)
 
-  expect(queryByTestId('username-errors')).toHaveTextContent(
+  // After "touching" the input (focusing and blurring), validation error
+  // should appear.
+  expect(getByTestId('username-errors')).toHaveTextContent(
     'The username field is required.'
   )
 })
diff --git a/tests/__tests__/vue-router.js b/tests/__tests__/vue-router.js
index 76fd0dee..e4509796 100644
--- a/tests/__tests__/vue-router.js
+++ b/tests/__tests__/vue-router.js
@@ -15,16 +15,20 @@ const routes = [
 afterEach(cleanup)
 
 test('full app rendering/navigating', async () => {
+  // Notice how we pass a `routes` object to our render function.
   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')).toHaveTextContent('/')
+
   await fireEvent.click(queryByTestId('about-link'))
 
   expect(queryByTestId('location-display')).toHaveTextContent('/about')
 })
 
 test('setting initial route', () => {
+  // The callback function receives three parameters: the Vue instance where
+  // the component is mounted, the store instance (if any) and the router
+  // object.
   const { queryByTestId } = render(App, { routes }, (vue, store, router) => {
     router.push('/about')
   })

From 63b6f3fcae5f336f71771ed5864e2b66c28a4e51 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Fontcuberta?= <afontcu@gmail.com>
Date: Mon, 10 Jun 2019 20:02:12 +0200
Subject: [PATCH 5/9] Make use of new *byRole capabilities

---
 tests/__tests__/components/Validate.vue | 2 +-
 tests/__tests__/form.js                 | 5 +++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/tests/__tests__/components/Validate.vue b/tests/__tests__/components/Validate.vue
index 512dd380..6a4fe9df 100644
--- a/tests/__tests__/components/Validate.vue
+++ b/tests/__tests__/components/Validate.vue
@@ -10,7 +10,7 @@
       aria-labelledby="username-label"
     />
 
-    <span v-show="errors.has('username')" data-testid="username-errors">{{
+    <span v-if="errors.has('username')" data-testid="username-errors">{{
       errors.first('username')
     }}</span>
 
diff --git a/tests/__tests__/form.js b/tests/__tests__/form.js
index 5d120c3d..912e7d08 100644
--- a/tests/__tests__/form.js
+++ b/tests/__tests__/form.js
@@ -14,7 +14,7 @@ test('Review form submits', async () => {
   const {
     getByLabelText,
     getByText,
-    getByTestId,
+    getByRole,
     getByDisplayValue,
     getByPlaceholderText,
     emitted
@@ -44,7 +44,8 @@ test('Review form submits', async () => {
   const genreSelect = getByDisplayValue('Comedy')
   await fireEvent.update(genreSelect, fakeReview.genre)
 
-  const recommendInput = getByTestId('recommend-checkbox')
+  // Get the Input element by its implicit ARIA role.
+  const recommendInput = getByRole('checkbox')
   await fireEvent.update(recommendInput, fakeReview.recommend)
 
   // NOTE: in jsdom, it's not possible to trigger a form submission

From 343ccdf74ac932c0a83ed13825b6da8f7b3c24de Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Fontcuberta?= <afontcu@gmail.com>
Date: Mon, 10 Jun 2019 20:02:53 +0200
Subject: [PATCH 6/9] Rename fetch -> axios-mock

---
 .../__snapshots__/axios-mock.js.snap          |  9 +++++++
 tests/__tests__/__snapshots__/fetch.js.snap   |  9 -------
 tests/__tests__/axios-mock.js                 | 27 +++++++++++++++++++
 tests/__tests__/fetch.js                      | 22 ---------------
 4 files changed, 36 insertions(+), 31 deletions(-)
 create mode 100644 tests/__tests__/__snapshots__/axios-mock.js.snap
 delete mode 100644 tests/__tests__/__snapshots__/fetch.js.snap
 create mode 100644 tests/__tests__/axios-mock.js
 delete mode 100644 tests/__tests__/fetch.js

diff --git a/tests/__tests__/__snapshots__/axios-mock.js.snap b/tests/__tests__/__snapshots__/axios-mock.js.snap
new file mode 100644
index 00000000..8083a688
--- /dev/null
+++ b/tests/__tests__/__snapshots__/axios-mock.js.snap
@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`makes an API call and displays the greeting when load-greeting is clicked 1`] = `
+<div><button>
+    Fetch
+  </button> <span>
+    hello there
+  </span></div>
+`;
diff --git a/tests/__tests__/__snapshots__/fetch.js.snap b/tests/__tests__/__snapshots__/fetch.js.snap
deleted file mode 100644
index b2894825..00000000
--- a/tests/__tests__/__snapshots__/fetch.js.snap
+++ /dev/null
@@ -1,9 +0,0 @@
-// 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">
-    Fetch
-  </button> <span data-testid="greeting-text">
-    hello there
-  </span></div>
-`;
diff --git a/tests/__tests__/axios-mock.js b/tests/__tests__/axios-mock.js
new file mode 100644
index 00000000..dd62a910
--- /dev/null
+++ b/tests/__tests__/axios-mock.js
@@ -0,0 +1,27 @@
+import axiosMock from 'axios'
+import { render, fireEvent } from '@testing-library/vue'
+import Component from './components/Fetch.vue'
+import 'jest-dom/extend-expect'
+
+test('makes an API call and displays the greeting when load-greeting is clicked', async () => {
+  axiosMock.get.mockImplementationOnce(() =>
+    Promise.resolve({
+      data: { greeting: 'hello there' }
+    })
+  )
+
+  const { html, getByText } = render(Component, { props: { url: '/greeting' } })
+
+  // Act
+  await fireEvent.click(getByText('Fetch'))
+
+  expect(axiosMock.get).toHaveBeenCalledTimes(1)
+  expect(axiosMock.get).toHaveBeenCalledWith('/greeting')
+  getByText('hello there')
+
+  // You can render component snapshots by using html(). However, bear in mind
+  // that Snapshot Testing should not be treated as a replacement for regular
+  // tests.
+  // More about the topic: https://twitter.com/searls/status/919594505938112512
+  expect(html()).toMatchSnapshot()
+})
diff --git a/tests/__tests__/fetch.js b/tests/__tests__/fetch.js
deleted file mode 100644
index 0da14cae..00000000
--- a/tests/__tests__/fetch.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import axiosMock from 'axios'
-import { render, fireEvent } from '@testing-library/vue'
-import Fetch from './components/Fetch.vue'
-import 'jest-dom/extend-expect'
-
-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' }
-    })
-  )
-
-  const { html, getByText } = render(Fetch, { propsData: { url: '/greeting' } })
-
-  // Act
-  await fireEvent.click(getByText('Fetch'))
-
-  expect(axiosMock.get).toHaveBeenCalledTimes(1)
-  expect(axiosMock.get).toHaveBeenCalledWith('/greeting')
-  expect(getByText('hello there')).toHaveTextContent('hello there')
-  expect(html()).toMatchSnapshot()
-})

From 5d2a434488bc9ed0199ebefefc508ec0f0a7cfd1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Fontcuberta?= <afontcu@gmail.com>
Date: Mon, 10 Jun 2019 20:03:22 +0200
Subject: [PATCH 7/9] Rename end-to-end -> disappearance

---
 .../{EndToEnd.vue => Disappearance.vue}       | 11 ++++----
 tests/__tests__/disappearance.js              | 28 +++++++++++++++++++
 tests/__tests__/end-to-end.js                 | 11 --------
 3 files changed, 33 insertions(+), 17 deletions(-)
 rename tests/__tests__/components/{EndToEnd.vue => Disappearance.vue} (76%)
 create mode 100644 tests/__tests__/disappearance.js
 delete mode 100644 tests/__tests__/end-to-end.js

diff --git a/tests/__tests__/components/EndToEnd.vue b/tests/__tests__/components/Disappearance.vue
similarity index 76%
rename from tests/__tests__/components/EndToEnd.vue
rename to tests/__tests__/components/Disappearance.vue
index 7f138bae..0a2baa25 100644
--- a/tests/__tests__/components/EndToEnd.vue
+++ b/tests/__tests__/components/Disappearance.vue
@@ -1,10 +1,8 @@
 <template>
-  <div>
-    <div v-if="loading">Loading...</div>
-    <div v-else data-testid="message">
-      Loaded this message: {{ data.returnedMessage }}
-    </div>
-  </div>
+  <p v-if="loading">Loading...</p>
+  <p v-else data-testid="message">
+    Loaded this message: {{ data.returnedMessage }}
+  </p>
 </template>
 
 <script>
@@ -13,6 +11,7 @@ const fetchAMessage = () =>
     // 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(() => {
       resolve({ returnedMessage: 'Hello World' })
     }, randomTimeout)
diff --git a/tests/__tests__/disappearance.js b/tests/__tests__/disappearance.js
new file mode 100644
index 00000000..7fcf4f4a
--- /dev/null
+++ b/tests/__tests__/disappearance.js
@@ -0,0 +1,28 @@
+import { render, waitForElementToBeRemoved } from '@testing-library/vue'
+import Disappearance from './components/Disappearance'
+import 'jest-dom/extend-expect'
+
+test('it waits for the data to be loaded', async () => {
+  const { getByText, queryByText, queryByTestId } = render(Disappearance)
+
+  // Assert initial state
+  getByText('Loading...')
+  expect(queryByText(/Loaded this message/)).not.toBeInTheDocument()
+
+  // Line reads as follows "Wait until element with test 'Loading...' is gone."
+  await waitForElementToBeRemoved(() => queryByText('Loading...'))
+  // It is equivalent to:
+  //
+  // await wait(() => {
+  //   expect(queryByText('Loading...')).not.toBeInTheDocument()
+  // })
+  //
+  // `wait()` waits until the callback function passes or times out.
+
+  // After 'Loading...' element is gone, we can assert that fetched data is
+  // rendered.
+  expect(queryByTestId('message')).toHaveTextContent(/Hello World/)
+
+  // Read more about async utilities:
+  // https://testing-library.com/docs/dom-testing-library/api-async
+})
diff --git a/tests/__tests__/end-to-end.js b/tests/__tests__/end-to-end.js
deleted file mode 100644
index 16a8f158..00000000
--- a/tests/__tests__/end-to-end.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import { render, wait } from '@testing-library/vue'
-import EndToEnd from './components/EndToEnd'
-
-test('it waits for the data to be loaded', async () => {
-  const { queryByText, queryByTestId } = render(EndToEnd)
-
-  expect(queryByText('Loading...')).toBeTruthy()
-
-  await wait(() => expect(queryByText('Loading...')).toBeNull())
-  expect(queryByTestId('message').textContent).toMatch(/Hello World/)
-})

From 1faf4db6aba32c69ff3c11b32904ecc1df7076bd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Fontcuberta?= <afontcu@gmail.com>
Date: Mon, 10 Jun 2019 20:03:51 +0200
Subject: [PATCH 8/9] Rename number-display -> update-props

---
 tests/__tests__/number-display.js | 15 ---------------
 tests/__tests__/update-props.js   | 19 +++++++++++++++++++
 2 files changed, 19 insertions(+), 15 deletions(-)
 delete mode 100644 tests/__tests__/number-display.js
 create mode 100644 tests/__tests__/update-props.js

diff --git a/tests/__tests__/number-display.js b/tests/__tests__/number-display.js
deleted file mode 100644
index 224297aa..00000000
--- a/tests/__tests__/number-display.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import NumberDisplay from './components/NumberDisplay.vue'
-import { render } from '@testing-library/vue'
-import 'jest-dom/extend-expect'
-
-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')).toHaveTextContent('1')
-
-  await updateProps({ number: 2 })
-
-  expect(queryByTestId('number-display')).toHaveTextContent('2')
-  expect(queryByTestId('instance-id')).toHaveTextContent('1')
-})
diff --git a/tests/__tests__/update-props.js b/tests/__tests__/update-props.js
new file mode 100644
index 00000000..a732ce89
--- /dev/null
+++ b/tests/__tests__/update-props.js
@@ -0,0 +1,19 @@
+import NumberDisplay from './components/NumberDisplay.vue'
+import { render } from '@testing-library/vue'
+import 'jest-dom/extend-expect'
+
+test('calling render with the same component but different props does not remount', async () => {
+  const { getByTestId, updateProps } = render(NumberDisplay, {
+    props: { number: 1 }
+  })
+
+  expect(getByTestId('number-display')).toHaveTextContent('1')
+
+  await updateProps({ number: 2 })
+
+  expect(getByTestId('number-display')).toHaveTextContent('2')
+
+  // Assert that, even after updating props, the component hasn't remounted,
+  // meaning we are testing the same component instance we rendered initially.
+  expect(getByTestId('instance-id')).toHaveTextContent('1')
+})

From 3d09b68c7c4bbf0b44b2d405bb3c21420a0f8c2d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Fontcuberta?= <afontcu@gmail.com>
Date: Mon, 10 Jun 2019 20:04:03 +0200
Subject: [PATCH 9/9] Remove unused attributes

---
 tests/__tests__/components/Fetch.vue     | 4 ++--
 tests/__tests__/components/Form.vue      | 1 -
 tests/__tests__/components/StopWatch.vue | 2 +-
 3 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/tests/__tests__/components/Fetch.vue b/tests/__tests__/components/Fetch.vue
index 2092a689..4d443aaf 100644
--- a/tests/__tests__/components/Fetch.vue
+++ b/tests/__tests__/components/Fetch.vue
@@ -1,9 +1,9 @@
 <template>
   <div>
-    <button data-testid="load-greeting" @click="fetch">
+    <button @click="fetch">
       Fetch
     </button>
-    <span v-if="data" data-testid="greeting-text">
+    <span v-if="data">
       {{ data.greeting }}
     </span>
   </div>
diff --git a/tests/__tests__/components/Form.vue b/tests/__tests__/components/Form.vue
index 64f528bf..f7db6420 100644
--- a/tests/__tests__/components/Form.vue
+++ b/tests/__tests__/components/Form.vue
@@ -40,7 +40,6 @@
         v-model="recommend"
         type="checkbox"
         name="recommend"
-        data-testid="recommend-checkbox"
       />
 
       <button :disabled="submitDisabled" type="submit">
diff --git a/tests/__tests__/components/StopWatch.vue b/tests/__tests__/components/StopWatch.vue
index c1c336e2..b239a672 100644
--- a/tests/__tests__/components/StopWatch.vue
+++ b/tests/__tests__/components/StopWatch.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <span data-testid="elapsed">{{ lapse }}ms</span>
-    <button data-testid="start-stop-button" @click="handleRunClick">
+    <button @click="handleRunClick">
       {{ running ? 'Stop' : 'Start' }}
     </button>
   </div>