You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+8-8Lines changed: 8 additions & 8 deletions
Original file line number
Diff line number
Diff line change
@@ -1449,7 +1449,7 @@ You can see the full implementation (including restoring the mock back to the or
1449
1449
1450
1450
### Setting up initial state in tests
1451
1451
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:
1453
1453
1454
1454
```js
1455
1455
// store.js
@@ -1460,7 +1460,7 @@ export default {
1460
1460
}
1461
1461
```
1462
1462
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:
1464
1464
1465
1465
```html
1466
1466
<template>
@@ -1480,7 +1480,7 @@ class MyComponent extends Vue {
1480
1480
}
1481
1481
```
1482
1482
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:
1484
1484
1485
1485
#### Using existing mutations to change initial state
1486
1486
@@ -1526,11 +1526,11 @@ describe('when user is non-VIP', function () {
1526
1526
});
1527
1527
```
1528
1528
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:
1530
1530
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.
1532
1532
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:
1534
1534
1535
1535
```js
1536
1536
// store.js
@@ -1550,7 +1550,7 @@ describe('when user has profile loaded', function () {
1550
1550
this.store.state.profile= {
1551
1551
username:'john.doe'
1552
1552
}; // 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
1554
1554
1555
1555
// the following code introduces new properties on the profile object, Vue cannot detect this, so they will never get converted into reactive prop.
@@ -1566,7 +1566,7 @@ describe('when user has profile loaded', function () {
1566
1566
// !warning: this is wrong!
1567
1567
```
1568
1568
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:
0 commit comments