Javascript for Flash Messages

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);
  }
};

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");
  });
});

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>