From 90b5a8cd56c7ce92ca0b6eade794a59d194a5044 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adri=C3=A0=20Fontcuberta?= Date: Sat, 10 Aug 2019 20:39:02 +0200 Subject: [PATCH 1/4] Improve demo clarity --- tests/__tests__/form.js | 13 ++++++------- tests/__tests__/simple-button.js | 11 ++++++++--- 2 files changed, 14 insertions(+), 10 deletions(-) diff --git a/tests/__tests__/form.js b/tests/__tests__/form.js index 09737d70..fab5c778 100644 --- a/tests/__tests__/form.js +++ b/tests/__tests__/form.js @@ -11,8 +11,7 @@ test('Review form submits', async () => { const fakeReview = { title: 'An Awesome Movie', review: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.', - rating: '3', - recommend: true + rating: '3' } const { @@ -46,7 +45,7 @@ test('Review form submits', async () => { expect(ratingSelect.checked).toBe(true) expect(initiallySelectedInput.checked).toBe(false) - // Get the Input element by its implicit ARIA role. + // Get the Input element by its implicit ARIA role const recommendInput = getByRole('checkbox') expect(recommendInput.checked).toBe(false) @@ -56,13 +55,13 @@ test('Review form submits', async () => { // 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. + // 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. - expect(emitted().submit).toHaveLength(1) - expect(emitted().submit[0]).toEqual([fakeReview]) + // Assert event has been emitted + expect(emitted()).toHaveProperty('submit') + expect(emitted().submit[0][0]).toMatchObject(fakeReview) }) diff --git a/tests/__tests__/simple-button.js b/tests/__tests__/simple-button.js index fe3464ea..47b1aa24 100644 --- a/tests/__tests__/simple-button.js +++ b/tests/__tests__/simple-button.js @@ -12,7 +12,10 @@ test('renders button with text', () => { props: { text } }) - expect(getByRole('button')).toHaveTextContent(text) + // Get the only element with a 'button' role + const button = getByRole('button') + + expect(button).toHaveTextContent(text) }) test('click event is emitted when button is clicked', async () => { @@ -22,8 +25,10 @@ test('click event is emitted when button is clicked', async () => { props: { text } }) - // Send a click event to the element with a 'button' role + // Send a click event await fireEvent.click(getByRole('button')) - expect(emitted().click).toHaveLength(1) + // Expect that the event emitted a "click" event. We should test for emitted + // events has they are part of the public API of the component. + expect(emitted()).toHaveProperty('click') }) From 555532e67e8cb4daec2b41cdf0f321c81cafa568 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adri=C3=A0=20Fontcuberta?= Date: Sat, 10 Aug 2019 20:39:13 +0200 Subject: [PATCH 2/4] Bump dependencies --- package-lock.json | 29 +++++++++++++++++++---------- package.json | 6 +++--- 2 files changed, 22 insertions(+), 13 deletions(-) diff --git a/package-lock.json b/package-lock.json index beedc358..67941389 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4445,9 +4445,9 @@ } }, "husky": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/husky/-/husky-3.0.2.tgz", - "integrity": "sha512-WXCtaME2x0o4PJlKY4ap8BzLA+D0zlvefqAvLCPriOOu+x0dpO5uc5tlB7CY6/0SE2EESmoZsj4jW5D09KrJoA==", + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/husky/-/husky-3.0.3.tgz", + "integrity": "sha512-DBBMPSiBYEMx7EVUTRE/ymXJa/lOL+WplcsV/lZu+/HHGt0gzD+5BIz9EJnCrWyUa7hkMuBh7/9OZ04qDkM+Nw==", "dev": true, "requires": { "chalk": "^2.4.2", @@ -4457,7 +4457,7 @@ "is-ci": "^2.0.0", "opencollective-postinstall": "^2.0.2", "pkg-dir": "^4.2.0", - "please-upgrade-node": "^3.1.1", + "please-upgrade-node": "^3.2.0", "read-pkg": "^5.1.1", "run-node": "^1.0.0", "slash": "^3.0.0" @@ -4524,6 +4524,15 @@ "find-up": "^4.0.0" } }, + "please-upgrade-node": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/please-upgrade-node/-/please-upgrade-node-3.2.0.tgz", + "integrity": "sha512-gQR3WpIgNIKwBMVLkpMUeR3e1/E1y42bqDQZfql+kDeXd8COYfM8PQA4X6y7a8u9Ua9FHmsrrmirW2vHs45hWg==", + "dev": true, + "requires": { + "semver-compare": "^1.0.0" + } + }, "read-pkg": { "version": "5.2.0", "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz", @@ -8298,9 +8307,9 @@ } }, "vue-i18n": { - "version": "8.12.0", - "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-8.12.0.tgz", - "integrity": "sha512-Wh40dvkYZH0CntkhQQEed7nY8P/8xOOHy5Bl9W/WmmmW0oLYIL66XWwOqlcnNbLaL5HGN7XISydYVqXS0Sst9w==", + "version": "8.13.0", + "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-8.13.0.tgz", + "integrity": "sha512-nVwwh5m7gFtVusbcyR4WLowKcZs1r95yHMNtugwijSw9vGUiSZFt2QHVFJNO9AOXYQeLU8dgnUq7mXSBmzPWIA==", "dev": true }, "vue-jest": { @@ -8322,9 +8331,9 @@ } }, "vue-router": { - "version": "3.1.1", - "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.1.1.tgz", - "integrity": "sha512-RAFCIQjs4gbDV7YNH44c1GT0jXSTFvNhKh3o0xiA/UWI1EM7Eriv45n8kM+R8NZ58wXEGtKVaDVBlrXJBuM/Bg==", + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.1.2.tgz", + "integrity": "sha512-WssQEHSEvIS1/CI4CO2T8LJdoK4Q9Ngox28K7FDNMTfzNTk2WS5D0dDlqYCaPG+AG4Z8wJkn1KrBc7AhspZJUQ==", "dev": true }, "vue-template-compiler": { diff --git a/package.json b/package.json index 3eaf595a..1bac6c60 100644 --- a/package.json +++ b/package.json @@ -55,7 +55,7 @@ "eslint-plugin-promise": "^4.2.1", "eslint-plugin-standard": "^4.0.0", "eslint-plugin-vue": "^5.2.3", - "husky": "^3.0.2", + "husky": "^3.0.3", "jest": "^24.8.0", "jest-in-case": "^1.0.2", "jest-serializer-vue": "^2.0.2", @@ -63,9 +63,9 @@ "prettier": "^1.18.2", "vee-validate": "^2.2.13", "vue": "^2.6.10", - "vue-i18n": "^8.12.0", + "vue-i18n": "^8.13.0", "vue-jest": "^3.0.4", - "vue-router": "^3.0.7", + "vue-router": "^3.1.2", "vue-template-compiler": "^2.6.10", "vuex": "^3.1.1" }, From c4ae44ef457420877aeecdad2b4eff3c309aa036 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adri=C3=A0=20Fontcuberta?= Date: Sat, 10 Aug 2019 20:49:10 +0200 Subject: [PATCH 3/4] Bump DTL to 6 --- package-lock.json | 14 +++++++------- package.json | 2 +- src/vue-testing-library.js | 4 ++-- 3 files changed, 10 insertions(+), 10 deletions(-) diff --git a/package-lock.json b/package-lock.json index 67941389..746f865d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1100,15 +1100,15 @@ "integrity": "sha512-vTCdPp/T/Q3oSqwHmZ5Kpa9oI7iLtGl3RQaA/NyLHikvcrPxACkkKVr/XzkSPJWXHRhKGzVvb0urJsbMlRxi1Q==" }, "@testing-library/dom": { - "version": "5.6.1", - "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-5.6.1.tgz", - "integrity": "sha512-Y1T2bjtvQMewffn1CJ28kpgnuvPYKsBcZMagEH0ppfEMZPDc8AkkEnTk4smrGZKw0cblNB3lhM2FMnpfLExlHg==", + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-6.0.0.tgz", + "integrity": "sha512-B5XTz3uMsbqbdR9CZlnwpZjTE3fCWuqRkz/zvDc2Ej/vuHmTM0Ur2v0XPwr7usWfGIBsahEK5HL1E91+4IFiBg==", "requires": { "@babel/runtime": "^7.5.5", "@sheerun/mutationobserver-shim": "^0.3.2", "aria-query": "3.0.0", "pretty-format": "^24.8.0", - "wait-for-expect": "^1.2.0" + "wait-for-expect": "^1.3.0" } }, "@testing-library/jest-dom": { @@ -8368,9 +8368,9 @@ } }, "wait-for-expect": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/wait-for-expect/-/wait-for-expect-1.2.0.tgz", - "integrity": "sha512-EJhKpA+5UHixduMBEGhTFuLuVgQBKWxkFbefOdj2bbk2/OpA5Opsc4aUTGmF+qJ+v3kTGxDRNYwKaT4j6g5n8Q==" + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/wait-for-expect/-/wait-for-expect-1.3.0.tgz", + "integrity": "sha512-8fJU7jiA96HfGPt+P/UilelSAZfhMBJ52YhKzlmZQvKEZU2EcD1GQ0yqGB6liLdHjYtYAoGVigYwdxr5rktvzA==" }, "walker": { "version": "1.0.7", diff --git a/package.json b/package.json index 1bac6c60..5430639f 100644 --- a/package.json +++ b/package.json @@ -31,7 +31,7 @@ "author": "Daniel Cook", "license": "MIT", "dependencies": { - "@testing-library/dom": "^5.6.0", + "@testing-library/dom": "^6.0.0", "@vue/test-utils": "^1.0.0-beta.29" }, "devDependencies": { diff --git a/src/vue-testing-library.js b/src/vue-testing-library.js index ac8dca64..76cd2dc5 100644 --- a/src/vue-testing-library.js +++ b/src/vue-testing-library.js @@ -2,7 +2,7 @@ import { createLocalVue, mount } from '@vue/test-utils' import { getQueriesForElement, - prettyDOM, + logDOM, wait, fireEvent } from '@testing-library/dom' @@ -63,7 +63,7 @@ function render( return { container: wrapper.element.parentNode, baseElement: document.body, - debug: (el = wrapper.element) => console.log(prettyDOM(el)), + debug: (el = wrapper.element) => logDOM(el), unmount: () => wrapper.destroy(), isUnmounted: () => wrapper.vm._isDestroyed, html: () => wrapper.html(), From f611dce3f8dbf33808fa86cafdb6240d1ec14f0f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adri=C3=A0=20Fontcuberta?= Date: Sat, 10 Aug 2019 21:26:23 +0200 Subject: [PATCH 4/4] Consistency is key --- tests/__tests__/simple-button.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/__tests__/simple-button.js b/tests/__tests__/simple-button.js index 47b1aa24..a365708b 100644 --- a/tests/__tests__/simple-button.js +++ b/tests/__tests__/simple-button.js @@ -29,6 +29,6 @@ test('click event is emitted when button is clicked', async () => { await fireEvent.click(getByRole('button')) // Expect that the event emitted a "click" event. We should test for emitted - // events has they are part of the public API of the component. + // events has they are part of the public API of the component expect(emitted()).toHaveProperty('click') })