From 140b771499b7b64b81268a722edbc73f0f95e008 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adri=C3=A0=20Fontcuberta?= Date: Mon, 8 Jul 2019 08:47:01 +0200 Subject: [PATCH 1/6] Remove unnecessary assignments --- src/vue-testing-library.js | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/src/vue-testing-library.js b/src/vue-testing-library.js index 8250894f..bac02814 100644 --- a/src/vue-testing-library.js +++ b/src/vue-testing-library.js @@ -121,11 +121,8 @@ fireEvent.update = async (elem, value) => { } case 'INPUT': { - if (type === 'checkbox') { - elem.checked = value - return fireEvent.change(elem) - } else if (type === 'radio') { - elem.selected = value + if (['checkbox', 'radio'].includes(type)) { + elem.checked = true return fireEvent.change(elem) } else { elem.value = value From aa03861a04a924fea4e1f2615150c38801dae8b5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adri=C3=A0=20Fontcuberta?= Date: Mon, 8 Jul 2019 08:47:41 +0200 Subject: [PATCH 2/6] Improve test cases --- tests/__tests__/form.js | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/tests/__tests__/form.js b/tests/__tests__/form.js index 7eb37968..f2f9aa63 100644 --- a/tests/__tests__/form.js +++ b/tests/__tests__/form.js @@ -37,8 +37,17 @@ test('Review form submits', async () => { 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) + + 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 Select element by using the initially displayed value. const genreSelect = getByDisplayValue('Comedy') @@ -46,7 +55,10 @@ test('Review form submits', async () => { // 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. From 5f9c49bababd69d47e41dff2e0d706f0e587a996 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adri=C3=A0=20Fontcuberta?= Date: Wed, 17 Jul 2019 21:11:32 +0200 Subject: [PATCH 3/6] Add select-specific test file --- tests/__tests__/components/Form.vue | 10 --------- tests/__tests__/components/Select.vue | 25 ++++++++++++++++++++++ tests/__tests__/form.js | 17 +++++---------- tests/__tests__/select.js | 30 +++++++++++++++++++++++++++ 4 files changed, 60 insertions(+), 22 deletions(-) create mode 100644 tests/__tests__/components/Select.vue create mode 100644 tests/__tests__/select.js diff --git a/tests/__tests__/components/Form.vue b/tests/__tests__/components/Form.vue index f7db6420..83ca3e23 100644 --- a/tests/__tests__/components/Form.vue +++ b/tests/__tests__/components/Form.vue @@ -26,14 +26,6 @@ Awful - - - +
+ + +
+ + + diff --git a/tests/__tests__/form.js b/tests/__tests__/form.js index f2f9aa63..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,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') diff --git a/tests/__tests__/select.js b/tests/__tests__/select.js new file mode 100644 index 00000000..47766a70 --- /dev/null +++ b/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 + await fireEvent.update(getByText('Diplodocus')) + expect(select.value).toBe('dino4') +}) From a50ec54411b4e2cbc8d8999232fbeb92b960c82d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adri=C3=A0=20Fontcuberta?= Date: Wed, 17 Jul 2019 21:11:58 +0200 Subject: [PATCH 4/6] Fix update event on option elements --- src/vue-testing-library.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/vue-testing-library.js b/src/vue-testing-library.js index bac02814..ac8dca64 100644 --- a/src/vue-testing-library.js +++ b/src/vue-testing-library.js @@ -110,14 +110,14 @@ fireEvent.update = async (elem, value) => { switch (tagName) { case 'OPTION': { - elem.selected = value + elem.selected = true - const parentElement = - this.element.parentElement.tagName === 'OPTGROUP' - ? this.element.parentElement.parentElement - : this.element.parentElement + const parentSelectElement = + elem.parentElement.tagName === 'OPTGROUP' + ? elem.parentElement.parentElement + : elem.parentElement - return fireEvent.change(parentElement) + return fireEvent.change(parentSelectElement) } case 'INPUT': { From f9aaf3c871ed7bab043c8d17393deee2a842f412 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adri=C3=A0=20Fontcuberta?= Date: Sat, 20 Jul 2019 18:54:52 +0200 Subject: [PATCH 5/6] Update extend-expect package name --- tests/__tests__/select.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/__tests__/select.js b/tests/__tests__/select.js index 47766a70..b59d9520 100644 --- a/tests/__tests__/select.js +++ b/tests/__tests__/select.js @@ -1,5 +1,5 @@ import { render, fireEvent } from '@testing-library/vue' -import 'jest-dom/extend-expect' +import '@testing-library/jest-dom/extend-expect' import Select from './components/Select' // There are several ways to interact with a Select component. From 0c63bf741e7a670eb0d966175ae97b8c8b88fe96 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adri=C3=A0=20Fontcuberta?= Date: Mon, 22 Jul 2019 18:20:14 +0200 Subject: [PATCH 6/6] Improve wording --- tests/__tests__/select.js | 19 ++++++++----------- 1 file changed, 8 insertions(+), 11 deletions(-) diff --git a/tests/__tests__/select.js b/tests/__tests__/select.js index b59d9520..0b4c07a2 100644 --- a/tests/__tests__/select.js +++ b/tests/__tests__/select.js @@ -2,29 +2,26 @@ import { render, fireEvent } from '@testing-library/vue' import '@testing-library/jest-dom/extend-expect' import Select from './components/Select' -// There are several ways to interact with a Select component. +// 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. + // 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 + // Update it by manually sending a valid 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 - await fireEvent.update(getByText('Diplodocus')) + optionElement = getByText('Diplodocus') + await fireEvent.update(optionElement) expect(select.value).toBe('dino4') })