Find the jQuery Bugs Unit Tests

Unit Tests to Reenforce Concepts Taught in Session author(s): Elijah Manor

HTML

<link rel="stylesheet" href="http://code.jquery.com/qunit/qunit-git.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://code.jquery.com/qunit/qunit-git.js"></script>
<div id="qunit"></div>
<div id="qunit-fixture"></div>

JavaScript

/*global QUnit:false, module:false, test:false, expect:false, equal:false, ok:false, jQuery:false, start:false, stop:false, window:false, _:false */

/* 
This Unit Test Suite is based on a talk & blog series that I put together recently. These tests are to help reenforce the topics that I covered. 

Name:        Elijah Manor
Twitter:     @elijahmanor
Video:       http://j.mp/find-jquery-bugs-post
Slides:      http://j.mp/find-jquery-bugs-slides
Blog Series: http://j.mp/find-jquery-bugs-series
*/

(function($) {
  "use strict";

  QUnit.config.reorder = false;
  
  module( "Exterminating Common jQuery Bugs", {
    setup: function() {},
    teardown: function() {}
  });

  //http://www.elijahmanor.com/2011/08/find-jquery-bug-1-chicken-or-egg.html
  test( "Chicken or the Egg", function() {
    expect( 2 );
    
    //Arrange
    $( "<span>Test</span>" ).appendTo( "#qunit-fixture" );
    
    //Act
    //1. Find span element
    //2. Fade out span for 1 second 
    //3. When fade is completed then remove
    //hint: http://api.jquery.com/fadeOut
    $( "span" ).fadeOut( 1000 ).remove();
    
    //Assert
    stop();
    window.setTimeout( function() {
      ok( $( "span" ).length, 
        "Span still exists after 500 milliseconds" );  
    }, 500 );            
    window.setTimeout( function() {
      ok( !$( "span" ).length,
         "Span has been removed after 1 second" );  
      start();            
    }, 2000 );
  });

  //http://www.elijahmanor.com/2012/01/find-jquery-bug-2-point-of-no-return.html
  test( "Point of No Return", function() {
    expect( 4 );
    
    //Arrange
    var listOfNames = [ 
        "Elijah", "Andrea", "Abby", "Enoch", "Ezra" 
      ],
      filteredList = [];
    
    //Act
    //1. Loop over the listOfNames array
    //2. Add each name to the filteredList array
    //3. Exit the loop when you reach Abby's name   
    //hint: http://api.jquery.com/jquery.each
    $.each( listOfNames, function( index, name ) {
     ...