test: router-view

diff --git a/__tests__/RouterView.spec-skip.ts b/__tests__/RouterView.spec.ts
similarity index 50%
rename from __tests__/RouterView.spec-skip.ts
rename to __tests__/RouterView.spec.ts
index 1ed1c061c8f9106a8a950cdf311f66f9ef384d94..5ef34ad2550b65dd777396d6357fccdf0353334a 100644 (file)
--- a/__tests__/RouterView.spec-skip.ts
+++ b/__tests__/RouterView.spec.ts
@@ -7,6 +7,8 @@ import {
   START_LOCATION_NORMALIZED,
   RouteLocationNormalized,
 } from '../src/types'
+import { ref, markNonReactive } from 'vue'
+import { mount } from './mount'
 
 const routes: Record<string, RouteLocationNormalized> = {
   root: {
@@ -59,42 +61,55 @@ const routes: Record<string, RouteLocationNormalized> = {
 }
 
 describe('RouterView', () => {
-  function factory($route: RouteLocationNormalized, props: any = {}) {
-    // @ts-ignore cannot mount functional component?
-    const wrapper = mount(RouterView, {
-      context: {
-        // https://github.com/vuejs/vue-test-utils/issues/918
-        props,
-      },
-      stubs: { RouterView },
-      mocks: { $route },
-    })
-    return wrapper
+  function factory(route: RouteLocationNormalized, props: any = {}) {
+    const router = {
+      currentRoute: ref(markNonReactive(route)),
+    }
+
+    const { app, el } = mount(
+      router as any,
+      {
+        template: `<RouterView :name="name"></RouterView>`,
+        components: { RouterView },
+        setup() {
+          const name = ref(props.name)
+
+          return {
+            name,
+          }
+        },
+      } as any
+    )
+
+    return { app, router, el }
   }
 
-  it('displays current route component', async () => {
-    const wrapper = factory(routes.root)
-    expect(wrapper.html()).toMatchSnapshot()
+  it('displays current route component', () => {
+    const { el } = factory(routes.root)
+    expect(el.innerHTML).toBe(`<div>Home</div>`)
   })
 
-  it('displays named views', async () => {
-    const wrapper = factory(routes.named, { name: 'foo' })
-    expect(wrapper.html()).toMatchSnapshot()
+  it('displays named views', () => {
+    const { el } = factory(routes.named, { name: 'foo' })
+    expect(el.innerHTML).toBe(`<div>Foo</div>`)
   })
 
-  it('displays nothing when route is unmatched', async () => {
-    const wrapper = factory(START_LOCATION_NORMALIZED)
+  it('displays nothing when route is unmatched', () => {
+    const { el } = factory(START_LOCATION_NORMALIZED)
     // NOTE: I wonder if this will stay stable in future releases
-    expect(wrapper.html()).toMatchSnapshot()
+    expect(el.innerHTML).toBe(`<!--fragment-0-start--><!--fragment-0-end-->`)
   })
 
-  it('displays nested views', async () => {
-    const wrapper = factory(routes.nested)
-    expect(wrapper.html()).toMatchSnapshot()
+  // TODO: nested routes
+  it.skip('displays nested views', () => {
+    const { el } = factory(routes.nested)
+    expect(el.innerHTML).toBe(`<div><h2>Nested</h2><div>Foo</div></div>`)
   })
 
-  it('displays deeply nested views', async () => {
-    const wrapper = factory(routes.nestedNested)
-    expect(wrapper.html()).toMatchSnapshot()
+  it.skip('displays deeply nested views', () => {
+    const { el } = factory(routes.nestedNested)
+    expect(el.innerHTML).toBe(
+      `<div><h2>Nested</h2><div><h2>Nested</h2><div>Foo</div></div></div>`
+    )
   })
 })

diff --git a/__tests__/mount.ts b/__tests__/mount.ts
index fe3c81027792390ebc15eb5995a81e1694dee091..ca296bfb5c5632c892068d85e00432941d9e12d2 100644 (file)
--- a/__tests__/mount.ts
+++ b/__tests__/mount.ts
@@ -13,8 +13,6 @@ export function mount(
   const app = createApp()
   app.provide('router', router)
 
-  // app.use(RouterPlugin, router)
-
   const rootEl = document.createElement('div')
   document.body.appendChild(rootEl)
 

diff --git a/__tests__/utils.ts b/__tests__/utils.ts
index 82045ec7af079cb38dd604f7b41494e8823ed0ff..9d7d50e087a0a09725e5560b65bb7bc3ffadd82f 100644 (file)
--- a/__tests__/utils.ts
+++ b/__tests__/utils.ts
@@ -1,5 +1,6 @@
 import { JSDOM, ConstructorOptions } from 'jsdom'
 import { NavigationGuard, RouteRecord, MatchedRouteRecord } from '../src/types'
+import { h } from '@vue/runtime-core'
 
 export const tick = (time?: number) =>
   new Promise(resolve => {
@@ -44,12 +45,11 @@ export const noGuard: NavigationGuard = (to, from, next) => {
 }
 
 export const components = {
-  Home: { render: (h: Function) => h('div', {}, 'Home') },
-  Foo: { render: (h: Function) => h('div', {}, 'Foo') },
-  Bar: { render: (h: Function) => h('div', {}, 'Bar') },
+  Home: { render: () => h('div', {}, 'Home') },
+  Foo: { render: () => h('div', {}, 'Foo') },
+  Bar: { render: () => h('div', {}, 'Bar') },
   Nested: {
-    render: (h: Function) =>
-      h('div', {}, [h('h2', {}, 'Nested'), h('RouterView')]),
+    render: () => h('div', {}, [h('h2', {}, 'Nested'), h('RouterView')]),
   },
 }
 

diff --git a/src/components/View.ts b/src/components/View.ts
index 5f36428afeef93bc6f6ac2ee68bd02d1058f15ae..c25207d3b9c1699986bd9bda444ae96da06ed720 100644 (file)
--- a/src/components/View.ts
+++ b/src/components/View.ts
@@ -16,7 +16,7 @@ const View: FunctionalComponent<Props> = (props, { slots, attrs }) => {
   const matched = route.matched[depth]
 
   // render empty node if no matched route
-  if (!matched) return null
+  if (!matched) return []
 
   const component = matched.components[props.name || 'default']
 
@@ -26,5 +26,6 @@ const View: FunctionalComponent<Props> = (props, { slots, attrs }) => {
 }
 
 // View.props =
+// View.name = 'RouterView'
 
 export default View