Docs: Vue Router #43

lmiller1990 · 2020-07-26T13:10:00Z

Although we working on some Vue Router utils/mock router to make testing Vue Router easier (vuejs/test-utils#152), I still think it's good to illustrate how you can use a real router, as well as a mock router, in your Vue unit tests. This simple article introduces both.

afontcu

LGTM! I expect this part to be interated upon when/if we end up with custom helpers, so this is a good starting point

afontcu · 2020-07-27T07:46:22Z

src/guide/vue-router.md

+
+```js {6,7,8}
+import { mount } from '@vue/test-utils'
+import { createRouter, createWebHistory } from 'vue-router'


We should import router instead, am I right?

The router is referring to the instance created before.

I think to make it clearer, we should show a bit of the router instance:

const router = createRouter({ // options omitted for brevity })

or a different comment that sounds better in English

src/guide/vue-router.md

afontcu · 2020-07-27T07:52:41Z

src/guide/vue-router.md

+  })
+
+  it('redirect an unauthenticated user to 404', () => {
+    // Try writing this yourself! It's a good exercise. You can reuse most of the above test.


This feels more like cookbook/course rather than guide content. Not sure if the guide should contain "exercises" like this one (even though I get your point and I'd love people to do this).

I will add the other test

afontcu · 2020-07-27T07:53:35Z

src/guide/vue-router.md

+      }
+    })
+
+    wrapper.find('button').trigger('click')


even though it is not strictly needed here (AFAICT), I'd await the trigger method, just to keep it in sync (no pun intended) with docs.

posva

This is a great start! Here are some extra thoughts:

I think we should avoid guiding the user through the errors as if it was the normal path, but instead talk about them and why they appear and how to solve them because people are likely to get these errors when testing things by themselves, so it's important to appear in search results

I don't know if you intentionally show this to talk about mocks but I really think we should get vuejs/test-utils#152 figured out first to provide a more out of the box experience

posva · 2020-07-27T09:24:20Z

src/guide/vue-router.md


-:)
+Vue Test Utils does not provide any special functions to assist with testing components that rely on Vue Router. This article will present two ways to test an application using Vue Router - using the real Vue Router, which is more production like but also may lead to complexity when testing larger applications, and by using a mock router, allowing for more fine grained control of the testing environment.


I think we should explicitly recommend using the mocked router as well as putting that section first

Yep, we can recommend mocking the router. Regarding the order, my initial idea was to use a real router to show the complexity it introduces to otherwise simple unit tests, then show the solution. I don't have a really strong opinion on the order. I'll rework the article to discuss the mocked solution first.

posva · 2020-07-27T09:24:55Z

src/guide/vue-router.md

+import { mount } from '@vue/test-utils'
+import { createRouter, createWebHistory } from 'vue-router'


I image we could remove these imports here

posva · 2020-07-27T09:26:51Z

src/guide/vue-router.md

+}
+```
+
+The root of the app, `/`, displays a `<router-link>` leading to `/posts`, where we list the posts in an unordered list.


The root of the app is not associated with a path, so I think we should omit the , `/`, part

posva · 2020-07-27T09:29:31Z

src/guide/vue-router.md

+
+```js {6,7,8}
+import { mount } from '@vue/test-utils'
+import { createRouter, createWebHistory } from 'vue-router'


The router is referring to the instance created before.

I think to make it clearer, we should show a bit of the router instance:

const router = createRouter({ // options omitted for brevity })

or a different comment that sounds better in English

src/guide/vue-router.md

posva · 2020-07-27T09:35:37Z

src/guide/vue-router.md

+})
+```
+
+The test is now passing! If this seems like a lot of work for such a simple, that's because is it. There is an ongoing discussion to include [some helpers](https://github.com/vuejs/vue-test-utils-next/issues/152) to simplify this, but either way, it can be useful to know how things work internally.


I think we should agree on something there before posting this docs haha
Ideally, there should be no reference to an ongoing discussion making this look like a WIP (even though there is never a final doc version that doesn't improve!)

I will remove the reference to the VTU issue for now. I thought it would be good to have something documented so people can at least have some guidance (the async routing was a little confusing for me at first, I'm sure for others, too).

We should definitely provide some utils. I will try to get some momentum going. I do think there is value in explaining how things work "under the hood" as well (maybe a blog post is better than official docs for that, though).

posva · 2020-07-27T09:39:11Z

src/guide/vue-router.md

+import { createRouter, createWebHistory } from 'vue-router'
+
+test('routing', async () => {
+  router.push('/')


The reason you need this push is because the initial navigation happens when we add the router plugin.

The reason the navigation is delayed until plugin installation is to allow the user setup navigation guards before the router triggers that initial navigation.

posva · 2020-07-27T09:42:59Z

src/guide/vue-router.md

+  expect(wrapper.html()).toContain('Welcome to the blogging app')
+
+  await wrapper.find('a').trigger('click')
+  await flushPromises()


nice, I didn't know this worked in this scenario! It still works only because there are no navigation guards. This is where having those extra router test utils would be useful. Overall I think we need a router mock (vuejs/test-utils#152) that exposes utility functions like a await router.hasNavigated()

There could still be a function that takes a router instance to wrap the helpers around it: createRouteMock(router) or something similar. I also think it's worth if this kind of behavior could be automatic in test utils to make the end experience smoother

posva · 2020-07-27T09:44:47Z

src/guide/vue-router.md

+
+## Using a Mock Router
+
+You can use a mock router, instead, to avoid caring about the implementation details of Vue Router in your unit tests. Instead of using Vue Router, we can just create our own minimal mock version which only implements the features we are interested in. We can do this using a combination of `jest.mock` (if you are using Jest), and `global.components`.


I really think we should provide an official mock and not let the user do it. This is something I can do myself or we can collaboratively build. I think we should go through an RFC after vuejs/test-utils#152 to setup the API and that we could first go through the API internally

Sure, let's do it. If you have some ideas feel free to start hacking :D If I can find some time in the next week or so I will try to work on something too.

posva · 2020-07-27T09:45:52Z

src/guide/vue-router.md

+
+You can use a mock router, instead, to avoid caring about the implementation details of Vue Router in your unit tests. Instead of using Vue Router, we can just create our own minimal mock version which only implements the features we are interested in. We can do this using a combination of `jest.mock` (if you are using Jest), and `global.components`.
+
+When we mock out a dependency, it's usually because we are not interested in testing that dependencies behavior. In this case, we do not want to test clicking `<router-link>` (which is really just an `<a>` tag) navigates to the correct page - of course it does! In this example, we might be interested in ensuring that the `<a>` has the correct `to` attribute, though. This may seem trivial, but in a larger application with much more complex routing, it can be worth ensuring links are correct (especially if they are highly dynamic).


IMO one of the most important things is: we don't want to trigger global navigation guards. This makes me think it would be nice to allow ignoring in-component navigation guards (when testing a page component) by passing an option somewhere in the router test utils

Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> Co-authored-by: Adrià Fontcuberta <afontcu@gmail.com>

lmiller1990 · 2020-07-27T12:21:55Z

Thanks @posva and @afontcu for the code review. I made most of the style changes and updated some inaccuracies, mainly due to my lack of understanding about Vue Router.

I will try get some more momentum going around the mock router we started talking about here vuejs/test-utils#152.

I think the guide is still useful until we have that mock router available in VTU. I think we should stay in beta until we implement that (and solve this vuejs/test-utils#158, unrelated to Vue Router), then move to release candidate.

posva · 2020-09-05T07:52:46Z

@lmiller1990 I forgot to answer this 😓 I will be able to help you with the mock once I'm done with docs for Vue Router next. That might be in 2 weeks or so

lmiller1990 · 2020-09-05T08:54:49Z

No problem, I think we are all pretty busy! I am working on slots docs now. There is tons of resources on mocking vue-router anyway so I don't think its too urgent.

I might rework this to emphasis mocking more so at least we have something in the meantime - even if we provide a mock router, I think there is value is showing people how to make the most of their test runner.

docs: vue router

9d3f76c

lmiller1990 mentioned this pull request Jul 26, 2020

Docs: Vue Router #42

Closed

lmiller1990 requested review from afontcu and posva July 26, 2020 13:10

docs: add line highlighting:

0e690d5

afontcu reviewed Jul 27, 2020

View reviewed changes

posva reviewed Jul 27, 2020

View reviewed changes

lmiller1990 and others added 3 commits July 27, 2020 21:59

Apply suggestions from code review

6d381e0

Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> Co-authored-by: Adrià Fontcuberta <afontcu@gmail.com>

docs: rework routing guide

bff90d8

docs: merge code review recommendations

58af9e7

lmiller1990 merged commit ac8afc6 into master Sep 16, 2020

lmiller1990 deleted the docs/vue-router-article branch September 16, 2020 13:01

afontcu mentioned this pull request Jan 16, 2021

feat: add Vue Router section #7

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Docs: Vue Router #43

Docs: Vue Router #43

lmiller1990 commented Jul 26, 2020

afontcu left a comment

afontcu Jul 27, 2020

posva Jul 27, 2020

afontcu Jul 27, 2020

lmiller1990 Jul 27, 2020

afontcu Jul 27, 2020

posva left a comment

posva Jul 27, 2020

lmiller1990 Jul 27, 2020

posva Jul 27, 2020

posva Jul 27, 2020

posva Jul 27, 2020

posva Jul 27, 2020

lmiller1990 Jul 27, 2020

posva Jul 27, 2020

posva Jul 27, 2020

posva Jul 27, 2020

lmiller1990 Jul 27, 2020 •

edited

Loading

posva Jul 27, 2020

lmiller1990 commented Jul 27, 2020 •

edited

Loading

posva commented Sep 5, 2020

lmiller1990 commented Sep 5, 2020 •

edited

Loading


		:)
		Vue Test Utils does not provide any special functions to assist with testing components that rely on Vue Router. This article will present two ways to test an application using Vue Router - using the real Vue Router, which is more production like but also may lead to complexity when testing larger applications, and by using a mock router, allowing for more fine grained control of the testing environment.

		import { mount } from '@vue/test-utils'
		import { createRouter, createWebHistory } from 'vue-router'


		## Using a Mock Router

		You can use a mock router, instead, to avoid caring about the implementation details of Vue Router in your unit tests. Instead of using Vue Router, we can just create our own minimal mock version which only implements the features we are interested in. We can do this using a combination of `jest.mock` (if you are using Jest), and `global.components`.


		You can use a mock router, instead, to avoid caring about the implementation details of Vue Router in your unit tests. Instead of using Vue Router, we can just create our own minimal mock version which only implements the features we are interested in. We can do this using a combination of `jest.mock` (if you are using Jest), and `global.components`.

		When we mock out a dependency, it's usually because we are not interested in testing that dependencies behavior. In this case, we do not want to test clicking `<router-link>` (which is really just an `<a>` tag) navigates to the correct page - of course it does! In this example, we might be interested in ensuring that the `<a>` has the correct `to` attribute, though. This may seem trivial, but in a larger application with much more complex routing, it can be worth ensuring links are correct (especially if they are highly dynamic).

Docs: Vue Router #43

Docs: Vue Router #43

Conversation

lmiller1990 commented Jul 26, 2020

afontcu left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

posva left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

lmiller1990 Jul 27, 2020 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

lmiller1990 commented Jul 27, 2020 • edited Loading

posva commented Sep 5, 2020

lmiller1990 commented Sep 5, 2020 • edited Loading

lmiller1990 Jul 27, 2020 •

edited

Loading

lmiller1990 commented Jul 27, 2020 •

edited

Loading

lmiller1990 commented Sep 5, 2020 •

edited

Loading