Find jQuery Bugs Unit Tests - Broken

fiddle.html

<div id="qunit"></div>
<div id="qunit-fixture"></div>  

fiddle.js

/*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 ) {
      filteredList.push( name );
      if ( name === "Abby" ) {
        return;
      }
    });
    
    //Assert
    equal( filteredList.length, 3, 
      "Filtered list contains 3 items" );
    equal( filteredList[0], "Elijah", 
      "1st entry is correct" );
    equal( filteredList[1], "Andrea", 
      "2nd entry is correct" );
    equal( filteredList[2], "Abby", 
      "3rd entry is correct" );
  });
    
  //http://www.elijahmanor.com/2012/01/find-jquery-bug-3-give-me-truth.html
  test( "Give Me Truth", function() {
    expect( 2 );
    
    //Arrange
    var exists = false,
        hasClass = false, $element;
    
    $( "<div />", { 
      id: "realId", 
      "class": "super-cool" 
    }).appendTo( "#qunit-fixture" );
    
    //Act
    //1. Exists should check for existance of #fakeID which 
    //   should be falsey
    //2. hasClass should check for .super-uncool class on the
    //   #fakeId element which should be falsey
    //hint: http://api.jquery.com/jquery
    //      http://api.jquery.com/has
    exists = $( "#fakeId" );
    hasClass = exists.has( ".super-uncool" );

    //Assert
    equal( !!exists, false, 
      "The fakeId element does not exist" );
    equal( !!hasClass, false, 
      "The element does not have the super-uncool class" );                
  });

  //http://www.elijahmanor.com/2012/02/find-jquery-bug-4-animations-gone-wild.html
  test( "Animations Gone Wild", function() {
    expect( 1 );
    
    //Arrange
    var $test = $( "<div />", { 
      id: "test"
    }).appendTo( "#qunit-fixture" ), i;
    
    //Act
    //1. Quickly add animation methods to the queue 
    //2. Clear animation queue before adding another
    //hint: http:/api.jquery.com/stop
    for ( i = 0; i < 10; i++ ) { 
      $test.fadeToggle( 500 );
    }
    
    //Assert
    stop();
    window.setTimeout( function() {
      equal( $test.queue().length, 0, 
        "Animation queue is empty" ); 
      start();
    }, 1000 );
  });
  
  //http://www.elijahmanor.com/2012/03/find-jquery-bug-5-defective-data.html
  test( "Defective $().data()", function() {
    expect( 1 );
    
    //Arrange
    var $test = 
        $( "<div data-phone-number='555-555-5555' />", { 
          id: "test"
        }).appendTo( "#qunit-fixture" ), phoneNumber;
    
    //Act
    //1. Read the phoneNumber via .data
    //2. Update the number
    //3. Reread the phoneNumber via .data
    //hint: http://api.jquery.com/data
    phoneNumber = $test.data( "phoneNumber" );
    $test.attr( "data-phone-number", "615-123-4567" );
    phoneNumber = $test.data( "phoneNumber" );
    
    //Assert
    equal( phoneNumber, "615-123-4567", 
      "The Phone Number has been changed" );
  });
  
  //http://www.elijahmanor.com/2012/03/find-jquery-bug-6-traversing-trouble.html
  test( "Traversing Trouble", function() {
    expect( 1 );
    
    //Arrange
    var i, $divs;
    
    for ( i = 0; i < 10; i++ ) {
      $( "<div />", {
        "class": i % 2 === 0 ? "even" : "odd"                
      }).appendTo( "#qunit-fixture" );
    }
    $divs = $( "#qunit-fixture" ).find( "div" );
    
    //Act
    //1. Find the divs that have the odd class
    //hint: http://api.jquery.com/find
    //      http://api.jquery.com/filter
    $divs = $divs.find( ".odd" );        
    
    //Assert
    equal( $divs.length, 5, 
      "Find only the element's with the odd class" );
  });
  
  //http://www.elijahmanor.com/2012/03/find-jquery-bug-7-using-method-as-event.html
  test( "Using a Method as an Event Handler", function() {
    expect( 1 );
    
    //Arrange
    var $button = $( "<button />", { 
        id: "test"
      }).appendTo( "#qunit-fixture" ),
      userNameAccessed = false,            
      twitter = {
        userName: "nashdotnet",
        tweet: function() {
          userNameAccessed = this.userName === "nashdotnet";
        }            
      };
    
    //Act
    //1. Add twitter.tweet as a button click event handler
    //2. Trigger the click event to invoke the method
    //hint: http://api.jquery.com/jquery.proxy
    $button.on( "click", twitter.tweet );
    $button.trigger( "click" );
    
    //Assert
    ok( userNameAccessed, 
      "The userName was accessed via the object's method" );        
  });
  
  //http://www.elijahmanor.com/2012/03/find-jquery-bug-8-suspicious-selectors.html
  test( "Suspicious Selector", function() {
    expect( 1 );
    
    //Arrange
    var $element;
    
    $( "<div />", { 
      id: "crazy.looking:id" 
    }).appendTo( "#qunit-fixture" );       
    
    //Act
    //1. Grab hold of the div with an ID selector
    //hint: http://api.jquery.com/category/selectors
    $element = $( "#crazy.looking:id" );
    
    //Assert
    equal( $element.length, 1, 
      "Select the crazy element by id" );        
  });
  
  test( "Erratic Events", function() {
    expect( 1 );
    
    //Arrange
    var list = 
        $( "<ul><li><a href='http://google.com'></a></li></ul>" ).appendTo( "#qunit-fixture" ),
        listHasBeenClicked = false;        
    
    list.on( "click", function() {
      listHasBeenClicked = true;            
    });
    
    //Act
    //1. Add click event handlers to all the anchors
    //2. Prevent browser redirect when clicking the anchor
    //hint: http://api.jquery.com/event.preventDefault
    list.find( "a" ).on( "click", function() {
      return false;            
    }).trigger( "click" );        
    
    //Assert
    ok( listHasBeenClicked, 
      "Click event has propagated to the list element" );        
  });
  
  test( "Switching to the .on() Method", function() {
    expect( 1 );
    
    //Arrange
    var list = $( "<ul><li>One</li></ul>" )
          .appendTo( "#qunit-fixture" ),
        itemHasBeenClicked = false;        
    
    //Act
    //1. Add event handler that will respond to dynamic 
    //   clicks on list items
    //2. Add a dynamic list item to the list
    //3. Trigger a click on the new item
    //hint: http://api.jquery.com/on
    //      http://www.elijahmanor.com/2012/02/differences-between-jquery-bind-vs-live.html
    list.find( "li" ).on( "click", function() {
      itemHasBeenClicked = true;
    });
    $( "<li />", { text: "Two" } ).appendTo( list );
    list.find( "li:last" ).trigger( "click" );
    
    //Assert
    ok( itemHasBeenClicked, "Dynamic item was clicked" );        
  });

})(jQuery);

fiddle.manifest

name: Find the jQuery Bugs Unit Tests
description: Unit Tests to Reenforce Concepts Taught in Session
authors:
  - Elijah Manor
resources:
  - http://code.jquery.com/qunit/qunit-git.css
  - http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js
  - http://code.jquery.com/qunit/qunit-git.js
normalize_css: no