motivation

open source

ship better software

scripts ⇒ applications

avoid frustration

state of js testing

no testing ☹

jquery plugins

browser automation

slow

time sensitive

cross page

♥ language

ci

javascript

fast

easy stubbing

limited ci

single page

state/timing

problems

unit vs uat

var Notifier = function( alertSelector ) {
  this.elem = $( alertSelector );
};

Notifier.prototype.notify = function() {
  if( this.isError(this.elem.text()) ){
    this.elem.addClass( "error" );
  }

  this.elem.show();
};

Notifier.prototype.isError = function( text ) {
  return text.search(/Error/) = 0;
};

var Notifier = function( alertSelector ) {
  this.elem = $( alertSelector );
};

Notifier.prototype.notify = function() {
  if( this.isError(this.elem.text()) ){
    this.elem.addClass( "error" );
  }

  this.elem.show();
};

Notifier.prototype.isError = function( text ) {
  return text.search(/Error/) >= 0;
};

test( "notify shows alert element", function() {
  var notifier = new Notifier( "#alert" );

  // isolate the show in the notify method
  Notifier.prototype.isError = function() {
    return false;
  };

  notifier.notify();
  ok( notifier.elem.is(":visible") );
});

test( "notify shows alert element", function() {
  var notifier = new Notifier( "#alert" );

  // isolate the show in the notify method
  Notifier.prototype.isError = function() {
    return false;
  };

  notifier.notify();
  ok( notifier.elem.is(":visible") );
});

test( "empty input results in alert", function() {
  $( "#username" ).val("");

  $( "#submit" ).click();

  ok( $("#alert").is(":visible") );
});

timing / events

setTimeout is bad

#jackie {
    opacity: 0;
}

#jackie.opacity-transition {
    -moz-transition: opacity 2s linear;
    opacity: 1;
}

$( "#show-it" ).click(function(e) {
  $( "#jackie" ).addClass( "opacity-transition" );
});

test( "image becomes opaque on click", function() {
  setTimeout(function(){
    same( $("#jackie").css("opacity"), "1" );
    start();
  }, 2100);

  $( "#show-it" ).click();

  stop();
});

#jackie.opacity-transition {
  -moz-transition: opacity 4s linear;
  opacity: 1;
}

refactor to events

setTimeout(function(){
  same( $("#jackie").css("opacity"), "1" );
  start();
}, 2100);

$( "#jackie" ).one( "transitionend", function(){
  same( $("#jackie").css("opacity"), "1" );
  start();
});

jasmine

JSTestDriver

fixtures ☹

one solution

server-side

class TestJS < Test::Unit::TestCase
  include Capybara

  def setup
    Factory(:foo, :bar => "baz", :bak => "bing")
  end

  def test_qunit_page
    visit(foos_path)
    wait_for_tests

    fail_desc = unless all_failing.empty?
      all_failing.find(".test-name").map(&:text).join(", ")
    end

    assert(all_failing.empty?, fail_desc)
  end
end

  def setup
    Factory(:foo, :bar => "baz", :bak => "bing")
  end

  def test_qunit_page
    visit(foos_path)
    wait_for_tests

    fail_desc = unless all_failing.empty?
      all_failing.find(".test-name").map(&:text).join(", ")
    end

    assert(all_failing.empty?, fail_desc)
  end

  def test_qunit_page
    visit(foos_path)
    wait_for_tests

    fail_desc = unless all_failing.empty?
      all_failing.find(".test-name").map(&:text).join(", ")
    end

    assert(all_failing.empty?, fail_desc)
  end

  def test_qunit_page
    visit(foos_path)
    wait_for_tests

    fail_desc = unless all_failing.empty?
      all_failing.find(".test-name").map(&:text).join(", ")
    end

    assert(all_failing.empty?, fail_desc)
  end

  def test_qunit_page
    visit(foos_path)
    wait_for_tests

    fail_desc = unless all_failing.empty?
      all_failing.find(".test-name").map(&:text).join(", ")
    end

    assert(all_failing.empty?, fail_desc)
  end

  def test_qunit_page
    visit(foos_path)
    wait_for_tests

    fail_desc = unless all_failing.empty?
      all_failing.find(".test-name").map(&:text).join(", ")
    end

    assert(all_failing.empty?, fail_desc)
  end

  def test_qunit_page
    visit(foos_path)
    wait_for_tests

    fail_desc = unless all_failing.empty?
      all_failing.find(".test-name").map(&:text).join(", ")
    end

    assert(all_failing.empty?, fail_desc)
  end

  def wait_for_tests(attempts=100)
    attempts.times do
      break if find("#qunit-banner")[:class].include?("pass")
      break unless all_failing.empty?

      sleep 1
    end
  end

  def all_failing
    all("#qunit-tests .fail")
  end

# better as a middleware
def inject_tests
  if Rails.env.test?
    javascript_include_tag "qunit_tests"
  end
end

client-side

$.onlyForPathname( "/foos", function() {
  module( "truthsaying" );

  test( "truthyness", function() {
    assert( true );
  });
});

browser state

DOM only

jasmine-jquery

QUnit fixtures

setup / teardown

iframes (?)