Add "Write components that are easy to test"

src/.vuepress/config.js

@@ -1,11 +1,15 @@
 const sidebar = {
   guide: [
+    {
+      title: 'Introduction',
+      collapsable: false,
+      children: ['/guide/introduction', '/guide/write-easy-test']
+    },
     {
       title: 'Essentials',
       collapsable: false,
       children: [
         '/guide/installation',
-        '/guide/introduction',
         '/guide/a-crash-course',
         '/guide/conditional-rendering',
         '/guide/event-handling',
@@ -71,7 +75,7 @@ module.exports = {
       '/api/': sidebar.api
     },
     nav: [
-      { text: 'Guide', link: '/guide/introduction' },
+      { text: 'Guide', link: '/guide/installation' },
       { 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/introduction.md

@@ -1,4 +1,4 @@
-## Vue Test Utils Documentation
+# What is Vue Test Utils?
 
 Welcome to Vue Test Utils, the official testing utility library for Vue.js!
 
@@ -9,8 +9,6 @@ In short:
 * [Vue Test Utils 1](https://github.com/vuejs/vue-test-utils/) targets [Vue 2](https://github.com/vuejs/vue/).
 * [Vue Test Utils 2](https://github.com/vuejs/vue-test-utils-next/) targets [Vue 3](https://github.com/vuejs/vue-next/).
 
-## What is Vue Test Utils?
-
 Vue Test Utils (VTU) is a set of utility functions aimed to simplify testing Vue.js components. It provides some methods to mount and interact with Vue components in an isolated manner.
 
 Let's see an example:

src/guide/write-easy-test.md

@@ -0,0 +1,60 @@
+# Write components that are easy to test
+
+Vue Test Utils helps you write tests for Vue components. However, there's only so much VTU can do.
+
+Following is a list of suggestions to write code that is easier to test, and to write tests that are meaningful and easier to maintain.
+
+The following list provide general guidance. It might come in handy in common scenarios.
+
+## Do not test implementation details
+
+Think in terms of inputs and outputs. Roughly, this is everything you should take into account when writing a test for a Vue component:
+
+### Inputs
+
+**Props**: the prop values provided.
+
+**User inputs**: user interactions such as clicking, scrolling, typing…
+
+**Data streams**: data incoming from API calls, data subscriptions…
+
+### Outputs
+
+**DOM elements**: anything the component renders to the DOM.
+
+**events**: emitted (through `$emit`) events.
+
+**side effects**: any other *observable* side effect, such as `console.log`, cookie creation, API calls…
+
+## Everything else are implementation details
+
+Notice how this list does not include elements such as internal methods, or intermediate states or data.
+
+The rule of thumb is that **a test should not break on a refactor**, that is, when we change its internal implementation without changing its public API. If that happens, it might mean the test relies on implementation details.
+
+
+## Build smaller components
+
+If a component does less, then it will be easier to test.
+
+
+### Extract API calls
+
+:::tip
+ Check out the [Making HTTP requests](../guide/http-requests.md) guide if you are unfamiliar with testing API calls.
+:::
+
+Usually, you will perform several HTTP requests throughout your application. From a testing perspective, HTTP requests provide inputs to the component, and a component can also send HTTP requests.
+
+
+### Extract complex methods
+
+Sometimes a component might feature a complex method, with heavy calculations or several dependencies.
+
+The suggestion here is to extract this method and import it to the component. This way, you can test the method in isolation (if necessary), and you can mock the import when testing your component.
+
+## Write tests before components
+
+There's no way you write untestable code if you write tests before!
+
+In out [Crash Course](../guide/a-crash-course.md) you can see how writing tests before code leads to testable components, and also helps you test edge cases.