Guard support

Author: pinguet62

README.md

@@ -85,3 +85,19 @@ If the feature is not enabled, the DOM is removed.
     <entry v-feature-flipping="'XXX'">Third</entry>
 </menu>
 ```
+
+#### Route
+
+A [**guard**](https://router.vuejs.org/guide/advanced/navigation-guards.html) is defined to intercept all routes defining `featureFlipping` [**meta field**](https://router.vuejs.org/guide/advanced/meta.html).  
+If the feature is not enabled, the router redirect to `"/"` route.
+
+```javascript
+import VueRouter from 'vue-router'
+import TestComponent from './TestComponent'
+
+new VueRouter({
+    routes: [
+        { path: '/test', component: TestComponent, meta: { featureFlipping: 'XXX' } },
+    ]
+})
+```

package-lock.json

@@ -20,6 +20,7 @@
     "jest": "^23.1.0",
     "sinon": "^6.0.0",
     "vue": "^2.5.16",
+    "vue-router": "^3.0.1",
     "vue-template-compiler": "^2.5.16"
   }
 }

package.json

@@ -0,0 +1,16 @@
+import { isEnabled } from './service'
+
+/**
+ * @example
+ * const router = new VueRouter({
+ *     routes: [
+ *         { path: '/test', component: TestComponent, meta: { featureFlipping: 'XXXXX' } }
+ *     ]
+ * })
+ */
+export async function featureFlippingGuard (to, from, next) {
+  if (to.meta.featureFlipping && !isEnabled(to.meta.featureFlipping)) {
+    return next({path: '/'})
+  }
+  return next()
+}

src/guard.js

@@ -1,4 +1,5 @@
 import { featureFlippingDirective } from './directive'
+import { featureFlippingGuard } from './guard'
 import { setEnabledFeatures } from './service'
 
 /**
@@ -12,4 +13,5 @@ import { setEnabledFeatures } from './service'
 export function featureFlippingPluginInstall (vue, options) {
   options && options.init && options.init((it) => setEnabledFeatures(it))
   vue.directive('feature-flipping', featureFlippingDirective)
+  vue.mixin({beforeRouteEnter: featureFlippingGuard})
 }

src/plugin.js

@@ -0,0 +1,53 @@
+import { createLocalVue } from '@vue/test-utils'
+import { createSandbox } from 'sinon'
+import VueRouter from 'vue-router'
+import FeatureFlipping from '..'
+import * as service from '../src/service' // internal
+
+describe('guard', () => {
+  const sinon = createSandbox()
+  afterEach(() => sinon.restore())
+
+  let localVue
+  let router
+  beforeEach(() => {
+    localVue = createLocalVue()
+    localVue.use(VueRouter)
+    router = new VueRouter({
+      routes: [
+        {path: '/', name: 'index', component: {render: () => 'index'}},
+        {path: '/stable', name: 'stable', component: {render: () => 'stable'}},
+        {path: '/test', name: 'test', component: {render: () => 'test'}, meta: {featureFlipping: 'KEY'}}
+      ],
+    })
+
+    localVue.use(FeatureFlipping) // define guard
+  })
+
+  it('\'meta\' not defined: should accept route', async () => {
+    router.push({name: 'stable'})
+    await localVue.nextTick()
+
+    expect(router.history.current.path).toEqual('/stable')
+  })
+
+  describe('\'meta\' defined: should test using \'isEnabled()\'', () => {
+    it('\'enabled\': should accept route', async () => {
+      sinon.stub(service, 'isEnabled').withArgs('KEY').returns(true)
+
+      router.push({name: 'test'})
+      await localVue.nextTick()
+
+      expect(router.history.current.path).toEqual('/test')
+    })
+
+    it('\'not enabled\': should redirect to \'/\'', async () => {
+      sinon.stub(service, 'isEnabled').withArgs('KEY').returns(false)
+
+      router.push({name: 'test'})
+      await localVue.nextTick()
+
+      expect(router.history.current.path).toEqual('/')
+    })
+  })
+})