Refactored alert tests and optimized alert code plus fixed spacing

openlp/core/display/html/display.js

@@ -38,9 +38,9 @@ var HorizontalAlign = {
  * Vertical alignment enumeration
  */
 var VerticalAlign = {
-  Top: "top",
+  Top: "0",
-  Middle: "middle",
+  Middle: "1",
-  Bottom: "bottom"
+  Bottom: "2"
 };
 
 /**
@@ -71,6 +71,14 @@ var AnimationState = {
   FadeInAnimation: "fadeInAnimation",
   FadeOutAnimation: "fadeOutAnimation"
 };
+/**
+ * Alert location enumeration
+ */
+var AlertLocation = {
+  Top: "0",
+  Middle: "1",
+  Bottom: "2"
+};
 
 /**
  *
@@ -423,27 +431,35 @@ var Display = {
       if (Display._transitionState == TransitionState.EntranceTransition) {
         alertText.style.visibility = "visible";
         alertText.classList.add("horizontal-scroll-animation");
-      }else if(Display._transitionState == TransitionState.ExitTransition){
+      }
+      else if (Display._transitionState == TransitionState.ExitTransition) {
         Display._transitionState = TransitionState.NoTransition;
         alertBackground.style.visibility = "hidden";
+        alertText.style.visibility = "hidden";
+        alertBackground.style.top = "";
+        alertBackground.style.bottom = "";
+        alertBackground.style.height = "";
+        alertBackground.style.transition = "";
         alertBackground.classList.remove("middle-exit-animation");
       }
     });
 
     alertBackground.addEventListener('animationend', function () {
 
-      console.debug("Noticed an animation has ended. The animation state is: ", Display._animationState);
       if (Display._animationState == AnimationState.FadeInAnimation) {
         alertText.style.visibility = "visible";
         alertText.classList.add("horizontal-scroll-animation");
         alertText.classList.remove("middle-entrance-animation");
         Display._animationState = AnimationState.ScrollingAnimation;
-      }else if(Display._animationState == AnimationState.FadeOutAnimation){
+      }
+      else if (Display._animationState == AnimationState.FadeOutAnimation) {
         alertBackground.style.visibility = "hidden";
         alertBackground.classList.remove("middle-exit-animation");
         Display._animationState = AnimationState.NoAnimation;
-      }else if(alertText.classList.contains("horizontal-scroll-animation")){
+      }
+      else if (alertText.classList.contains("horizontal-scroll-animation")) {
         alertText.classList.remove("horizontal-scroll-animation");
+        alertText.style.visibility = "hidden";
         Display._animationState = AnimationState.NoAnimation;
         Display._transitionState = Display.doExitTransition(location);
       }
@@ -465,23 +481,24 @@ var Display = {
     var alertBackground = $("#alert-background")[0];
 
     switch (location) {
-      case "0":
+      case VerticalAlign.Top:
-        alertBackground.style.top = '0';
+        alertBackground.style.bottom = '';
-        alertBackground.style.transition = "2s linear";
+        alertBackground.style.top = '0px';        
         alertBackground.style.height = "25%";
+        alertBackground.style.transition = "2s linear";
         break;
-      case "1":
+      case VerticalAlign.Middle:
-        alertBackground.style.top = ((window.innerHeight - alertBackground.clientHeight) / 2)
+        alertBackground.style.top = ((window.innerHeight - alertBackground.clientHeight) / 2) + 'px';
-            + 'px';
         alertBackground.style.height = "25%";
         alertBackground.classList.add("middle-entrance-animation");
         Display._animationState = AnimationState.FadeInAnimation;
         break;
-      case "2":
+      case VerticalAlign.Bottom:
       default:
-        alertBackground.style.bottom = '0';
+        alertBackground.style.top = '';
-        alertBackground.style.transition= "2s linear";
+        alertBackground.style.bottom = '0px';        
         alertBackground.style.height = "25%";
+        alertBackground.style.transition= "2s linear";
         break;
     }
     alertBackground.style.visibility = "visible";
@@ -497,10 +514,11 @@ var Display = {
 
     var alertBackground = $("#alert-background")[0];
 
-    if(location == "0" || location == "2"){
+    if (location == VerticalAlign.Top || location == VerticalAlign.Bottom) {
       alertBackground.style.height = "0%";
       alertBackground.style.transition = '2s linear';      
-    }else if(location == "1"){
+    }
+    else if (location == VerticalAlign.Middle) {
       alertBackground.classList.add("middle-exit-animation");
       alertBackground.style.height = "0%";      
       Display._animationState = AnimationState.FadeOutAnimation;

tests/js/test_display.js

@@ -178,7 +178,6 @@ describe("Display.alert",function(){
   it("should set the correct alert position", function () {
     expect(Display.alert("Alert Location Test","2")).toEqual("2");
   });
-
 });
 
 describe("The doEntranceTransition", function () {
@@ -194,54 +193,30 @@ describe("The doEntranceTransition", function(){
     alertBackground.style.height = "0%";
   });
 
-    it("should move the alert background to the top of the page", function(){
+  it("should set the correct styles for the alert when location is top of the page", function () {
     Display.doEntranceTransition("0");
+    expect(alertBackground.style.bottom).toEqual('');
     expect(alertBackground.style.top).toEqual('0px');
+    expect(alertBackground.style.transition).toEqual("2s linear");
+    expect(alertBackground.style.height).toEqual("25%");
+    expect(alertBackground.style.visibility).toEqual("visible");
   });
 
-    it("should move the alert background to the middle of the page", function(){
+  it("should set the correct styles for the alert when location is middle of the page", function () {
     Display.doEntranceTransition("1");
     var middlePosition = ((window.innerHeight - alertBackground.clientHeight) / 2) + 'px';
     expect(alertBackground.style.top).toEqual(middlePosition);
-    });
-
-    it("should move the alert background to the bottom of the page", function(){
-        Display.doEntranceTransition("2");
-        expect(alertBackground.style.bottom).toEqual('0px');
-    });
-
-    it("should have a transition set when position is set to top", function(){
-        Display.doEntranceTransition("0");
-        expect(alertBackground.style.transition).toEqual("2s linear");
-    });
-
-    it("should have a transition set when position is set to bottom", function(){
-        Display.doEntranceTransition("2");
-        expect(alertBackground.style.transition).toEqual("2s linear");
-    });
-
-    it("should have an animation class when position is set to middle", function(){
-        Display.doEntranceTransition("1");
     expect(alertBackground.classList.contains("middle-entrance-animation"));
-    });
-
-    it("should have the height set to 25% when the position is top", function(){
-        Display.doEntranceTransition("0");
     expect(alertBackground.style.height).toEqual("25%");
+    expect(alertBackground.style.visibility).toEqual("visible");
   });
 
-    it("should have the height set to 25% when the position is middle", function(){
+  it("should set the correct styles for the alert when location is bottom of the page", function () {
-        Display.doEntranceTransition("1");
-        expect(alertBackground.style.height).toEqual("25%");
-    });
-
-    it("should have the height set to 25% when the position is bottom", function(){
     Display.doEntranceTransition("2");
+    expect(alertBackground.style.top).toEqual('');
+    expect(alertBackground.style.bottom).toEqual('0px');    
+    expect(alertBackground.style.transition).toEqual("2s linear");
     expect(alertBackground.style.height).toEqual("25%");
-    });
-
-    it("should make the alert background visible", function(){
-        Display.doEntranceTransition();
     expect(alertBackground.style.visibility).toEqual("visible");
   });
 });
@@ -254,39 +229,25 @@ describe("The doExitTransition", function(){
     alertBackground = document.createElement("div");
     alertBackground.setAttribute("id", "alert-background");
     document.body.appendChild(alertBackground);
-
   });
 
-    it("should make the height of the alert zero when position is top", function(){
+  it("should remove the styles correctly when the location is the top of the page", function () {
     Display.doExitTransition("0");
     expect(alertBackground.style.height).toEqual('0%');
-    });
-
-    it("should make the height of the alert zero when position is bottom", function(){
-        Display.doExitTransition("2");
-        expect(alertBackground.style.height).toEqual('0%');
-    });
-
-    it("should make the height of the alert zero when position is middle", function(){
-        Display.doExitTransition("2");
-        expect(alertBackground.style.height).toEqual('0%');
-    });
-
-    it("should have a transition set when position is set to top", function(){
-        Display.doExitTransition("0");
     expect(alertBackground.style.transition).toEqual("2s linear");
   });
 
-    it("should have a transition set when position is set to bottom", function(){
+  it("should remove the styles correctly when the location is middle of the page", function () {
-        Display.doExitTransition("2");
-        expect(alertBackground.style.transition).toEqual("2s linear");
-    });
-
-    it("should have an animation class when position is set to middle", function(){
     Display.doExitTransition("1");
+    expect(alertBackground.style.height).toEqual('0%');
     expect(alertBackground.classList.contains("middle-exit-animation"));
   });
 
+it("should remove the styles correctly when the location is the bottom of the page", function () {
+  Display.doExitTransition("2");
+  expect(alertBackground.style.height).toEqual('0%');
+  expect(alertBackground.style.transition).toEqual("2s linear");
+});
 
 });