Skip to content

Instantly share code, notes, and snippets.

@athahar

athahar/public-javascripts-base-flash.js

Forked from arches/public-javascripts-base-flash.js
Created September 30, 2013 08:09
Show Gist options
  • Save athahar/6760725 to your computer and use it in GitHub Desktop.
Save athahar/6760725 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
public-javascripts-base-flash.js
var Arch; if (!Arch) Arch = {}; // set up custom namespace 'arch'
Arch.Flash = {
showError: function(message) {
if (message == "") return;
$('#flash-msg .user-msg-detail').removeClass('notice');
$('#flash-msg .user-msg-detail').addClass('error');
$('#flash-msg .user-msg-detail span').html(message);
$('#flash-msg').show();
},
showNotice: function(message) {
if (message == "") return;
if ($('#flash-msg .user-msg-detail').hasClass('error')) return;
$('#flash-msg .user-msg-detail').addClass('notice');
$('#flash-msg .user-msg-detail span').html(message);
$('#flash-msg').show();
this._fadeOut();
},
_fadeOut: function() {
setTimeout("$('#flash-msg').fadeOut('slow')", 4000);
}
};
Raw
spec-javascripts-base-FlashSpec.js
// 'Arch' is my custom namespace
describe("Showing an error", function() {
var errorText = "Something incredibly untoward has happened.";
it("updates the element classes", function() {
loadFixtures("flash.html");
Arch.Flash.showError(errorText);
expect($("#flash-msg .user-msg-detail")).toHaveClass("error");
expect($("#flash-msg .user-msg-detail")).not.toHaveClass("notice");
});
it("sets the text of the flash element", function() {
loadFixtures("flash.html");
Arch.Flash.showError(errorText);
expect($("#flash-msg .user-msg-detail span")).toHaveText("Something incredibly untoward has happened.");
});
it("sets the text of the flash element", function() {
loadFixtures("flash.html");
Arch.Flash.showError(errorText);
expect($("#flash-msg .user-msg-detail span")).toHaveText("Something incredibly untoward has happened.");
});
it("doesn't fade the message automatically", function(){
spyOn(Arch.Flash, "_fadeOut");
loadFixtures("flash.html");
Arch.Flash.showError(errorText);
expect(Arch.Flash._fadeOut).not.toHaveBeenCalled();
});
it("does nothing if no message is passed", function() {
loadFixtures("flash.html");
Arch.Flash.showError("");
expect($("#flash-msg .user-msg-detail")).not.toHaveClass("error");
expect($("#flash-msg .user-msg-detail")).not.toHaveClass("notice");
});
});
describe("Showing a notice", function(){
var noticeText = "Something nice has happened!";
it("updates the element classes", function() {
loadFixtures("flash.html");
Arch.Flash.showNotice(noticeText);
expect($("#flash-msg .user-msg-detail")).toHaveClass("notice");
expect($("#flash-msg .user-msg-detail")).not.toHaveClass("error");
});
it("sets the text of the flash element", function() {
loadFixtures("flash.html");
Arch.Flash.showNotice(noticeText);
expect($("#flash-msg .user-msg-detail span")).toHaveText("Something nice has happened!");
});
it("fades the message automatically", function(){
spyOn(Arch.Flash, "_fadeOut");
loadFixtures("flash.html");
Arch.Flash.showNotice(noticeText);
expect(Arch.Flash._fadeOut).toHaveBeenCalled();
});
it("does nothing if no message is passed", function() {
spyOn(Arch.Flash, "_fadeOut");
loadFixtures("flash.html");
Arch.Flash.showNotice("");
expect($("#flash-msg .user-msg-detail")).not.toHaveClass("error");
expect($("#flash-msg .user-msg-detail")).not.toHaveClass("notice");
expect(Arch.Flash._fadeOut).not.toHaveBeenCalled();
});
it("does nothing if there is already an error", function() {
spyOn(Arch.Flash, "_fadeOut");
loadFixtures("flash.html");
Arch.Flash.showError("oh noes");
Arch.Flash.showNotice("oh yeah");
expect($("#flash-msg .user-msg-detail")).toHaveClass("error");
expect($("#flash-msg .user-msg-detail")).not.toHaveClass("notice");
expect(Arch.Flash._fadeOut).not.toHaveBeenCalled();
expect($("#flash-msg .user-msg-detail span")).toHaveText("oh noes");
});
});
Raw
spec-javascripts-fixtures-base-flash.html
<div class="user-msg-container" id="flash-msg" style="display:none;">
<div class="user-msg">
<div class="user-msg-detail">
<span></span>
<a href="#" onclick="$('#flash-msg').fadeOut('fast'); return false;" class="close">x</a>
</div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment