From c25f4d819709f00aba19df6a35eb41378ca4e82c Mon Sep 17 00:00:00 2001 From: Nico Opiyo Date: Fri, 29 Mar 2019 15:36:32 +0300 Subject: [PATCH] Cleaned up Javascript and refactored the functions and tests plus optimized animation of text --- openlp/core/display/html/display.css | 26 +- openlp/core/display/html/display.html | 1 + openlp/core/display/html/display.js | 201 +++++++++---- tests/js/test_display.js | 414 +++++++++++++++++--------- 4 files changed, 426 insertions(+), 216 deletions(-) diff --git a/openlp/core/display/html/display.css b/openlp/core/display/html/display.css index 0e656a30a..021aac0e7 100644 --- a/openlp/core/display/html/display.css +++ b/openlp/core/display/html/display.css @@ -1,12 +1,12 @@ /* Animation key frames for horizontal scrolling of alert */ -@keyframes alert-scrolling-text { +/* @keyframes alert-scrolling-text { from { margin-left: 100%; } to { margin-left: -300% } -} +} */ .horizontal-scroll-animation { animation-duration: 10s; - animation-iteration-count: 1; + animation-iteration-count: 2; animation-timing-function: linear; animation-name: alert-scrolling-text; } @@ -17,11 +17,14 @@ margin: 0; padding: 0; left: 0; - z-index: 10; + z-index: 11; width: 100%; height: 0%; - overflow: hidden; - visibility:hidden; + min-height: 0%; + overflow: hidden; + display: flex; + flex-direction: row; + align-items: center; } .bg-default.middle { @@ -44,16 +47,13 @@ /* ALERT BACKGROUND STYLING */ #alert { + z-index: 12; position: relative; top: 50%; - transform: translateY(-50%); - z-index: 12; + transform: translateY(-50%); overflow: visible; white-space: nowrap; color: #ffffff; - visibility: hidden; -} - -.no-scroll { - margin: 0 20px; + opacity: 0; + transform: translateX(110%); } \ No newline at end of file diff --git a/openlp/core/display/html/display.html b/openlp/core/display/html/display.html index 8eed91645..2eff44d36 100644 --- a/openlp/core/display/html/display.html +++ b/openlp/core/display/html/display.html @@ -26,6 +26,7 @@ } + diff --git a/openlp/core/display/html/display.js b/openlp/core/display/html/display.js index e0970c709..f0f11d50c 100644 --- a/openlp/core/display/html/display.js +++ b/openlp/core/display/html/display.js @@ -164,10 +164,6 @@ function _pathToString(path) { return filename; } -/** - * - */ - /** * An audio player with a play list */ @@ -422,49 +418,129 @@ var Display = { } else { if (this._alertState === AlertState.Displaying || this._alertState === AlertState.DisplayingFromQueue) { - var alertObject = {text: text, settings: alert_settings}; - this._alerts.push(JSON.stringify(alertObject)); - return null; + addAlertToQueue(text, alert_settings); } } var settings = JSON.parse(alert_settings); - this._alertSettings = settings; - var alertBackground = $("#alert-background")[0]; - var alertText = $("#alert")[0]; - alertText.innerHTML = text; + this._alertSettings = settings; + Display.setAlertText(text); + + Display.initAlertEventListeners(); + + if (settings.scroll === true) { + Display.setAlertKeyframes($('#alert'[0].scrollWidth)); + } /* Check if the alert is a queued alert */ - if (this._alertState !== AlertState.DisplayingFromQueue) { - this._alertState = AlertState.Displaying; + if (Display._alertState !== AlertState.DisplayingFromQueue) { + Display._alertState = AlertState.Displaying; } - Display.showAlertBackground(settings); - - alertBackground.addEventListener('transitionend', function (e) { - e.stopPropagation(); - if (Display._transitionState === TransitionState.EntranceTransition) { - Display._transitionState = TransitionState.NoTransition; - Display.showAlertText(Display._alertSettings); - } - else if (Display._transitionState === TransitionState.ExitTransition){ - Display._transitionState = TransitionState.NoTransition; - alertBackground.classList = "bg-default"; - Display.displayNextAlert(); - } - }); + Display.showAlertBackground(settings); + }, + /** + * Initialize alert event listeners + */ + initAlertEventListeners: function () { + var alertBackground = $("#alert-background")[0]; + var alertText = $("#alert")[0]; - alertText.addEventListener('animationend', function (e) { - e.stopPropagation(); - Display.hideAlertText(); - }); + alertBackground.addEventListener('transitionend', Display.alertTransitionEndEvent, false); + alertText.addEventListener('animationend', Display.alertAnimationEndEvent, false); + }, + /** + * Add an alert to the alert queue + * @param {string} text - The alert text to be displayed + * @param {string} setttings - JSON object containing the settings for the alert + */ + addAlertToQueue: function (text, settings) { + var alertObject = {text: text, settings: settings}; + this._alerts.push(JSON.stringify(alertObject)); + return null; + }, + /** + * Set Alert Text + * @param {string} text - The alert text to display + */ + setAlertText: function (text) { + var alertText = $("#alert")[0]; + alertText.textContent = text; + }, + /** + * Set the keyframe styles for the scrolling text + * @param {int} scrollWidth - The length of the paragraph with the alert text + */ + setAlertKeyframes: function (scrollWidth) { + var keyframeStyle = $('#keyframeStyles')[0]; + var scrollWidthPercentage = Math.ceil((((scrollWidth / screen.width) * 100) + 1) / 10) * 10; + scrollWidthPercentage += 110; // Scroll the full text length + var keyframes = "@keyframes alert-scrolling-text {" + + "from { transform: translateX(110%); } " + + "to { transform: translateX(-" + scrollWidthPercentage + "%);}"; + keyframeStyle.innerHTML = keyframes; + return keyframes; + }, + /** + * The alertTransitionEndEvent called after a transition has ended + */ + alertTransitionEndEvent: function (e) { + e.stopPropagation(); + if (Display._transitionState === TransitionState.EntranceTransition) { + Display._transitionState = TransitionState.NoTransition; + Display.showAlertText(Display._alertSettings); + console.log("Show alert has been called"); + } + else if (Display._transitionState === TransitionState.ExitTransition) { + Display._transitionState = TransitionState.NoTransition; + Display.displayNextAlert(); + } + else if (Display._transitionState === "animatingText") { + if (e.propertyName === "transform") { + console.log("The text transform has ended"); + } + } + }, + /** + * The alertAnimationEndEvent called after a animation has ended + */ + alertAnimationEndEvent: function (e) { + e.stopPropagation(); + Display.hideAlertText(); }, /** * Start background entrance transition for display of alert - * @param {object} location - The location of the alert (top, middle or bottom) + * @param {string} JSON object - JSON object containing the alert settings */ showAlertBackground: function (settings) { var alertBackground = $("#alert-background")[0]; var transitionSetting; - switch (settings.location) { + + Display.setAlertLocation(settings.location); + + alertBackground.style.backgroundColor = settings.background_color; + + if (Display._alertState === AlertState.DisplayingFromQueue) { + transitionSetting = "height 1s linear 2s"; + } + else { + transitionSetting = "height 1s linear"; + } + // Wait for styles to be set first before starting transition + setTimeout( function() { + alertBackground.style.height = "auto"; + alertBackground.style.minHeight = "25%"; + alertBackground.style.transition = transitionSetting; + alertBackground.style.visibility = "visible"; + }, 50); + this._transitionState = TransitionState.EntranceTransition; + }, + /** + * Set the location of the alert + * @param {int} location - Integer number with the location of the alert on screen + */ + setAlertLocation: function (location) { + var alertBackground = $("#alert-background")[0]; + + switch (location) { case AlertLocation.Top: alertBackground.classList.add("top"); break; @@ -475,31 +551,17 @@ var Display = { default: alertBackground.classList.add("bottom"); break; - } - alertBackground.style.backgroundColor = settings.background_color; - - if (this._alertState === AlertState.DisplayingFromQueue) { - transitionSetting = "1s linear 2s"; } - else { - transitionSetting = "1s linear"; - } - // Wait for styles to be set first before starting transition - setTimeout( function() { - alertBackground.style.height = "25%"; - alertBackground.style.transition = transitionSetting; - alertBackground.style.visibility = "visible"; - }, 50); - 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 + * Hide the alert background after the alert has been shown */ hideAlertBackground: function () { var alertBackground = $("#alert-background")[0]; alertBackground.style.height = "0%"; - alertBackground.style.transition = "1s linear"; + alertBackground.style.minHeight = "0%"; + alertBackground.style.transition = "height 1s linear"; + alertBackground.className = "bg-default"; this._transitionState = TransitionState.ExitTransition; this._alertState = AlertState.NotDisplaying; }, @@ -508,21 +570,22 @@ var Display = { * @param {json} settings object - The settings to use for the animation */ showAlertText: function (settings) { - var alertText = $("#alert")[0]; - alertText.style.visibility = "visible"; + var alertText = $("#alert")[0]; + alertText.style.opacity = 1; alertText.style.color = settings.font_color; alertText.style.fontFamily = settings.font_face; alertText.style.fontSize = settings.font_size + "pt"; - alertText.classList.add("no-scroll"); - if (settings.scroll) { + + if (settings.scroll) { var animationSettings = "alert-scrolling-text " + settings.timeout + - "s linear 0s " + settings.repeat + " normal"; - alertText.style.animation = animationSettings; + "s linear 0s " + settings.repeat + " normal"; + alertText.style.animation = animationSettings; Display._animationState = AnimationState.ScrollingText; } else { Display._animationState = AnimationState.NonScrollingText; - alertText.style.animation = ""; + alertText.style.animation = ""; + alertText.classList.add("no-scroll"); setTimeout (function () { Display._animationState = AnimationState.NoAnimation; Display.hideAlertText(); @@ -533,14 +596,15 @@ var Display = { * Reset styling and hide the alert text after displaying the animation */ hideAlertText: function () { - var alertText = $('#alert')[0]; - alertText.style.animation = ""; - alertText.classList = ""; - alertText.style.visibility = "hidden"; + var alertText = $('#alert')[0]; + alertText.style.animation = ""; + alertText.classList = ""; + alertText.style.opacity = 0; alertText.style.color = "rgb(255, 255, 255)"; alertText.style.fontSize = "40pt"; - Display._animationState = AnimationState.NoAnimation; - Display.hideAlertBackground(); + Display._animationState = AnimationState.NoAnimation; + Display.hideAlertBackground(); + Display.resetAlertKeyframes(); }, /** * Display the next alert in the queue @@ -554,7 +618,14 @@ var Display = { else { return null; } - }, + }, + /** + * Reset animation keyframes after displaying alert + */ + resetAlertKeyframes: function () { + var keyframeStyle = document.getElementById('keyframeStyles'); + keyframeStyle.innerHTML = ""; + }, /** * Add a slide. If the slide exists but the HTML is different, update the slide. * @param {string} verse - The verse number, e.g. "v1" diff --git a/tests/js/test_display.js b/tests/js/test_display.js index 67570060b..1c74a69fe 100644 --- a/tests/js/test_display.js +++ b/tests/js/test_display.js @@ -154,20 +154,20 @@ describe("The Display object", function () { }); describe("Display.alert", function () { - var alertBackground, alert, settings; + var alertBackground, alertText, settings; beforeEach(function () { document.body.innerHTML = ""; alertBackground = document.createElement("div"); alertBackground.setAttribute("id", "alert-background"); document.body.appendChild(alertBackground); - alert = document.createElement("p"); - alert.setAttribute("id","alert"); - alertBackground.appendChild(alert); + alertText = document.createElement("p"); + alertText.setAttribute("id","alert"); + alertBackground.appendChild(alertText); settings = '{ \ "location": 1, "font_face": "Segoe UI, Tahoma, Geneva, Verdana, sans-serif", \ "font_size": 40, "font_color": "#ffffff", "background_color": "#660000", \ - "timeout": 5, "repeat": 1, "scrolling_text": true \ + "timeout": 5, "repeat": 1, "scroll": true \ }'; }); @@ -175,30 +175,73 @@ describe("Display.alert", function () { expect(Display.alert("",settings)).toBeNull(); }); - it("should set the correct alert text", function () { + it("should set the correct alert text", function () { + spyOn("Display", "addAlertToQueue"); + spyOn("Display", "initAlertEventListeners"); + spyOn("Display", "setAlertKeyframes"); + spyOn("Display", "showAlertBackground"); Display.alert("OPEN-LP-3.0 Alert Test", settings); + + expect(Display.setAlertText).toHaveBeenCalled(); expect(alert.innerHTML).toEqual("OPEN-LP-3.0 Alert Test"); }); - it("should add alerts to the queue correctly if it called when an alert is displaying", function () { + it("should call the addAlertToQueue method if an alert is displaying", function () { + spyOn("Display", "addAlertToQueue"); 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); - - expect(Display._alerts.length).toEqual(1); - expect(Display._alerts[0]).toEqual(queuedAlert); + var text = "Testing alert queue"; + + Display.alert(text, settings); + + expect(Display.addAlertToQueue).toHaveBeenCalledWith(text, settings); }); it("should set the alert settings correctly", function() { + spyOn("Display", "setAlertKeyframes"); Display.alert("Testing settings", settings); - - console.debug("Settings", JSON.parse(settings)); + expect(Display._alertSettings).toEqual(JSON.parse(settings)); }); }); +describe("Display.initAlertEventListeners", function() { + var alertBackground, styles, alertText; + beforeEach(function() { + document.body.innerHTML = ""; + styles = document.createElement("style"); + styles.innerHTML = "@keyframes test { from {background-color: red;} \ + to {background-color: yellow;}"; + document.head.appendChild(styles); + alertBackground = document.createElement("div"); + alertBackground.setAttribute("id", "alert-background"); + document.body.appendChild(alertBackground); + alertText = document.createElement("p"); + alertText.setAttribute("id","alert"); + alertBackground.appendChild(alertText); + alertBackground.style.opacity = 0; + alertBackground.style.transition = "opacity 0.001s linear"; + Display.initAlertEventListeners(); + }); + + it("should set the transition end event listener correctly", function() { + spyOn("Display", "alertTransitionEndEvent"); + + alertBackground.style.opacity = 1; + + expect(Display.alertTransitionEndEvent).toHaveBeenCalled(); + + }); + + it("should set the animation end event listener correctly", function() { + spyOn("Display", "alertAnimationEndEvent"); + + alertText.style.animation = "test 0.01s linear"; + + expect(Display.alertAnimationEndEvent).toHaveBeenCalled(); + }); +}); + describe("Display.showAlertBackground", function () { var alertBackground, css, settings, style; @@ -234,57 +277,184 @@ describe("Display.showAlertBackground", function () { setTimeout(function () { expect(alertBackground.style.backgroundColor).toEqual(settings.background_color); - expect(alertBackground.style.height).toEqual("25%"); - expect(alertBackground.style.transition).toEqual("1s linear"); + expect(alertBackground.style.height).toEqual("auto"); + expect(alertBackground.style.minHeight).toEqual("25%"); + expect(alertBackground.style.transition).toEqual("height 1s linear"); expect(alertBackground.style.visibility).toEqual("visible"); done(); }, 50); - }); + }); +}); - it("should set the correct class when location is top of the page", function () { - settings.location = 0; - Display.showAlertBackground(settings); +describe("Display.hideAlertBackground", function () { + var alertBackground; + beforeEach( function() { + document.body.innerHTML = ""; + alertBackground = document.createElement("div"); + alertBackground.setAttribute("id", "alert-background"); + document.body.appendChild(alertBackground); + }); + + it("reset the background to default once an alert has been displayed", function() { + //spyOn(Display, "displayNextAlert"); + Display.hideAlertBackground(); + + expect(Display._transitionState).toEqual(TransitionState.ExitTransition); + expect(Display._alertState).toEqual(AlertState.NotDisplaying); + expect(alertBackground.style.transition).toEqual("height 1s linear"); + expect(alertBackground.style.height).toEqual("0%"); + expect(alertBackground.style.minHeight).toEqual("0%"); + expect(alertBackground.className).toEqual("bg-default"); + }); +}); + +describe("Display.setAlertText", function() { + var alertText; + beforeEach( function() { + document.body.innerHTML = ""; + alertText = document.createElement("p"); + alertText.setAttribute("id", "alert"); + document.body.appendChild(alertText); + }); + it("should set the alert text correctly", function () { + Display.setAlertText("OpenLP Alert Text"); + + expect(alertText.textContent).toEqual("OpenLP Alert Text"); + }); +}); + +describe("Display.setAlertLocation", function() { + beforeEach(function() { + document.body.innerHTML = ""; + alertBackground = document.createElement("p"); + alertBackground.setAttribute("id","alert-background"); + alertBackground.setAttribute("class","bg-default"); + document.body.appendChild(alertBackground); + }); + it("should set the correct class when location is top of the page", function () { + Display.setAlertLocation(0); expect(alertBackground.className).toEqual("bg-default top"); }); - it("should set the correct class when location is middle of the page", function () { - settings.location = 1; - Display.showAlertBackground(settings); + it("should set the correct class when location is middle of the page", function () { + Display.setAlertLocation(1); expect(alertBackground.className).toEqual("bg-default middle"); }); it("should set the correct class when location is bottom of the page", function () { - Display.showAlertBackground(settings); + Display.setAlertLocation(2); expect(alertBackground.className).toEqual("bg-default bottom"); }); }); -describe("Display.hideAlertBackground", function () { - var alertBackground; +describe("Display.showAlertText", function () { + var alertText, settings; + beforeEach(function () { + document.body.innerHTML = ""; + alertText = document.createElement("p"); + alertText.setAttribute("id","alert"); + document.body.appendChild(alertText); + settings = { + "location": 2, "font_face": "Tahoma", "font_size": 40, + "font_color": "rgb(255, 255, 255)", "background_color": "rgb(102, 0, 0)", + "timeout": 0.01, "repeat": 1, "scroll": true + }; + Display._transitionState = TransitionState.EntranceTransition; + }); + it("should set the correct styles on the text", function() { + Display.showAlertText(settings); + + expect(alertText.style.opacity).toEqual('1'); + expect(alertText.style.color).toEqual("rgb(255, 255, 255)"); + expect(alertText.style.fontFamily).toEqual("Tahoma"); + expect(alertText.style.fontSize).toEqual("40pt"); + }); + + it("should set the correct animation when text is set to scroll)", function () { + Display.showAlertText(settings); + + expect(alertText.style.animation).toEqual("alert-scrolling-text " + settings.timeout + "s linear 0s 1 normal"); + expect(Display._animationState).toEqual(AnimationState.ScrollingText); + }); + + it("should set the correct styles when text is not scrolling", function (done) { + settings.scroll = false; + Display._transitionState = TransitionState.EntranceTransition; + spyOn(Display, "hideAlertText"); + Display.showAlertText(settings); + + expect(alertText.style.opacity).toEqual('1'); + expect(alertText.style.animation).toEqual(""); + expect(Display._animationState).toEqual(AnimationState.NonScrollingText); + setTimeout (function () { + expect(alertText.className).toEqual("no-scroll"); + expect(Display._animationState).toEqual(AnimationState.NoAnimation); + expect(Display.hideAlertText).toHaveBeenCalled(); + done(); + }, settings.timeout * 1000); + }); +}); + +describe("Display.hideAlertText", function() { + var alertBackground, alertText, keyframeStyle; beforeEach(function () { document.body.innerHTML = ""; - alertBackground = document.createElement("div"); - alertBackground.setAttribute("id", "alert-background"); - document.body.appendChild(alertBackground); + // keyframeStyle = document.createElement("style"); + // keyframeStyle.setAttribute("id", "keyframeStyles"); + // document.head.appendChild(keyframeStyle); + // alertBackground = document.createElement("div"); + // alertBackground.setAttribute("id", "alert-background"); + // document.body.appendChild(alertBackground); + alertText = document.createElement("p"); + alertText.setAttribute("id", "alert"); + alertText.style.opacity = 1; + alertText.style.animation = "alert-scrolling-text 5s linear 0s 1 bg-default"; + document.body.appendChild(alertText); + Display._animationState = AnimationState.ScrollingText; + }); + + it("should reset the text styles and animation state after the text has scrolled", function() { + spyOn(Display, "resetAlertKeyframes"); + spyOn(Display, "hideAlertBackground"); + Display.hideAlertText(); + + expect(alertText.style.animation).toEqual(""); + expect(alertText.style.opacity).toEqual('0'); + expect(alertText.style.color).toEqual("rgb(255, 255, 255)"); + expect(alertText.style.fontSize).toEqual("40pt"); + expect(Display._animationState).toEqual(AnimationState.NoAnimation); + }); + + it("should call the hideAlertBackground and resetAlertKeyframes methods", function() { + spyOn(Display, "hideAlertBackground"); + spyOn(Display, "resetAlertKeyframes"); + Display.hideAlertText(); + + expect(Display.hideAlertBackground).toHaveBeenCalled(); + expect(Display.resetAlertKeyframes).toHaveBeenCalled(); + }); +}); + +describe("Display.addAlertToQueue", function () { + it("should add an alert to the queue if one is displaying already", function() { Display._alerts = []; - }); + Display._alertState = AlertState.Displaying; + settings = '{ \ + "location": 1, "font_face": "Segoe UI, Tahoma, Geneva, Verdana, sans-serif", \ + "font_size": 40, "font_color": "#ffffff", "background_color": "#660000", \ + "timeout": 5, "repeat": 1, "scrolling_text": true \ + }'; + var alertObject = {text: "Testing alert queue", settings: settings}; + var queuedAlert = JSON.stringify(alertObject); + + Display.addAlertToQueue("Testing alert queue", settings); - it("should set the styles correctly when the hideAlertBackground method is called", function () { - Display.hideAlertBackground(); - - expect(alertBackground.style.height).toEqual('0%'); - expect(alertBackground.style.transition).toEqual("1s linear"); - }); - - it("should set the correct states when hideAlertBackground is called", function () { - Display.hideAlertBackground(); - - expect(Display._alertState).toEqual(AlertState.NotDisplaying); - expect(Display._transitionState).toEqual(TransitionState.ExitTransition); + expect(Display._alerts.length).toEqual(1); + expect(Display._alerts[0]).toEqual(queuedAlert); }); }); @@ -314,106 +484,74 @@ describe("Display.displayNextAlert", function () { }); }); -describe("Display.hideAlertText", 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 bg-default"; - alertBackground.appendChild(alertText); - Display._animationState = AnimationState.ScrollingText; - }); - - it("should reset the text styles and animation state after the text has scrolled", function() { - Display.hideAlertText(); - - expect(alertText.style.animation).toEqual(""); - expect(alertText.style.visibility).toEqual("hidden"); - expect(alertText.style.color).toEqual("rgb(255, 255, 255)"); - expect(alertText.style.fontSize).toEqual("40pt"); - expect(Display._animationState).toEqual(AnimationState.NoAnimation); - }); - - it("should call the alert background method", function() { - spyOn(Display, "hideAlertBackground"); - Display.hideAlertText(); - - expect(Display.hideAlertBackground).toHaveBeenCalled(); - }); -}); - -describe("Display.showAlertText", function () { - var alertText, settings; - beforeEach(function () { - document.body.innerHTML = ""; - alertText = document.createElement("p"); - alertText.setAttribute("id","alert"); - document.body.appendChild(alertText); - settings = { - "location": 2, "font_face": "Tahoma", "font_size": 40, - "font_color": "rgb(255, 255, 255)", "background_color": "rgb(102, 0, 0)", - "timeout": 0.01, "repeat": 1, "scroll": true - }; +describe("Display.alertTransitionEndEvent", function() { + it("should set the correct state and call showAlertText after the alert entrance transition", function() { + var fake_settings = {test: "fake_settings"}; + Display._alertSettings = fake_settings; + spyOn("Display", "showAlertText"); Display._transitionState = TransitionState.EntranceTransition; - }); + var event = document.createEvent("animationend"); + Display.alertTransitionEnd(event); - it("should set the correct styles on the text", function() { - Display.showAlertText(settings); - - expect(alertText.style.visibility).toEqual("visible"); - expect(alertText.style.color).toEqual("rgb(255, 255, 255)"); - expect(alertText.style.fontFamily).toEqual("Tahoma"); - expect(alertText.style.fontSize).toEqual("40pt"); - }); - - it("should set the correct animation when text is set to scroll)", function () { - Display.showAlertText(settings); - - expect(alertText.style.animation).toEqual("alert-scrolling-text " + settings.timeout + "s linear 0s 1 normal"); - expect(Display._animationState).toEqual(AnimationState.ScrollingText); - }); - - it("should set the correct styles on entrance transition (without scroll)", function (done) { - settings.scroll = false; - Display._transitionState = TransitionState.EntranceTransition; - spyOn(Display, "hideAlertBackground"); - Display.showAlertText(settings); - - expect(alertText.style.visibility).toEqual("visible"); - expect(alertText.style.animation).toEqual(""); - expect(Display._animationState).toEqual(AnimationState.NonScrollingText); - setTimeout (function () { - expect(alertText.className).toEqual("no-scroll"); - expect(Display._animationState).toEqual(AnimationState.NoAnimation); - expect(Display.hideAlertBackground).toHaveBeenCalled(); - done(); - }, settings.timeout * 1000); - }); -}); - -describe("Display.hideAlertBackground", function () { - var alertBackground; - beforeEach( function() { - document.body.innerHTML = ""; - alertBackground = document.createElement("div"); - alertBackground.setAttribute("id", "alert-background"); - alertBackground.setAttribute("class", "bg-default"); - document.body.appendChild(alertBackground); + expect(Display._transitionState).toEqual(TransitionState.NoTransition); + expect(Display.alertTransitionEndEvent).toHaveBeenCalledWith(fake_settings); }); - it("reset the background to default once an aletr has been displayed", function() { - spyOn(Display, "displayNextAlert"); - Display.hideAlertBackground(); + it("should set the correct state, class and call displayNextAlert after the alert exit transition", function() { + spyOn("Display", "displayNextAlert"); + Display._transitionState = TransitionState.ExitTransition; + var event = document.createEvent("animationend"); + Display.alertTransitionEnd(event); - expect(Display._transitionState).toEqual(TransitionState.ExitTransition); - expect(Display._alertState).toEqual(AlertState.NotDisplaying); - expect(alertBackground.style.height).toEqual("0%"); - expect(alertBackground.className).toEqual("bg-default"); + expect(Display._transitionState).toEqual(TransitionState.NoTransition); + expect(Display.displayNextAlert).toHaveBeenCalled(); + }); +}); + +describe("Display.alertAnimationEndEvent", function () { + it("should call the hideAlertText method", function() { + spyOn("Display","hideAlertText"); + + expect(Display.hideAlertText).toHaveBeenCalled(); + }); +}); + +describe("Display.setAlertKeyframes", function () { + var keyframeStyle; + beforeEach( function () { + document.head.innerHTML = ""; + keyframeStyle = document.createElement("style"); + keyframeStyle.setAttribute("id", "keyframeStyles"); + document.head.appendChild(keyframeStyle); + }); + + it("should set the correct keyframes", function () { + var scrollWidth = 3200; + var scrollWidthPercentage = (Math.ceil((((scrollWidth / screen.width) * 100) + 1) / 10) * 10) + 110; + var keyframeHtml = "@keyframes alert-scrolling-text {" + + "from { transform: translateX(110%); } " + + "to { transform: translateX(-" + scrollWidthPercentage +"%);}"; + + expect(Display.setAlertKeyframes(scrollWidth)).toEqual(keyframeHtml); + expect(keyframeStyle.innerHTML).toEqual(keyframeHtml); + }); +}); + +describe("Display.resetAlertKeyframes", function () { + var keyframeStyle; + beforeEach( function () { + document.head.innerHTML = ""; + keyframeStyle = document.createElement("style"); + keyframeStyle.setAttribute("id", "keyframeStyles"); + document.head.appendChild(keyframeStyle); + keyframeStyle.innerHTML = "@keyframes alert-scrolling-text {" + + "from { margin-left: 110%; } to { margin-left: -220;}"; + }); + + it("shoud reset the key frames after scrolling the text", function () { + Display.resetAlertKeyframes(); + + expect(keyframeStyle.innerHTML).toEqual(""); }); });