Merge pull request #19 from vuejs/sidebar-proposal

Sidebar proposal for docs

Author: lmiller1990

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' }
     ]
   }

src/guide/async-suspense.md

@@ -0,0 +1,3 @@
+# Suspense and Async Behavior
+
+`async` related stuff. Maybe `flushPromises`?

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?

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.

src/guide/conditional-rendering.md

@@ -0,0 +1,5 @@
+# Conditional Rendering
+
+Mostly `exists()`, `find()`, and `get()`.
+
+Maybe `html()`, `classes()`?

src/guide/event-handling.md

@@ -0,0 +1,3 @@
+# Event Handling
+
+Mostly `emitted()`.

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

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).

src/guide/introduction.md

@@ -11,11 +11,7 @@ import { mount } from '@vue/test-utils'
 
 const Hello = {
   template: '<div>{{ msg }}</div>',
-  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 `<Hello>` component. The first argument is the component we want to render - in this case, the `<Hello>` 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 `<Hello>` component. The first argument is the component we want to render - in this case, the `<Hello>` 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.

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.

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).

src/guide/reusability-composition.md

@@ -0,0 +1,7 @@
+# Reusability & Composition
+
+Mostly:
+
+-  `global.provide`.
+-  `global.mixins`.
+-  `global.directives`.

src/guide/slots.md

@@ -0,0 +1,3 @@
+# Slots
+
+Mostly `slots`.

src/guide/stubs-shallow-mount.md

@@ -0,0 +1,3 @@
+# Stubs and Shallow Mount
+
+Mostly `mount({ shallow: true })` and `global.stubs`.

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?)

src/guide/transitions.md

@@ -0,0 +1,2 @@
+# Transitions
+

src/guide/vue-router.md

@@ -0,0 +1,5 @@
+# Vue Router
+
+:)
+
+https://github.com/vuejs/vue-test-utils-next-docs/issues/7

src/guide/vuex.md

@@ -0,0 +1,5 @@
+# Vuex
+
+:)
+
+https://github.com/vuejs/vue-test-utils-next-docs/issues/8