Skip to content

Commit 41eeb5b

Browse files
committed
Testing navigation guards and beforeRouteEnter section
1 parent eee39ba commit 41eeb5b

File tree

1 file changed

+11
-11
lines changed

1 file changed

+11
-11
lines changed

README.md

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1657,7 +1657,7 @@ This topic has been fully covered by [the official documentation](https://vue-te
16571657

16581658
## Testing navigation guards
16591659

1660-
Unfortunately, there is no easy way how to test navigation guards. If you want to simulate the event triggering by calling `router.push` function, you are going to have a hard time. ~~Better~~ Easier solution is to call the guard manually in `beforeEach()`, but even this solution doesn't have clean approach. See following examples:
1660+
Unfortunately, there is no easy way to test navigation guards. If you want to simulate the event triggering by calling `router.push` function, you are going to have a hard time. A ~~better~~ easier solution is to call the guard manually in `beforeEach()`, but even this solution doesn't have a clean approach. See the following example:
16611661

16621662
### beforeRouteEnter
16631663

@@ -1675,39 +1675,39 @@ class MyView extends Vue {
16751675
```js
16761676
// my-view.spec.js
16771677
it('should trigger beforeRouteEnter event', function () {
1678-
let view = mount(MyView);
1679-
let spy = sinon.spy(view.vm.$options.beforeRouteEnter, '0'); // you cannot just call view.vm.beforeRouteEnter(). The function exists only in $options object.
1678+
const view = mount(MyView);
1679+
const spy = sinon.spy(view.vm.$options.beforeRouteEnter, '0'); // you can't just call view.vm.beforeRouteEnter(). The function exists only in $options object.
16801680

1681-
let from = {}; // mock 'from' route
1682-
let to = {}; // mock 'to' route
1681+
const from = {}; // mock 'from' route
1682+
const to = {}; // mock 'to' route
16831683
view.vm.$options.beforeRouteEnter[0](to, from, cb => cb(view.vm));
16841684

16851685
expect(view.vm.entered).to.be.true;
16861686
expect(spy).to.have.been.called;
16871687
});
16881688
```
16891689

1690-
In case you are wondering how to do the same thing using `router.push`, so you don't have to mock routes and callback function, this is the way:
1690+
In case you are wondering how to do the same thing using `router.push`, in a way that you don't have to mock routes and callback functions, this is the way to go:
16911691

16921692
```js
16931693
it('should trigger beforeRouteEnter event', function () {
1694-
let view = mount(MyView);
1695-
let spy = sinon.spy(view.vm.$options.beforeRouteEnter, '0'); // beforeRouteEnter is an array of callback functions
1694+
const view = mount(MyView);
1695+
const spy = sinon.spy(view.vm.$options.beforeRouteEnter, '0'); // beforeRouteEnter is an array of callback functions
16961696

1697-
// at this moment, this.route.currentRoute doesn't exist. We need to push route we want to have in the $route object inside out view
1697+
// at this moment, this.route.currentRoute doesn't exist. We need to push the route we want to have in the $route object inside our view
16981698
this.router.push({ name: 'my-route' });
16991699

17001700
// now the route exists, but, because it's not resolved (committed) yet, the route is not aware of the view. we need to assign the mounted view to the instances
17011701
this.router.currentRoute.matched[0].instances.default = view.vm;
1702-
// now we will finally execute the life cycle of the router, which will go through global event, then it will check if default instance on matched route exist and if so, it will call the beforeRouteEnter event on it.
1702+
// now we will finally execute the life cycle of the router, which will go through global event, then it will check if default instance on the matched route exist and if so, it will call the beforeRouteEnter event on it.
17031703
await flushPromises();
17041704

17051705
expect(view.vm.entered).to.be.true;
17061706
expect(spy).to.have.been.called;
17071707
});
17081708
```
17091709

1710-
This approach requires a knowledge about VUE and router internals and **can stop working** after every minor refactoring done by the VUE team. I do not recommend to use it unless guys from VUE provide some helper function in [@vue/test-utils](https://github.com/vuejs/vue-test-utils) library for setting it up using cleaner way.
1710+
This approach requires VUE and router internals knowledge, keep in mind that it **can stop working** after every minor refactoring done by the VUE core team. I do not recommend to use it unless guys from VUE provide some helper function in [@vue/test-utils](https://github.com/vuejs/vue-test-utils) library for setting it up using a cleaner approach.
17111711

17121712
## Testing provide/inject
17131713

0 commit comments

Comments
 (0)