Improve router testing. Fix navigation issues

Author: michaeltintiuc

.gitignore

@@ -3,6 +3,7 @@
 
 dist/
 node_modules/
+coverage/
 
 # ignore log files
 *.log

jest.config.js

@@ -1,8 +1,8 @@
 module.exports = {
-  testEnvironment: "node",
-  moduleFileExtensions: [ "js", "vue" ],
+  testURL: 'http://localhost/',
+  moduleFileExtensions: ['js', 'vue'],
   transform: {
-    "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
-    ".*\\.(vue)$": "<rootDir>/node_modules/jest-vue-preprocessor"
-  }
+    '^.+\\.js$': '<rootDir>/node_modules/babel-jest',
+    '.*\\.(vue)$': '<rootDir>/node_modules/jest-vue-preprocessor',
+  },
 }

package.json

@@ -41,7 +41,8 @@
     "prod": "NODE_ENV=production rollup -c ./build/rollup.config.js --configProd",
     "release": "bash ./build/release.sh",
     "lint": "eslint src/**/* build/*.js test/**/*",
-    "test": "jest"
+    "test": "jest --coverage",
+    "test:node": "jest --coverage --env=node"
   },
   "devDependencies": {
     "babel-jest": "^23.4.2",
@@ -62,7 +63,7 @@
     "rollup-plugin-vue": "^4.3.0",
     "vue-test-utils": "^1.0.0-beta.11"
   },
-  "dependencies": {
+  "peerDependencies": {
     "vue": "^2.5.16",
     "vue-template-compiler": "^2.5.16",
     "vue-router": "^3.0.1"

src/router.js

@@ -20,8 +20,8 @@ export default class Router extends globalVueRouter {
   constructor(...args) {
     super(...args)
     this.direction = args.direction || 1
-    this.viewCount = args.viewCount || 1
-    this.prevRouteStack = [this.history.current]
+    this.viewCount = args.viewCount || 0
+    this.prevRouteStack = []
     this.extendHistory()
   }
   extendHistory() {
@@ -33,35 +33,37 @@ export default class Router extends globalVueRouter {
     }
   }
   canGoBack() {
-    return this.viewCount > 0 && this.currentRoute.fullPath.length > 1
+    return this.viewCount > 1 && this.currentRoute.fullPath.length > 1
   }
   guessDirection(nextRoute) {
-    // Nowhere to go but forward
-    if (this.prevRouteStack.length === 0) {
-      return 1
-    }
-
-    const prevRoute = this.prevRouteStack[this.prevRouteStack.length - 1]
+    if (this.prevRouteStack.length !== 0) {
+      const prevRoute = this.prevRouteStack[this.prevRouteStack.length - 1]
 
-    // Last route is the same as the next one - go back
-    // If we're going to / reset the stack otherwise pop a route
-    if (prevRoute.fullPath === nextRoute.fullPath) {
-      if (prevRoute.fullPath.length === 1) {
-        this.prevRouteStack = [nextRoute]
-      } else {
-        this.prevRouteStack.pop()
+      // Last route is the same as the next one - go back
+      // If we're going to / reset the stack otherwise pop a route
+      if (prevRoute.fullPath === nextRoute.fullPath) {
+        if (prevRoute.fullPath.length === 1) {
+          this.prevRouteStack = []
+        } else {
+          this.prevRouteStack.pop()
+        }
+        return -1
       }
-      return -1
     }
 
     // Forward movement, push next route to stack
-    this.prevRouteStack.push(this.history.current)
+    if (this.history.current.fullPath !== nextRoute.fullPath) {
+      this.prevRouteStack.push(this.history.current)
+    }
     return 1
   }
 }
 
 Router.install = function(Vue) {
-  if (Router.install.installed) return
+  if (Router.install.installed) {
+    return
+  }
+
   Router.install.installed = true
 
   globalVueRouter.install(Vue)

test/router.spec.js

@@ -1,17 +1,45 @@
+import Vue from 'vue'
 import Router from '../src/router.js'
 
 describe('Router', () => {
-  it('Counts views', () => {
-    let count = 1
-    const r = new Router()
+  it('Installs correctly', () => {
+    Vue.use(Router)
+
+    const app = new Vue({
+      router: new Router(),
+    })
+
+    expect(typeof app.$router).toBe('object')
+    expect(typeof app.$options.components.IonVueRouter).toBe('function')
+    expect(Router.install()).toBeFalsy()
+  })
+
+  it('Navigates correctly', () => {
+    const r = new Router({ mode: 'abstract' })
+
+    r.push('/')
+    expect(r.viewCount).toBe(1)
+    expect(r.direction).toBe(1)
+    expect(r.canGoBack()).toBeFalsy()
 
     r.push('/foo')
-    expect(r.viewCount).toBe(++count)
+    expect(r.viewCount).toBe(2)
+    expect(r.direction).toBe(1)
+    expect(r.canGoBack()).toBeTruthy()
 
     r.push('/bar')
-    expect(r.viewCount).toBe(++count)
+    expect(r.viewCount).toBe(3)
+    expect(r.direction).toBe(1)
+    expect(r.canGoBack()).toBeTruthy()
+
+    r.go(-1)
+    expect(r.viewCount).toBe(2)
+    expect(r.direction).toBe(-1)
+    expect(r.canGoBack()).toBeTruthy()
 
     r.go(-1)
-    expect(r.viewCount).toBe(--count)
+    expect(r.viewCount).toBe(1)
+    expect(r.direction).toBe(-1)
+    expect(r.canGoBack()).toBeFalsy()
   })
 })