Skip to content

Commit ebad70f

Browse files
committed
Using existing mutations to change initial state section
1 parent 5ceb792 commit ebad70f

File tree

1 file changed

+8
-8
lines changed

1 file changed

+8
-8
lines changed

README.md

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1449,7 +1449,7 @@ You can see the full implementation (including restoring the mock back to the or
14491449

14501450
### Setting up initial state in tests
14511451

1452-
Let's say we need our store to start with different initial state than is specified in application's code. E.g. a store which holds information about what is the type of current user:
1452+
Let's say we need our store to start with a different state than what is specified in the application's code. E.g. a store which holds the information about what is the current user type:
14531453

14541454
```js
14551455
// store.js
@@ -1460,7 +1460,7 @@ export default {
14601460
}
14611461
```
14621462

1463-
The problems starts when we want to test a component which uses the flag from store to determine what should be displayed:
1463+
The problems starts when we want to test a component which uses the flag from the store to determine what should be displayed:
14641464

14651465
```html
14661466
<template>
@@ -1480,7 +1480,7 @@ class MyComponent extends Vue {
14801480
}
14811481
```
14821482

1483-
In test, we need to change the initial state before each test. We have two options how to do that:
1483+
In the test, we need to change the initial state before each test. We have two options how to do that:
14841484

14851485
#### Using existing mutations to change initial state
14861486

@@ -1526,11 +1526,11 @@ describe('when user is non-VIP', function () {
15261526
});
15271527
```
15281528

1529-
There is no winner in this competition, both approaches does the work, it's up to you which one do you prefer. Few notes to consider:
1529+
There is no winner in this competition, both approaches does the work, it's up to you to chose which one you prefer. Therefore, there are a few notes to consider:
15301530

1531-
The first approach uses existing functionality, that means if the logic in mutation changes, then you have to update the tests. It also might seem a little less readable or intuitive.
1531+
The first approach uses existing functionality, which means that if the logic in the mutation changes, then you have to update the test. It also might seem a little less readable or intuitive.
15321532

1533-
The second approach doesn't require mutation to be defined (might be useful when an application doesn't need it, don't write a mutation only for using it in tests). You must be always careful with setting only properties already existing in the store. All properties of the `state` object are [reactive](https://vuejs.org/v2/guide/reactivity.html), that means every time a new value is assigned to them, the components using the property get re-rendered and updated. If you introduce new properties during the test, components will not be aware of them, unless you use `Vue.set()` method. See the next example:
1533+
The second approach doesn't require mutation to be defined (it might be useful when an application doesn't need it, don't write a mutation only for testing purpose). You must be always careful with setting only properties that already exists in the store. All properties of the `state` object are [reactive](https://vuejs.org/v2/guide/reactivity.html), which means that every time a new value is assigned to them, the components using the property get re-rendered and updated. If you introduce new properties during the test, components will not be aware of them, unless you use `Vue.set()`. See the next example:
15341534

15351535
```js
15361536
// store.js
@@ -1550,7 +1550,7 @@ describe('when user has profile loaded', function () {
15501550
this.store.state.profile = {
15511551
username: 'john.doe'
15521552
}; // Vue will see that the new value in profile is an object so it will make also the nested property username reactive
1553-
// changing property username will force the component to update
1553+
// changing the property username will force the component to update
15541554

15551555
// the following code introduces new properties on the profile object, Vue cannot detect this, so they will never get converted into reactive prop.
15561556
this.store.state.profile.firstName = 'John'; // please don't
@@ -1566,7 +1566,7 @@ describe('when user has profile loaded', function () {
15661566
// !warning: this is wrong!
15671567
```
15681568

1569-
If you try to use `firstName` or `lastName` in the template, you will only get undefined values, because these values were not reactified by the Vue. Vue cannot detect new or deleted properties, see [caveats of reactivity](https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats). However you can use `Vue.set()` to fix the problem:
1569+
If you try to use `firstName` or `lastName` in the template, you will only get undefined values, because these values were not reactified by Vue. Vue can't detect new or deleted properties, see [caveats of reactivity](https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats). However you can use `Vue.set()` to change this behavior:
15701570

15711571
```js
15721572
beforeEach(function () {

0 commit comments

Comments
 (0)