feat(vue): adds empty ability instance in case if such is not provided

packages/casl-vue/package.json

@@ -40,6 +40,8 @@
   },
   "devDependencies": {
     "@casl/ability": "^2.0.0-alpha.1",
-    "vue": "^2.5.13"
+    "@vue/test-utils": "^1.0.0-beta.12",
+    "vue": "^2.5.13",
+    "vue-template-compiler": "^2.5.13"
   }
 }

packages/casl-vue/spec/plugin.spec.js

@@ -1,21 +1,15 @@
-import Vue from 'vue'
-import { AbilityBuilder } from '@casl/ability'
+import { createLocalVue } from '@vue/test-utils'
+import { AbilityBuilder, Ability } from '@casl/ability'
 import { abilitiesPlugin } from '../src'
 
-class Post {
-  constructor(attrs) {
-    Object.assign(this, attrs)
-  }
-}
-
 describe('Abilities plugin', () => {
   let ability
   let Component
+  let Vue
+  let vm
 
-  beforeAll(() => {
-    ability = AbilityBuilder.define(can => can('read', 'Post'))
-    Vue.use(abilitiesPlugin, ability)
-
+  beforeEach(() => {
+    Vue = createLocalVue()
     Component = Vue.extend({
       props: {
         post: { default: () => new Post() }
@@ -26,16 +20,38 @@ describe('Abilities plugin', () => {
     })
   })
 
-  it('defines `$can` for each component', () => {
-    const vm = new Component()
+  describe('when ability is provided', () => {
+    beforeEach(() => {
+      ability = AbilityBuilder.define(can => can('read', 'Post'))
+      Vue.use(abilitiesPlugin, ability)
+      vm = new Component()
+    })
 
-    expect(vm.$can).to.be.a('function')
+    it('defines `$can` for each component', () => {
+      expect(vm.$can).to.be.a('function')
+    })
+
+    it('defines `$ability` instance for all components', () => {
+      expect(vm.$ability).to.equal(ability)
+    })
   })
 
-  describe('`$can`', () => {
-    let vm
+  describe('when ability is not provided', () => {
+    beforeEach(() => {
+      Vue.use(abilitiesPlugin)
+      vm = new Component()
+    })
+
+    it('defines empty `$ability` instance for all components', () => {
+      expect(vm.$ability).to.be.instanceof(Ability)
+      expect(vm.$ability.rules).to.be.empty
+    })
+  })
 
+  describe('`$can`', () => {
     beforeEach(() => {
+      ability = AbilityBuilder.define(can => can('read', 'Post'))
+      Vue.use(abilitiesPlugin, ability)
       vm = new Component().$mount()
     })
 
@@ -61,4 +77,10 @@ describe('Abilities plugin', () => {
       })
     })
   })
+
+  class Post {
+    constructor(attrs) {
+      Object.assign(this, attrs)
+    }
+  }
 })

packages/casl-vue/src/plugin.js

@@ -1,4 +1,7 @@
-export function abilitiesPlugin(Vue, ability) {
+import { Ability } from '@casl/ability';
+
+export function abilitiesPlugin(Vue, providedAbility) {
+  const ability = providedAbility || new Ability([]);
   const watcher = new Vue({
     data: {
       rules: []
@@ -9,11 +12,13 @@ export function abilitiesPlugin(Vue, ability) {
     watcher.rules = rules;
   });
 
+  Object.defineProperty(Vue.prototype, '$ability', { value: ability });
+
   Vue.mixin({
     methods: {
       $can(...args) {
         watcher.rules = watcher.rules; // create dependency
-        return ability.can(...args);
+        return this.$ability.can(...args);
       }
     }
   });