Improve onboarding by adding explanations

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"

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>
+`;

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

tests/__tests__/components/Button.vue

@@ -1,25 +1,13 @@
 <template>
-  <button :class="typeClass" @click="handleClick">{{ text }}</button>
+  <button @click="handleClick">{{ text }}</button>
 </template>
 
 <script>
 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: {

tests/__tests__/components/EndToEnd.vue → 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)

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>

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

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>

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>
 

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

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