feat: Reenable Vue Router for Vue 3 (#191)

* Enable vue-router example

* Add missing colon

* Reenable vue router mocha test

Author: afontcu

package.json

@@ -74,9 +74,9 @@
     "vee-validate": "^4.0.2",
     "vue": "^3.0.4",
     "vue-apollo": "^3.0.5",
-    "vue-i18n": "^9.0.0-beta.6",
+    "vue-i18n": "^9.0.0-beta.10",
     "vue-jest": "^5.0.0-alpha.7",
-    "vue-router": "^4.0.0-rc.6",
+    "vue-router": "^4.0.1",
     "vuetify": "^2.3.19",
     "vuex": "^4.0.0-rc.2"
   },

src/__tests__/components/Router/App.vue

@@ -1,12 +1,6 @@
-<template>
-  <div>
-    <RouterLink to="/" data-testid="home-link">
-      Home
-    </RouterLink>
-    <RouterLink to="/about" data-testid="about-link">
-      About
-    </RouterLink>
-    <RouterView />
-    <div data-testid="location-display">{{ $route.fullPath }}</div>
-  </div>
-</template>
+<template>
+  <router-link to="/" data-testid="home-link">Home</router-link>
+  <router-link to="/about" data-testid="about-link">About</router-link>
+  <router-view />
+  <div data-testid="location-display">{{ $route.fullPath }}</div>
+</template>

src/__tests__/components/Router/LocationDisplay.vue

@@ -1,18 +1,14 @@
-test.todo('Your test suite must contain at least one test.')
+import '@testing-library/jest-dom'
+import {render} from '..'
 
-// import '@testing-library/jest-dom'
-// import {render} from '..'
+import About from './components/Router/About.vue'
 
-// import About from './components/Router/About.vue'
+const routes = []
+test('uses require("vue-router").default when require("vue-router") is undefined (useful for mocha users)', () => {
+  // Test for fix https://github.com/testing-library/vue-testing-library/issues/119
+  jest.mock('vue-router', () => undefined)
 
-// const routes = []
-// test('uses require("vue-router").default when require("vue-router") is undefined (useful for mocha users)', () => {
-//   // Test for fix https://github.com/testing-library/vue-testing-library/issues/119
-//   jest.mock('vue-router', () => {
-//     return undefined
-//   })
-
-//   expect(() => render(About, {routes})).toThrowError(
-//     new TypeError("Cannot read property 'default' of undefined"),
-//   )
-// })
+  expect(() => render(About, {routes})).toThrowError(
+    new TypeError("Cannot read property 'default' of undefined"),
+  )
+})

src/__tests__/components/Router/NoMatch.vue

@@ -1,38 +1,34 @@
-test.todo('Your test suite must contain at least one test.')
-
-// // Please notice that this example is a draft example on how to test
-// // the router.
-// // Related issue on Vue Test Utils: https://github.com/vuejs/vue-test-utils-next/issues/152
-
-// import '@testing-library/jest-dom'
-// import {render, fireEvent} from '..'
-// import App from './components/Router/App.vue'
-// import Home from './components/Router/Home.vue'
-// import About from './components/Router/About.vue'
-
-// const routes = [
-//   {path: '/', component: Home},
-//   {path: '/about', component: About},
-// ]
-
-// test('full app rendering/navigating', async () => {
-//   // Notice how we pass a `routes` object to our render function.
-//   const {queryByTestId} = render(App, {routes})
-
-//   expect(queryByTestId('location-display')).toHaveTextContent('/')
-
-//   await fireEvent.click(queryByTestId('about-link'))
-
-//   expect(queryByTestId('location-display')).toHaveTextContent('/about')
-// })
-
-// test('setting initial route', () => {
-//   // The callback function receives three parameters: the Vue instance where
-//   // the component is mounted, the store instance (if any) and the router
-//   // object.
-//   const {queryByTestId} = render(App, {routes}, (vue, store, router) => {
-//     router.push('/about')
-//   })
-
-//   expect(queryByTestId('location-display')).toHaveTextContent('/about')
-// })
+// Please notice that this example is a draft example on how to test
+// the router.
+// Related issue on Vue Test Utils: https://github.com/vuejs/vue-test-utils-next/issues/152
+
+import '@testing-library/jest-dom'
+import {waitFor} from '@testing-library/dom'
+import {render, fireEvent} from '..'
+import App from './components/Router/App.vue'
+import Home from './components/Router/Home.vue'
+import About from './components/Router/About.vue'
+
+const routes = [
+  {path: '/', component: Home},
+  {path: '/about', component: About},
+]
+
+test('full app rendering/navigating', async () => {
+  // Notice how we pass a `routes` object to our render function.
+  const {findByText, getByText, getByTestId} = render(App, {routes})
+
+  // Vue Router navigation is async, so we need to wait until the
+  // initial render happens
+  expect(await findByText('You are home')).toBeInTheDocument()
+
+  await fireEvent.click(getByTestId('about-link'))
+
+  // Same thing here: Vue Router navigation is async, so we need to wait until the
+  // navigation happens
+  await waitFor(() =>
+    expect(getByTestId('location-display')).toHaveTextContent('/about'),
+  )
+
+  expect(getByText('You are on the about page')).toBeInTheDocument()
+})

src/__tests__/vue-router-mocha.js

@@ -15,49 +15,40 @@ function render(
   TestComponent,
   {
     store = null,
-    // routes = null,
+    routes = null,
     container: customContainer,
     baseElement: customBaseElement,
     ...mountOptions
   } = {},
-  // configurationCb,
 ) {
   const div = document.createElement('div')
   const baseElement = customBaseElement || customContainer || document.body
   const container = customContainer || baseElement.appendChild(div)
 
-  // let additionalOptions = {}
-
   const plugins = []
 
   if (store) {
     const {createStore} = require('vuex')
     plugins.push(createStore(store))
   }
 
-  // if (routes) {
-  //   const requiredRouter = require('vue-router')
-  //   const {createRouter, createWebHistory} =
-  //     requiredRouter.default || requiredRouter
-  //   plugins.push(createRouter({history: createWebHistory(), routes}))
-  // }
+  if (routes) {
+    const requiredRouter = require('vue-router')
+    const {createRouter, createWebHistory} =
+      requiredRouter.default || requiredRouter
 
-  // Should we expose vue 3 app? if so, how?
-  // if (configurationCb && typeof configurationCb === 'function') {
-  //   additionalOptions = configurationCb(router)
-  // }
+    const routerPlugin = createRouter({history: createWebHistory(), routes})
+    plugins.push(routerPlugin)
+  }
 
   const mountComponent = (Component, newProps) => {
     const wrapper = mount(
       Component,
       merge({
         attachTo: container,
-        global: {
-          plugins,
-        },
+        global: {plugins},
         ...mountOptions,
         props: newProps || mountOptions.props,
-        // ...additionalOptions,
       }),
     )