Signup

tests/__tests__/components/Form.vue

@@ -1,22 +1,105 @@
-<template>
-  <form>
-    <label for="search">
-      <FontAwesomeIcon icon="search"/> Search
-    </label>
-    <input
-      id="search"
-      type="text"
-      name="search"
-    >
-    <VButton text="Search now" />
-  </form>
-</template>
-
-<script>
-import VButton from './Button'
-
-export default {
-  name: 'SearchForm',
-  components: { VButton }
-}
-</script>
+<template>
+  <div>
+    <h1>Movie Review</h1>
+    <form @submit.prevent="submit">
+      <label for="movie-input">Title of the movie</label>
+      <input
+        id="movie-input"
+        v-model="title"
+        name="title"
+      >
+
+      <label id="review-textarea">Your review</label>
+      <textarea
+        v-model="review"
+        name="review-textarea"
+        placeholder="Write an awesome review"
+        aria-labelledby="review-textarea"
+      />
+
+      <label>
+        <input
+          v-model="rating"
+          type="radio"
+          value="3"
+        >
+        Wonderful
+      </label>
+      <label>
+        <input
+          v-model="rating"
+          type="radio"
+          value="2"
+        >
+        Average
+      </label>
+      <label>
+        <input
+          v-model="rating"
+          type="radio"
+          value="1"
+        >
+        Awful
+      </label>
+
+      <label for="genre-select">Movie genre</label>
+      <select
+        id="genre-select"
+        v-model="genre"
+      >
+        <option>Comedy</option>
+        <option>Action</option>
+        <option>Romance</option>
+        <option>None of the above</option>
+      </select>
+
+      <label id="recommend-label">Would you recommend this movie?</label>
+      <input
+        id="recommend"
+        v-model="recommend"
+        type="checkbox"
+        name="recommend"
+        data-testid="recommend-checkbox"
+      >
+
+      <button
+        :disabled="submitDisabled"
+        type="submit"
+      >
+        Submit
+      </button>
+    </form>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      title: '',
+      review: '',
+      rating: '1',
+      genre: 'Comedy',
+      recommend: false
+    }
+  },
+  computed: {
+    submitDisabled () {
+      return !this.title || !this.review
+    }
+  },
+  methods: {
+    submit () {
+      if (this.submitDisabled) return
+
+      this.$emit('submit', {
+        title: this.title,
+        review: this.review,
+        rating: this.rating,
+        genre: this.genre,
+        recommend: this.recommend
+      })
+    }
+  }
+}
+</script>

tests/__tests__/components/Stubs.vue

@@ -0,0 +1,22 @@
+<template>
+  <form>
+    <label for="search">
+      <FontAwesomeIcon icon="search"/> Search
+    </label>
+    <input
+      id="search"
+      type="text"
+      name="search"
+    >
+    <VButton text="Search now" />
+  </form>
+</template>
+
+<script>
+import VButton from './Button'
+
+export default {
+  name: 'SearchForm',
+  components: { VButton }
+}
+</script>

tests/__tests__/form.js

@@ -1,33 +1,62 @@
 import { render, fireEvent } from '@testing-library/vue'
-import Login from './components/Login'
+import 'jest-dom/extend-expect'
+import Form from './components/Form'
 
-test('login form submits', async () => {
-  const fakeUser = { username: 'jackiechan', password: 'hiya! 🥋', rememberMe: true }
-  const handleSubmit = jest.fn()
-  const { getByLabelText, getByText } = render(
-    Login, { props: { onSubmit: handleSubmit } }
-  )
+test('Review form submits', async () => {
+  const fakeReview = {
+    title: 'An Awesome Movie',
+    review: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+    rating: '3',
+    genre: 'Action',
+    recommend: true
+  }
 
-  const submitButtonNode = getByText('Submit')
+  const {
+    getByLabelText,
+    getByText,
+    getByTestId,
+    getByDisplayValue,
+    getByPlaceholderText,
+    emitted
+  } = render(Form)
 
-  const userNameInput = getByLabelText('Username')
-  await fireEvent.update(userNameInput, fakeUser.username)
+  const submitButton = getByText('Submit')
 
-  const passwordInput = getByLabelText('Password')
-  await fireEvent.update(passwordInput, fakeUser.password)
+  // Initially the submit button should be disabled
+  expect(submitButton).toBeDisabled()
 
-  const rememberMeInput = getByLabelText('Remember Me')
-  await fireEvent.update(rememberMeInput, true)
+  // In this test we showcase several ways of targetting DOM elements.
+  // However, `getByLabelText` should be your top preference when handling
+  // form elements.
+  // Read 'What queries should I use?' for additional context:
+  // https://testing-library.com/docs/guide-which-query
+
+  const titleInput = getByLabelText(/title of the movie/i)
+  await fireEvent.update(titleInput, fakeReview.title)
+
+  const reviewTextarea = getByPlaceholderText('Write an awesome review')
+  await fireEvent.update(reviewTextarea, fakeReview.review)
+
+  const ratingSelect = getByLabelText('Wonderful')
+  await fireEvent.update(ratingSelect, fakeReview.rating)
+
+  // Get the Select element by using the initially displayed value.
+  const genreSelect = getByDisplayValue('Comedy')
+  await fireEvent.update(genreSelect, fakeReview.genre)
+
+  const recommendInput = getByTestId('recommend-checkbox')
+  await fireEvent.update(recommendInput, fakeReview.recommend)
 
   // 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.
-  await fireEvent.click(submitButtonNode)
+  expect(submitButton).toBeEnabled()
+  expect(submitButton).toHaveAttribute('type', 'submit')
+
+  await fireEvent.click(submitButton)
 
-  // Assert
-  expect(handleSubmit).toHaveBeenCalledTimes(1)
-  expect(handleSubmit).toHaveBeenCalledWith(fakeUser)
-  // make sure the form is submittable
-  expect(submitButtonNode.type).toBe('submit')
+  // Assert event has been emitted.
+  expect(emitted().submit).toHaveLength(1)
+  expect(emitted().submit[0]).toEqual([ fakeReview ])
 })

tests/__tests__/integration-with-stubs.js → tests/__tests__/stubs.js

@@ -1,10 +1,10 @@
 import { render, cleanup } from '@testing-library/vue'
-import Form from './components/Form'
+import Stubs from './components/Stubs'
 
 afterEach(cleanup)
 
 test('Form contains search button', () => {
-  const { getByText } = render(Form, {
+  const { getByText } = render(Stubs, {
     stubs: ['FontAwesomeIcon']
   })
   getByText('Search now')