Fixed alerts and removed unnecessary debug statements and added tests

openlp/core/display/html/display.html

@@ -72,7 +72,7 @@
         right: 0px;
         z-index: 10;
         width: 100%;
-        height: 25%;
+        height: 0%;
         vertical-align: middle;
         color: #ffffff;
         background-color: #660000;
@@ -82,7 +82,7 @@
 
     #alert {
         position: relative;
-        top: 50%
+        top: 50%;
         transform: translateY(-50%);
         margin-top: 0%;
         margin-right: 0%;
@@ -97,8 +97,6 @@
         visibility: hidden;
     }
 
-
-
     </style>
     <script type="text/javascript" src="qrc:///qtwebchannel/qwebchannel.js"></script>
     <script type="text/javascript" src="reveal.js"></script>

openlp/core/display/html/display.js

@@ -416,17 +416,14 @@ var Display = {
     alertText.innerHTML = text;
 
     /* Bring in the transition background */
-    Display._transitionState = Display.alertEntranceTransition(location);
+    Display._transitionState = Display.doEntranceTransition(location);
 
     alertBackground.addEventListener('transitionend', function(e){
       e.stopPropagation();
-      console.debug("Transition end event captured");
       if(Display._transitionState == TransitionState.EntranceTransition){
-        console.debug("Entrance Transition Condition");
         alertText.style.visibility = "visible";
         alertText.classList.add("horizontal-scroll-animation");
       }else if(Display._transitionState == TransitionState.ExitTransition){
-        console.debug("Exit Transition Condition");
         Display._transitionState = TransitionState.NoTransition;
         alertBackground.style.visibility = "hidden";
         alertBackground.classList.remove("middle-exit-animation");
@@ -437,21 +434,18 @@ var Display = {
 
       console.debug("Noticed an animation has ended. The animation state is: ", Display._animationState);
       if(Display._animationState == AnimationState.FadeInAnimation){
-        console.debug("Entrance Animation Condition");
         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){
-        console.debug("Exit Animation Condition");
         alertBackground.style.visibility = "hidden";
         alertBackground.classList.remove("middle-exit-animation");
         Display._animationState = AnimationState.NoAnimation;
       }else if(alertText.classList.contains("horizontal-scroll-animation")){
-        console.debug("Scrolling Animation Ended");
         alertText.classList.remove("horizontal-scroll-animation");
         Display._animationState = AnimationState.NoAnimation;
-        Display._transitionState = Display.alertExitTransition(location);
+        Display._transitionState = Display.doExitTransition(location);
       }
 
     });
@@ -460,35 +454,31 @@ var Display = {
    * The implementation should show an alert.
    * It should be able to handle receiving a new alert before a previous one is "finished", basically queueing it.
    */
-  //return;
+    return location;
   },
 
   /**
    * Start background entrance transition for display of alert
    * @param {string} location - String showing the location of the alert on screen
    */
-  alertEntranceTransition: function (location){
+  doEntranceTransition: function (location){
-    console.debug("Alert Entrance Transition Method. The value of animation state is: " + Display._animationState);
     var alertBackground = $("#alert-background")[0];
 
     switch(location){
       case "0":
-        console.debug("Top Location Entrance Transition");
         alertBackground.style.top = '0';
         alertBackground.style.transition = "2s linear";
         alertBackground.style.height = "25%";
         break;
       case "1":
-        console.debug("Middle Location Entrance Animation");
-        console.debug("The value of animation state is: " + Display._animationState);
         alertBackground.style.top = ((window.innerHeight - alertBackground.clientHeight) / 2)
             + 'px';
+        alertBackground.style.height = "25%";
         alertBackground.classList.add("middle-entrance-animation");
         Display._animationState = AnimationState.FadeInAnimation;
         break;
       case "2":
       default:
-        console.debug("Bottom Location Entrance Transition");
         alertBackground.style.bottom = '0';
         alertBackground.style.transition= "2s linear";
         alertBackground.style.height = "25%";
@@ -503,25 +493,21 @@ var Display = {
    * Start background exit transition once alert has been displayed
    * @param {string} location - Integer showing the location of the alert on screen
    */
-  alertExitTransition: function(location){
+  doExitTransition: function(location){
 
-    console.debug("Alert Exit Transition");
     var alertBackground = $("#alert-background")[0];
 
     if(location == "0" || location == "2"){
-      console.debug("Exit Transition for top or bottom");
       alertBackground.style.height = "0%";
       alertBackground.style.transition = '2s linear';
     }else if(location == "1"){
-      // alertBackground.style.opacity = 0;
-      console.debug("Fade out Animation");
       alertBackground.classList.add("middle-exit-animation");
+      alertBackground.style.height = "0%";
       Display._animationState = AnimationState.FadeOutAnimation;
     }
 
     return TransitionState.ExitTransition;
   },
-
   /**
    * Add a slides. If the slide exists but the HTML is different, update the slide.
    * @param {string} verse - The verse number, e.g. "v1"

tests/js/test_display.js

@@ -151,40 +151,144 @@ describe("The Display object", function () {
     expect(Display.alert).toBeDefined();
   });
 
-  it("should have a correctly functioning alert() method", function (){
-    spyOn(Display,"alert");
-    Display.alert("OPEN-LP-3.0 Alert Test", "2");
-    expect(Display.alert).toHaveBeenCalledWith("OPEN-LP-3.0 Alert Test", "2");
-  });
-
 });
 
 describe("Display.alert",function(){
+    var alertBackground,alert;
+
     beforeEach(function(){
-      var alertBackground = document.getElementById("alert-background");
+        document.body.innerHTML = "";
-      var alertText = document.getElementById("alert");
+        alertBackground = document.createElement("div");
+        alertBackground.setAttribute("id", "alert-background");
+        document.body.appendChild(alertBackground);
+        alert = document.createElement("p");
+        alert.setAttribute("id","alert");
+        alertBackground.appendChild(alert);
     });
 
-   it("should return if called without any text", function(){
+   it("should return null if called without any text", function(){
-    spyOn(Display, "alert");
+    expect(Display.alert("","2")).toBeNull();
-    Display.alert("", "2");
-    expect(Display.alert).toHaveBeenCalled();
    });
 
-   it("should call alertEntranceTransition", function(){
+   it("should set correct alert text", function(){
-    spyOn(Display,"alertEntranceTransition");
+    Display.alert("OPEN-LP-3.0 Alert Test", "2");
-    Display.alertEntranceTransition("2");
+    expect(alert.innerHTML).toEqual("OPEN-LP-3.0 Alert Test");
-    expect(Display.alertEntranceTransition).toHaveBeenCalledWith("2");
    });
 
-   it("should call alertExitTransition", function(){
+   it("should set the correct alert position", function(){
-    spyOn(Display,"alertExitTransition");
+    expect(Display.alert("Alert Location Test","2")).toEqual("2");
-    Display.alertExitTransition("2");
-    expect(Display.alertExitTransition).toHaveBeenCalledWith("2");
    });
+
 });
 
+describe("The doEntranceTransition", function(){
 
+    var alertBackground;
+
+    beforeEach(function(){
+        document.body.innerHTML = "";
+        alertBackground = document.createElement("div");
+        alertBackground.setAttribute("id", "alert-background");
+        document.body.appendChild(alertBackground);
+        alertBackground.style.top = '0px';
+        alertBackground.style.height = "0%";
+    });
+
+    it("should move the alert background to the top of the page", function(){
+        Display.doEntranceTransition("0");
+        expect(alertBackground.style.top).toEqual('0px');
+    });
+
+    it("should move the alert background to the 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%");
+    });
+
+    it("should have the height set to 25% when the position is middle", 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.height).toEqual("25%");
+    });
+
+    it("should make the alert background visible", function(){
+        Display.doEntranceTransition();
+        expect(alertBackground.style.visibility).toEqual("visible");
+    });
+});
+
+describe("The startExitTransition", function(){
+    var alertBackground;
+
+    beforeEach(function(){
+        document.body.innerHTML = "";
+        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(){
+        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(){
+        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.classList.contains("middle-exit-animation"));
+    });
+
+
+});
 
 
 describe("Display.addTextSlide", function () {