Added section about mocking actions, mutations and getters

Author: mcibique

README.md

@@ -1202,6 +1202,116 @@ export default new VueRouter({
 });
 ```
 
+## Mocking actions, mutations and getters
+There still can be a scenario when using real store might be a problem and you would like to mock some parts. Mocking an action can be achieved by stubbing the dispatch function provided by the store:
+```js
+beforeEach(function () {
+  let dispatchStub = sinon.stub(this.store, ['dispatch']);
+  dispatchStub.callThrough(); // allow other actions to be executed
+  dispatchStub.withArgs('auth/login').resolves(42); // only if dispatch has been invoked for 'auth/login' then return resolved Promise with custom result
+});
+
+it('should do something', function () {
+  let result = this.store.dispatch('something');
+  expect(result).to.become(/* original call result */);
+
+  result = this.store.dispatch('auth/login');
+  expect(result).to.become(42);
+});
+```
+
+Mutations are very similar to actions, but instead of dispatch, we are going to stub commit:
+```js
+beforeEach(function () {
+  let commitStub = sinon.stub(this.store, ['commit']);
+  commitStub.callThrough(); // allow other mutations to be executed
+  commitStub.withArgs('setToken').callsFake(x => x);
+});
+
+it('should do something', function () {
+  let result = this.store.commit('something');
+  expect(result).to.become(/* original call result */);
+
+  result = this.store.commit('setToken', 'random_token');
+  expect(result).to.equal('random_token');
+});
+```
+Getters are little bit tougher and they completely resist any attempt to override them. Getters are unfortunately configured as non-configurable when store is created. That means attempts like these won't help us:
+```js
+beforeEach(function () {
+  this.store.getters.isAuthenticated = sinon.stub(); // throws an Error
+
+  Object.defineProperty(this.store.getters, 'isAuthenticated', {
+    get() {
+      return sinon.stub();
+    }
+  }); // throws an Error
+
+  Reflect.defineProperty(this.store.getters, 'isAuthenticated', {
+    get() {
+      return sinon.stub();
+    }
+  }); // returns false, which means it wasn't successful
+});
+```
+It's not over yet, the `getters` property is not protected, that means we can replaced whole `getters` with mock which we can control over. We can use [Proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) as a man-in-the-middle which will be returning mocked getters or original ones based on the configuration:
+```js
+beforeEach(function () {
+  let isAuthenticatedStub = sinon.stub().returns(true);
+
+  let proxy = new Proxy(this.store.getters, {
+    get(getters, key) {
+      if (key === 'isAuthenticated') {
+        return isAuthenticatedStub();
+      } else {
+        return getters[key];
+      }
+    }
+  });
+
+  Object.defineProperty(this.store, 'getters', {
+    get() {
+      return proxy;
+    }
+  });
+});
+```
+That's a lot of code for mocking only one getter so it would be better to extract it as a helper method or attach it to the `Store.prototype`. We can also make the name and the stub function's parameters so the function becomes more generic:
+```js
+import { Store } from 'vuex';
+
+Store.prototype.mockGetter = function (name, stub) {
+  let store = this;
+  let mockedGetters = store.__mockedGetters = store.__mockedGetters || new Map();
+
+  mockedGetters.set(name, stub);
+
+  let gettersProxy = new Proxy(store.getters, {
+    get (getters, propName) {
+      if (mockedGetters.has(propName)) {
+        return mockedGetters.get(propName).call(store);
+      } else {
+        return getters[propName];
+      }
+    }
+  });
+
+  Object.defineProperty(store, 'getters', {
+    get () {
+      return gettersProxy;
+    }
+  });
+};
+```
+Then we can call in the test:
+```js
+beforeEach(function () {
+  let isAuthenticatedStub = sinon.stub().returns(true);
+  this.store.mockGetter('isAuthenticated', isAuthenticatedStub);
+});
+```
+You can see full implementation (including restoring mock back to original functionality) in [test/unit/utils/store.js](./test/unit/utils/store.js) file.
+
 # Using flush-promises vs Vue.nextTick()
 
 This topic has been fully covered by [the official documentation](https://vue-test-utils.vuejs.org/en/guides/testing-async-components.html).

src/router.js

@@ -41,7 +41,7 @@ export function createRouter (/* istanbul ignore next */ vueInstance = Vue, stor
         path: '/',
         name: 'root',
         redirect () {
-          if (store.state.auth.token) {
+          if (store.getters['auth/isAuthenticated']) {
             return '/welcome';
           } else {
             return '/login';
@@ -57,7 +57,7 @@ export function createRouter (/* istanbul ignore next */ vueInstance = Vue, stor
 
   router.beforeEach(function (to, from, next) {
     if (to.matched.some(record => record.meta.requiresAuth)) {
-      if (!store.state.auth.token) {
+      if (!store.getters['auth/isAuthenticated']) {
         return void next({ name: 'login' });
       }
     }

src/router.spec.js

@@ -5,15 +5,14 @@ import sinon from 'sinon';
 import flushPromises from 'flush-promises';
 
 import { createRouter } from '@/router';
+import { createStore } from '@/store';
 
 describe('Router', function () {
   beforeEach(function () {
     this.localVue = createLocalVue();
 
-    this.store = {
-      state: {},
-      dispatch: sinon.stub().returnsPromise()
-    };
+    this.store = createStore(this.localVue);
+    sinon.stub(this.store, ['dispatch']).returnsPromise();
 
     this.router = createRouter(this.localVue, this.store);
   });
@@ -58,9 +57,10 @@ describe('Router', function () {
   });
 
   describe('root route', function () {
-    describe('when user is not logged in', function () {
+    describe('when user is already logged in', function () {
       beforeEach(function () {
-        this.store.state.auth = { token: 'random_token' };
+        this.isAuthenticatedStub = sinon.stub().returns(true);
+        this.store.mockGetter('auth/isAuthenticated', this.isAuthenticatedStub);
       });
 
       it('should redirect user to welcome view', async function () {
@@ -70,9 +70,10 @@ describe('Router', function () {
       });
     });
 
-    describe('when user is already logged in', function () {
+    describe('when user is not logged in', function () {
       beforeEach(function () {
-        this.store.state.auth = { token: null };
+        this.isAuthenticatedStub = sinon.stub().returns(false);
+        this.store.mockGetter('auth/isAuthenticated', this.isAuthenticatedStub);
       });
 
       it('should redirect user to login view', async function () {
@@ -85,7 +86,9 @@ describe('Router', function () {
 
   describe('auth navigation guard', function () {
     beforeEach(function () {
-      this.store.state.auth = { token: null };
+      this.isAuthenticatedStub = sinon.stub();
+      this.store.mockGetter('auth/isAuthenticated', this.isAuthenticatedStub);
+
       this.router.addRoutes([
         { name: 'protected-route', path: '/protected-route', meta: { requiresAuth: true } },
         { name: 'unprotected-route', path: '/unprotected-route', meta: { requiresAuth: false } }
@@ -95,7 +98,7 @@ describe('Router', function () {
     describe('when user navigates to route which requires authentication', function () {
       describe('and user is not authenticated', function () {
         beforeEach(function () {
-          this.store.state.auth.token = null;
+          this.isAuthenticatedStub.returns(false);
           this.router.push('protected-route');
           return flushPromises();
         });
@@ -107,7 +110,7 @@ describe('Router', function () {
 
       describe('and user has already been authenticated', function () {
         beforeEach(function () {
-          this.store.state.auth.token = 'auth_token';
+          this.isAuthenticatedStub.returns(true);
           this.router.push('protected-route');
           return flushPromises();
         });

src/views/Welcome.vue.spec.js

@@ -44,12 +44,17 @@ describe('Welcome view', function () {
     };
 
     // set proper route
-    this.store.commit('auth/setToken', 'random_token');
+    let isAuthenticatedStub = sinon.stub().returns(true);
+    this.store.mockGetter('auth/isAuthenticated', isAuthenticatedStub);
     this.router.push({ name: 'welcome' });
 
     return flushPromises();
   });
 
+  afterEach(function () {
+    this.store.restore();
+  });
+
   it('should enter route', function () {
     expect(this.router.currentRoute.name).to.equal('welcome');
   });

test/unit/index.js

@@ -2,7 +2,9 @@ import chai from 'chai';
 import sinon from 'sinon';
 import sinonChai from 'sinon-chai';
 import sinonStubPromise from 'sinon-stub-promise';
+
 import './utils/axios';
+import './utils/store';
 import './utils/tid';
 
 chai.use(sinonChai);

test/unit/utils/store.js

@@ -0,0 +1,67 @@
+import { Store } from 'vuex';
+
+Store.prototype.mockGetter = function (name, stub) {
+  if (!name) {
+    throw new Error('Getter name must be specified');
+  }
+
+  if (!stub) {
+    throw new Error('Missing stub function');
+  }
+
+  if (typeof stub !== 'function') {
+    throw new Error('Stub must be a function');
+  }
+
+  let store = this;
+  let mockedGetters = store.__mockedGetters = store.__mockedGetters || new Map();
+
+  if (mockedGetters.has(name)) {
+    throw new Error(`Cannot mock getter with the name '${name}' twice. Restore the getter or call stub.reset() instead.`);
+  }
+
+  mockedGetters.set(name, stub);
+
+  let gettersProxy = store.__gettersProxy;
+  if (!gettersProxy) {
+    store.__gettersProxy = gettersProxy = new Proxy(store.getters, {
+      get (getters, propName) {
+        if (mockedGetters.has(propName)) {
+          return mockedGetters.get(propName).call(store);
+        } else {
+          return getters[propName];
+        }
+      }
+    });
+
+    store.__originalGetters = store.getters;
+    Object.defineProperty(store, 'getters', {
+      get () {
+        return gettersProxy;
+      }
+    });
+  }
+
+  return {
+    restore () {
+      mockedGetters.delete(name);
+    }
+  };
+};
+
+Store.prototype.restore = function () {
+  let store = this;
+
+  if (store.__originalGetters) {
+    let getters = store.__originalGetters;
+    Object.defineProperty(store, 'getters', {
+      get () {
+        return getters;
+      }
+    });
+  }
+
+  delete store.__mockedGetters;
+  delete store.__gettersProxy;
+  delete store.__originalGetters;
+};