Skip to content

Commit 02b13e8

Browse files
kazuponeddyerburgh
authored andcommitted
docs: more improvements (vuejs#94)
1 parent 5260aaa commit 02b13e8

File tree

4 files changed

+19
-19
lines changed

4 files changed

+19
-19
lines changed

docs/en/README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
* [Choosing a test runner](guides/choosing-a-test-runner.md)
99
* [Testing SFCs with Jest](guides/testing-SFCs-with-jest.md)
1010
* [Testing SFCs with Mocha + webpack](guides/testing-SFCs-with-mocha-webpack.md)
11-
* [Using with Vue Router](guides/using-with-router.md)
11+
* [Using with Vue Router](guides/using-with-vue-router.md)
1212
* [Using with Vuex](guides/using-with-vuex.md)
1313
* [API](api/README.md)
1414
* [createLocalVue](api/createLocalVue.md)

docs/en/SUMMARY.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
* [Choosing a test runner](guides/choosing-a-test-runner.md)
77
* [Testing SFCs with Jest](guides/testing-SFCs-with-jest.md)
88
* [Testing SFCs with Mocha + webpack](guides/testing-SFCs-with-mocha-webpack.md)
9-
* [Using with Vue Router](guides/using-with-router.md)
9+
* [Using with Vue Router](guides/using-with-vue-router.md)
1010
* [Using with Vuex](guides/using-with-vuex.md)
1111
* [API](api/README.md)
1212
* [mount](api/mount.md)

docs/en/guides/using-with-vue-router.md

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
# Using with vue-router
1+
# Using with Vue Router
22

3-
## Installing vue-router in tests
3+
## Installing Vue Router in tests
44

5-
You should never install vue-router on the Vue base constructor in tests. Installing vue-router adds `$route` and `$router` as read-only properties on Vue prototype.
5+
You should never install Vue Router on the Vue base constructor in tests. Installing Vue Router adds `$route` and `$router` as read-only properties on Vue prototype.
66

7-
To avoid this, we can create a localVue, and install vue-router on that.
7+
To avoid this, we can create a localVue, and install Vue Router on that.
88

99
```js
1010
import VueRouter from 'vue-router'
@@ -17,9 +17,9 @@ shallow(Component, {
1717
})
1818
```
1919

20-
## Testing components that use router-link or router-view
20+
## Testing components that use `router-link` or `router-view`
2121

22-
When you install vue-router, the router-link and router-view components are registered. This means we can use them anywhere in our application without needing to import them.
22+
When you install Vue Router, the `router-link` and `router-view` components are registered. This means we can use them anywhere in our application without needing to import them.
2323

2424
When we run tests, we need to make these vue-router components available to the component we're mounting. There are two methods to do this.
2525

@@ -31,7 +31,7 @@ shallow(Component, {
3131
})
3232
```
3333

34-
### Installing vue-router with localVue
34+
### Installing Vue Router with localVue
3535

3636
```js
3737
import VueRouter from 'vue-router'
@@ -44,7 +44,7 @@ shallow(Component, {
4444
})
4545
```
4646

47-
## Mocking $route and $router
47+
## Mocking `$route` and `$router`
4848

4949
Sometimes you want to test that a component does something with parameters from the `$route` and `$router` objects. To do that, you can pass custom mocks to the Vue instance.
5050

@@ -64,8 +64,8 @@ wrapper.vm.$router // /some/path
6464

6565
## Common gotchas
6666

67-
Installing vue-router adds `$route` and `$router` as read-only properties on Vue prototype.
67+
Installing Vue Router adds `$route` and `$router` as read-only properties on Vue prototype.
6868

69-
This means any future tests that try to mock $route or `$router` will fail.
69+
This means any future tests that try to mock `$route` or `$router` will fail.
7070

71-
To avoid this, never install vue-router when you're running tests.
71+
To avoid this, never install Vue Router when you're running tests.

docs/en/guides/using-with-vuex.md

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# Using with Vuex
22

3-
In this guide, we'll see how to test Vuex in components with vue-test-utils.
3+
In this guide, we'll see how to test Vuex in components with `vue-test-utils`.
44

55
## Mocking Actions
66

@@ -91,17 +91,17 @@ describe('Actions.vue', () => {
9191
})
9292
```
9393

94-
What’s happening here? First we tell Vue to use Vuex with the Vue.use method. This is just a wrapper around Vue.use.
94+
What’s happening here? First we tell Vue to use Vuex with the `Vue.use` method. This is just a wrapper around `Vue.use`.
9595

96-
We then make a mock store by calling new Vuex.store with our mock values. We only pass it the actions, since that’s all we care about.
96+
We then make a mock store by calling new `Vuex.store` with our mock values. We only pass it the actions, since that’s all we care about.
9797

9898
The actions are [jest mock functions](https://facebook.github.io/jest/docs/en/mock-functions.html). These mock functions give us methods to assert whether the actions were called or not.
9999

100100
We can then assert in our tests that the action stub was called when expected.
101101

102102
Now the way we define the store might look a bit foreign to you.
103103

104-
We’re using beforeEach to ensure we have a clean store before each test. beforeEach is a mocha hook that’s called before each test. In our test, we are reassigning the store variables value. If we didn’t do this, the mock functions would need to be automatically reset. It also lets us change the state in our tests, without it affecting later tests.
104+
We’re using `beforeEach` to ensure we have a clean store before each test. `beforeEach` is a mocha hook that’s called before each test. In our test, we are reassigning the store variables value. If we didn’t do this, the mock functions would need to be automatically reset. It also lets us change the state in our tests, without it affecting later tests.
105105

106106
The most important thing to note in this test is that **we create a mock Vuex store and then pass it to vue-test-utils**.
107107

@@ -130,7 +130,7 @@ export default{
130130
</script>
131131
```
132132

133-
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.
133+
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.
134134

135135
Let’s see the test:
136136

@@ -171,7 +171,7 @@ describe('Getters.vue', () => {
171171
})
172172
})
173173
```
174-
This test is similar to our actions test. We create a mock store before each test, pass it as an option when we call shallow, and assert that the value returned by our mock getters is being rendered.
174+
This test is similar to our actions test. We create a mock store before each test, pass it as an option when we call `shallow`, and assert that the value returned by our mock getters is being rendered.
175175

176176
This is great, but what if we want to check our getters are returning the correct part of our state?
177177

0 commit comments

Comments
 (0)