Adding js unit tests + small refactoring. // pairing with @tuliocasagrande

Issue #238

3 files changed, 105 insertions, 10 deletions

diff --git a/web-ui/app/js/page/default.js b/web-ui/app/js/page/default.js
index e119672f..965fb577 100644
--- a/web-ui/app/js/page/default.js
+++ b/web-ui/app/js/page/default.js
@@ -134,7 +134,7 @@ define(
 
       unreadCountTitle.attachTo(document);
 
-      pixLogo.attachTo('#pix-logo');
+      pixLogo.attachTo(document);
 
       $.ajaxSetup({headers: {'X-XSRF-TOKEN': browser.getCookie('XSRF-TOKEN')}});
     }
diff --git a/web-ui/app/js/page/pix_logo.js b/web-ui/app/js/page/pix_logo.js
index 70a8b3ab..58024a53 100644
--- a/web-ui/app/js/page/pix_logo.js
+++ b/web-ui/app/js/page/pix_logo.js
@@ -26,24 +26,35 @@ define(
     return defineComponent(pixLogo);
 
     function pixLogo() {
-      this.spinLogo = function (ev, data) {
+      this.turnAnimationOn = function () {
         $('.logo-part-animation-off').attr('class', 'logo-part-animation-on');
       };
 
-      this.stopSpinningLogo = function (ev, data) {
+      this.turnAnimationOff = function () {
         setTimeout(function(){
           $('.logo-part-animation-on').attr('class', 'logo-part-animation-off');
         }, 600);
       };
 
+      this.triggerSpinLogo = function (ev, data) {
+        this.trigger(document, events.ui.page.spinLogo);
+      };
+
+      this.triggerStopSpinningLogo = function(ev, data) {
+        this.trigger(document, events.ui.page.stopSpinningLogo);
+      };
+
       this.after('initialize', function () {
-        this.on(document, events.ui.tag.select, this.spinLogo);
-        this.on(document, events.mails.available, this.stopSpinningLogo);
-        this.on(document, events.mail.saveDraft, this.spinLogo);
-        this.on(document, events.mail.draftSaved, this.stopSpinningLogo);
-        this.on(document, events.ui.mail.open, this.spinLogo);
-        this.on(document, events.dispatchers.rightPane.openDraft, this.spinLogo);
-        this.on(document, events.mail.want, this.stopSpinningLogo);
+        this.on(document, events.ui.page.spinLogo, this.turnAnimationOn);
+        this.on(document, events.ui.page.stopSpinningLogo, this.turnAnimationOff);
+
+        this.on(document, events.ui.tag.select, this.triggerSpinLogo);
+        this.on(document, events.mails.available, this.triggerStopSpinningLogo);
+        this.on(document, events.mail.saveDraft, this.triggerSpinLogo);
+        this.on(document, events.mail.draftSaved, this.triggerStopSpinningLogo);
+        this.on(document, events.ui.mail.open, this.triggerSpinLogo);
+        this.on(document, events.dispatchers.rightPane.openDraft, this.triggerSpinLogo);
+        this.on(document, events.mail.want, this.triggerStopSpinningLogo);
       });
     }
   }
diff --git a/web-ui/test/spec/page/pix_logo.spec.js b/web-ui/test/spec/page/pix_logo.spec.js
new file mode 100644
index 00000000..73171c91
--- /dev/null
+++ b/web-ui/test/spec/page/pix_logo.spec.js
@@ -0,0 +1,84 @@
+describeComponent('page/pix_logo', function () {
+  'use strict';
+
+  describe('pix logo', function () {
+    it('should spin when loading another mail box', function () {
+      this.setupComponent('<polygon id="clock1" class="logo-part-animation-off"></polygon>');
+      var eventSpy = spyOnEvent(document, Pixelated.events.ui.page.spinLogo);
+      $(document).trigger(Pixelated.events.ui.tag.select);
+
+      expect(eventSpy).toHaveBeenTriggeredOn(document);
+      expect(this.component.$node.hasClass('logo-part-animation-on')).toBe(true);
+    });
+
+    it('should stop spinning after mail box is loaded', function (done) {
+      this.setupComponent('<polygon id="clock1" class="logo-part-animation-on"></polygon>');
+      var eventSpy = spyOnEvent(document, Pixelated.events.ui.page.stopSpinningLogo);
+      $(document).trigger(Pixelated.events.mails.available);
+
+      var component = this.component;
+
+      setTimeout(function() {
+          expect(eventSpy).toHaveBeenTriggeredOn(document);
+          expect(component.$node.hasClass('logo-part-animation-off')).toBe(true);
+          done();
+      }, 600);
+    });
+
+    it('should spin when saving draft', function () {
+      this.setupComponent('<polygon id="clock1" class="logo-part-animation-off"></polygon>');
+      var eventSpy = spyOnEvent(document, Pixelated.events.ui.page.spinLogo);
+      $(document).trigger(Pixelated.events.mail.saveDraft);
+
+      expect(eventSpy).toHaveBeenTriggeredOn(document);
+      expect(this.component.$node.hasClass('logo-part-animation-on')).toBe(true);
+    });
+
+    it('should stop spinning after draft is saved', function (done) {
+      this.setupComponent('<polygon id="clock1" class="logo-part-animation-on"></polygon>');
+      var eventSpy = spyOnEvent(document, Pixelated.events.ui.page.stopSpinningLogo);
+      $(document).trigger(Pixelated.events.mail.draftSaved);
+
+      var component = this.component;
+
+      setTimeout(function() {
+          expect(eventSpy).toHaveBeenTriggeredOn(document);
+          expect(component.$node.hasClass('logo-part-animation-off')).toBe(true);
+          done();
+      }, 600);
+    });
+
+    it('should spin when opening a mail message', function () {
+      this.setupComponent('<polygon id="clock1" class="logo-part-animation-off"></polygon>');
+      var eventSpy = spyOnEvent(document, Pixelated.events.ui.page.spinLogo);
+      $(document).trigger(Pixelated.events.ui.mail.open);
+
+      expect(eventSpy).toHaveBeenTriggeredOn(document);
+      expect(this.component.$node.hasClass('logo-part-animation-on')).toBe(true);
+    });
+
+    it('should spin when opening a draft', function () {
+      this.setupComponent('<polygon id="clock1" class="logo-part-animation-off"></polygon>');
+      var eventSpy = spyOnEvent(document, Pixelated.events.ui.page.spinLogo);
+      $(document).trigger(Pixelated.events.dispatchers.rightPane.openDraft);
+
+      expect(eventSpy).toHaveBeenTriggeredOn(document);
+      expect(this.component.$node.hasClass('logo-part-animation-on')).toBe(true);
+    });
+
+    it('should stop spinning after mail message is loaded', function (done) {
+      this.setupComponent('<polygon id="clock1" class="logo-part-animation-on"></polygon>');
+      var eventSpy = spyOnEvent(document, Pixelated.events.ui.page.stopSpinningLogo);
+      $(document).trigger(Pixelated.events.mail.want);
+
+      var component = this.component;
+
+      setTimeout(function() {
+          expect(eventSpy).toHaveBeenTriggeredOn(document);
+          expect(component.$node.hasClass('logo-part-animation-off')).toBe(true);
+          done();
+      }, 600);
+    });
+  });
+});
+