Fix client notifications not fading out after few seconds

src/client/lib/Notifier.ts

@@ -28,12 +28,14 @@ class NotificationEvent {
     this.element.html(html);
     this.element.addClass(this.statusType);
     this.element.fadeIn(FADE_TIME, function () {
+      if (handlers)
         handlers.onFadedIn();
     });
 
     this.timeoutId = setTimeout(function () {
       that.element.fadeOut(FADE_TIME, function () {
         that.clearNotification();
+        if (handlers)
           handlers.onFadedOut();
       });
     }, 4000);
@@ -60,7 +62,7 @@ export class Notifier implements INotifier {
       this.onGoingEvent.interrupt();
 
     this.onGoingEvent = new NotificationEvent(this.element, msg, statusType);
-    this.onGoingEvent.start();
+    this.onGoingEvent.start(handlers);
   }
 
   success(msg: string, handlers?: Handlers) {

test/unit/client/Notifier.test.ts

@@ -5,38 +5,38 @@ import JQueryMock = require("./mocks/jquery");
 
 import { Notifier } from "../../../src/client/lib/Notifier";
 
-describe.skip("test notifier", function() {
+describe("test notifier", function() {
   const SELECTOR = "dummy-selector";
   const MESSAGE = "This is a message";
   let jqueryMock: { jquery: JQueryMock.JQueryMock, element: JQueryMock.JQueryElementsMock };
+  let clock: any;
 
   beforeEach(function() {
     jqueryMock = JQueryMock.JQueryMock();
+    clock = Sinon.useFakeTimers();
+  });
+
+  afterEach(function() {
+    clock.restore();
   });
 
   function should_fade_in_and_out_on_notification(notificationType: string): void {
-    const fadeInReturn = {
-      delay: Sinon.stub()
-    };
-
     const delayReturn = {
       fadeOut: Sinon.stub()
     };
 
-    jqueryMock.element.fadeIn.returns(fadeInReturn);
     jqueryMock.element.fadeIn.yields();
-    delayReturn.fadeOut.yields();
-
-    fadeInReturn.delay.returns(delayReturn);
 
     function onFadedInCallback() {
       Assert(jqueryMock.element.fadeIn.calledOnce);
       Assert(jqueryMock.element.addClass.calledWith(notificationType));
       Assert(!jqueryMock.element.removeClass.calledWith(notificationType));
+      clock.tick(10 * 1000);
     }
 
     function onFadedOutCallback() {
       Assert(jqueryMock.element.removeClass.calledWith(notificationType));
+      Assert(jqueryMock.element.fadeOut.calledOnce);
     }
 
     const notifier = new Notifier(SELECTOR, jqueryMock.jquery as any);
@@ -47,9 +47,9 @@ describe.skip("test notifier", function() {
       onFadedOut: onFadedOutCallback
     });
 
+    clock.tick(510);
+
     Assert(jqueryMock.element.fadeIn.calledOnce);
-    Assert(fadeInReturn.delay.calledOnce);
-    Assert(delayReturn.fadeOut.calledOnce);
   }
 
 

test/unit/client/mocks/jquery.ts

@@ -18,6 +18,7 @@ export interface JQueryElementsMock {
     addClass: sinon.SinonStub;
     removeClass: sinon.SinonStub;
     fadeIn: sinon.SinonStub;
+    fadeOut: sinon.SinonStub;
     on: sinon.SinonStub;
 }
 
@@ -36,6 +37,7 @@ export function JQueryMock(): { jquery: JQueryMock, element: JQueryElementsMock
         addClass: sinon.stub(),
         removeClass: sinon.stub(),
         fadeIn: sinon.stub(),
+        fadeOut: sinon.stub(),
         on: sinon.stub()
     };
     jquery.ajax = sinon.stub();