Fixed tests and refactored event listeners for effective testing

openlp/core/display/html/display.css

@@ -12,7 +12,6 @@
 }
 
 /* ALERT STYLING */
-
 .normal {
   position: absolute;
   margin: 0;
@@ -47,8 +46,7 @@
   position: relative;
   top: 50%;
   transform: translateY(-50%);
-  margin: 0% 0% 0% 100%;
+  z-index: 12;
-  z-index: 11;
   overflow: visible;
   white-space: nowrap;
   color: #ffffff;

openlp/core/display/html/display.js

@@ -437,17 +437,20 @@ var Display = {
         
     alertBackground.addEventListener('transitionend', function(e) {
       e.stopPropagation();
-      Display.transitionEndEvent(settings);
+      if (Display._transitionState === TransitionState.EntranceTransition) {
+        console.debug("Calling alertEntranceTransitionEnd");
+        Display.alertEntranceTransitionEnd(settings);
+      }
+      else {
+        console.debug("Calling alertExitTransitionEnd");
+        Display.alertExitTransitionEnd();
+      }
     });
 
     alertText.addEventListener('animationend', function (e) {
       e.stopPropagation();
-      if (Display._animationState === AnimationState.ScrollingText) {        
+      console.debug("The text scrolling has ended");
-        alertText.style.animation = "";
+      Display.textAnimationEnd();      
-        alertText.style.visibility = "hidden";
-        Display._animationState = AnimationState.NoAnimation;
-        Display.doExitTransition();                                         
-      }
     });
   },
   /**
@@ -485,7 +488,7 @@ var Display = {
     setTimeout( function() {
       alertBackground.style.height = "25%";
       alertBackground.style.transition = transitionSetting;
-      alertBackground.style.visibility = "visible";
+      alertBackground.style.visibility = "visible";      
     }, 50);
     this._transitionState = TransitionState.EntranceTransition;
   },
@@ -515,40 +518,55 @@ var Display = {
     }
   },
   /**
-   * Set text styles and animations when transitions are are completed
+   *  Reset the styling and animation state of the alert text after the scrolling animation
-   * @param {event} event - The event that has occured
-   * @param {json} settings object - The settings to use for the animation
    */
-  transitionEndEvent: function (settings) {    
+  textAnimationEnd: function () {
-    var alertBackground = $("#alert-background")[0];
+    var alertText = $('#alert')[0];
-    var alertText = $("#alert")[0];    
+    alertText.style.animation = "";
-    if (Display._transitionState === TransitionState.EntranceTransition) {
+    alertText.style.visibility = "hidden";
-      alertText.style.visibility = "visible";
+    Display._animationState = AnimationState.NoAnimation;
-      if (settings.scroll) {
+    Display.doExitTransition();                                         
-          var animationSettings = "alert-scrolling-text " + settings.timeout +
-                                  "s linear 0s " + settings.repeat + " normal";                                        
-          alertText.style.animation = animationSettings;                                              
-          Display._animationState = AnimationState.ScrollingText;
-      }
-      else {
-          Display._animationState = AnimationState.NonScrollingText;            
-          setTimeout (function () {
-            alertText.style.visibility = "hidden";
-            Display._animationState = AnimationState.NoAnimation;
-            Display.doExitTransition();
-          }, settings.timeout * 1000);
-      }
-      Display._transitionState = TransitionState.NoTransition 
-    }
-    else if (Display._transitionState === TransitionState.ExitTransition) {
-      Display._transitionState = TransitionState.NoTransition;        
-      alertText.style.visibility = "hidden";
-      alertBackground.classList = "";
-      alertBackground.classList.add("normal");        
-    }
   },
   /**
-   * Add a slides. If the slide exists but the HTML is different, update the slide.
+   * Sets the alert text styles correctly after the entrance transition has ended.
+   * @param {json} settings object - The settings to use for the animation
+   */
+  alertEntranceTransitionEnd: function (settings) {        
+    var alertText = $("#alert")[0];        
+    if (settings.scroll) {
+        // alertText.style.visibility = "visible";      
+        var animationSettings = "alert-scrolling-text " + settings.timeout +
+                                "s linear 0s " + settings.repeat + " normal";
+        console.debug("Visibility: " + alertText.style.visibility);
+        alertText.style.animation = animationSettings;
+        console.debug("Animation: " + animationSettings);                                      
+        Display._animationState = AnimationState.ScrollingText;
+    }
+    else {          
+      Display._animationState = AnimationState.NonScrollingText; 
+      alertText.style.animation = "";           
+      setTimeout (function () {
+        // alertText.style.visibility = "visible";                
+        Display._animationState = AnimationState.NoAnimation;
+        Display.doExitTransition();
+      }, settings.timeout * 1000);
+    }
+    alertText.style.visibility = "visible";
+    Display._transitionState = TransitionState.NoTransition         
+  },
+  /**
+   * Resets the alert styles after the alert has been shown.
+   */
+  alertExitTransitionEnd: function () {
+    var alertText = $("#alert")[0];
+    var alertBackground = $("#alert-background")[0];
+    Display._transitionState = TransitionState.NoTransition;        
+    alertText.style.visibility = "hidden";
+    alertBackground.classList = "";
+    alertBackground.classList.add("normal");
+  },
+  /**
+   * Add a slide. If the slide exists but the HTML is different, update the slide.
    * @param {string} verse - The verse number, e.g. "v1"
    * @param {string} html - The HTML for the verse, e.g. "line1<br>line2"
    * @param {bool} [reinit=true] - Re-initialize Reveal. Defaults to true.

tests/js/test_display.js

@@ -312,7 +312,7 @@ describe("Display.getNextAlert", function () {
     };
     var alertObject = {text: "Queued Alert", settings: settings};
     Display._alerts.push(JSON.stringify(alertObject));
-    spyOn(Display,"alert");    
+    spyOn(Display, "alert");    
     Display.getNextAlert();
     
     expect(Display.alert).toHaveBeenCalled();
@@ -320,7 +320,39 @@ describe("Display.getNextAlert", function () {
   });
 });
 
-describe("Display.transitionEnd", function () {
+describe("Display.textAnimationEnd", function() {
+  var alertBackground, alertText;
+  beforeEach(function () {
+    document.body.innerHTML = "";
+    alertBackground = document.createElement("div");
+    alertBackground.setAttribute("id", "alert-background");
+    document.body.appendChild(alertBackground);
+    alertText = document.createElement("p");
+    alertText.setAttribute("id", "alert");
+    alertText.style.visibility = "visible";
+    alertText.style.animation = "alert-scrolling-text 5s linear 0s 1 normal";
+    alertBackground.appendChild(alertText);
+    Display._animationState = AnimationState.ScrollingText;
+  });
+
+  it("should reset the text styles and animation state after the text has scrolled", function() {    
+    Display.textAnimationEnd();
+
+    expect(alertText.style.animation).toEqual("");
+    expect(alertText.style.visibility).toEqual("hidden");
+    expect(Display._animationState).toEqual(AnimationState.NoAnimation);
+  });
+
+  it("should call the doExitTranstion method", function() {
+    spyOn(Display, "doExitTransition");
+    Display.textAnimationEnd();
+
+    expect(Display.doExitTransition).toHaveBeenCalled();
+  });
+});
+
+describe("Display.alertEntranceTransitionEnd", function () {
+  var alertBackground, alertText;
   beforeEach(function () {
     document.body.innerHTML = "";
     alertBackground = document.createElement("div");
@@ -331,7 +363,66 @@ describe("Display.transitionEnd", function () {
     alertText.setAttribute("id","alert");
     alertBackground.appendChild(alertText);
   });
-  // it("should")
+
+  it("should set the correct styles on entrance transition (with scroll)", function () {
+    var settings = {
+      "location": 2, "font_face": "Tahoma", "font_size": 40, 
+      "font_color": "rgb(255, 255, 255)", "background_color": "rgb(102, 0, 0)",
+      "timeout": 5, "repeat": 1, "scroll": true
+    };    
+    Display._transitionState = TransitionState.EntranceTransition;
+    Display.alertEntranceTransitionEnd(settings);
+
+    expect(alertText.style.visibility).toEqual("visible");
+    expect(alertText.style.animation).toEqual("alert-scrolling-text 5s linear 0s 1 normal");
+    expect(Display._animationState).toEqual(AnimationState.ScrollingText);
+    expect(Display._transitionState).toEqual(TransitionState.NoTransition);
+  });
+
+  it("should set the correct styles on entrance transition (without scroll)", function (done) {
+
+    var settings = {
+      "location": 2, "font_face": "Tahoma", "font_size": 40, 
+      "font_color": "rgb(255, 255, 255)", "scroll": false, "repeat": 1,
+      "timeout": 0.01, "background_color": "rgb(102, 0, 0)"
+    };        
+    Display._transitionState = TransitionState.EntranceTransition;
+    spyOn(Display, "doExitTransition");    
+    Display.alertEntranceTransitionEnd(settings);
+
+    expect(alertText.style.visibility).toEqual("visible");
+    expect(alertText.style.animation).toEqual("");
+    expect(Display._animationState).toEqual(AnimationState.NonScrollingText);    
+    expect(Display._transitionState).toEqual(TransitionState.NoTransition);
+    setTimeout (function () {            
+      expect(Display._animationState).toEqual(AnimationState.NoAnimation);
+      expect(Display.doExitTransition).toHaveBeenCalled();
+      done();
+    }, settings.timeout * 1000);
+  });
+});
+
+describe("Display.alertExitTransitionEnd", function () {
+  var alertBackground, alertText;
+  beforeEach( function() {
+    document.body.innerHTML = "";
+    alertBackground = document.createElement("div");
+    alertBackground.setAttribute("id", "alert-background");
+    alertBackground.setAttribute("class", "normal");    
+    document.body.appendChild(alertBackground);    
+    alertText = document.createElement("p");
+    alertText.setAttribute("id","alert");
+    alertBackground.appendChild(alertText);
+  });
+  
+
+  it("should set the styles to default on exit transition", function() {
+    Display.alertExitTransitionEnd();
+
+    expect(Display._transitionState).toEqual(TransitionState.NoTransition);
+    expect(alertText.style.visibility).toEqual("hidden");
+    expect(alertBackground.className).toEqual("normal");
+  });
 });
 
 describe("Display.addTextSlide", function () {