feat: stub components

Author: posva

README.md

@@ -1,56 +1,29 @@
 # vue-router-mock [![Build Status](https://badgen.net/circleci/github/posva/vue-router-mock/v2)](https://circleci.com/gh/posva/vue-router-mock) [![npm package](https://badgen.net/npm/v/vue-router-mock)](https://www.npmjs.com/package/vue-router-mock) [![coverage](https://badgen.net/codecov/c/github/posva/vue-router-mock/v2)](https://codecov.io/github/posva/vue-router-mock) [![thanks](https://badgen.net/badge/thanks/♥/pink)](https://github.com/posva/thanks)
 
-> Some awesome description
+> Easily mock routing interactions in your Vue apps
 
-Demo (TODO link)
-
-## Copying this project
-
-You can directly create a project from this template by using the [Use this template button](https://github.com/posva/vue-ts-lib/generate) if you plan on hosting it on GitHub.
-
-You can also use [degit](https://github.com/Rich-Harris/degit):
-
-```sh
-degit posva/vue-ts-lib
-```
-
-### Checklist of things to do when creating a lib
-
-#### Rename the project
+## Installation
 
 ```sh
-sed -i '' 's/vue-router-mock/vue-global-events/g' README.md package.json .github/workflows/release-tag.yml size-checks/*
+yarn add vue-router-mock@next
+# or
+npm install vue-router-mock@next
 ```
 
-#### Circle CI
-
-- Add the project: https://circleci.com/projects/gh/posva
-- Check _Build on forked pull requests_: https://circleci.com/gh/posva/vue-router-mock/edit#advanced-settings
-- Check _Auto cancel redundant build_ (same place)
-
-## Dependabot
-
-- Activate it: https://docs.github.com/en/github/administering-a-repository/enabling-and-disabling-version-updates
-- Or use dependabot.com
-
-## Github Settings
-
-- Activate Sponsor section
+## Usage
 
-## Remove this section
+### Stubs
 
-Remove the section _Checklist_ before releasing.
+By default, both `<router-link>` and `<router-view>` are stubbed but you can override them locally. This is specially useful when you have nested `<router-view>` and you rely on them for a test:
 
-## Installation
-
-```sh
-yarn add vue-router-mock
-# or
-npm install vue-router-mock
+```js
+const wrapper = mount(MyComponent, {
+  global: {
+    stubs: { RouterView: MyNestedComponent },
+  },
+})
 ```
 
-## Usage
-
 ## API
 
 ## Related

__tests__/components.spec.ts

@@ -0,0 +1,22 @@
+import { mount } from '@vue/test-utils'
+import { addGlobalInjections, createMockedRouter } from '../src'
+
+describe('components', () => {
+  beforeAll(() => {
+    const router = createMockedRouter()
+    addGlobalInjections(router)
+  })
+
+  it('stubs router link', async () => {
+    const wrapper = mount(
+      {
+        template: `<router-link>Hello</router-link>`,
+      }
+      // { global: { stubs: { RouterLink: true } } }
+    )
+
+    expect(wrapper.html()).toMatchInlineSnapshot(
+      `"<router-link>Hello</router-link>"`
+    )
+  })
+})

__tests__/navigations.spec.ts

@@ -3,8 +3,8 @@ import { addGlobalInjections, createMockedRouter } from '../src'
 import Test from './fixtures/Test'
 
 describe('Navigations', () => {
+  const router = createMockedRouter()
   beforeAll(() => {
-    const router = createMockedRouter()
     addGlobalInjections(router)
   })
 
@@ -28,4 +28,18 @@ describe('Navigations', () => {
     const wrapper = mount(Test)
     expect(wrapper.vm.$router.push).toHaveBeenCalledTimes(0)
   })
+
+  it('rejects next navigation with an error', async () => {
+    const wrapper = mount(Test)
+    const error = new Error('fail')
+    router.failNextNavigation(error)
+    await expect(wrapper.vm.$router.push('/foo')).rejects.toBe(error)
+  })
+
+  it('can abort the next navigation', async () => {
+    const wrapper = mount(Test)
+    const error = new Error('fail')
+    router.failNextNavigation(error)
+    expect(wrapper.vm.$router.push).toHaveBeenCalledTimes(0)
+  })
 })

src/index.ts

@@ -1,23 +1,20 @@
 import {
   createRouter,
   createWebHashHistory,
+  isNavigationFailure,
   routeLocationKey,
   RouteLocationNormalizedLoaded,
+  RouteLocationRaw,
   Router,
   routerKey,
 } from 'vue-router'
 import { config, VueWrapper } from '@vue/test-utils'
 import { computed, ComputedRef, reactive, Ref } from 'vue'
 
-export function routerMockPlugin(wrapper: VueWrapper<any>) {
-  const router = createMockedRouter()
-
-  // console.log('plugins', config.global.plugins)
-  // config.global.plugins.push(router)
-  console.log('hey')
-
-  addGlobalInjections(router)
-
+export function routerMockPlugin(
+  wrapper: VueWrapper<any>,
+  { router }: { router: Router }
+) {
   return {}
 }
 
@@ -51,14 +48,12 @@ export function createMockedRouter() {
 
   const pushMock = jest.fn((to) => {
     router.currentRoute.value = router.resolve(to)
-    // resolve pending navigation failure
-    return Promise.resolve()
+    return consumeNavigationFailure()
   })
 
   const replaceMock = jest.fn((to) => {
     router.currentRoute.value = router.resolve(to)
-    // resolve pending navigation failure
-    return Promise.resolve()
+    return consumeNavigationFailure()
   })
 
   router.push = pushMock
@@ -69,7 +64,34 @@ export function createMockedRouter() {
     replaceMock.mockClear()
   })
 
-  return router
+  let nextFailure: Error | boolean | RouteLocationRaw | undefined = undefined
+
+  function failNextNavigation(
+    failure: Error | boolean | RouteLocationRaw | undefined
+  ) {
+    nextFailure = failure
+  }
+
+  function consumeNavigationFailure() {
+    let p: Promise<any> = Promise.resolve()
+
+    if (nextFailure) {
+      if (isNavigationFailure(nextFailure)) {
+        p = Promise.resolve(nextFailure)
+      } else {
+        p = Promise.reject(nextFailure)
+      }
+    }
+
+    nextFailure = undefined
+
+    return p
+  }
+
+  return {
+    ...router,
+    failNextNavigation,
+  }
 }
 
 function createReactiveRouteLocation(