forked from openlp/openlp
Fixed tests and refactored event listeners for effective testing
This commit is contained in:
parent
53d8b239ff
commit
7a1c82096d
@ -12,7 +12,6 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* ALERT STYLING */
|
/* ALERT STYLING */
|
||||||
|
|
||||||
.normal {
|
.normal {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
@ -47,8 +46,7 @@
|
|||||||
position: relative;
|
position: relative;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
transform: translateY(-50%);
|
transform: translateY(-50%);
|
||||||
margin: 0% 0% 0% 100%;
|
z-index: 12;
|
||||||
z-index: 11;
|
|
||||||
overflow: visible;
|
overflow: visible;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
|
@ -437,17 +437,20 @@ var Display = {
|
|||||||
|
|
||||||
alertBackground.addEventListener('transitionend', function(e) {
|
alertBackground.addEventListener('transitionend', function(e) {
|
||||||
e.stopPropagation();
|
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) {
|
alertText.addEventListener('animationend', function (e) {
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
if (Display._animationState === AnimationState.ScrollingText) {
|
console.debug("The text scrolling has ended");
|
||||||
alertText.style.animation = "";
|
Display.textAnimationEnd();
|
||||||
alertText.style.visibility = "hidden";
|
|
||||||
Display._animationState = AnimationState.NoAnimation;
|
|
||||||
Display.doExitTransition();
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
@ -515,40 +518,55 @@ var Display = {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
* Set text styles and animations when transitions are are completed
|
* Reset the styling and animation state of the alert text after the scrolling animation
|
||||||
* @param {event} event - The event that has occured
|
|
||||||
* @param {json} settings object - The settings to use for the animation
|
|
||||||
*/
|
*/
|
||||||
transitionEndEvent: function (settings) {
|
textAnimationEnd: function () {
|
||||||
var alertBackground = $("#alert-background")[0];
|
var alertText = $('#alert')[0];
|
||||||
var alertText = $("#alert")[0];
|
alertText.style.animation = "";
|
||||||
if (Display._transitionState === TransitionState.EntranceTransition) {
|
alertText.style.visibility = "hidden";
|
||||||
alertText.style.visibility = "visible";
|
Display._animationState = AnimationState.NoAnimation;
|
||||||
if (settings.scroll) {
|
Display.doExitTransition();
|
||||||
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");
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
* 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} verse - The verse number, e.g. "v1"
|
||||||
* @param {string} html - The HTML for the verse, e.g. "line1<br>line2"
|
* @param {string} html - The HTML for the verse, e.g. "line1<br>line2"
|
||||||
* @param {bool} [reinit=true] - Re-initialize Reveal. Defaults to true.
|
* @param {bool} [reinit=true] - Re-initialize Reveal. Defaults to true.
|
||||||
|
@ -312,7 +312,7 @@ describe("Display.getNextAlert", function () {
|
|||||||
};
|
};
|
||||||
var alertObject = {text: "Queued Alert", settings: settings};
|
var alertObject = {text: "Queued Alert", settings: settings};
|
||||||
Display._alerts.push(JSON.stringify(alertObject));
|
Display._alerts.push(JSON.stringify(alertObject));
|
||||||
spyOn(Display,"alert");
|
spyOn(Display, "alert");
|
||||||
Display.getNextAlert();
|
Display.getNextAlert();
|
||||||
|
|
||||||
expect(Display.alert).toHaveBeenCalled();
|
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 () {
|
beforeEach(function () {
|
||||||
document.body.innerHTML = "";
|
document.body.innerHTML = "";
|
||||||
alertBackground = document.createElement("div");
|
alertBackground = document.createElement("div");
|
||||||
@ -331,7 +363,66 @@ describe("Display.transitionEnd", function () {
|
|||||||
alertText.setAttribute("id","alert");
|
alertText.setAttribute("id","alert");
|
||||||
alertBackground.appendChild(alertText);
|
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 () {
|
describe("Display.addTextSlide", function () {
|
||||||
|
Loading…
Reference in New Issue
Block a user