Update with review form example

Author: afontcu

tests/__tests__/components/Form.vue

@@ -0,0 +1,105 @@
+<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/Signup.vue

@@ -1,13 +1,14 @@
 import { render, fireEvent } from '@testing-library/vue'
 import 'jest-dom/extend-expect'
-import Signup from './components/Signup'
-
-test('signup form submits', async () => {
-  const fakeUser = {
-    username: 'jackiechan',
-    about: 'Lorem ipsum dolor sit amet',
-    selected: 'None of the above',
-    rememberMe: true
+import Form from './components/Form'
+
+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 {
@@ -17,31 +18,34 @@ test('signup form submits', async () => {
     getByDisplayValue,
     getByPlaceholderText,
     emitted
-  } = render(Signup)
+  } = render(Form)
 
   const submitButton = getByText('Submit')
 
-  // Initially the form should be disabled
+  // Initially the submit button should be disabled
   expect(submitButton).toBeDisabled()
 
-  // We are gonna showcase several ways of targetting DOM elements.
+  // 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 userNameInput = getByLabelText(/username/i)
-  await fireEvent.update(userNameInput, fakeUser.username)
 
-  const aboutMeTextarea = getByPlaceholderText('I was born in...')
-  await fireEvent.update(aboutMeTextarea, fakeUser.about)
+  const titleInput = getByLabelText(/title of the movie/i)
+  await fireEvent.update(titleInput, fakeReview.title)
 
-  const rememberMeInput = getByTestId('remember-input')
-  await fireEvent.update(rememberMeInput, fakeUser.rememberMe)
+  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 preferenceSelect = getByDisplayValue('Dogs')
-  await fireEvent.update(preferenceSelect, fakeUser.selected)
+  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.
@@ -54,5 +58,5 @@ test('signup form submits', async () => {
 
   // Assert event has been emitted.
   expect(emitted().submit).toHaveLength(1)
-  expect(emitted().submit[0]).toEqual([ fakeUser ])
+  expect(emitted().submit[0]).toEqual([ fakeReview ])
 })