feat(hooks): add useRouter hook

Author: u3u

README.md

@@ -45,6 +45,7 @@ export default createComponent({
 
 ## Hooks
 
+- [`useRouter`](./src/useRouter.ts) — A hook for [`vue-router`](https://github.com/vuejs/vue-router).
 - [`useDate`](./src/useDate.ts) — Using [`dayjs`](https://github.com/iamkun/dayjs) to process date.
 - [`useWindowSize`](./src/useWindowSize.ts) — Tracks `window` dimensions.
 

src/__tests__/useRouter.test.ts

@@ -0,0 +1,33 @@
+import VueRouter, { Route } from 'vue-router';
+import useRouter from '../useRouter';
+import renderHook from '../util/renderHook';
+
+declare module 'vue/types/vue' {
+  interface Vue {
+    route: Route;
+    router: VueRouter;
+  }
+}
+
+describe('useRouter', () => {
+  it('should be defined', () => {
+    expect(useRouter).toBeDefined();
+  });
+
+  it('shuold have route', () => {
+    const { vm } = renderHook(useRouter);
+    expect(vm).toHaveProperty('route');
+    expect(vm).toHaveProperty('router');
+  });
+
+  it('should route to be correct', () => {
+    const { vm } = renderHook(useRouter);
+    expect(vm.route.name).toBe('index');
+    expect(vm.route.meta.title).toBe('Vue Hooks');
+
+    vm.router.push('/test');
+
+    expect(vm.route.name).toBe('404');
+    expect(vm.route.meta.title).toBe('404 - Not Found');
+  });
+});

src/useRouter.ts

@@ -0,0 +1,8 @@
+import { computed } from 'vue-function-api';
+import withContext from './util/withContext';
+
+export default withContext(function useRouter(vue) {
+  const route = computed(() => vue.$route);
+  const router = computed(() => vue.$router);
+  return { route, router };
+});

src/util/renderHook.ts

@@ -1,17 +1,44 @@
 /* eslint import/no-extraneous-dependencies: off */
-import Vue from 'vue';
+import { shallowMount, createLocalVue } from '@vue/test-utils';
 import { plugin, createComponent } from 'vue-function-api';
-import { mount } from '@vue/test-utils';
+import VueRouter from 'vue-router';
 
-Vue.use(plugin);
+const localVue = createLocalVue();
+
+localVue.use(VueRouter);
+localVue.use(plugin);
+
+const router = new VueRouter({
+  routes: [
+    {
+      path: '/',
+      name: 'index',
+      meta: { title: 'Vue Hooks' },
+    },
+    {
+      path: '*',
+      name: '404',
+      meta: { title: '404 - Not Found' },
+    },
+  ],
+});
 
 export default function renderHook(hook: Function) {
-  const vm = createComponent({
-    template: `<div></div>`,
-    setup() {
-      return hook();
+  const App = createComponent({
+    template: `
+      <div id="app">
+        <router-view></router-view>
+      </div>
+    `,
+
+    setup(_, context) {
+      return hook(context);
     },
   });
 
-  return mount(vm);
+  return shallowMount(App, {
+    localVue,
+    router,
+    stubs: ['router-view'],
+  });
 }

src/util/vue.ts

@@ -0,0 +1,10 @@
+import Vue from 'vue';
+import { Context } from 'vue-function-api/dist/types/vue';
+
+export default function withContext(hook: (vue: Vue) => any) {
+  return (context: Context) => {
+    const test = process.env.NODE_ENV === 'test';
+    const vue = test ? context.parent.$children[0] : context.root;
+    return hook(vue);
+  };
+}