From 2f45449c68c4f5f710f42fdf3b061e8096cc42e0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Fontcuberta?= <afontcu@gmail.com>
Date: Mon, 3 Jun 2019 08:18:02 +0200
Subject: [PATCH 1/5] Rename form-based tests

---
 .../__tests__/components/{Login.vue => Signup.vue} | 14 +++++++-------
 tests/__tests__/{form.js => signup.js}             |  0
 2 files changed, 7 insertions(+), 7 deletions(-)
 rename tests/__tests__/components/{Login.vue => Signup.vue} (81%)
 rename tests/__tests__/{form.js => signup.js} (100%)

diff --git a/tests/__tests__/components/Login.vue b/tests/__tests__/components/Signup.vue
similarity index 81%
rename from tests/__tests__/components/Login.vue
rename to tests/__tests__/components/Signup.vue
index 1f841f6f..62d33ad4 100644
--- a/tests/__tests__/components/Login.vue
+++ b/tests/__tests__/components/Signup.vue
@@ -17,13 +17,13 @@
         aria-labelledby="password-label"
       >
       <label id="remember-me-label">Remember Me</label>
-      <input 
-        type="checkbox" 
-        id="remember-me" 
-        name="remember-me" 
-        aria-labelledby="remember-me-label" 
-        v-model="rememberMe" 
-      />
+      <input
+        id="remember-me"
+        v-model="rememberMe"
+        type="checkbox"
+        name="remember-me"
+        aria-labelledby="remember-me-label"
+      >
       <button type="submit">Submit</button>
     </form>
   </div>
diff --git a/tests/__tests__/form.js b/tests/__tests__/signup.js
similarity index 100%
rename from tests/__tests__/form.js
rename to tests/__tests__/signup.js

From 3e652f9ecef448c5706921ddcb3a9a4538a7133c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Fontcuberta?= <afontcu@gmail.com>
Date: Mon, 3 Jun 2019 08:20:57 +0200
Subject: [PATCH 2/5] Add form use cases

---
 tests/__tests__/components/Signup.vue | 51 ++++++++++++++++++++++-----
 tests/__tests__/signup.js             | 44 +++++++++++++++--------
 2 files changed, 72 insertions(+), 23 deletions(-)

diff --git a/tests/__tests__/components/Signup.vue b/tests/__tests__/components/Signup.vue
index 62d33ad4..e09bed55 100644
--- a/tests/__tests__/components/Signup.vue
+++ b/tests/__tests__/components/Signup.vue
@@ -8,6 +8,7 @@
         data-testid="username-input"
         placeholder="Username..."
         name="username" >
+
       <label id="password-label">Password</label>
       <input
         v-model="password"
@@ -16,6 +17,29 @@
         name="password"
         aria-labelledby="password-label"
       >
+
+      <label id="about-me">About Me</label>
+      <textarea
+        v-model="about"
+        name="about-me"
+        aria-labelledby="about-me"
+      />
+
+      <label for="preference-select">I prefer...</label>
+      <select
+        id="preference-select"
+        v-model="selected"
+        name="preference-select"
+      >
+        <option
+          disabled
+          value=""
+        />
+        <option>Dogs</option>
+        <option>Cats</option>
+        <option>None of the above</option>
+      </select>
+
       <label id="remember-me-label">Remember Me</label>
       <input
         id="remember-me"
@@ -24,31 +48,42 @@
         name="remember-me"
         aria-labelledby="remember-me-label"
       >
-      <button type="submit">Submit</button>
+
+      <button
+        :disabled="submitDisabled"
+        type="submit"
+      >
+        Submit
+      </button>
     </form>
   </div>
 </template>
 
 <script>
 export default {
-  props: {
-    onSubmit: {
-      type: Function,
-      required: true
-    }
-  },
   data () {
     return {
       username: '',
       password: '',
+      about: '',
+      selected: '',
       rememberMe: false
     }
   },
+  computed: {
+    submitDisabled () {
+      return !this.username || !this.password || !this.about || !this.selected
+    }
+  },
   methods: {
     submit () {
-      this.onSubmit({
+      if (this.submitDisabled) return
+
+      this.$emit('submit', {
         username: this.username,
         password: this.password,
+        about: this.about,
+        selected: this.selected,
         rememberMe: this.rememberMe
       })
     }
diff --git a/tests/__tests__/signup.js b/tests/__tests__/signup.js
index a5a215b6..0e64e56f 100644
--- a/tests/__tests__/signup.js
+++ b/tests/__tests__/signup.js
@@ -1,14 +1,22 @@
 import { render, fireEvent } from '@testing-library/vue'
-import Login from './components/Login'
+import 'jest-dom/extend-expect'
+import Signup from './components/Signup'
 
-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('signup form submits', async () => {
+  const fakeUser = {
+    username: 'jackiechan',
+    password: 'hiya! 🥋',
+    about: 'Lorem ipsum dolor sit amet',
+    selected: 'None of the above',
+    rememberMe: true
+  }
 
-  const submitButtonNode = getByText('Submit')
+  const { getByLabelText, getByText, emitted } = render(Signup)
+
+  const submitButton = getByText('Submit')
+
+  // Initially the form should be disabled
+  expect(submitButton).toBeDisabled()
 
   const userNameInput = getByLabelText('Username')
   await fireEvent.update(userNameInput, fakeUser.username)
@@ -16,18 +24,24 @@ test('login form submits', async () => {
   const passwordInput = getByLabelText('Password')
   await fireEvent.update(passwordInput, fakeUser.password)
 
+  const aboutMeTextarea = getByLabelText('About Me')
+  await fireEvent.update(aboutMeTextarea, fakeUser.about)
+
   const rememberMeInput = getByLabelText('Remember Me')
-  await fireEvent.update(rememberMeInput, true)
+  await fireEvent.update(rememberMeInput, fakeUser.rememberMe)
+
+  const preferenceSelect = getByLabelText('I prefer...')
+  await fireEvent.update(preferenceSelect, fakeUser.selected)
 
   // 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([ fakeUser ])
 })

From 3479a9eca271fadecef6aea19ee839728107232a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Fontcuberta?= <afontcu@gmail.com>
Date: Mon, 3 Jun 2019 08:39:42 +0200
Subject: [PATCH 3/5] Showcase several selectors

---
 tests/__tests__/components/Signup.vue | 20 ++++--------------
 tests/__tests__/signup.js             | 29 ++++++++++++++++++---------
 2 files changed, 24 insertions(+), 25 deletions(-)

diff --git a/tests/__tests__/components/Signup.vue b/tests/__tests__/components/Signup.vue
index e09bed55..366b8d4e 100644
--- a/tests/__tests__/components/Signup.vue
+++ b/tests/__tests__/components/Signup.vue
@@ -5,23 +5,13 @@
       <input
         id="username-input"
         v-model="username"
-        data-testid="username-input"
-        placeholder="Username..."
         name="username" >
 
-      <label id="password-label">Password</label>
-      <input
-        v-model="password"
-        placeholder="Password..."
-        type="password"
-        name="password"
-        aria-labelledby="password-label"
-      >
-
       <label id="about-me">About Me</label>
       <textarea
         v-model="about"
         name="about-me"
+        placeholder="I was born in..."
         aria-labelledby="about-me"
       />
 
@@ -46,7 +36,7 @@
         v-model="rememberMe"
         type="checkbox"
         name="remember-me"
-        aria-labelledby="remember-me-label"
+        data-testid="remember-input"
       >
 
       <button
@@ -64,15 +54,14 @@ export default {
   data () {
     return {
       username: '',
-      password: '',
       about: '',
-      selected: '',
+      selected: 'Dogs',
       rememberMe: false
     }
   },
   computed: {
     submitDisabled () {
-      return !this.username || !this.password || !this.about || !this.selected
+      return !this.username || !this.about || !this.selected
     }
   },
   methods: {
@@ -81,7 +70,6 @@ export default {
 
       this.$emit('submit', {
         username: this.username,
-        password: this.password,
         about: this.about,
         selected: this.selected,
         rememberMe: this.rememberMe
diff --git a/tests/__tests__/signup.js b/tests/__tests__/signup.js
index 0e64e56f..136be82a 100644
--- a/tests/__tests__/signup.js
+++ b/tests/__tests__/signup.js
@@ -5,32 +5,42 @@ import Signup from './components/Signup'
 test('signup form submits', async () => {
   const fakeUser = {
     username: 'jackiechan',
-    password: 'hiya! 🥋',
     about: 'Lorem ipsum dolor sit amet',
     selected: 'None of the above',
     rememberMe: true
   }
 
-  const { getByLabelText, getByText, emitted } = render(Signup)
+  const {
+    getByLabelText,
+    getByText,
+    getByTestId,
+    getByDisplayValue,
+    getByPlaceholderText,
+    emitted
+  } = render(Signup)
 
   const submitButton = getByText('Submit')
 
   // Initially the form should be disabled
   expect(submitButton).toBeDisabled()
 
-  const userNameInput = getByLabelText('Username')
+  // We are gonna 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 passwordInput = getByLabelText('Password')
-  await fireEvent.update(passwordInput, fakeUser.password)
-
-  const aboutMeTextarea = getByLabelText('About Me')
+  const aboutMeTextarea = getByPlaceholderText('I was born in...')
   await fireEvent.update(aboutMeTextarea, fakeUser.about)
 
-  const rememberMeInput = getByLabelText('Remember Me')
+  const rememberMeInput = getByTestId('remember-input')
   await fireEvent.update(rememberMeInput, fakeUser.rememberMe)
 
-  const preferenceSelect = getByLabelText('I prefer...')
+  // Get the Select element by using the initially displayed value.
+  const preferenceSelect = getByDisplayValue('Dogs')
   await fireEvent.update(preferenceSelect, fakeUser.selected)
 
   // NOTE: in jsdom, it's not possible to trigger a form submission
@@ -39,6 +49,7 @@ test('signup form submits', async () => {
   // then ensure that there's a submit button.
   expect(submitButton).toBeEnabled()
   expect(submitButton).toHaveAttribute('type', 'submit')
+
   await fireEvent.click(submitButton)
 
   // Assert event has been emitted.

From 98e5b1edc47d7ceea51d2431439c781d75585193 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Fontcuberta?= <afontcu@gmail.com>
Date: Mon, 3 Jun 2019 17:22:42 +0200
Subject: [PATCH 4/5] Rename Form -> Stubs

---
 tests/__tests__/components/{Form.vue => Stubs.vue}      | 0
 tests/__tests__/{integration-with-stubs.js => stubs.js} | 4 ++--
 2 files changed, 2 insertions(+), 2 deletions(-)
 rename tests/__tests__/components/{Form.vue => Stubs.vue} (100%)
 rename tests/__tests__/{integration-with-stubs.js => stubs.js} (70%)

diff --git a/tests/__tests__/components/Form.vue b/tests/__tests__/components/Stubs.vue
similarity index 100%
rename from tests/__tests__/components/Form.vue
rename to tests/__tests__/components/Stubs.vue
diff --git a/tests/__tests__/integration-with-stubs.js b/tests/__tests__/stubs.js
similarity index 70%
rename from tests/__tests__/integration-with-stubs.js
rename to tests/__tests__/stubs.js
index b78077d6..c2af92db 100644
--- a/tests/__tests__/integration-with-stubs.js
+++ b/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')

From a7f256ec8330231db50673ebe6e5ab39b0d80866 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Fontcuberta?= <afontcu@gmail.com>
Date: Mon, 3 Jun 2019 18:22:51 +0200
Subject: [PATCH 5/5] Update with review form example

---
 tests/__tests__/components/Form.vue    | 105 +++++++++++++++++++++++++
 tests/__tests__/components/Signup.vue  |  80 -------------------
 tests/__tests__/{signup.js => form.js} |  46 ++++++-----
 3 files changed, 130 insertions(+), 101 deletions(-)
 create mode 100644 tests/__tests__/components/Form.vue
 delete mode 100644 tests/__tests__/components/Signup.vue
 rename tests/__tests__/{signup.js => form.js} (50%)

diff --git a/tests/__tests__/components/Form.vue b/tests/__tests__/components/Form.vue
new file mode 100644
index 00000000..616af3d4
--- /dev/null
+++ b/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>
diff --git a/tests/__tests__/components/Signup.vue b/tests/__tests__/components/Signup.vue
deleted file mode 100644
index 366b8d4e..00000000
--- a/tests/__tests__/components/Signup.vue
+++ /dev/null
@@ -1,80 +0,0 @@
-<template>
-  <div>
-    <form @submit.prevent="submit">
-      <label for="username-input">Username</label>
-      <input
-        id="username-input"
-        v-model="username"
-        name="username" >
-
-      <label id="about-me">About Me</label>
-      <textarea
-        v-model="about"
-        name="about-me"
-        placeholder="I was born in..."
-        aria-labelledby="about-me"
-      />
-
-      <label for="preference-select">I prefer...</label>
-      <select
-        id="preference-select"
-        v-model="selected"
-        name="preference-select"
-      >
-        <option
-          disabled
-          value=""
-        />
-        <option>Dogs</option>
-        <option>Cats</option>
-        <option>None of the above</option>
-      </select>
-
-      <label id="remember-me-label">Remember Me</label>
-      <input
-        id="remember-me"
-        v-model="rememberMe"
-        type="checkbox"
-        name="remember-me"
-        data-testid="remember-input"
-      >
-
-      <button
-        :disabled="submitDisabled"
-        type="submit"
-      >
-        Submit
-      </button>
-    </form>
-  </div>
-</template>
-
-<script>
-export default {
-  data () {
-    return {
-      username: '',
-      about: '',
-      selected: 'Dogs',
-      rememberMe: false
-    }
-  },
-  computed: {
-    submitDisabled () {
-      return !this.username || !this.about || !this.selected
-    }
-  },
-  methods: {
-    submit () {
-      if (this.submitDisabled) return
-
-      this.$emit('submit', {
-        username: this.username,
-        about: this.about,
-        selected: this.selected,
-        rememberMe: this.rememberMe
-      })
-    }
-  }
-}
-</script>
diff --git a/tests/__tests__/signup.js b/tests/__tests__/form.js
similarity index 50%
rename from tests/__tests__/signup.js
rename to tests/__tests__/form.js
index 136be82a..5b4a3898 100644
--- a/tests/__tests__/signup.js
+++ b/tests/__tests__/form.js
@@ -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 ])
 })