Add an article about reducing boilerplate (#138)

Author: lmiller1990

demo-app/src/components/Posts.vue

@@ -0,0 +1,50 @@
+<template>
+  <div>
+    <div id="message" v-if="message">{{ message }}</div>
+
+    <div v-if="authenticated">
+      <router-link 
+        class="new-post" 
+        to="/posts/new"
+      >
+        New Post
+      </router-link>
+    </div>
+
+    <h1>Posts</h1>
+    <div 
+      v-for="post in posts" 
+      :key="post.id" 
+      class="post"
+    >
+      <router-link :to="postLink(post.id)">
+        {{ post.title }}
+      </router-link>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Posts',
+  props: {
+    message: String,
+  },
+
+  computed: {
+    authenticated() {
+      return this.$store.state.authenticated
+    },
+
+    posts() {
+      return this.$store.state.posts
+    }
+  },
+
+  methods: {
+    postLink(id) {
+      return `/posts/${id}`
+    }
+  }
+}
+</script>

demo-app/src/createRouter.js

@@ -0,0 +1,15 @@
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+
+Vue.use(VueRouter)
+
+const createRouter = () => {
+  return new VueRouter({
+    mode: 'history',
+    base: process.env.BASE_URL,
+    routes: []
+  })
+}
+
+export { createRouter }
+

demo-app/src/createStore.js

@@ -0,0 +1,25 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+Vue.use(Vuex)
+
+const createStore = (initialState = {}) => new Vuex.Store({
+  state: {
+    authenticated: false,
+    posts: [],
+    ...initialState,
+  },
+  mutations: {
+    ADD_POSTS(state, posts) {
+      state.posts = [...state.posts, ...posts]
+    },
+
+    SET_AUTH(state, authenticated) {
+      state.authenticated = authenticated
+    },
+  }
+})
+
+export { createStore }
+
+

demo-app/tests/unit/Posts.spec.js

@@ -0,0 +1,57 @@
+import Vuex from 'vuex'
+import VueRouter from 'vue-router'
+import { mount, createLocalVue } from '@vue/test-utils'
+
+import Posts from '@/components/Posts.vue'
+import { createRouter } from '@/createRouter'
+import { createStore } from '@/createStore'
+
+const createWrapper = (component, options = {}, storeState = {}) => {
+  const localVue = createLocalVue()
+  localVue.use(VueRouter)
+  localVue.use(Vuex)
+  const store = createStore(storeState)
+  const router = createRouter()
+
+  return mount(component, {
+    store,
+    router,
+    localVue,
+    ...options
+  })
+}
+
+describe('Posts.vue', () => {
+  it('renders a message if passed', () => {
+    const message = 'New content coming soon!'
+    const wrapper = createWrapper(Posts, {
+      propsData: { message },
+    })
+
+    expect(wrapper.find("#message").text()).toBe('New content coming soon!')
+  })
+
+  it('renders posts', async () => {
+    const wrapper = createWrapper(Posts, {}, {
+      posts: [{ id: 1, title: 'Post' }]
+    })
+
+    expect(wrapper.findAll('.post').length).toBe(1)
+  })
+
+  it('renders new post link if authenticated', async () => {
+    const wrapper = createWrapper(Posts, {}, {
+      authenticated: true
+    })
+
+    expect(wrapper.find('.new-post').exists()).toBe(true)
+  })
+
+  it('does not render new post link if not authenticated', async () => {
+    const wrapper = createWrapper(Posts, {}, {
+      authenticated: false
+    })
+
+    expect(wrapper.find('.new-post').exists()).toBe(false)
+  })
+})

src/.vuepress/config.js

@@ -63,6 +63,7 @@ module.exports = {
           ['/vuex-in-components-mutations-and-actions', 'Vuex in components - mutations and actions'],
           ['/vue-router', 'Vue Router'],
           ['/composition-api', 'Composition API'],
+          ['/reducing-boilerplate-in-tests', 'Reducing Boilerplate'],
           ['/jest-mocking-modules', 'Jest - mocking modules'],
         ]
       },