Added missing tests for App component.

Author: mcibique

package.json

@@ -6,7 +6,7 @@
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
     "precommit": "npm run lint -- --no-fix",
-    "test": "nyc vue-cli-service test src/**/*.spec.js src/router.spec.js src/store/**/*.spec.js --include ./src/bootstrap.js ./test/unit/index.js",
+    "test": "nyc vue-cli-service test src/**/*.spec.js src/router.spec.js src/store/**/*.spec.js src/App.vue.spec.js --include ./src/bootstrap.js ./test/unit/index.js",
     "test:watch": "npm run test -- --watch",
     "lint": "vue-cli-service lint"
   },

src/App.vue

@@ -1,24 +1,26 @@
 <template>
-  <div id="app" class="c-app">
-    <header class="c-app__header">
-      <router-link to="/logout" v-if="isAuthenticated">Logout</router-link>
+  <div id="app" class="c-app" tid="c-app">
+    <header class="c-app__header" tid="c-app__header">
+      <router-link to="/logout" v-if="isAuthenticated" tid="c-app__logout-link">Logout</router-link>
     </header>
-    <main class="c-app__main">
+    <main class="c-app__main" tid="c-app__main">
       <router-view></router-view>
     </main>
-    <footer class="c-app__footer">
-      <router-link to="/about">About</router-link>
+    <footer class="c-app__footer" tid="c-app__footer">
+      <router-link to="/about" tid="c-app__about-link">About</router-link>
     </footer>
   </div>
 </template>
 
 <script>
+import Vue from 'vue';
 import { Component } from 'vue-property-decorator';
-import { Getter } from 'vuex-class';
+
+import { AuthGetter } from './store/auth';
 
 @Component
-export default class App {
-  @Getter('auth/isAuthenticated') isAuthenticated;
+export default class App extends Vue {
+  @AuthGetter('isAuthenticated') isAuthenticated;
 }
 </script>
 

src/App.vue.po.js

@@ -0,0 +1,27 @@
+import BasePageObj from '@unit/base.po';
+
+export default class AppPageObj extends BasePageObj {
+  get header () {
+    return this.tid('c-app__header');
+  }
+
+  get main () {
+    return this.tid('c-app__main');
+  }
+
+  get footer () {
+    return this.tid('c-app__footer');
+  }
+
+  get logoutLink () {
+    return this.tid('c-app__logout-link');
+  }
+
+  get aboutLink () {
+    return this.tid('c-app__about-link');
+  }
+
+  logout () {
+    this.logoutLink.trigger('click');
+  }
+}

src/App.vue.spec.js

@@ -0,0 +1,77 @@
+import '@unit/globals';
+import { mount, createLocalVue } from '@vue/test-utils';
+import { expect } from 'chai';
+import sinon from 'sinon';
+
+import container from '@di';
+import { createStore, STORE_ID } from '@/store';
+import { createRouter, ROUTER_ID } from '@/router';
+import App from './App';
+import AppPageObj from './App.vue.po';
+
+describe('App', function () {
+  beforeEach(function () {
+    this.localVue = createLocalVue();
+
+    this.store = createStore(this.localVue);
+    container.bind(STORE_ID).toConstantValue(this.store);
+
+    this.router = createRouter(this.localVue);
+    container.bind(ROUTER_ID).toConstantValue(this.router);
+
+    this.mountApp = function (options) {
+      let wrapper = mount(App, {
+        localVue: this.localVue,
+        store: this.store,
+        router: this.router,
+        ...options
+      });
+      return new AppPageObj(wrapper);
+    };
+  });
+
+  afterEach(function () {
+    this.store.restore();
+  });
+
+  it('should mount without any errors', function () {
+    this.mountApp();
+    expect(console.error).not.to.have.been.called;
+  });
+
+  it('should render properly', function () {
+    let app = this.mountApp();
+    expect(app.header.exists(), 'Should render app header').to.be.true;
+    expect(app.main.exists(), 'Should render app main content').to.be.true;
+    expect(app.footer.exists(), 'Should render app footer').to.be.true;
+  });
+
+  it('should always display the About link', function () {
+    let app = this.mountApp();
+    expect(app.aboutLink.exists(), 'Should render the about link').to.be.true;
+  });
+
+  describe('when user is not authenticated', function () {
+    beforeEach(function () {
+      let isAuthenticatedStub = sinon.stub().returns(false);
+      this.store.mockGetter('auth/isAuthenticated', isAuthenticatedStub);
+      this.app = this.mountApp();
+    });
+
+    it('should not display logout link', function () {
+      expect(this.app.logoutLink.exists(), 'Should not display logout link to non-authenticated user').to.be.false;
+    });
+  });
+
+  describe('when user is authenticated', function () {
+    beforeEach(function () {
+      let isAuthenticatedStub = sinon.stub().returns(true);
+      this.store.mockGetter('auth/isAuthenticated', isAuthenticatedStub);
+      this.app = this.mountApp();
+    });
+
+    it('should display logout link', function () {
+      expect(this.app.logoutLink.exists(), 'Should display logout link to authenticated user').to.be.true;
+    });
+  });
+});

src/store/auth/index.js

@@ -1,4 +1,4 @@
-import cloneDeep from 'lodash/cloneDeep';
+import { Getter, State, Action, Mutation, namespace } from 'vuex-class';
 
 import * as actions from './actions';
 import * as getters from './getters';
@@ -7,11 +7,23 @@ import * as mutations from './mutations';
 export default function createModule () {
   return {
     namespaced: true,
-    state: cloneDeep({
+    state: {
       token: null
-    }),
+    },
     actions,
     mutations,
     getters
   };
 }
+
+let AuthGetter = namespace('auth', Getter);
+let AuthState = namespace('auth', State);
+let AuthAction = namespace('auth', Action);
+let AuthMutation = namespace('auth', Mutation);
+
+export {
+  AuthGetter,
+  AuthState,
+  AuthAction,
+  AuthMutation
+};

src/views/About.vue

@@ -1,4 +1,4 @@
-<template>
+<template functional>
   <section class="c-about">
     <h1 class="c-about__heading" tid="c-about__heading">Vue testing examples</h1>
     <p>Check out <a rel="noreferrer noopener" href="https://github.com/mcibique/vue-testing-examples" target="_blank" tid="c-about__github-link">github</a> page. Go <router-link :to="{ name: 'root' }" tid="c-about__back-link">back</router-link>.</p>

test/unit/base.po.js

@@ -27,6 +27,10 @@ export default class BasePageObj {
     return this.wrapper.exists();
   }
 
+  html () {
+    return this.wrapper.html();
+  }
+
   text () {
     return this.wrapper.text();
   }