From 22aa2256c014d76413743cee5b85ef341a85be34 Mon Sep 17 00:00:00 2001 From: Lachlan Miller Date: Fri, 22 May 2020 21:54:09 +1000 Subject: [PATCH 01/11] fix: fix iife build --- packages/shared/util.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/shared/util.js b/packages/shared/util.js index 9f209b8b3..c2655d499 100644 --- a/packages/shared/util.js +++ b/packages/shared/util.js @@ -2,7 +2,7 @@ import Vue from 'vue' import semver from 'semver' import { VUE_VERSION } from './consts' -import { config } from '@vue/test-utils' +import { config } from '../test-utils/src' export function throwError(msg: string): void { throw new Error(`[vue-test-utils]: ${msg}`) From bd5b781fe5f153c1d3f4b35166f632a709be3cf9 Mon Sep 17 00:00:00 2001 From: Lachlan Miller Date: Sun, 24 May 2020 21:41:47 +1000 Subject: [PATCH 02/11] docs: wip docs for deprecatins --- docs/.vuepress/config.js | 4 ++ docs/api/config.md | 12 ++++++ docs/upgrading-to-v1/README.md | 72 ++++++++++++++++++++++++++++++++++ 3 files changed, 88 insertions(+) create mode 100644 docs/upgrading-to-v1/README.md diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js index a8440ab9b..2e7034774 100644 --- a/docs/.vuepress/config.js +++ b/docs/.vuepress/config.js @@ -49,6 +49,10 @@ module.exports = { { text: 'Guides', link: '/guides/' + }, + { + text: 'Upgrading to V1', + link: '/upgrading-to-v1/' } ], sidebar: [ diff --git a/docs/api/config.md b/docs/api/config.md index a2e47f058..ec2f173b9 100644 --- a/docs/api/config.md +++ b/docs/api/config.md @@ -4,6 +4,18 @@ Vue Test Utils includes a config object to defined options used by Vue Test Util ### Vue Test Utils Config Options +### `showDeprecationWarnings` + +Turn off deprecation warnings. + +Example: + +```js +import { config } from `@vue/test-utils` + +config.showDeprecationWarnings = false +``` + ### `stubs` - type: `{ [name: string]: Component | boolean | string }` diff --git a/docs/upgrading-to-v1/README.md b/docs/upgrading-to-v1/README.md new file mode 100644 index 000000000..677ac283a --- /dev/null +++ b/docs/upgrading-to-v1/README.md @@ -0,0 +1,72 @@ +### Upgrading to V1.0 + +After a long time in beta, Vue Test Utils finally released v1.0! Some APIs that made sense during beta but turned out to be not such a good idea were deprecated. This guide will help you migrate away from the deprecation warnings you may be seeing if you were using the beta heavily. + +You can read the release notes for V1 [here](https://github.com/vuejs/vue-test-utils/releases) or the discussion around the deprecations [here](https://github.com/vuejs/rfcs/pull/161). + +### `find` + +In the beta,`find` could be used to find both DOm nodes using the `querySelector` syntax, or a component via a component reference, a `ref` or a `name` option. This behavior is now split into two methods: `find` and `findComponent`. + +If you were using this syntax: + +- `find(Foo)` +- `find({ name: 'foo' })` +- `find({ ref: 'my-ref' })` + +You should change those instances to be `findComponent`. You may continue using `find` on DOM nodes using the `querySelector` syntax. + +### `isVueInstance` + +This method was deprecated because it tends to encourage testing implementation details, which is a bad practice. Assertions using this can simply be removed; if you really need a substitute, you can do `expect((...).vm).toBeTruthy()`, which is basically what `isVueInstance` was doing. + +### `contains` + +Tests using `contains` can be replaced with `find` or `findComponent` or `get`. For example, `expect(wrapper.contains('#el')).toBe(true)` may be written as `expect(wrapper.find('#el')).toBe(true)`. + +### `is` + +You may rewrite tests using `is` to use `element.tagName` instead. For example, `wrapper.find('div').is('div')` may be written as `wrapper.find('div').element.tagName`. + +### `isEmpty` + +Finding out whether a DOM node is empty is not a Vue specific feature, and it is something that is difficult to get right. Rather than re-invent the wheel, we have decided it's better to delegate to an existing, well tested solution by default. Consider the excellent `toBeEmpty` matchers from [jest-dom](https://github.com/testing-library/jest-dom#tobeempty), for example, if you are using Jest. + +### `isVisible` + +See `isEmpty` above. Consider using [toBeVisible](https://github.com/testing-library/jest-dom#tobevisible) from `jest-dom` if you are using Jest. + +### `name` + +Asserting against `name` encourages testing implementation details, which is a bad practice. Avoid this is possible. If you need this feature, though, you can use `vm.$options.name` for Vue components or `element.tagName` for DOM nodes. Again, consider if you really need this test - it's likely you don't. + +### `setMethods` and `mountingOptions.methods` + +By using `setMethods`, you are mutating the Vue instance - this is nothing some Vue supports, and can often hide tests that would otherwise fail. There is no straight forward replacement for this, it depends on you use case. If you have a comlex method you would like to stub out, consider moving it another file and using your test runnner's stub or mock functionality. For example, you may want to avoid an API call: + +```js +const Foo = { + created() { + this.getData() + }, + methods: { + getData() { + axios.get('...') + } + } +} +``` + +Instead of doing: + +```js +mount(Foo, { + methods: { + getData: () => {} + } +} +``` + +Mock out the `axios` dependency. In Jest, for example, you can do `jest.mock('axios')`. This will prevent the API call, without mutating your Vue component. + +If you need more help migrating, you can join the Discord server VueLand. Alternatively, open an issue on this project's GitHub repository and someone will do their best to help you. From 9453b26e9604e458a1e815996276039091cbce2f Mon Sep 17 00:00:00 2001 From: Lachlan Date: Mon, 25 May 2020 08:50:27 +1000 Subject: [PATCH 03/11] Update docs/upgrading-to-v1/README.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Adrià Fontcuberta --- docs/upgrading-to-v1/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/upgrading-to-v1/README.md b/docs/upgrading-to-v1/README.md index 677ac283a..8fe605fa5 100644 --- a/docs/upgrading-to-v1/README.md +++ b/docs/upgrading-to-v1/README.md @@ -6,7 +6,7 @@ You can read the release notes for V1 [here](https://github.com/vuejs/vue-test-u ### `find` -In the beta,`find` could be used to find both DOm nodes using the `querySelector` syntax, or a component via a component reference, a `ref` or a `name` option. This behavior is now split into two methods: `find` and `findComponent`. +In beta,`find` could be used to find both DOM nodes (using the `querySelector` syntax) or a component (via a component reference, a `ref` or a `name` option). This behavior is now split into two methods: `find` and `findComponent`. If you were using this syntax: From 4b2a3e80434f0ffb18c1f861638fba9044f92db3 Mon Sep 17 00:00:00 2001 From: Lachlan Date: Mon, 25 May 2020 08:50:37 +1000 Subject: [PATCH 04/11] Update docs/upgrading-to-v1/README.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Adrià Fontcuberta --- docs/upgrading-to-v1/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/upgrading-to-v1/README.md b/docs/upgrading-to-v1/README.md index 8fe605fa5..5d601f1e0 100644 --- a/docs/upgrading-to-v1/README.md +++ b/docs/upgrading-to-v1/README.md @@ -1,6 +1,6 @@ ### Upgrading to V1.0 -After a long time in beta, Vue Test Utils finally released v1.0! Some APIs that made sense during beta but turned out to be not such a good idea were deprecated. This guide will help you migrate away from the deprecation warnings you may be seeing if you were using the beta heavily. +After a long time in Beta, Vue Test Utils finally released v1.0! We deprecated some methods that were not helpful, so you might see several deprecation warnings after upgrading. This guide will help you migrate away from them. You can read the release notes for V1 [here](https://github.com/vuejs/vue-test-utils/releases) or the discussion around the deprecations [here](https://github.com/vuejs/rfcs/pull/161). From 69b11f57777a09c1f9b3487fdaacf8f99444a36a Mon Sep 17 00:00:00 2001 From: Lachlan Date: Mon, 25 May 2020 08:50:45 +1000 Subject: [PATCH 05/11] Update docs/upgrading-to-v1/README.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Adrià Fontcuberta --- docs/upgrading-to-v1/README.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/docs/upgrading-to-v1/README.md b/docs/upgrading-to-v1/README.md index 5d601f1e0..004baebf4 100644 --- a/docs/upgrading-to-v1/README.md +++ b/docs/upgrading-to-v1/README.md @@ -42,7 +42,11 @@ Asserting against `name` encourages testing implementation details, which is a b ### `setMethods` and `mountingOptions.methods` -By using `setMethods`, you are mutating the Vue instance - this is nothing some Vue supports, and can often hide tests that would otherwise fail. There is no straight forward replacement for this, it depends on you use case. If you have a comlex method you would like to stub out, consider moving it another file and using your test runnner's stub or mock functionality. For example, you may want to avoid an API call: +By using `setMethods`, you are mutating the Vue instance - this is not something Vue supports, and may lead to coupled, flaky tests. + +There is no straight forward replacement for this. If you have a complex method you would like to stub out, consider moving it another file and using your test runner's stub or mock functionality. + +For example, you may want to avoid an API call: ```js const Foo = { From 35a6cc7c9496f3bc21e8fcf4e0a4b9576d3ad0f6 Mon Sep 17 00:00:00 2001 From: Lachlan Date: Mon, 25 May 2020 08:50:54 +1000 Subject: [PATCH 06/11] Update docs/upgrading-to-v1/README.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Adrià Fontcuberta --- docs/upgrading-to-v1/README.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/docs/upgrading-to-v1/README.md b/docs/upgrading-to-v1/README.md index 004baebf4..ce365c4c6 100644 --- a/docs/upgrading-to-v1/README.md +++ b/docs/upgrading-to-v1/README.md @@ -14,7 +14,9 @@ If you were using this syntax: - `find({ name: 'foo' })` - `find({ ref: 'my-ref' })` -You should change those instances to be `findComponent`. You may continue using `find` on DOM nodes using the `querySelector` syntax. +Change them to be `findComponent`. + +You may continue using `find` on DOM nodes using the `querySelector` syntax. ### `isVueInstance` From 5cd7ef8333505092d096fdc326e7295280a9a6c5 Mon Sep 17 00:00:00 2001 From: Lachlan Date: Mon, 25 May 2020 21:28:27 +1000 Subject: [PATCH 07/11] Update docs/upgrading-to-v1/README.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Adrià Fontcuberta --- docs/upgrading-to-v1/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/upgrading-to-v1/README.md b/docs/upgrading-to-v1/README.md index ce365c4c6..e056ae2d2 100644 --- a/docs/upgrading-to-v1/README.md +++ b/docs/upgrading-to-v1/README.md @@ -75,4 +75,4 @@ mount(Foo, { Mock out the `axios` dependency. In Jest, for example, you can do `jest.mock('axios')`. This will prevent the API call, without mutating your Vue component. -If you need more help migrating, you can join the Discord server VueLand. Alternatively, open an issue on this project's GitHub repository and someone will do their best to help you. +If you need more help migrating, you can join the [VueLand server](https://chat.vuejs.org/) on Discord. From 8cb2bbd93b3b8ee62cc52513cbb572de027e03c1 Mon Sep 17 00:00:00 2001 From: Lachlan Date: Mon, 25 May 2020 21:28:50 +1000 Subject: [PATCH 08/11] Update docs/upgrading-to-v1/README.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Adrià Fontcuberta --- docs/upgrading-to-v1/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/upgrading-to-v1/README.md b/docs/upgrading-to-v1/README.md index e056ae2d2..6895f27aa 100644 --- a/docs/upgrading-to-v1/README.md +++ b/docs/upgrading-to-v1/README.md @@ -40,7 +40,7 @@ See `isEmpty` above. Consider using [toBeVisible](https://github.com/testing-lib ### `name` -Asserting against `name` encourages testing implementation details, which is a bad practice. Avoid this is possible. If you need this feature, though, you can use `vm.$options.name` for Vue components or `element.tagName` for DOM nodes. Again, consider if you really need this test - it's likely you don't. +Asserting against `name` encourages testing implementation details, which is a bad practice. If you need this feature, though, you can use `vm.$options.name` for Vue components or `element.tagName` for DOM nodes. Again, consider if you really need this test - it's likely you don't. ### `setMethods` and `mountingOptions.methods` From fe600a5170788389dd1b1f4c818a7af5b84955a9 Mon Sep 17 00:00:00 2001 From: Lachlan Miller Date: Mon, 25 May 2020 21:31:03 +1000 Subject: [PATCH 09/11] chore: lint --- docs/api/config.md | 2 +- docs/upgrading-to-v1/README.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/api/config.md b/docs/api/config.md index ec2f173b9..3eceb86b0 100644 --- a/docs/api/config.md +++ b/docs/api/config.md @@ -11,7 +11,7 @@ Turn off deprecation warnings. Example: ```js -import { config } from `@vue/test-utils` +import { config } from '@vue/test-utils' config.showDeprecationWarnings = false ``` diff --git a/docs/upgrading-to-v1/README.md b/docs/upgrading-to-v1/README.md index 6895f27aa..197444760 100644 --- a/docs/upgrading-to-v1/README.md +++ b/docs/upgrading-to-v1/README.md @@ -70,7 +70,7 @@ mount(Foo, { methods: { getData: () => {} } -} +}) ``` Mock out the `axios` dependency. In Jest, for example, you can do `jest.mock('axios')`. This will prevent the API call, without mutating your Vue component. From b105720d9b07e1223b0990447af0b7da32cb793b Mon Sep 17 00:00:00 2001 From: Lachlan Miller Date: Mon, 25 May 2020 21:45:44 +1000 Subject: [PATCH 10/11] docs: note about deprecation messages --- docs/upgrading-to-v1/README.md | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/docs/upgrading-to-v1/README.md b/docs/upgrading-to-v1/README.md index 197444760..065abcf6d 100644 --- a/docs/upgrading-to-v1/README.md +++ b/docs/upgrading-to-v1/README.md @@ -76,3 +76,13 @@ mount(Foo, { Mock out the `axios` dependency. In Jest, for example, you can do `jest.mock('axios')`. This will prevent the API call, without mutating your Vue component. If you need more help migrating, you can join the [VueLand server](https://chat.vuejs.org/) on Discord. + +### Deprecation Warnings + +Deprecation warnings can be silenced. + +```js +import { config } from '@vue/test-utils' + +config.showDeprecationWarnings = false +``` From 353947231672adbe863fa25cd90beaf2e69abba4 Mon Sep 17 00:00:00 2001 From: Lachlan Miller Date: Mon, 25 May 2020 21:52:22 +1000 Subject: [PATCH 11/11] docs: add example for isVisible matcher --- docs/upgrading-to-v1/README.md | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/docs/upgrading-to-v1/README.md b/docs/upgrading-to-v1/README.md index 065abcf6d..9eb3d957f 100644 --- a/docs/upgrading-to-v1/README.md +++ b/docs/upgrading-to-v1/README.md @@ -24,7 +24,7 @@ This method was deprecated because it tends to encourage testing implementation ### `contains` -Tests using `contains` can be replaced with `find` or `findComponent` or `get`. For example, `expect(wrapper.contains('#el')).toBe(true)` may be written as `expect(wrapper.find('#el')).toBe(true)`. +Tests using `contains` can be replaced with `find` or `findComponent` or `get`. For example, `expect(wrapper.contains('#el')).toBe(true)` may be written as `wrapper.get('#el')`, which will throw an error if the selector is not matched. Another way to write this using `find` is `expect(wrapper.find('#el').element).toBeTruthy()`. ### `is` @@ -36,7 +36,18 @@ Finding out whether a DOM node is empty is not a Vue specific feature, and it is ### `isVisible` -See `isEmpty` above. Consider using [toBeVisible](https://github.com/testing-library/jest-dom#tobevisible) from `jest-dom` if you are using Jest. +See `isEmpty` above. Consider using [toBeVisible](https://github.com/testing-library/jest-dom#tobevisible) from `jest-dom` if you are using Jest. For example: + +```js +// old assertion +expect(wrapper.find('.selector').isVisible()).toBeTruthy() + +// new assertion +// consider making this matcher globally availalbe in your tests! +import '@testing-library/jest-dom' + +expect(wrapper.find('.selector').element).toBeVisible() +``` ### `name`