Added a few tests and fixed failing JS tests

This commit is contained in:
Nico Opiyo 2019-03-06 13:05:28 +03:00
parent 72980b5365
commit 93a6a6a75b
2 changed files with 108 additions and 67 deletions

View File

@ -80,6 +80,7 @@ var AlertLocation = {
var AlertState = {
Displaying: "displaying",
DisplayingFromQueue: "displayingFrom Queue",
NotDisplaying: "notDisplaying"
}
@ -406,39 +407,18 @@ var Display = {
Display._slides['0'] = 0;
Display.reinit();
},
/**
* Display the next alert in the queue
*/
getNextAlert: function () {
console.debug("Checking queue for alerts");
if (Display._alerts.length > 0) {
var alertObject = JSON.parse(this._alerts.shift());
setTimeout(function() {
Display.alert(alertObject.text, alertObject.settings);
},1000);
}
else {
console.debug("No alerts found");
}
},
/**
* Display an alert
* @param {string} text - The alert text
* @param {int} location - The location of the text (top, middle or bottom)
*/
alert: function (text, alert_settings) {
console.debug(" alert text: " + text + ", alert settings: " + alert_settings);
if (text == "") {
return null;
}
else {
if (this._alertState === AlertState.Displaying) {
var alertObject = {};
alertObject.text = text;
alertObject.settings = alert_settings;
var alertObject = {text: text, settings: alert_settings};
this._alerts.push(JSON.stringify(alertObject));
return null;
}
@ -447,12 +427,14 @@ var Display = {
var alertBackground = $("#alert-background")[0];
var alertText = $("#alert")[0];
alertText.innerHTML = text;
/* Start the entrance transition */
this._alertState = AlertState.Displaying;
this._transitionState = Display.doEntranceTransition(settings);
/* Check if the alert is a queued alert */
if (this._alertState !== AlertState.DisplayingFromQueue) {
this._alertState = AlertState.Displaying;
}
// TODO: Add functionality for no scroll and queue if not all alerts have been displayed
Display.doEntranceTransition(settings);
// TODO: Add functionality for no scroll
alertBackground.addEventListener('transitionend', function (e) {
e.stopPropagation();
if (Display._transitionState === TransitionState.EntranceTransition) {
@ -462,12 +444,10 @@ var Display = {
Display._transitionState = TransitionState.NoTransition
}
else if (Display._transitionState === TransitionState.ExitTransition) {
Display._transitionState = TransitionState.NoTransition;
Display._alertState = AlertState.NotDisplaying;
Display._transitionState = TransitionState.NoTransition;
alertText.style.visibility = "hidden";
alertBackground.classList = "";
alertBackground.classList.add("normal");
Display.getNextAlert();
alertBackground.classList.add("normal");
}
});
@ -476,19 +456,18 @@ var Display = {
if (Display._animationState === AnimationState.ScrollingAnimation) {
alertText.classList.remove("horizontal-scroll-animation");
alertText.style.visibility = "hidden";
Display._animationState = AnimationState.NoAnimation;
Display.doExitTransition();
Display._animationState = AnimationState.NoAnimation;
}
});
},
/**
* Start background entrance transition for display of alert
* @param {number} location - Number showing the location of the alert on screen
* @param {object} settings - Settings for styling the alert
*/
doEntranceTransition: function (settings) {
var alertBackground = $("#alert-background")[0];
var alertText = $("#alert")[0];
var transitionSetting;
switch (settings.location) {
case AlertLocation.Top:
alertBackground.classList.add("top");
@ -505,15 +484,21 @@ var Display = {
alertText.style.fontFamily = settings.font_face;
alertText.style.fontSize = settings.font_size + "pt";
alertBackground.style.backgroundColor = settings.background_color;
// Wait for styles to be set first before starting transitions
if (this._alertState === AlertState.DisplayingFromQueue) {
transitionSetting = "1s linear 1s";
}
else {
transitionSetting = "1s linear";
}
// Wait for styles to be set first before starting transition
setTimeout( function() {
alertBackground.style.height = "25%";
alertBackground.style.transition = "1s linear";
alertBackground.style.transition = transitionSetting;
alertBackground.style.visibility = "visible";
}, 50);
return TransitionState.EntranceTransition;
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
@ -522,7 +507,22 @@ var Display = {
var alertBackground = $("#alert-background")[0];
alertBackground.style.height = "0%";
alertBackground.style.transition = "1s linear";
this._transitionState = TransitionState.ExitTransition;
this._transitionState = TransitionState.ExitTransition;
this._alertState = AlertState.NotDisplaying;
Display.getNextAlert();
},
/**
* Display the next alert in the queue
*/
getNextAlert: function () {
if (Display._alerts.length > 0) {
var alertObject = JSON.parse(this._alerts.shift());
this._alertState = AlertState.DisplayingFromQueue;
Display.alert(alertObject.text, alertObject.settings);
}
else {
return null;
}
},
/**
* Add a slides. If the slide exists but the HTML is different, update the slide.

View File

@ -154,8 +154,7 @@ describe("The Display object", function () {
});
describe("Display.alert", function () {
var alertBackground, alert, settings;
var alerts = [];
var alertBackground, alert, settings,_alertState;
beforeEach(function () {
document.body.innerHTML = "";
@ -180,21 +179,22 @@ describe("Display.alert", function () {
expect(alert.innerHTML).toEqual("OPEN-LP-3.0 Alert Test");
});
it("should set the correct alert position", function () {
expect(Display.alert("Alert Location Test", settings)).toEqual(1);
});
it("should add alerts to the queue correctly if it called when an alert is displaying", function () {
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);
it("should add the alert to the alert queue", function() {
//Uses the alerts array
expect(Display._alerts.length).toEqual(1);
expect(Display._alerts[0]).toEqual(queuedAlert);
});
});
describe("The doEntranceTransition", function () {
describe("Display.doEntranceTransition", function () {
var alertBackground, alertText, css, settings, style;
// TODO: Fix tests to accommodate new behaviour with CSS classes and settings modification
beforeEach(function() {
beforeEach(function () {
document.body.innerHTML = "";
style = document.createElement("style");
style.type = "text/css";
@ -214,51 +214,52 @@ describe("The doEntranceTransition", function () {
alertText = document.createElement("p");
alertText.setAttribute("id","alert");
alertBackground.appendChild(alertText);
Display._alertState = AlertState.NotDisplaying;
});
it("should apply the styles correctly when doEntranceTransition is called", function(done) {
it("should set the correct transition state", function () {
Display.doEntranceTransition(settings);
expect(alertBackground.classList.contains("bottom")).toBe(true);
expect(Display._transitionState).toEqual(TransitionState.EntranceTransition);
})
setTimeout(function() {
it("should apply the styles correctly when doEntranceTransition is called", function (done) {
Display.doEntranceTransition(settings);
expect(alertBackground.className).toBe("normal bottom");
setTimeout(function () {
expect(alertText.style.fontFamily).toEqual(settings.font_face);
expect(alertText.style.color).toEqual(settings.font_color);
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.backgroundColor).toEqual(settings.background_color);
expect(alertBackground.style.height).toEqual("25%");
expect(alertBackground.style.transition).toEqual("1s linear");
expect(alertBackground.style.visibility).toEqual("visible");
done();
}, 60);
}, 50);
});
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);
expect(alertBackground.className).toEqual("normal top");
});
it("should set the correct class for the alert when location is middle of the page", function () {
settings.location = 1;
Display.doEntranceTransition(settings);
expect(alertBackground.classList.contains("normal")).toBe(true);
expect(alertBackground.classList.contains("middle")).toBe(true);
expect(alertBackground.className).toEqual("normal middle");
});
it("should set the correct class for the alert when location is bottom of the page", function () {
Display.doEntranceTransition(settings);
expect(alertBackground.classList.contains("normal")).toBe(true);
expect(alertBackground.classList.contains("bottom")).toBe(true);
expect(alertBackground.className).toEqual("normal bottom");
});
});
describe("The doExitTransition", function () {
describe("Display.doExitTransition", function () {
var alertBackground;
beforeEach(function () {
@ -266,16 +267,55 @@ describe("The doExitTransition", function () {
alertBackground = document.createElement("div");
alertBackground.setAttribute("id", "alert-background");
document.body.appendChild(alertBackground);
Display._alerts = [];
});
it("should transition correctly when the doExitTransition method is called", function () {
it("should set the styles correctly when the doExitTransition method is called", function () {
Display.doExitTransition();
expect(alertBackground.style.height).toEqual('0%');
expect(alertBackground.style.transition).toEqual("1s linear");
expect(alertBackground.style.transition).toEqual("1s linear");
});
it("should set the correct states when doExitTransition is called", function () {
Display.doExitTransition();
expect(Display._alertState).toEqual(AlertState.NotDisplaying);
expect(Display._transitionState).toEqual(TransitionState.ExitTransition);
});
it("should call the getNextAlert method to get the next alert on the queue", function () {
spyOn(Display,"getNextAlert");
Display.doExitTransition();
expect(Display.getNextAlert).toHaveBeenCalled();
});
});
describe("Display.getNextAlert", function () {
Display.getNextAlert();
it("should return null if there are no alerts in the queue", function () {
Display._alerts = [];
Display.getNextAlert();
expect(Display.getNextAlert()).toBeNull();
});
it("should call the alert function correctly if there is an alert in the queue", function () {
var settings = {
"location": 2, "font_face": "Tahoma", "font_size": 40,
"font_color": "rgb(255, 255, 255)", "background_color": "rgb(102, 0, 0)"
};
var alertObject = {text: "Queued Alert", settings: settings};
Display._alerts.push(JSON.stringify(alertObject));
spyOn(Display,"alert");
Display.getNextAlert();
expect(Display.alert).toHaveBeenCalled();
expect(Display.alert).toHaveBeenCalledWith("Queued Alert",alertObject.settings);
});
});
describe("Display.addTextSlide", function () {
beforeEach(function() {
@ -386,6 +426,7 @@ describe("Display.setTextSlides", function () {
};
spyOn(Display, "reinit");
spyOn(Reveal, "slide");
Display.setTextSlides(slides);
Display.setTheme(theme);