raoul/openlp
1
0
Fork 0
forked from openlp/openlp
Code Issues Pull Requests Projects Releases Wiki Activity

Fixed tests and refactored event listeners for effective testing

Browse Source
This commit is contained in:
Nico Opiyo 2019-03-15 17:46:26 +03:00
parent 53d8b239ff
commit 7a1c82096d
3 changed files with 152 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
openlp/core/display/html/display.css
View File

@ -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;

96
openlp/core/display/html/display.js
View File

@ -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<br>line2"
* @param {bool} [reinit=true] - Re-initialize Reveal. Defaults to true.

97
tests/js/test_display.js
View File

@ -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 () {