Fixed alerts and removed unnecessary debug statements and added tests

This commit is contained in:
gregzovic@bazaar.launchpad.net 2019-02-06 23:33:16 +03:00
parent 178df476bd
commit b83df5cd29
3 changed files with 133 additions and 45 deletions

View File

@ -72,7 +72,7 @@
right: 0px; right: 0px;
z-index: 10; z-index: 10;
width: 100%; width: 100%;
height: 25%; height: 0%;
vertical-align: middle; vertical-align: middle;
color: #ffffff; color: #ffffff;
background-color: #660000; background-color: #660000;
@ -82,7 +82,7 @@
#alert { #alert {
position: relative; position: relative;
top: 50% top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
margin-top: 0%; margin-top: 0%;
margin-right: 0%; margin-right: 0%;
@ -97,8 +97,6 @@
visibility: hidden; visibility: hidden;
} }
</style> </style>
<script type="text/javascript" src="qrc:///qtwebchannel/qwebchannel.js"></script> <script type="text/javascript" src="qrc:///qtwebchannel/qwebchannel.js"></script>
<script type="text/javascript" src="reveal.js"></script> <script type="text/javascript" src="reveal.js"></script>

View File

@ -416,17 +416,14 @@ var Display = {
alertText.innerHTML = text; alertText.innerHTML = text;
/* Bring in the transition background */ /* Bring in the transition background */
Display._transitionState = Display.alertEntranceTransition(location); Display._transitionState = Display.doEntranceTransition(location);
alertBackground.addEventListener('transitionend', function(e){ alertBackground.addEventListener('transitionend', function(e){
e.stopPropagation(); e.stopPropagation();
console.debug("Transition end event captured");
if(Display._transitionState == TransitionState.EntranceTransition){ if(Display._transitionState == TransitionState.EntranceTransition){
console.debug("Entrance Transition Condition");
alertText.style.visibility = "visible"; alertText.style.visibility = "visible";
alertText.classList.add("horizontal-scroll-animation"); alertText.classList.add("horizontal-scroll-animation");
}else if(Display._transitionState == TransitionState.ExitTransition){ }else if(Display._transitionState == TransitionState.ExitTransition){
console.debug("Exit Transition Condition");
Display._transitionState = TransitionState.NoTransition; Display._transitionState = TransitionState.NoTransition;
alertBackground.style.visibility = "hidden"; alertBackground.style.visibility = "hidden";
alertBackground.classList.remove("middle-exit-animation"); alertBackground.classList.remove("middle-exit-animation");
@ -437,21 +434,18 @@ var Display = {
console.debug("Noticed an animation has ended. The animation state is: ", Display._animationState); console.debug("Noticed an animation has ended. The animation state is: ", Display._animationState);
if(Display._animationState == AnimationState.FadeInAnimation){ if(Display._animationState == AnimationState.FadeInAnimation){
console.debug("Entrance Animation Condition");
alertText.style.visibility = "visible"; alertText.style.visibility = "visible";
alertText.classList.add("horizontal-scroll-animation"); alertText.classList.add("horizontal-scroll-animation");
alertText.classList.remove("middle-entrance-animation"); alertText.classList.remove("middle-entrance-animation");
Display._animationState = AnimationState.ScrollingAnimation; Display._animationState = AnimationState.ScrollingAnimation;
}else if(Display._animationState == AnimationState.FadeOutAnimation){ }else if(Display._animationState == AnimationState.FadeOutAnimation){
console.debug("Exit Animation Condition");
alertBackground.style.visibility = "hidden"; alertBackground.style.visibility = "hidden";
alertBackground.classList.remove("middle-exit-animation"); alertBackground.classList.remove("middle-exit-animation");
Display._animationState = AnimationState.NoAnimation; Display._animationState = AnimationState.NoAnimation;
}else if(alertText.classList.contains("horizontal-scroll-animation")){ }else if(alertText.classList.contains("horizontal-scroll-animation")){
console.debug("Scrolling Animation Ended");
alertText.classList.remove("horizontal-scroll-animation"); alertText.classList.remove("horizontal-scroll-animation");
Display._animationState = AnimationState.NoAnimation; Display._animationState = AnimationState.NoAnimation;
Display._transitionState = Display.alertExitTransition(location); Display._transitionState = Display.doExitTransition(location);
} }
}); });
@ -460,35 +454,31 @@ var Display = {
* The implementation should show an alert. * The implementation should show an alert.
* It should be able to handle receiving a new alert before a previous one is "finished", basically queueing it. * It should be able to handle receiving a new alert before a previous one is "finished", basically queueing it.
*/ */
//return; return location;
}, },
/** /**
* Start background entrance transition for display of alert * Start background entrance transition for display of alert
* @param {string} location - String showing the location of the alert on screen * @param {string} location - String showing the location of the alert on screen
*/ */
alertEntranceTransition: function (location){ doEntranceTransition: function (location){
console.debug("Alert Entrance Transition Method. The value of animation state is: " + Display._animationState);
var alertBackground = $("#alert-background")[0]; var alertBackground = $("#alert-background")[0];
switch(location){ switch(location){
case "0": case "0":
console.debug("Top Location Entrance Transition");
alertBackground.style.top = '0'; alertBackground.style.top = '0';
alertBackground.style.transition = "2s linear"; alertBackground.style.transition = "2s linear";
alertBackground.style.height = "25%"; alertBackground.style.height = "25%";
break; break;
case "1": case "1":
console.debug("Middle Location Entrance Animation");
console.debug("The value of animation state is: " + Display._animationState);
alertBackground.style.top = ((window.innerHeight - alertBackground.clientHeight) / 2) alertBackground.style.top = ((window.innerHeight - alertBackground.clientHeight) / 2)
+ 'px'; + 'px';
alertBackground.style.height = "25%";
alertBackground.classList.add("middle-entrance-animation"); alertBackground.classList.add("middle-entrance-animation");
Display._animationState = AnimationState.FadeInAnimation; Display._animationState = AnimationState.FadeInAnimation;
break; break;
case "2": case "2":
default: default:
console.debug("Bottom Location Entrance Transition");
alertBackground.style.bottom = '0'; alertBackground.style.bottom = '0';
alertBackground.style.transition= "2s linear"; alertBackground.style.transition= "2s linear";
alertBackground.style.height = "25%"; alertBackground.style.height = "25%";
@ -503,25 +493,21 @@ var Display = {
* Start background exit transition once alert has been displayed * Start background exit transition once alert has been displayed
* @param {string} location - Integer showing the location of the alert on screen * @param {string} location - Integer showing the location of the alert on screen
*/ */
alertExitTransition: function(location){ doExitTransition: function(location){
console.debug("Alert Exit Transition");
var alertBackground = $("#alert-background")[0]; var alertBackground = $("#alert-background")[0];
if(location == "0" || location == "2"){ if(location == "0" || location == "2"){
console.debug("Exit Transition for top or bottom");
alertBackground.style.height = "0%"; alertBackground.style.height = "0%";
alertBackground.style.transition = '2s linear'; alertBackground.style.transition = '2s linear';
}else if(location == "1"){ }else if(location == "1"){
// alertBackground.style.opacity = 0;
console.debug("Fade out Animation");
alertBackground.classList.add("middle-exit-animation"); alertBackground.classList.add("middle-exit-animation");
alertBackground.style.height = "0%";
Display._animationState = AnimationState.FadeOutAnimation; Display._animationState = AnimationState.FadeOutAnimation;
} }
return TransitionState.ExitTransition; return TransitionState.ExitTransition;
}, },
/** /**
* Add a slides. If the slide exists but the HTML is different, update the slide. * Add a slides. 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"

View File

@ -151,40 +151,144 @@ describe("The Display object", function () {
expect(Display.alert).toBeDefined(); expect(Display.alert).toBeDefined();
}); });
it("should have a correctly functioning alert() method", function (){
spyOn(Display,"alert");
Display.alert("OPEN-LP-3.0 Alert Test", "2");
expect(Display.alert).toHaveBeenCalledWith("OPEN-LP-3.0 Alert Test", "2");
});
}); });
describe("Display.alert",function(){ describe("Display.alert",function(){
var alertBackground,alert;
beforeEach(function(){ beforeEach(function(){
var alertBackground = document.getElementById("alert-background"); document.body.innerHTML = "";
var alertText = document.getElementById("alert"); alertBackground = document.createElement("div");
alertBackground.setAttribute("id", "alert-background");
document.body.appendChild(alertBackground);
alert = document.createElement("p");
alert.setAttribute("id","alert");
alertBackground.appendChild(alert);
}); });
it("should return if called without any text", function(){ it("should return null if called without any text", function(){
spyOn(Display, "alert"); expect(Display.alert("","2")).toBeNull();
Display.alert("", "2");
expect(Display.alert).toHaveBeenCalled();
}); });
it("should call alertEntranceTransition", function(){ it("should set correct alert text", function(){
spyOn(Display,"alertEntranceTransition"); Display.alert("OPEN-LP-3.0 Alert Test", "2");
Display.alertEntranceTransition("2"); expect(alert.innerHTML).toEqual("OPEN-LP-3.0 Alert Test");
expect(Display.alertEntranceTransition).toHaveBeenCalledWith("2");
}); });
it("should call alertExitTransition", function(){ it("should set the correct alert position", function(){
spyOn(Display,"alertExitTransition"); expect(Display.alert("Alert Location Test","2")).toEqual("2");
Display.alertExitTransition("2"); });
expect(Display.alertExitTransition).toHaveBeenCalledWith("2");
});
describe("The doEntranceTransition", function(){
var alertBackground;
beforeEach(function(){
document.body.innerHTML = "";
alertBackground = document.createElement("div");
alertBackground.setAttribute("id", "alert-background");
document.body.appendChild(alertBackground);
alertBackground.style.top = '0px';
alertBackground.style.height = "0%";
});
it("should move the alert background to the top of the page", function(){
Display.doEntranceTransition("0");
expect(alertBackground.style.top).toEqual('0px');
});
it("should move the alert background to the middle of the page", function(){
Display.doEntranceTransition("1");
var middlePosition = ((window.innerHeight - alertBackground.clientHeight) / 2) + 'px';
expect(alertBackground.style.top).toEqual(middlePosition);
});
it("should move the alert background to the bottom of the page", function(){
Display.doEntranceTransition("2");
expect(alertBackground.style.bottom).toEqual('0px');
});
it("should have a transition set when position is set to top", function(){
Display.doEntranceTransition("0");
expect(alertBackground.style.transition).toEqual("2s linear");
});
it("should have a transition set when position is set to bottom", function(){
Display.doEntranceTransition("2");
expect(alertBackground.style.transition).toEqual("2s linear");
});
it("should have an animation class when position is set to middle", function(){
Display.doEntranceTransition("1");
expect(alertBackground.classList.contains("middle-entrance-animation"));
});
it("should have the height set to 25% when the position is top", function(){
Display.doEntranceTransition("0");
expect(alertBackground.style.height).toEqual("25%");
});
it("should have the height set to 25% when the position is middle", function(){
Display.doEntranceTransition("1");
expect(alertBackground.style.height).toEqual("25%");
});
it("should have the height set to 25% when the position is bottom", function(){
Display.doEntranceTransition("2");
expect(alertBackground.style.height).toEqual("25%");
});
it("should make the alert background visible", function(){
Display.doEntranceTransition();
expect(alertBackground.style.visibility).toEqual("visible");
}); });
}); });
describe("The startExitTransition", function(){
var alertBackground;
beforeEach(function(){
document.body.innerHTML = "";
alertBackground = document.createElement("div");
alertBackground.setAttribute("id", "alert-background");
document.body.appendChild(alertBackground);
});
it("should make the height of the alert zero when position is top", function(){
Display.doExitTransition("0");
expect(alertBackground.style.height).toEqual('0%');
});
it("should make the height of the alert zero when position is bottom", function(){
Display.doExitTransition("2");
expect(alertBackground.style.height).toEqual('0%');
});
it("should make the height of the alert zero when position is middle", function(){
Display.doExitTransition("2");
expect(alertBackground.style.height).toEqual('0%');
});
it("should have a transition set when position is set to top", function(){
Display.doExitTransition("0");
expect(alertBackground.style.transition).toEqual("2s linear");
});
it("should have a transition set when position is set to bottom", function(){
Display.doExitTransition("2");
expect(alertBackground.style.transition).toEqual("2s linear");
});
it("should have an animation class when position is set to middle", function(){
Display.doExitTransition("1");
expect(alertBackground.classList.contains("middle-exit-animation"));
});
});
describe("Display.addTextSlide", function () { describe("Display.addTextSlide", function () {