Add select-specific test file

Author: afontcu

tests/__tests__/components/Form.vue

@@ -26,14 +26,6 @@
         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"
@@ -56,7 +48,6 @@ export default {
       title: '',
       review: '',
       rating: '1',
-      genre: 'Comedy',
       recommend: false
     }
   },
@@ -73,7 +64,6 @@ export default {
         title: this.title,
         review: this.review,
         rating: this.rating,
-        genre: this.genre,
         recommend: this.recommend
       })
     }

tests/__tests__/components/Select.vue

@@ -0,0 +1,25 @@
+<template>
+  <div>
+    <label for="dino-select">Choose a dinosaur:</label>
+    <select id="dino-select" v-model="selectedDino">
+      <option value="dino1">Tyrannosaurus</option>
+      <option value="dino2">Velociraptor</option>
+      <option value="dino3">Deinonychus</option>
+      <optgroup label="Sauropods">
+        <option value="dino4">Diplodocus</option>
+        <option value="dino5">Saltasaurus</option>
+        <option value="dino6">Apatosaurus</option>
+      </optgroup>
+    </select>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      selectedDino: 'dino1'
+    }
+  }
+}
+</script>

tests/__tests__/form.js

@@ -2,20 +2,23 @@ import { render, fireEvent } from '@testing-library/vue'
 import '@testing-library/jest-dom/extend-expect'
 import Form from './components/Form'
 
+// 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
 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 {
     getByLabelText,
     getByText,
     getByRole,
-    getByDisplayValue,
     getByPlaceholderText,
     emitted
   } = render(Form)
@@ -25,12 +28,6 @@ test('Review form submits', async () => {
   // Initially the submit button should be disabled
   expect(submitButton).toBeDisabled()
 
-  // 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)
 
@@ -49,10 +46,6 @@ test('Review form submits', async () => {
   expect(ratingSelect.checked).toBe(true)
   expect(initiallySelectedInput.checked).toBe(false)
 
-  // Get the Select element by using the initially displayed value.
-  const genreSelect = getByDisplayValue('Comedy')
-  await fireEvent.update(genreSelect, fakeReview.genre)
-
   // Get the Input element by its implicit ARIA role.
   const recommendInput = getByRole('checkbox')
 

tests/__tests__/select.js

@@ -0,0 +1,30 @@
+import { render, fireEvent } from '@testing-library/vue'
+import 'jest-dom/extend-expect'
+import Select from './components/Select'
+
+// There are several ways to interact with a Select component.
+test('Select component', async () => {
+  const { getByDisplayValue, getByText } = render(Select)
+
+  // Get the Select element by using the initially displayed value.
+  const select = getByDisplayValue('Tyrannosaurus')
+
+  // Assert initial value
+  expect(select.value).toBe('dino1')
+
+  // Update it by manually sending an option value
+  await fireEvent.update(select, 'dino2')
+  expect(select.value).toBe('dino2')
+
+  // We can also get the option value from the element itself
+  await fireEvent.update(select, getByText('Tyrannosaurus').value)
+  expect(select.value).toBe('dino1')
+
+  // We can trigger an update event by directly getting the <option> element
+  await fireEvent.update(getByText('Deinonychus'))
+  expect(select.value).toBe('dino3')
+
+  // ...even if option is within an <optgroup>
+  await fireEvent.update(getByText('Diplodocus'))
+  expect(select.value).toBe('dino4')
+})