diff --git a/src/.vuepress/config.js b/src/.vuepress/config.js index aa61221..c781520 100644 --- a/src/.vuepress/config.js +++ b/src/.vuepress/config.js @@ -7,9 +7,38 @@ const sidebar = { '/guide/installation', '/guide/introduction', '/guide/a-crash-course', - '/guide/plugins' + '/guide/conditional-rendering', + '/guide/event-handling', + '/guide/passing-data', + '/guide/forms' ] }, + { + title: 'Vue Test Utils in depth', + collapsable: false, + children: [ + '/guide/slots', + '/guide/async-suspense', + '/guide/http-requests', + '/guide/transitions', + '/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 +73,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..88bac62 --- /dev/null +++ b/src/guide/forms.md @@ -0,0 +1,7 @@ +# Forms + +Mostly `setValue()` and `trigger()`. + +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/http-requests.md b/src/guide/http-requests.md new file mode 100644 index 0000000..6b8f2da --- /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 pain 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 53d419f..aabfc4b 100644 --- a/src/guide/introduction.md +++ b/src/guide/introduction.md @@ -11,11 +11,7 @@ import { mount } from '@vue/test-utils' const Hello = { template: '
{{ msg }}
', - props: { - msg: { - type: String - } - } + props: ['msg'], } test('it renders a message', () => { @@ -24,15 +20,22 @@ 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. +## 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. 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..d2576c5 --- /dev/null +++ b/src/guide/passing-data.md @@ -0,0 +1,7 @@ +# Passing Data to Components + +Mostly mounting with `data()` and `props`. + +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/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/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 new file mode 100644 index 0000000..7735e82 --- /dev/null +++ b/src/guide/vue-router.md @@ -0,0 +1,5 @@ +# Vue Router + +:) + +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 new file mode 100644 index 0000000..a8c7f28 --- /dev/null +++ b/src/guide/vuex.md @@ -0,0 +1,5 @@ +# Vuex + +:) + +https://github.com/vuejs/vue-test-utils-next-docs/issues/8 \ No newline at end of file