From 7a1c82096ded72c5177d893e041e67fa504dccd5 Mon Sep 17 00:00:00 2001 From: Nico Opiyo Date: Fri, 15 Mar 2019 17:46:26 +0300 Subject: [PATCH] Fixed tests and refactored event listeners for effective testing --- openlp/core/display/html/display.css | 4 +- openlp/core/display/html/display.js | 96 ++++++++++++++++----------- tests/js/test_display.js | 97 +++++++++++++++++++++++++++- 3 files changed, 152 insertions(+), 45 deletions(-) diff --git a/openlp/core/display/html/display.css b/openlp/core/display/html/display.css index 301e91d11..29ce52b58 100644 --- a/openlp/core/display/html/display.css +++ b/openlp/core/display/html/display.css @@ -12,7 +12,6 @@ } /* ALERT STYLING */ - .normal { position: absolute; margin: 0; @@ -47,8 +46,7 @@ position: relative; top: 50%; transform: translateY(-50%); - margin: 0% 0% 0% 100%; - z-index: 11; + z-index: 12; overflow: visible; white-space: nowrap; color: #ffffff; diff --git a/openlp/core/display/html/display.js b/openlp/core/display/html/display.js index 34b6c0951..652d4f15b 100644 --- a/openlp/core/display/html/display.js +++ b/openlp/core/display/html/display.js @@ -437,17 +437,20 @@ var Display = { alertBackground.addEventListener('transitionend', function(e) { e.stopPropagation(); - Display.transitionEndEvent(settings); + if (Display._transitionState === TransitionState.EntranceTransition) { + console.debug("Calling alertEntranceTransitionEnd"); + Display.alertEntranceTransitionEnd(settings); + } + else { + console.debug("Calling alertExitTransitionEnd"); + Display.alertExitTransitionEnd(); + } }); alertText.addEventListener('animationend', function (e) { e.stopPropagation(); - if (Display._animationState === AnimationState.ScrollingText) { - alertText.style.animation = ""; - alertText.style.visibility = "hidden"; - Display._animationState = AnimationState.NoAnimation; - Display.doExitTransition(); - } + console.debug("The text scrolling has ended"); + Display.textAnimationEnd(); }); }, /** @@ -485,7 +488,7 @@ var Display = { setTimeout( function() { alertBackground.style.height = "25%"; alertBackground.style.transition = transitionSetting; - alertBackground.style.visibility = "visible"; + alertBackground.style.visibility = "visible"; }, 50); this._transitionState = TransitionState.EntranceTransition; }, @@ -515,40 +518,55 @@ var Display = { } }, /** - * Set text styles and animations when transitions are are completed - * @param {event} event - The event that has occured - * @param {json} settings object - The settings to use for the animation + * Reset the styling and animation state of the alert text after the scrolling animation */ - transitionEndEvent: function (settings) { - var alertBackground = $("#alert-background")[0]; - var alertText = $("#alert")[0]; - if (Display._transitionState === TransitionState.EntranceTransition) { - alertText.style.visibility = "visible"; - if (settings.scroll) { - var animationSettings = "alert-scrolling-text " + settings.timeout + - "s linear 0s " + settings.repeat + " normal"; - alertText.style.animation = animationSettings; - Display._animationState = AnimationState.ScrollingText; - } - else { - Display._animationState = AnimationState.NonScrollingText; - setTimeout (function () { - alertText.style.visibility = "hidden"; - Display._animationState = AnimationState.NoAnimation; - Display.doExitTransition(); - }, settings.timeout * 1000); - } - Display._transitionState = TransitionState.NoTransition - } - else if (Display._transitionState === TransitionState.ExitTransition) { - Display._transitionState = TransitionState.NoTransition; - alertText.style.visibility = "hidden"; - alertBackground.classList = ""; - alertBackground.classList.add("normal"); - } + textAnimationEnd: function () { + var alertText = $('#alert')[0]; + alertText.style.animation = ""; + alertText.style.visibility = "hidden"; + Display._animationState = AnimationState.NoAnimation; + Display.doExitTransition(); }, /** - * Add a slides. If the slide exists but the HTML is different, update the slide. + * Sets the alert text styles correctly after the entrance transition has ended. + * @param {json} settings object - The settings to use for the animation + */ + alertEntranceTransitionEnd: function (settings) { + var alertText = $("#alert")[0]; + if (settings.scroll) { + // alertText.style.visibility = "visible"; + var animationSettings = "alert-scrolling-text " + settings.timeout + + "s linear 0s " + settings.repeat + " normal"; + console.debug("Visibility: " + alertText.style.visibility); + alertText.style.animation = animationSettings; + console.debug("Animation: " + animationSettings); + Display._animationState = AnimationState.ScrollingText; + } + else { + Display._animationState = AnimationState.NonScrollingText; + alertText.style.animation = ""; + setTimeout (function () { + // alertText.style.visibility = "visible"; + Display._animationState = AnimationState.NoAnimation; + Display.doExitTransition(); + }, settings.timeout * 1000); + } + alertText.style.visibility = "visible"; + Display._transitionState = TransitionState.NoTransition + }, + /** + * Resets the alert styles after the alert has been shown. + */ + alertExitTransitionEnd: function () { + var alertText = $("#alert")[0]; + var alertBackground = $("#alert-background")[0]; + Display._transitionState = TransitionState.NoTransition; + alertText.style.visibility = "hidden"; + alertBackground.classList = ""; + alertBackground.classList.add("normal"); + }, + /** + * Add a slide. If the slide exists but the HTML is different, update the slide. * @param {string} verse - The verse number, e.g. "v1" * @param {string} html - The HTML for the verse, e.g. "line1
line2" * @param {bool} [reinit=true] - Re-initialize Reveal. Defaults to true. diff --git a/tests/js/test_display.js b/tests/js/test_display.js index 733b8fd4e..d1e206d24 100644 --- a/tests/js/test_display.js +++ b/tests/js/test_display.js @@ -312,7 +312,7 @@ describe("Display.getNextAlert", function () { }; var alertObject = {text: "Queued Alert", settings: settings}; Display._alerts.push(JSON.stringify(alertObject)); - spyOn(Display,"alert"); + spyOn(Display, "alert"); Display.getNextAlert(); expect(Display.alert).toHaveBeenCalled(); @@ -320,7 +320,39 @@ describe("Display.getNextAlert", function () { }); }); -describe("Display.transitionEnd", function () { +describe("Display.textAnimationEnd", 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 normal"; + alertBackground.appendChild(alertText); + Display._animationState = AnimationState.ScrollingText; + }); + + it("should reset the text styles and animation state after the text has scrolled", function() { + Display.textAnimationEnd(); + + expect(alertText.style.animation).toEqual(""); + expect(alertText.style.visibility).toEqual("hidden"); + expect(Display._animationState).toEqual(AnimationState.NoAnimation); + }); + + it("should call the doExitTranstion method", function() { + spyOn(Display, "doExitTransition"); + Display.textAnimationEnd(); + + expect(Display.doExitTransition).toHaveBeenCalled(); + }); +}); + +describe("Display.alertEntranceTransitionEnd", function () { + var alertBackground, alertText; beforeEach(function () { document.body.innerHTML = ""; alertBackground = document.createElement("div"); @@ -331,7 +363,66 @@ describe("Display.transitionEnd", function () { alertText.setAttribute("id","alert"); alertBackground.appendChild(alertText); }); - // it("should") + + it("should set the correct styles on entrance transition (with scroll)", function () { + var settings = { + "location": 2, "font_face": "Tahoma", "font_size": 40, + "font_color": "rgb(255, 255, 255)", "background_color": "rgb(102, 0, 0)", + "timeout": 5, "repeat": 1, "scroll": true + }; + Display._transitionState = TransitionState.EntranceTransition; + Display.alertEntranceTransitionEnd(settings); + + expect(alertText.style.visibility).toEqual("visible"); + expect(alertText.style.animation).toEqual("alert-scrolling-text 5s linear 0s 1 normal"); + expect(Display._animationState).toEqual(AnimationState.ScrollingText); + expect(Display._transitionState).toEqual(TransitionState.NoTransition); + }); + + it("should set the correct styles on entrance transition (without scroll)", function (done) { + + var settings = { + "location": 2, "font_face": "Tahoma", "font_size": 40, + "font_color": "rgb(255, 255, 255)", "scroll": false, "repeat": 1, + "timeout": 0.01, "background_color": "rgb(102, 0, 0)" + }; + Display._transitionState = TransitionState.EntranceTransition; + spyOn(Display, "doExitTransition"); + Display.alertEntranceTransitionEnd(settings); + + expect(alertText.style.visibility).toEqual("visible"); + expect(alertText.style.animation).toEqual(""); + expect(Display._animationState).toEqual(AnimationState.NonScrollingText); + expect(Display._transitionState).toEqual(TransitionState.NoTransition); + setTimeout (function () { + expect(Display._animationState).toEqual(AnimationState.NoAnimation); + expect(Display.doExitTransition).toHaveBeenCalled(); + done(); + }, settings.timeout * 1000); + }); +}); + +describe("Display.alertExitTransitionEnd", function () { + var alertBackground, alertText; + beforeEach( function() { + document.body.innerHTML = ""; + 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); + }); + + + it("should set the styles to default on exit transition", function() { + Display.alertExitTransitionEnd(); + + expect(Display._transitionState).toEqual(TransitionState.NoTransition); + expect(alertText.style.visibility).toEqual("hidden"); + expect(alertBackground.className).toEqual("normal"); + }); }); describe("Display.addTextSlide", function () {