From b209d4ab0f2cc3a5cf3c346a5d354716a9f264a7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adri=C3=A0=20Fontcuberta?= Date: Tue, 5 May 2020 07:29:23 +0200 Subject: [PATCH 1/5] Make introduction example shorter --- src/guide/introduction.md | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/src/guide/introduction.md b/src/guide/introduction.md index 53d419f..0304c46 100644 --- a/src/guide/introduction.md +++ b/src/guide/introduction.md @@ -11,12 +11,8 @@ import { mount } from '@vue/test-utils' const Hello = { template: '
{{ msg }}
', - props: { - msg: { - type: String + props: ['msg'], } - } -} test('it renders a message', () => { const wrapper = mount(Hello, { From d9cb62102883c31ffff468893de3dc7b7128aab8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adri=C3=A0=20Fontcuberta?= Date: Tue, 5 May 2020 07:29:39 +0200 Subject: [PATCH 2/5] Add relationship between versions --- src/guide/introduction.md | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/guide/introduction.md b/src/guide/introduction.md index 0304c46..c3df69c 100644 --- a/src/guide/introduction.md +++ b/src/guide/introduction.md @@ -29,6 +29,13 @@ We use the `mount` method to render the `` component. The first argument `mount` returns a "wrapper" - a thin layer around your Vue component, with useful methods such as `html`, which we use to assert that the `msg` prop is rendered correctly. +## Vue and Vue Test Utils + +In short: + +* Vue Test Utils 1.X targets Vue 2.X. +* Vue Test Utils 2.X targets Vue 3.X. + ## What Next? If you want to see what else Vue Test Utils can do, take the crash course [here](/guide/a-crash-course/), where we use Test Driven Development (TDD) and Vue Test Utils to build a simple Todo app. From 64e5eacff8468834f162c03350f6eaf17235f637 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adri=C3=A0=20Fontcuberta?= Date: Tue, 5 May 2020 07:30:46 +0200 Subject: [PATCH 3/5] Add structure scaffolding --- src/.vuepress/config.js | 31 +++++++++++++++++++++++++++- src/guide/async-suspense.md | 3 +++ src/guide/community-learning.md | 7 +++++++ src/guide/component-instance.md | 5 +++++ src/guide/conditional-rendering.md | 5 +++++ src/guide/event-handling.md | 3 +++ src/guide/forms.md | 5 +++++ src/guide/http-requests.md | 7 +++++++ src/guide/introduction.md | 6 +++--- src/guide/migration.md | 3 +++ src/guide/passing-data.md | 5 +++++ src/guide/reusability-composition.md | 7 +++++++ src/guide/slots.md | 3 +++ src/guide/stubs-shallow-mount.md | 3 +++ src/guide/third-party.md | 10 +++++++++ src/guide/vue-router.md | 3 +++ src/guide/vuex.md | 3 +++ 17 files changed, 105 insertions(+), 4 deletions(-) create mode 100644 src/guide/async-suspense.md create mode 100644 src/guide/community-learning.md create mode 100644 src/guide/component-instance.md create mode 100644 src/guide/conditional-rendering.md create mode 100644 src/guide/event-handling.md create mode 100644 src/guide/forms.md create mode 100644 src/guide/http-requests.md create mode 100644 src/guide/migration.md create mode 100644 src/guide/passing-data.md create mode 100644 src/guide/reusability-composition.md create mode 100644 src/guide/slots.md create mode 100644 src/guide/stubs-shallow-mount.md create mode 100644 src/guide/third-party.md create mode 100644 src/guide/vue-router.md create mode 100644 src/guide/vuex.md diff --git a/src/.vuepress/config.js b/src/.vuepress/config.js index aa61221..86db52c 100644 --- a/src/.vuepress/config.js +++ b/src/.vuepress/config.js @@ -7,9 +7,37 @@ const sidebar = { '/guide/installation', '/guide/introduction', '/guide/a-crash-course', - '/guide/plugins' + '/guide/conditional-rendering', + '/guide/event-handling', + '/guide/forms' ] }, + { + title: 'Vue Test Utils in depth', + collapsable: false, + children: [ + '/guide/slots', + '/guide/passing-data', + '/guide/async-suspense', + '/guide/http-requests', + '/guide/component-instance', + '/guide/reusability-composition', + '/guide/vuex', + '/guide/vue-router', + '/guide/third-party', + '/guide/stubs-shallow-mount' + ] + }, + { + title: 'Extending Vue Test Utils', + collapsable: false, + children: ['/guide/plugins', '/guide/community-learning'] + }, + { + title: 'Migration to Vue Test Utils 2', + collapsable: false, + children: ['/guide/migration'] + }, { title: 'API Reference', collapsable: false, @@ -44,6 +72,7 @@ module.exports = { nav: [ { text: 'Guide', link: '/guide/introduction' }, { text: 'API Reference', link: '/api/' }, + { text: 'Migration from VTU 1', link: '/guide/migration' }, { text: 'GitHub', link: 'https://github.com/vuejs/vue-test-utils-next' } ] } diff --git a/src/guide/async-suspense.md b/src/guide/async-suspense.md new file mode 100644 index 0000000..86fc9ab --- /dev/null +++ b/src/guide/async-suspense.md @@ -0,0 +1,3 @@ +# Suspense and Async Behavior + +`async` related stuff. Maybe `flushPromises`? \ No newline at end of file diff --git a/src/guide/community-learning.md b/src/guide/community-learning.md new file mode 100644 index 0000000..61765b5 --- /dev/null +++ b/src/guide/community-learning.md @@ -0,0 +1,7 @@ +# Community and Learning + +Links to a future plugin repository + +Links to vue testing lib + +Links to other resources? \ No newline at end of file diff --git a/src/guide/component-instance.md b/src/guide/component-instance.md new file mode 100644 index 0000000..c0ffe7d --- /dev/null +++ b/src/guide/component-instance.md @@ -0,0 +1,5 @@ +# Component Instance + +Mostly `findComponent()`, `.props()` et al. + +Also why `.vm` is not available and yet another recommendation to test outputs instead of implementation details. \ No newline at end of file diff --git a/src/guide/conditional-rendering.md b/src/guide/conditional-rendering.md new file mode 100644 index 0000000..d5547a9 --- /dev/null +++ b/src/guide/conditional-rendering.md @@ -0,0 +1,5 @@ +# Conditional Rendering + +Mostly `exists()`, `find()`, and `get()`. + +Maybe `html()`, `classes()`? \ No newline at end of file diff --git a/src/guide/event-handling.md b/src/guide/event-handling.md new file mode 100644 index 0000000..f0be2ea --- /dev/null +++ b/src/guide/event-handling.md @@ -0,0 +1,3 @@ +# Event Handling + +Mostly `emitted()`. \ No newline at end of file diff --git a/src/guide/forms.md b/src/guide/forms.md new file mode 100644 index 0000000..09824d0 --- /dev/null +++ b/src/guide/forms.md @@ -0,0 +1,5 @@ +# Forms + +Mostly `setValue()` and `trigger()`. + +Also we should tackle `v-model` here once \ No newline at end of file diff --git a/src/guide/http-requests.md b/src/guide/http-requests.md new file mode 100644 index 0000000..99a88b8 --- /dev/null +++ b/src/guide/http-requests.md @@ -0,0 +1,7 @@ +# Making HTTP requests + +It isn't that tricky, but I feel it is a common paint point. + +Mostly `jest.mock()`, `trigger()`. + +Also: how to handle HTTP requests from lifecycle hooks (we could add `.unmount()` here). \ No newline at end of file diff --git a/src/guide/introduction.md b/src/guide/introduction.md index c3df69c..aabfc4b 100644 --- a/src/guide/introduction.md +++ b/src/guide/introduction.md @@ -12,7 +12,7 @@ import { mount } from '@vue/test-utils' const Hello = { template: '
{{ msg }}
', props: ['msg'], - } +} test('it renders a message', () => { const wrapper = mount(Hello, { @@ -20,12 +20,12 @@ test('it renders a message', () => { msg: 'Hello world' } }) - + expect(wrapper.html()).toContain('Hello world') }) ``` -We use the `mount` method to render the `` component. The first argument is the component we want to render - in this case, the `` component. The second argument is an object of options. We use the `props` mounting option to set the `msg` prop. +We use the `mount` method to render the `` component. The first argument is the component we want to render - in this case, the `` component. The second argument is an object of options. We use the `props` mounting option to set the `msg` prop. `mount` returns a "wrapper" - a thin layer around your Vue component, with useful methods such as `html`, which we use to assert that the `msg` prop is rendered correctly. diff --git a/src/guide/migration.md b/src/guide/migration.md new file mode 100644 index 0000000..a0e1649 --- /dev/null +++ b/src/guide/migration.md @@ -0,0 +1,3 @@ +# Migration + +A review of changes VTU 1 -> VTU 2, and some code snippets to showcase required modifications. \ No newline at end of file diff --git a/src/guide/passing-data.md b/src/guide/passing-data.md new file mode 100644 index 0000000..e05cccf --- /dev/null +++ b/src/guide/passing-data.md @@ -0,0 +1,5 @@ +# Passing Data + +Mostly `mount(Comp, { data() {...} })`, `setProps()`. + +Important note to mention: `setProps()` only works for the mounted component. \ No newline at end of file diff --git a/src/guide/reusability-composition.md b/src/guide/reusability-composition.md new file mode 100644 index 0000000..2368b1a --- /dev/null +++ b/src/guide/reusability-composition.md @@ -0,0 +1,7 @@ +# Reusability & Composition + +Mostly: + +- `global.provide`. +- `global.mixins`. +- `global.directives`. \ No newline at end of file diff --git a/src/guide/slots.md b/src/guide/slots.md new file mode 100644 index 0000000..b988620 --- /dev/null +++ b/src/guide/slots.md @@ -0,0 +1,3 @@ +# Slots + +Mostly `slots`. \ No newline at end of file diff --git a/src/guide/stubs-shallow-mount.md b/src/guide/stubs-shallow-mount.md new file mode 100644 index 0000000..d537033 --- /dev/null +++ b/src/guide/stubs-shallow-mount.md @@ -0,0 +1,3 @@ +# Stubs and Shallow Mount + +Mostly `mount({ shallow: true })` and `global.stubs`. \ No newline at end of file diff --git a/src/guide/third-party.md b/src/guide/third-party.md new file mode 100644 index 0000000..3628f30 --- /dev/null +++ b/src/guide/third-party.md @@ -0,0 +1,10 @@ +# Third-party Integration + +Overall usage of mocking tools such as `jest.mock()`. (Not only *how*, but mostly *why* and *when*). + +Also… + +* Vuetify +* BootstrapVue + +(each of them could be a subpage?) \ No newline at end of file diff --git a/src/guide/vue-router.md b/src/guide/vue-router.md new file mode 100644 index 0000000..9e93959 --- /dev/null +++ b/src/guide/vue-router.md @@ -0,0 +1,3 @@ +# Vue Router + +:) \ No newline at end of file diff --git a/src/guide/vuex.md b/src/guide/vuex.md new file mode 100644 index 0000000..81a0ea4 --- /dev/null +++ b/src/guide/vuex.md @@ -0,0 +1,3 @@ +# Vuex + +:) \ No newline at end of file From 918488a437638a813314946c08e66742ea1b245a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adri=C3=A0=20Fontcuberta?= Date: Tue, 5 May 2020 08:51:05 +0200 Subject: [PATCH 4/5] Link related issues --- src/.vuepress/config.js | 3 ++- src/guide/forms.md | 4 +++- src/guide/passing-data.md | 8 +++++--- src/guide/transitions.md | 2 ++ src/guide/vue-router.md | 4 +++- src/guide/vuex.md | 4 +++- 6 files changed, 18 insertions(+), 7 deletions(-) create mode 100644 src/guide/transitions.md diff --git a/src/.vuepress/config.js b/src/.vuepress/config.js index 86db52c..c781520 100644 --- a/src/.vuepress/config.js +++ b/src/.vuepress/config.js @@ -9,6 +9,7 @@ const sidebar = { '/guide/a-crash-course', '/guide/conditional-rendering', '/guide/event-handling', + '/guide/passing-data', '/guide/forms' ] }, @@ -17,9 +18,9 @@ const sidebar = { collapsable: false, children: [ '/guide/slots', - '/guide/passing-data', '/guide/async-suspense', '/guide/http-requests', + '/guide/transitions', '/guide/component-instance', '/guide/reusability-composition', '/guide/vuex', diff --git a/src/guide/forms.md b/src/guide/forms.md index 09824d0..88bac62 100644 --- a/src/guide/forms.md +++ b/src/guide/forms.md @@ -2,4 +2,6 @@ Mostly `setValue()` and `trigger()`. -Also we should tackle `v-model` here once \ No newline at end of file +Also we might want to tackle `v-model`. + +https://github.com/vuejs/vue-test-utils-next-docs/issues/4 \ No newline at end of file diff --git a/src/guide/passing-data.md b/src/guide/passing-data.md index e05cccf..d2576c5 100644 --- a/src/guide/passing-data.md +++ b/src/guide/passing-data.md @@ -1,5 +1,7 @@ -# Passing Data +# Passing Data to Components -Mostly `mount(Comp, { data() {...} })`, `setProps()`. +Mostly mounting with `data()` and `props`. -Important note to mention: `setProps()` only works for the mounted component. \ No newline at end of file +https://github.com/vuejs/vue-test-utils-next-docs/issues/9 + +We could also fit a complex use case with `setProps()` (as outlined in the linked issue). \ No newline at end of file diff --git a/src/guide/transitions.md b/src/guide/transitions.md new file mode 100644 index 0000000..a44195c --- /dev/null +++ b/src/guide/transitions.md @@ -0,0 +1,2 @@ +# Transitions + diff --git a/src/guide/vue-router.md b/src/guide/vue-router.md index 9e93959..7735e82 100644 --- a/src/guide/vue-router.md +++ b/src/guide/vue-router.md @@ -1,3 +1,5 @@ # Vue Router -:) \ No newline at end of file +:) + +https://github.com/vuejs/vue-test-utils-next-docs/issues/7 \ No newline at end of file diff --git a/src/guide/vuex.md b/src/guide/vuex.md index 81a0ea4..a8c7f28 100644 --- a/src/guide/vuex.md +++ b/src/guide/vuex.md @@ -1,3 +1,5 @@ # Vuex -:) \ No newline at end of file +:) + +https://github.com/vuejs/vue-test-utils-next-docs/issues/8 \ No newline at end of file From bef01d5838f09d42de3a64392a1cfaf9b126e8fc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adri=C3=A0=20Fontcuberta?= Date: Tue, 5 May 2020 13:28:02 +0200 Subject: [PATCH 5/5] Paint point lol --- src/guide/http-requests.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/guide/http-requests.md b/src/guide/http-requests.md index 99a88b8..6b8f2da 100644 --- a/src/guide/http-requests.md +++ b/src/guide/http-requests.md @@ -1,6 +1,6 @@ # Making HTTP requests -It isn't that tricky, but I feel it is a common paint point. +It isn't that tricky, but I feel it is a common pain point. Mostly `jest.mock()`, `trigger()`.