Testing a MooTools Class

A simple class with some simple tests. Go along with http://

HTML

<p>Open the console to view failed / passed tests.</p>
<div id=fixture>
    <span id=child>child</span>
    <span id=child2>child 2</span>
</div>
<br>
<p><a href="http://ryanflorence.com/mootools-class/" target="_top">Part of this article</a></p>

CSS

p { margin: 1em 0; }

span {
    background: #eee;
    padding: 4px 8px;
    border-bottom: solid 4px #fff;
    cursor: pointer;
}
.current {
    border-color: #e00
}

JavaScript

// class
var ClassNameSwapper = new Class({
  
  current: null,

  initialize: function(element){
    this.element = document.id(element);
    this.attach();
  },

  attach: function(){
    var self = this;
    this.element.addEvent('click', function(event){
      self.setCurrentTo(event.target);
    });
  },

  setCurrentTo: function(target){
    if (target == this.current) return;
    if (this.current) this.current.removeClass('current');
    this.current = $(target).addClass('current');
  }

});
    nav = new ClassNameSwapper(fixture);