+
+
+
diff --git a/tests/__tests__/form.js b/tests/__tests__/form.js
index 7eb37968..09737d70 100644
--- a/tests/__tests__/form.js
+++ b/tests/__tests__/form.js
@@ -2,12 +2,16 @@ 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
}
@@ -15,7 +19,6 @@ test('Review form submits', async () => {
getByLabelText,
getByText,
getByRole,
- getByDisplayValue,
getByPlaceholderText,
emitted
} = render(Form)
@@ -25,28 +28,30 @@ 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)
const reviewTextarea = getByPlaceholderText('Write an awesome review')
await fireEvent.update(reviewTextarea, fakeReview.review)
+ // Rating Radio buttons
+ const initiallySelectedInput = getByLabelText('Awful')
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)
+ expect(initiallySelectedInput.checked).toBe(true)
+ expect(ratingSelect.checked).toBe(false)
+
+ await fireEvent.update(ratingSelect)
+
+ expect(ratingSelect.checked).toBe(true)
+ expect(initiallySelectedInput.checked).toBe(false)
// Get the Input element by its implicit ARIA role.
const recommendInput = getByRole('checkbox')
- await fireEvent.update(recommendInput, fakeReview.recommend)
+
+ expect(recommendInput.checked).toBe(false)
+ await fireEvent.update(recommendInput)
+ expect(recommendInput.checked).toBe(true)
// NOTE: in jsdom, it's not possible to trigger a form submission
// by clicking on the submit button. This is really unfortunate.
diff --git a/tests/__tests__/select.js b/tests/__tests__/select.js
new file mode 100644
index 00000000..0b4c07a2
--- /dev/null
+++ b/tests/__tests__/select.js
@@ -0,0 +1,27 @@
+import { render, fireEvent } from '@testing-library/vue'
+import '@testing-library/jest-dom/extend-expect'
+import Select from './components/Select'
+
+// In this test file we showcase several ways to interact with a Select element
+test('Select component', async () => {
+ let optionElement
+ const { getByDisplayValue, getByText } = render(Select)
+
+ // Get the Select element by using the initially displayed value
+ const select = getByDisplayValue('Tyrannosaurus')
+ expect(select.value).toBe('dino1')
+
+ // Update it by manually sending a valid option value
+ await fireEvent.update(select, 'dino2')
+ expect(select.value).toBe('dino2')
+
+ // We can trigger an update event by directly getting the