Added a few tests and fixed failing JS tests

openlp/core/display/html/display.js

@@ -80,6 +80,7 @@ var AlertLocation = {
 
 var AlertState = {
   Displaying: "displaying",
+  DisplayingFromQueue: "displayingFrom Queue",
   NotDisplaying: "notDisplaying"
 }
 
@@ -406,39 +407,18 @@ var Display = {
     Display._slides['0'] = 0;
     Display.reinit();
   },
-  /** 
-  * Display the next alert in the queue
-  */
-  getNextAlert: function () {
-
-    console.debug("Checking queue for alerts");
-    if (Display._alerts.length > 0) {
-      var alertObject = JSON.parse(this._alerts.shift());
-      setTimeout(function() {
-        Display.alert(alertObject.text, alertObject.settings);
-      },1000);
-      
-    } 
-    else {
-      console.debug("No alerts found");
-    }
-  },
   /**
    * Display an alert
    * @param {string} text - The alert text
    * @param {int} location - The location of the text (top, middle or bottom)
   */
   alert: function (text, alert_settings) {
-    console.debug(" alert text: " + text + ", alert settings: " + alert_settings);
-
     if (text == "") {
       return null;
     }
     else {
       if (this._alertState === AlertState.Displaying) {
-        var alertObject = {};
+        var alertObject = {text: text, settings: alert_settings};        
-        alertObject.text = text;
-        alertObject.settings = alert_settings;
         this._alerts.push(JSON.stringify(alertObject));        
         return null;
       }
@@ -447,12 +427,14 @@ var Display = {
     var alertBackground = $("#alert-background")[0];
     var alertText = $("#alert")[0];
     alertText.innerHTML = text;
-
+    /* Check if the alert is a queued alert */
-    /* Start the entrance transition */
+    if (this._alertState !== AlertState.DisplayingFromQueue) {
       this._alertState = AlertState.Displaying;
-    this._transitionState = Display.doEntranceTransition(settings);
+    }
     
-    // TODO: Add functionality for no scroll and queue if not all alerts have been displayed
+    Display.doEntranceTransition(settings);
+    
+    // TODO: Add functionality for no scroll
     alertBackground.addEventListener('transitionend', function (e) {      
       e.stopPropagation();
       if (Display._transitionState === TransitionState.EntranceTransition) {
@@ -463,11 +445,9 @@ var Display = {
       }
       else if (Display._transitionState === TransitionState.ExitTransition) {
         Display._transitionState = TransitionState.NoTransition;        
-        Display._alertState = AlertState.NotDisplaying;
         alertText.style.visibility = "hidden";
         alertBackground.classList = "";
         alertBackground.classList.add("normal");        
-        Display.getNextAlert();
       }
     });
 
@@ -477,18 +457,17 @@ var Display = {
         alertText.classList.remove("horizontal-scroll-animation");
         alertText.style.visibility = "hidden";
         Display._animationState = AnimationState.NoAnimation;                                         
-        Display.doExitTransition();        
       }
     });
   },
-
   /**
    * Start background entrance transition for display of alert
-   * @param {number} location - Number showing the location of the alert on screen
+   * @param {object} settings - Settings for styling the alert
    */
   doEntranceTransition: function (settings) {
     var alertBackground = $("#alert-background")[0];
     var alertText = $("#alert")[0];
+    var transitionSetting;
     switch (settings.location) {
       case AlertLocation.Top:
         alertBackground.classList.add("top");                       
@@ -505,15 +484,21 @@ var Display = {
     alertText.style.fontFamily = settings.font_face;
     alertText.style.fontSize = settings.font_size + "pt";
     alertBackground.style.backgroundColor = settings.background_color;
-    // Wait for styles to be set first before starting transitions
+
+    if (this._alertState === AlertState.DisplayingFromQueue) {
+      transitionSetting = "1s linear 1s";
+    }
+    else {
+      transitionSetting = "1s linear";
+    } 
+    // Wait for styles to be set first before starting transition
     setTimeout( function() {
       alertBackground.style.height = "25%";
-      alertBackground.style.transition = "1s linear";
+      alertBackground.style.transition = transitionSetting;
       alertBackground.style.visibility = "visible";
     }, 50);
-    return TransitionState.EntranceTransition;
+    this._transitionState = TransitionState.EntranceTransition;
   },
-
   /**
    * Start background exit transition once alert has been displayed
    * @param {string} location - Integer showing the location of the alert on screen
@@ -523,6 +508,21 @@ var Display = {
     alertBackground.style.height = "0%";
     alertBackground.style.transition = "1s linear";           
     this._transitionState = TransitionState.ExitTransition;
+    this._alertState = AlertState.NotDisplaying;
+    Display.getNextAlert();    
+  },
+  /** 
+  * Display the next alert in the queue
+  */
+  getNextAlert: function () {
+    if (Display._alerts.length > 0) {
+      var alertObject = JSON.parse(this._alerts.shift());
+      this._alertState = AlertState.DisplayingFromQueue;
+      Display.alert(alertObject.text, alertObject.settings);    
+    } 
+    else {
+      return null;
+    }
   },
   /**
    * Add a slides. If the slide exists but the HTML is different, update the slide.

tests/js/test_display.js

@@ -154,8 +154,7 @@ describe("The Display object", function () {
 });
 
 describe("Display.alert", function () {
-  var alertBackground, alert, settings;
+  var alertBackground, alert, settings,_alertState;
-  var alerts = [];
 
   beforeEach(function () {
     document.body.innerHTML = "";
@@ -180,21 +179,22 @@ describe("Display.alert", function () {
     expect(alert.innerHTML).toEqual("OPEN-LP-3.0 Alert Test");
   });
 
-  it("should set the correct alert position", function () {
+  it("should add alerts to the queue correctly if it called when an alert is displaying", function () {
-    expect(Display.alert("Alert Location Test", settings)).toEqual(1);
+    Display._alerts = [];
-  });
+    Display._alertState = AlertState.Displaying;
+    var alertObject = {text: "Testing alert queue", settings: settings};
+    var queuedAlert = JSON.stringify(alertObject);
+    Display.alert("Testing alert queue", settings);
 
-  it("should add the alert to the alert queue", function() {
+    expect(Display._alerts.length).toEqual(1);
-    //Uses the alerts array
+    expect(Display._alerts[0]).toEqual(queuedAlert);
   });
 });
 
-describe("The doEntranceTransition", function () {
+describe("Display.doEntranceTransition", function () {
 
   var alertBackground, alertText, css, settings, style;
-  // TODO: Fix tests to accommodate new behaviour with CSS classes and settings modification
+  beforeEach(function () {
-
-  beforeEach(function() {
     document.body.innerHTML = "";
     style = document.createElement("style");
     style.type = "text/css";
@@ -214,51 +214,52 @@ describe("The doEntranceTransition", function () {
     alertText = document.createElement("p");
     alertText.setAttribute("id","alert");
     alertBackground.appendChild(alertText);
+    Display._alertState = AlertState.NotDisplaying;
   });
 
-  it("should apply the styles correctly when doEntranceTransition is called", function(done) {
+  it("should set the correct transition state", function () {
     Display.doEntranceTransition(settings);
-    expect(alertBackground.classList.contains("bottom")).toBe(true);
+    expect(Display._transitionState).toEqual(TransitionState.EntranceTransition);
+  })
 
-    setTimeout(function() {
+  it("should apply the styles correctly when doEntranceTransition is called", function (done) {
+    Display.doEntranceTransition(settings);
+    expect(alertBackground.className).toBe("normal bottom");
+
+    setTimeout(function () {
       expect(alertText.style.fontFamily).toEqual(settings.font_face);
       expect(alertText.style.color).toEqual(settings.font_color);
       expect(alertText.style.fontSize).toEqual(settings.font_size + "pt");
       expect(alertBackground.style.backgroundColor).toEqual(settings.background_color);      
-      expect(alertBackground.classList.contains("bottom")).toBe(true);
       expect(alertBackground.style.height).toEqual("25%");
       expect(alertBackground.style.transition).toEqual("1s linear");
       expect(alertBackground.style.visibility).toEqual("visible");
       done();
-    }, 60);
+    }, 50);
   });
 
   it("should set the correct class for the alert when location is top of the page", function () {
     settings.location = 0;
     Display.doEntranceTransition(settings);
 
-    expect(alertBackground.classList.contains("normal")).toBe(true);
+    expect(alertBackground.className).toEqual("normal top");
-    expect(alertBackground.classList.contains("top")).toBe(true);
-
   });
 
   it("should set the correct class for the alert when location is middle of the page", function () {
     settings.location = 1;
     Display.doEntranceTransition(settings);
     
-    expect(alertBackground.classList.contains("normal")).toBe(true);
+    expect(alertBackground.className).toEqual("normal middle");       
-    expect(alertBackground.classList.contains("middle")).toBe(true);       
   });
 
   it("should set the correct class for the alert when location is bottom of the page", function () {
     Display.doEntranceTransition(settings);
 
-    expect(alertBackground.classList.contains("normal")).toBe(true);
+    expect(alertBackground.className).toEqual("normal bottom");
-    expect(alertBackground.classList.contains("bottom")).toBe(true);
   });
 });
 
-describe("The doExitTransition", function () {
+describe("Display.doExitTransition", function () {
   var alertBackground;
 
   beforeEach(function () {
@@ -266,16 +267,55 @@ describe("The doExitTransition", function () {
     alertBackground = document.createElement("div");
     alertBackground.setAttribute("id", "alert-background");
     document.body.appendChild(alertBackground);
+    Display._alerts = [];
   });
 
-  it("should transition correctly when the doExitTransition method is called", function () {
+  it("should set the styles correctly when the doExitTransition method is called", function () {    
     Display.doExitTransition();
 
     expect(alertBackground.style.height).toEqual('0%');
     expect(alertBackground.style.transition).toEqual("1s linear");    
   });
+
+  it("should set the correct states when doExitTransition is called", function () {
+    Display.doExitTransition();
+
+    expect(Display._alertState).toEqual(AlertState.NotDisplaying);
+    expect(Display._transitionState).toEqual(TransitionState.ExitTransition);
+  });
+
+  it("should call the getNextAlert method to get the next alert on the queue", function () {
+    spyOn(Display,"getNextAlert");
+    Display.doExitTransition();
+    
+    expect(Display.getNextAlert).toHaveBeenCalled();
+  }); 
 });
 
+describe("Display.getNextAlert", function () {
+  Display.getNextAlert();
+
+  it("should return null if there are no alerts in the queue", function () {
+    Display._alerts = [];
+    Display.getNextAlert();
+
+    expect(Display.getNextAlert()).toBeNull();
+  });
+
+  it("should call the alert function correctly if there is an alert in the queue", function () {    
+    var settings = {
+      "location": 2, "font_face": "Tahoma", "font_size": 40, 
+      "font_color": "rgb(255, 255, 255)", "background_color": "rgb(102, 0, 0)"
+    };
+    var alertObject = {text: "Queued Alert", settings: settings};
+    Display._alerts.push(JSON.stringify(alertObject));
+    spyOn(Display,"alert");    
+    Display.getNextAlert();
+    
+    expect(Display.alert).toHaveBeenCalled();
+    expect(Display.alert).toHaveBeenCalledWith("Queued Alert",alertObject.settings);
+  });
+});
 
 describe("Display.addTextSlide", function () {
   beforeEach(function() {
@@ -386,6 +426,7 @@ describe("Display.setTextSlides", function () {
     };
 
     spyOn(Display, "reinit");
+    spyOn(Reveal, "slide");    
 
     Display.setTextSlides(slides);
     Display.setTheme(theme);