Refactored the tests for the alerts to mkae them DRY

openlp/core/display/html/display.css

@@ -21,7 +21,6 @@
   z-index: 10;
   width: 100%;
   height: 0%;
-  vertical-align: middle;
   overflow: hidden;
   visibility:hidden;
 }

openlp/core/display/html/display.js

@@ -488,7 +488,7 @@ var Display = {
       alertBackground.style.height = "25%";
       alertBackground.style.transition = "2s linear";
       alertBackground.style.visibility = "visible";
-    }, 200);
+    }, 50);
     return TransitionState.EntranceTransition;
   },
 
@@ -499,7 +499,7 @@ var Display = {
   doExitTransition: function () {
     var alertBackground = $("#alert-background")[0];
     alertBackground.style.height = "0%";
-    alertBackground.style.transition = '2s linear';      
+    alertBackground.style.transition = "2s linear";      
     return TransitionState.ExitTransition;
   },
   /**

openlp/plugins/alerts/lib/alertsmanager.py

@@ -25,7 +25,7 @@ displaying of alerts.
 """
 import json
 
-from PyQt5 import QtCore
+from PyQt5 import QtCore, QtGui
 
 from openlp.core.common.i18n import translate
 from openlp.core.common.mixins import LogMixin, RegistryProperties
@@ -87,12 +87,12 @@ class AlertsManager(QtCore.QObject, RegistryBase, LogMixin, RegistryProperties):
         text = self.alert_list.pop(0)
         # Put alert settings together for dict
         alert_settings = {
-            'background_color': Settings().value('alerts/background color'),
+            'background_color': self.hex_to_rgb(Settings().value('alerts/background color')),
             'location': Settings().value('alerts/location'),
             'font_face': Settings().value('alerts/font face'),
             'font_size': Settings().value('alerts/font size'),
-            'font_color': Settings().value('alerts/font color'),
+            'font_color': self.hex_to_rgb(Settings().value('alerts/font color')),
-            'timeout': Settings().value().value('alerts/timeout')
+            'timeout': Settings().value('alerts/timeout')
         }
         self.live_controller.displays[0].alert(text, json.dumps(alert_settings))
         # Check to see if we have a timer running.
@@ -111,3 +111,10 @@ class AlertsManager(QtCore.QObject, RegistryBase, LogMixin, RegistryProperties):
         self.killTimer(self.timer_id)
         self.timer_id = 0
         self.generate_alert()
+
+    def hex_to_rgb(self, hex_color):
+        rgb_values = QtGui.QColor(hex_color)
+        rgb_color = 'rgb(' + str(rgb_values.red()) + ", " \
+                    + str(rgb_values.green()) + ", " + \
+                    str(rgb_values.blue()) + ")"
+        return rgb_color

tests/js/test_display.js

@@ -186,69 +186,70 @@ describe("Display.alert", function () {
 
 describe("The doEntranceTransition", function () {
 
-  var alertBackground, alertText;
+  var alertBackground, alertText, css, settings, style;
   // TODO: Fix tests to accommodate new behaviour with CSS classes and settings modification
 
   beforeEach(function() {
     document.body.innerHTML = "";
+    style = document.createElement("style");
+    style.type = "text/css";
+    css = '.normal { position: absolute; margin: 0; padding: 0; left: 0; z-index: 10; \
+      width: 100%; height: 0%; vertical-align: middle; overflow: hidden; visibility:hidden; \
+    }';
+    settings = {
+      "location": 2, "font_face": "Tahoma", "font_size": 40, 
+      "font_color": "rgb(255, 255, 255)", "background_color": "rgb(102, 0, 0)"
+    };
+    style.innerHTML = css;
+    document.head.appendChild(style);
     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);
-    alertBackground.style.top = '0px';
-    alertBackground.style.height = "0%";    
   });
 
-  it("should set the correct styles for the alert when location is top of the page", function () {
+  it("should apply the styles correctly when doEntranceTransition is called", function(done) {
-    var settings = {
-      "location": 0, "font_face": "Segoe UI, Tahoma, Geneva, Verdana, sans-serif", 
-      "font_size": 40, "font_color": "#ffffff", "background_color": "#660000"
-    };
-
     Display.doEntranceTransition(settings);
+    expect(alertBackground.classList.contains("bottom")).toBe(true);
 
     setTimeout(function() {
-      expect(alertBackground.style.bottom).toEqual('');
+      expect(alertText.style.fontFamily).toEqual(settings.font_face);
-      expect(alertBackground.style.top).toEqual('0px');
+      expect(alertText.style.color).toEqual(settings.font_color);
-      expect(alertBackground.style.transition).toEqual("2s linear");
+      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("2s linear");
       expect(alertBackground.style.visibility).toEqual("visible");
-    }, 500);
+      done();
+    }, 60);
+  });
+
+  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.classList.contains("top")).toBe(true);
 
   });
 
-  it("should set the correct styles for the alert when location is middle of the page", function () {
+  it("should set the correct class for the alert when location is middle of the page", function () {
-    var settings = {
+    settings.location = 1;
-      "location": 0, "font_face": "Segoe UI, Tahoma, Geneva, Verdana, sans-serif", 
-      "font_size": 40, "font_color": "#ffffff", "background_color": "#660000"
-    };
-
     Display.doEntranceTransition(settings);
-    //To be replaced
+    
-    var middlePosition = ((window.innerHeight - alertBackground.clientHeight) / 2) + 'px';
+    expect(alertBackground.classList.contains("normal")).toBe(true);
-    expect(alertBackground.style.top).toEqual(middlePosition);
+    expect(alertBackground.classList.contains("middle")).toBe(true);       
-    expect(alertBackground.style.height).toEqual("25%");
-    expect(alertBackground.style.visibility).toEqual("visible");
   });
 
-  it("should set the correct styles for the alert when location is bottom of the page", function () {
+  it("should set the correct class for the alert when location is bottom of the page", function () {
-    var settings = {
-      "location": 0, "font_face": "Segoe UI, Tahoma, Geneva, Verdana, sans-serif", 
-      "font_size": 40, "font_color": "#ffffff", "background_color": "#660000"
-    };
-
     Display.doEntranceTransition(settings);
 
-    setTimeout(function() {
+    expect(alertBackground.classList.contains("normal")).toBe(true);
-      expect(alertBackground.style.top).toEqual('');
+    expect(alertBackground.classList.contains("bottom")).toBe(true);
-      expect(alertBackground.style.bottom).toEqual('0px');    
-      expect(alertBackground.style.transition).toEqual("2s linear");
-      expect(alertBackground.style.height).toEqual("25%");
-      expect(alertBackground.style.visibility).toEqual("visible");
-    }, 500);
-    
   });
 });
 
@@ -262,27 +263,12 @@ describe("The doExitTransition", function () {
     document.body.appendChild(alertBackground);
   });
 
-  it("should remove the styles correctly when the location is the top of the page", function () {
+  it("should transition correctly when the doExitTransition method is called", function () {
-    Display.doExitTransition(0);
+    Display.doExitTransition();
 
     expect(alertBackground.style.height).toEqual('0%');
     expect(alertBackground.style.transition).toEqual("2s linear");
   });
-
-  it("should remove the styles correctly when the location is middle of the page", 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");
-});
-
 });