Add user event test case

package.json

@@ -48,6 +48,7 @@
   "devDependencies": {
     "@babel/plugin-transform-runtime": "^7.11.5",
     "@testing-library/jest-dom": "^5.11.4",
+    "@testing-library/user-event": "^12.1.10",
     "apollo-boost": "^0.4.9",
     "apollo-cache-inmemory": "^1.6.6",
     "axios": "^0.20.0",

src/__tests__/components/Form.vue

@@ -1,73 +1,73 @@
-<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 id="recommend-label">Would you recommend this movie?</label>
-      <input
-        id="recommend"
-        v-model="recommend"
-        type="checkbox"
-        name="recommend"
-      />
-
-      <button :disabled="submitDisabled" type="submit">
-        Submit
-      </button>
-    </form>
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      title: '',
-      review: '',
-      rating: '1',
-      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,
-        recommend: this.recommend,
-      })
-    },
-  },
-}
-</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 id="recommend-label" for="recommend">
+        Would you recommend this movie?
+      </label>
+      <input
+        id="recommend"
+        v-model="recommend"
+        type="checkbox"
+        name="recommend"
+      />
+
+      <button :disabled="submitDisabled" type="submit">Submit</button>
+    </form>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      title: '',
+      review: '',
+      rating: '1',
+      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,
+        recommend: this.recommend,
+      })
+    },
+  },
+}
+</script>

src/__tests__/user-event.js

@@ -0,0 +1,72 @@
+import '@testing-library/jest-dom'
+import {render} from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
+import Form from './components/Form'
+import Select from './components/Select'
+
+beforeEach(() => {
+  jest.spyOn(console, 'warn').mockImplementation(() => {})
+})
+
+afterEach(() => {
+  console.warn.mockRestore()
+})
+
+test('User events in a form', async () => {
+  const fakeReview = {
+    title: 'An Awesome Movie',
+    review: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+    rating: '3',
+  }
+  const {getByText, getByLabelText, emitted} = render(Form)
+
+  const submitButton = getByText('Submit')
+  expect(submitButton).toBeDisabled()
+
+  const titleInput = getByLabelText(/title of the movie/i)
+  await userEvent.type(titleInput, fakeReview.title)
+  expect(titleInput.value).toEqual(fakeReview.title)
+
+  const textArea = getByLabelText(/Your review/i)
+  await userEvent.type(textArea, 'The t-rex went insane!')
+  expect(textArea.value).toEqual('The t-rex went insane!')
+
+  await userEvent.clear(textArea)
+  expect(textArea.value).toEqual('')
+  await userEvent.type(textArea, fakeReview.review)
+  expect(textArea.value).toEqual(fakeReview.review)
+
+  const initialSelectedRating = getByLabelText(/Awful/i)
+  const wonderfulRadioInput = getByLabelText(/Wonderful/i)
+  expect(initialSelectedRating).toBeChecked()
+  expect(wonderfulRadioInput).not.toBeChecked()
+
+  await userEvent.click(wonderfulRadioInput)
+  expect(wonderfulRadioInput).toBeChecked()
+  expect(initialSelectedRating).not.toBeChecked()
+
+  const recommendInput = getByLabelText(/Would you recommend this movie?/i)
+  await userEvent.click(recommendInput)
+  expect(recommendInput).toBeChecked()
+
+  userEvent.tab()
+  expect(submitButton).toHaveFocus()
+  expect(submitButton).toBeEnabled()
+  await userEvent.type(submitButton, '{enter}')
+  expect(emitted().submit[0][0]).toMatchObject(fakeReview)
+
+  expect(console.warn).not.toHaveBeenCalled()
+})
+
+test('selecting option with user events', async () => {
+  const {getByDisplayValue} = render(Select)
+  const select = getByDisplayValue('Tyrannosaurus')
+  expect(select.value).toBe('dino1')
+
+  await userEvent.selectOptions(select, 'dino2')
+  expect(select.value).toBe('dino2')
+
+  await userEvent.selectOptions(select, 'dino3')
+  expect(select.value).not.toBe('dino2')
+  expect(select.value).toBe('dino3')
+})