Skip to content

Commit

Permalink
docs: fix typos/style inconsistencies in using-with-vuex.md (#1126)
Browse files Browse the repository at this point in the history
  • Loading branch information
HusamElbashir authored and eddyerburgh committed Feb 2, 2019
1 parent d61b559 commit 32ce160
Showing 1 changed file with 10 additions and 11 deletions.
21 changes: 10 additions & 11 deletions docs/guides/using-with-vuex.md
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,6 @@ describe('Actions.vue', () => {
actionInput: jest.fn()
}
store = new Vuex.Store({
state: {},
actions
})
})
Expand Down Expand Up @@ -126,7 +125,7 @@ Great, so now we can mock actions, let’s look at mocking getters.
</script>
```

This is a fairly simple component. It renders the result of the getters `clicks` and `inputValue`. Again, we don’t really care about what those getters returns – just that the result of them is being rendered correctly.
This is a fairly simple component. It renders the result of the getters `clicks` and `inputValue`. Again, we don’t really care about what those getters return – just that their result is being rendered correctly.

Let’s see the test:

Expand Down Expand Up @@ -154,13 +153,13 @@ describe('Getters.vue', () => {
})
})

it('Renders "state.inputValue" in first p tag', () => {
it('Renders "store.getters.inputValue" in first p tag', () => {
const wrapper = shallowMount(Getters, { store, localVue })
const p = wrapper.find('p')
expect(p.text()).toBe(getters.inputValue())
})

it('Renders "state.clicks" in second p tag', () => {
it('Renders "store.getters.clicks" in second p tag', () => {
const wrapper = shallowMount(Getters, { store, localVue })
const p = wrapper.findAll('p').at(1)
expect(p.text()).toBe(getters.clicks().toString())
Expand Down Expand Up @@ -245,7 +244,7 @@ describe('MyComponent.vue', () => {
expect(actions.moduleActionClick).toHaveBeenCalled()
})

it('renders "state.inputValue" in first p tag', () => {
it('renders "state.clicks" in first p tag', () => {
const wrapper = shallowMount(MyComponent, { store, localVue })
const p = wrapper.find('p')
expect(p.text()).toBe(state.clicks.toString())
Expand Down Expand Up @@ -290,7 +289,7 @@ First, let's test the `increment` mutations:

import mutations from './mutations'

test('increment increments state.count by 1', () => {
test('"increment" increments "state.count" by 1', () => {
const state = {
count: 0
}
Expand All @@ -306,14 +305,14 @@ Now let's test the `evenOrOdd` getter. We can test it by creating a mock `state`

import getters from './getters'

test('evenOrOdd returns even if state.count is even', () => {
test('"evenOrOdd" returns even if "state.count" is even', () => {
const state = {
count: 2
}
expect(getters.evenOrOdd(state)).toBe('even')
})

test('evenOrOdd returns odd if state.count is odd', () => {
test('"evenOrOdd" returns odd if "state.count" is odd', () => {
const state = {
count: 1
}
Expand All @@ -325,7 +324,7 @@ test('evenOrOdd returns odd if state.count is odd', () => {

Another approach to testing a Vuex store is to create a running store using the store config.

The benefit of testing creating a running store instance is we don't have to mock any Vuex functions.
The benefit of creating a running store instance is we don't have to mock any Vuex functions.

The downside is that when a test breaks, it can be difficult to find where the problem is.

Expand Down Expand Up @@ -354,7 +353,7 @@ import Vuex from 'vuex'
import storeConfig from './store-config'
import { cloneDeep } from 'lodash'

test('increments count value when increment is commited', () => {
test('increments "count" value when "increment" is commited', () => {
const localVue = createLocalVue()
localVue.use(Vuex)
const store = new Vuex.Store(cloneDeep(storeConfig))
Expand All @@ -363,7 +362,7 @@ test('increments count value when increment is commited', () => {
expect(store.state.count).toBe(1)
})

test('updates evenOrOdd getter when increment is commited', () => {
test('updates "evenOrOdd" getter when "increment" is commited', () => {
const localVue = createLocalVue()
localVue.use(Vuex)
const store = new Vuex.Store(cloneDeep(storeConfig))
Expand Down

0 comments on commit 32ce160

Please sign in to comment.