Added lolex example and how to use time traveling

Author: mcibique

src/di.js

@@ -32,3 +32,7 @@ export {
 };
 
 export default container;
+
+// global registrations
+export const GLOBAL_ID = Symbol('global');
+container.bind(GLOBAL_ID).toConstantValue(global);

src/views/Login.vue

@@ -14,6 +14,10 @@
       </div>
 
       <my-button type="submit" class="c-login__submit-button" tid="login__submit-button" :primary="true">Log in</my-button>
+      <div class="c-login__help-section" tid="login__help-section" v-if="displayHelp">
+        <a class="c-login__help-section-link" href="#" tid="login__help-section-link">Need help?</a>
+        <a class="c-login__help-section-link" href="#" tid="login__help-section-link">Forgot your password?</a>
+      </div>
     </form>
   </section>
 </template>
@@ -22,6 +26,7 @@
 import Vue from 'vue';
 import { Component } from 'vue-property-decorator';
 
+import { LazyInject, GLOBAL_ID } from '@di';
 import MyButton from '@/components/MyButton';
 import Focus from '@/directives/focus';
 
@@ -33,6 +38,9 @@ export default class LoginView extends Vue {
   password = '';
   username = '';
   validationError = null;
+  displayHelp = false;
+
+  @LazyInject(GLOBAL_ID) global;
 
   login (username, password) {
     return this.$store.dispatch('auth/login', { username, password });
@@ -66,6 +74,16 @@ export default class LoginView extends Vue {
         this.validationError = response.data.error.message;
       });
   }
+
+  created () {
+    this.displayHelpTimeout = this.global.setTimeout(() => {
+      this.displayHelp = true;
+    }, 5000);
+  }
+
+  destroyed () {
+    this.global.clearTimeout(this.displayHelpTimeout);
+  }
 }
 </script>
 
@@ -104,4 +122,14 @@ export default class LoginView extends Vue {
   .c-login__submit-button {
     margin-top: 2rem;
   }
+
+  .c-login__help-section {
+    margin-top: 2rem;
+    line-height: 2.5rem;
+  }
+
+  .c-login__help-section-link:after {
+    content: '';
+    display: block;
+  }
 </style>

src/views/Login.vue.po.js

@@ -22,6 +22,14 @@ export default class LoginViewPageObj extends BasePageObj {
     return this.tid('login__validation-error');
   }
 
+  get helpSection () {
+    return this.tid('login__help-section');
+  }
+
+  get helpSectionLinks () {
+    return this.tids('login__help-section-links');
+  }
+
   submit () {
     this.form.trigger('submit');
   }

src/views/Login.vue.spec.js

@@ -2,11 +2,12 @@ import '@unit/globals';
 import { mount, createLocalVue } from '@vue/test-utils';
 import { expect } from 'chai';
 import sinon from 'sinon';
+import lolex from 'lolex';
 import axios from 'axios';
 import AxiosMockAdapter from 'axios-mock-adapter';
 import flushPromises from 'flush-promises';
 
-import container from '@di';
+import container, { GLOBAL_ID } from '@di';
 import LoginView from '@/views/Login.vue';
 import LoginViewPageObj from '@/views/Login.vue.po';
 import { createStore, STORE_ID } from '@/store';
@@ -25,6 +26,11 @@ describe('Login view', function () {
     this.router = createRouter(this.localVue);
     container.bind(ROUTER_ID).toConstantValue(this.router);
 
+    // mocking setTimeout, clearTimeout global functiion and enable time traveling
+    let globalMock = {};
+    this.clock = lolex.install({ target: globalMock, toFake: ['setTimeout', 'clearTimeout'] });
+    container.rebind(GLOBAL_ID).toConstantValue(globalMock);
+
     this.mountLoginView = function (options) {
       let wrapper = mount(LoginView, { localVue: this.localVue, router: this.router, store: this.store, ...options });
       return new LoginViewPageObj(wrapper);
@@ -40,6 +46,8 @@ describe('Login view', function () {
 
     this.axios.verifyNoOutstandingExpectation();
     this.axios.restore();
+
+    this.clock.uninstall();
   });
 
   it('should enter route', function () {
@@ -154,4 +162,44 @@ describe('Login view', function () {
       expect(this.store.state.auth.token).to.equal(null);
     });
   });
+
+  describe('help section', function () {
+    beforeEach(function () {
+      this.loginView = this.mountLoginView();
+    });
+
+    it('should not be visible during initial render', function () {
+      expect(this.loginView.helpSection.exists()).to.be.false;
+    });
+
+    it('should be visible after few seconds', function () {
+      this.timeout(10000);
+
+      let expectedTimeWhenHelpSectionIsVisible = 5000;
+      let tickStep = 1000;
+
+      while ((this.clock.now + tickStep) < expectedTimeWhenHelpSectionIsVisible) {
+        this.clock.tick(tickStep);
+        this.loginView.update();
+        expect(this.loginView.helpSection.exists()).to.be.false;
+      }
+
+      this.clock.tick(tickStep);
+      this.loginView.update();
+      expect(this.loginView.helpSection.exists()).to.be.true;
+    });
+  });
+
+  describe('when the view is destroyed', function () {
+    beforeEach(function () {
+      this.loginView = this.mountLoginView();
+      expect(Object.keys(this.clock.timers).length).to.equal(1);
+
+      this.loginView.destroy();
+    });
+
+    it('should perform a clean up', function () {
+      expect(Object.keys(this.clock.timers).length).to.equal(0);
+    });
+  });
 });

test/unit/base.po.js

@@ -23,6 +23,14 @@ export default class BasePageObj {
     return this.wrapper.attributes();
   }
 
+  update () {
+    return this.wrapper.update();
+  }
+
+  destroy () {
+    return this.wrapper.destroy();
+  }
+
   tid (...args) {
     return this.wrapper.tid(...args);
   }