Add Vuex in components guide (#25)

* Add getters guide

* Upate

Author: lmiller1990

.eslintrc

@@ -17,7 +17,8 @@
     "no-debugger": 2,
     "no-proto": 0,
     "max-len": 2,
-    "indent": ["error", 2]
+    "indent": ["error", 2],
+    "no-multi-spaces": "error"
   },
    extends: [
     'eslint:recommended',

demo-app/package.json

@@ -19,7 +19,8 @@
     "@vue/test-utils": "^1.0.0-beta.16",
     "babel-core": "7.0.0-bridge.0",
     "babel-jest": "^23.0.1",
-    "vue-template-compiler": "^2.5.16"
+    "vue-template-compiler": "^2.5.16",
+    "vuex": "^3.0.1"
   },
   "browserslist": [
     "> 1%",

demo-app/src/components/ComponentWithGetters.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="fullname">
+    {{ fullname }}
+  </div>
+</template>
+
+<script>
+// import { mapGetters } from "vuex"
+
+export default {
+  name: "ComponentWithGetters",
+
+  computed: {
+    fullname() {
+      return this.$store.getters.fullname
+    }
+
+    /**
+     * mapGetters helper can be used
+     * ...mapGetters([
+     *   'fullname'
+     * ])
+     */
+  }
+}
+</script>

demo-app/src/components/ComponentWithVuex.vue

@@ -0,0 +1,19 @@
+<template>
+  <div>
+    <div class="username">
+      {{ username }}
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ComponentWithVuex",
+
+  data() {
+    return {
+      username: this.$store.state.username
+    }
+  }
+}
+</script>

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

@@ -0,0 +1,71 @@
+import Vuex from "vuex"
+import { shallowMount, createLocalVue } from "@vue/test-utils"
+import ComponentWithVuex from "@/components/ComponentWithVuex.vue"
+import ComponentWithGetters from "@/components/ComponentWithGetters.vue"
+
+const localVue = createLocalVue()
+localVue.use(Vuex)
+
+const store = new Vuex.Store({
+  state: {
+    username: "alice",
+    firstName: "Alice",
+    lastName: "Doe"
+  },
+
+  getters: {
+    fullname: (state) => state.firstName + " " + state.lastName
+  }
+})
+
+describe("ComponentWithVuex", () => {
+  it("renders a username using a real Vuex store", () => {
+    const wrapper = shallowMount(ComponentWithVuex, { store, localVue })
+
+    expect(wrapper.find(".username").text()).toBe("alice")
+  })
+
+  it("renders a username using a mock store", () => {
+    const wrapper = shallowMount(ComponentWithVuex, {
+      mocks: {
+        $store: {
+          state: { username: "alice" }
+        }
+      }
+    })
+
+    expect(wrapper.find(".username").text()).toBe("alice")
+  })
+})
+
+describe("ComponentWithGetters", () => {
+  it("renders a username using a real Vuex getter", () => {
+    const wrapper = shallowMount(ComponentWithGetters, { store, localVue })
+
+    expect(wrapper.find(".fullname").text()).toBe("Alice Doe")
+  })
+
+  it("renders a username using computed mounting options", () => {
+    const wrapper = shallowMount(ComponentWithGetters, {
+      mocks: {
+        $store: {
+          getters: {
+            fullname: "Alice Doe"
+          }
+        }
+      }
+    })
+
+    expect(wrapper.find(".fullname").text()).toBe("Alice Doe")
+  })
+
+  it("renders a username using computed mounting options", () => {
+    const wrapper = shallowMount(ComponentWithGetters, {
+      computed: {
+        fullname: () => "Alice Doe"
+      }
+    })
+
+    expect(wrapper.find(".fullname").text()).toBe("Alice Doe")
+  })
+})

demo-app/yarn.lock

@@ -7331,6 +7331,10 @@ vue@^2.5.16:
   version "2.5.16"
   resolved "https://registry.yarnpkg.com/vue/-/vue-2.5.16.tgz#07edb75e8412aaeed871ebafa99f4672584a0085"
 
+vuex@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/vuex/-/vuex-3.0.1.tgz#e761352ebe0af537d4bb755a9b9dc4be3df7efd2"
+
 w3c-hr-time@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/w3c-hr-time/-/w3c-hr-time-1.0.1.tgz#82ac2bff63d950ea9e3189a58a65625fedf19045"

docs/vuex-in-components-mutations-and-getters.md

@@ -29,7 +29,8 @@ module.exports = {
           ['/vuex-mutations', 'Vuex - Mutations'],
           ['/vuex-actions', 'Vuex - Actions'],
           ['/vuex-getters', 'Vuex - Getters'],
-          ['/vuex-in-components', 'Mocking Vuex in components'],
+          ['/vuex-in-components', 'Vuex in components - $state and getters'],
+          ['/vuex-in-components-mutations-and-getters', 'Vuex in components - mutations and actions'],
           ['/jest-mocking-modules', 'Jest - mocking modules'],
           ['/vue-router', 'Vue Router'],
         ]
@@ -51,6 +52,7 @@ module.exports = {
           ['/ja/vuex-actions', 'Vuex - アクション'],
           ['/ja/vuex-getters', 'Vuex - ゲッター'],
           ['/ja/vuex-in-components', 'コンポーネントの中でVuexのテスト'],
+          ['/ja/vuex-in-components-mutations-and-getters.md', 'Vuex in components - mutations and actions'],
           ['/ja/jest-mocking-modules', 'Jestでモジュールをモック'],
           ['/ja/vue-router', 'Vueルーター'],                 
         ]

src/.vuepress/config.js

@@ -1,8 +1,17 @@
 ### Testing Vuex
 
-Intro page to testing vuex. Brief intro. Talk about two different ways to test Vuex and their benefits.
+The next few guides discuss testing Vuex.
 
-1. testing the store separately
+## Two Sides of Testing Vuex
 
-2. testing in a component (either mocking vuex or using a real store with `localVue`
+Generally components will interact with Vuex by
 
+1. committing a mutation
+2. dispatching an action
+3. acesss the state via `$store.state` or getters
+
+These tests are to assert that the component behaves correctly based on the current state of the Vuex store. They do not need to know about the implmentation of the mutators, actions or getters.
+
+Any logic performed by the store, such as mutations and getters, can be tested in isolation. Since Vuex stores are comprised of regular JavaScript functions, they are easily unit tested.
+
+The next guide introduces some techniques to test components that use a Vuex store, and ensure they behave correctly based on the store's state. Later guides discuss testing Vuex in isolation.

src/ja/vuex-in-components-mutations-and-getters.md

@@ -0,0 +1,5 @@
+### Mutations and Actions
+
+Talk about using `jest.fn` to mock commit and dispatch. We want to assert the correct mutation/action handler and payload.
+
+Also introduce the tests working with `mapMutations` and `mapActions`?