feat: setQuery and setHash (#47)

Author: cexbrayat

README.md

@@ -150,6 +150,21 @@ it('should display the user details', async () => {
 })
 ```
 
+It can be awaited if you need to wait for Vue to render again:
+
+```js
+it('should display the user details', async () => {
+  const wrapper = mount(UserDetails)
+  await getRouter().setParams({ userId: 12 })
+
+  // test...
+})
+```
+
+`setQuery` and `setHash` are very similar.
+They can be used to set the route query or hash without triggering a navigation,
+and can be awaited too.
+
 ### Setting the initial location
 
 By default the router mock starts on [`START_LOCATION`](https://next.router.vuejs.org/api/#start-location). In some scenarios this might need to be adjusted by pushing a new location and awaiting it before testing:

__tests__/navigations.spec.ts

@@ -198,7 +198,7 @@ describe('Navigations', () => {
     expect(wrapper.text()).toBe('/bar')
   })
 
-  it.skip('can wait for an ongoing navigation', async () => {
+  it('can wait for an ongoing navigation', async () => {
     const wrapper = mount(Test)
     const router = getRouter()
 

__tests__/params.spec.ts

@@ -0,0 +1,80 @@
+import { mount } from '@vue/test-utils'
+import { watch } from 'vue'
+import { getRouter } from '../src'
+
+describe('partial location', () => {
+  describe('setParams', () => {
+    it('sets current route params', async () => {
+      const router = getRouter()
+      router.setParams({ userId: 12 })
+      const wrapper = mount({
+        template: `<p>{{ $route.params.userId }}</p>`,
+      })
+      const spy = jest.fn()
+
+      watch(wrapper.vm.$route, spy)
+
+      expect(wrapper.vm.$route.params).toEqual({ userId: '12' })
+      expect(wrapper.text()).toBe('12')
+      expect(spy).toHaveBeenCalledTimes(0)
+
+      await router.setParams({ userId: 12 })
+      expect(spy).toHaveBeenCalledTimes(1)
+      expect(wrapper.text()).toBe('12')
+
+      await router.setParams({ userId: 2 })
+      expect(spy).toHaveBeenCalledTimes(2)
+      expect(wrapper.text()).toBe('2')
+    })
+  })
+
+  describe('setQuery', () => {
+    it('sets current route query', async () => {
+      const router = getRouter()
+      router.setQuery({ page: 2 })
+      const wrapper = mount({
+        template: `<p>{{ $route.query.page }}</p>`,
+      })
+      const spy = jest.fn()
+
+      watch(wrapper.vm.$route, spy)
+
+      expect(wrapper.vm.$route.query).toEqual({ page: '2' })
+      expect(wrapper.text()).toBe('2')
+      expect(spy).toHaveBeenCalledTimes(0)
+
+      await router.setQuery({ page: 2 })
+      expect(spy).toHaveBeenCalledTimes(1)
+      expect(wrapper.text()).toBe('2')
+
+      await router.setQuery({ page: 3 })
+      expect(spy).toHaveBeenCalledTimes(2)
+      expect(wrapper.text()).toBe('3')
+    })
+  })
+
+  describe('setHash', () => {
+    it('sets current route hash', async () => {
+      const router = getRouter()
+      router.setHash('#more')
+      const wrapper = mount({
+        template: `<p>{{ $route.hash }}</p>`,
+      })
+      const spy = jest.fn()
+
+      watch(wrapper.vm.$route, spy)
+
+      expect(wrapper.vm.$route.hash).toEqual('#more')
+      expect(wrapper.text()).toBe('#more')
+      expect(spy).toHaveBeenCalledTimes(0)
+
+      await router.setHash('#more')
+      expect(spy).toHaveBeenCalledTimes(1)
+      expect(wrapper.text()).toBe('#more')
+
+      await router.setHash('#about')
+      expect(spy).toHaveBeenCalledTimes(2)
+      expect(wrapper.text()).toBe('#about')
+    })
+  })
+})

__tests__/partialLocation.spec.ts

@@ -2,6 +2,7 @@ import { Component, nextTick, Ref, ref } from 'vue'
 import {
   createMemoryHistory,
   createRouter,
+  LocationQueryRaw,
   RouteLocationRaw,
   RouteParamsRaw,
   Router,
@@ -48,7 +49,23 @@ export interface RouterMock extends Router {
    *
    * @param params - params to set in the current route
    */
-  setParams(params: RouteParamsRaw): void
+  setParams(params: RouteParamsRaw): Promise<void>
+
+  /**
+   * Sets the query of the current route without triggering a navigation. Can
+   * be awaited to wait for Vue to render again.
+   *
+   * @param query - query to set in the current route
+   */
+  setQuery(query: LocationQueryRaw): Promise<void>
+
+  /**
+   * Sets the hash of the current route without triggering a navigation. Can
+   * be awaited to wait for Vue to render again.
+   *
+   * @param hash - hash to set in the current route
+   */
+  setHash(hash: string): Promise<void>
 }
 
 export interface RouterMockOptions extends Partial<RouterOptions> {
@@ -188,6 +205,16 @@ export function createRouterMock(options: RouterMockOptions = {}): RouterMock {
     return nextTick()
   }
 
+  function setQuery(query: LocationQueryRaw) {
+    router.currentRoute.value = router.resolve({ query })
+    return nextTick()
+  }
+
+  function setHash(hash: string) {
+    router.currentRoute.value = router.resolve({ hash })
+    return nextTick()
+  }
+
   const depth = ref(0)
 
   return {
@@ -196,5 +223,7 @@ export function createRouterMock(options: RouterMockOptions = {}): RouterMock {
     setNextGuardReturn,
     getPendingNavigation,
     setParams,
+    setQuery,
+    setHash,
   }
 }