From c9d61b7555cb8442f6280518bbed991bb219d372 Mon Sep 17 00:00:00 2001 From: eddyerburgh Date: Mon, 28 May 2018 08:45:57 +0100 Subject: [PATCH 1/2] docs: update Vuex guide --- docs/guides/using-with-vuex.md | 32 +++++++++++++++++++------------- 1 file changed, 19 insertions(+), 13 deletions(-) diff --git a/docs/guides/using-with-vuex.md b/docs/guides/using-with-vuex.md index 54d65f764..5af1e820c 100644 --- a/docs/guides/using-with-vuex.md +++ b/docs/guides/using-with-vuex.md @@ -1,7 +1,9 @@ -## Using with Vuex +# Using with Vuex In this guide, we'll see how to test Vuex in components with Vue Test Utils, and how to approach testing a Vuex store. +## Testing Vuex in components + ### Mocking Actions Let’s look at some code. @@ -214,14 +216,14 @@ And the test: ``` js import { shallowMount, createLocalVue } from '@vue/test-utils' import Vuex from 'vuex' -import Modules from '../../../src/components/Modules' -import module from '../../../src/store/module' +import MyComponent from '../../../src/components/MyComponent' +import mymodule from '../../../src/store/mymodule' const localVue = createLocalVue() localVue.use(Vuex) -describe('Modules.vue', () => { +describe('MyComponent.vue', () => { let actions let state let store @@ -238,28 +240,32 @@ describe('Modules.vue', () => { } store = new Vuex.Store({ - state, - actions, - getters: module.getters + modules: { + mymodule: { + state, + actions, + getters: module.getters + } + } }) }) it('calls store action "moduleActionClick" when button is clicked', () => { - const wrapper = shallowMount(Modules, { store, localVue }) + const wrapper = shallowMount(MyComponent, { store, localVue }) const button = wrapper.find('button') button.trigger('click') expect(actions.moduleActionClick).toHaveBeenCalled() }) it('Renders "state.inputValue" in first p tag', () => { - const wrapper = shallowMount(Modules, { store, localVue }) + const wrapper = shallowMount(MyComponent, { store, localVue }) const p = wrapper.find('p') - expect(p.text()).toBe(state.module.clicks.toString()) + expect(p.text()).toBe(state.clicks.toString()) }) }) ``` -### Testing a Vuex Store +#### Testing a Vuex Store There are two approaches to testing a Vuex store. The first approach is to unit test the getters, mutations, and actions separately. The second approach is to create a store and test against that. We'll look at both approaches. @@ -380,9 +386,9 @@ test('updates evenOrOdd getter when increment is commited', () => { Notice that we use `cloneDeep` to clone the store config before creating a store with it. This is because Vuex mutates the options object used to create the store. To make sure we have a clean store in each test, we need to clone the `storeConfig` object. -### Resources +## Resources - [Example project for testing the components](https://github.com/eddyerburgh/vue-test-utils-vuex-example) - [Example project for testing the store](https://github.com/eddyerburgh/testing-vuex-store-example) - [`localVue`](../api/options.md#localvue) -- [`createLocalVue`](../api/createLocalVue.md) +- [`createLocalVue`](../api/createLocalVue.md) \ No newline at end of file From c301094bf677b5cf64d71179064cda44de05a7d6 Mon Sep 17 00:00:00 2001 From: eddyerburgh Date: Mon, 28 May 2018 09:11:04 +0100 Subject: [PATCH 2/2] docs: fix headings --- docs/guides/using-with-vuex.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/guides/using-with-vuex.md b/docs/guides/using-with-vuex.md index 5af1e820c..45a50c343 100644 --- a/docs/guides/using-with-vuex.md +++ b/docs/guides/using-with-vuex.md @@ -265,7 +265,7 @@ describe('MyComponent.vue', () => { }) ``` -#### Testing a Vuex Store +### Testing a Vuex Store There are two approaches to testing a Vuex store. The first approach is to unit test the getters, mutations, and actions separately. The second approach is to create a store and test against that. We'll look at both approaches. @@ -386,7 +386,7 @@ test('updates evenOrOdd getter when increment is commited', () => { Notice that we use `cloneDeep` to clone the store config before creating a store with it. This is because Vuex mutates the options object used to create the store. To make sure we have a clean store in each test, we need to clone the `storeConfig` object. -## Resources +### Resources - [Example project for testing the components](https://github.com/eddyerburgh/vue-test-utils-vuex-example) - [Example project for testing the store](https://github.com/eddyerburgh/testing-vuex-store-example)