Add explanations

Author: afontcu

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

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

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

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