SlideShare a Scribd company logo
1 of 55
Download to read offline
JavaScript Testing
                 John Resig
http://ejohn.org/ - http://twitter.com/jeresig
Why Test JavaScript?
✦   Cross-browser issues.
✦   The possibility for causing an unforeseen
    problem is simply too great.
What should I use?
Looong Tail

250.0


187.5


125.0


 62.5


   0


               Other
People don’t test. :-(

900


675


450


225


  0


                         None
Basic Components
✦   Writing and understanding a JavaScript
    test suite is easy.
✦   Test Suite
    ✦ Tests
      ✦ Assertions
    ✦ Async Tests

✦   Test Runner
Assertions
   <html> 
   <head> 
     <title>Test Suite</title> 
     <script> 
     function assert( value, desc ) { 
       var li = document.createElement("li"); 
       li.className = value ? "pass" : "fail"; 
       li.appendChild( document.createTextNode( desc ) ); 
       document.getElementById("results").appendChild( li ); 
     } 
                                    
     window.onload = function(){ 
       assert( true, "The test suite is running." ); 
     }; 
     </script> 
     <style> 
       #results li.pass { color: green; } 
       #results li.fail { color: red; } 
     </style> 
   </head> 
   <body> 
     <ul id="results"></ul> 
   </body> 
   </html> 
Tests
      test("A test.", function(){ 
        assert( true, "First assertion completed" ); 
        assert( true, "Second assertion completed" ); 
        assert( true, "Third assertion completed" ); 
      }); 
                                  
      test("Another test.", function(){ 
        assert( true, "First test completed" ); 
        assert( false, "Second test failed" ); 
        assert( true, "Third assertion completed" ); 
      }); 
Tests
    var results; 
                                  
    function assert( value, desc ) { 
      var li = document.createElement("li"); 
      li.className = value ? "pass" : "fail"; 
      li.appendChild( document.createTextNode( desc ) ); 
      results.appendChild( li ); 
      if ( !value ) { 
        li.parentNode.parentNode.className = "fail"; 
      } 
      return li; 
    } 
                                  
    function test(name, fn){ 
      results = document.getElementById("results"); 
      results = assert( true, name ).appendChild( 
        document.createElement("ul") ); 
      fn(); 
    } 
Async Tests
    test(function(){ 
      pause(); 
      setTimeout(function(){ 
        assert( true, "First test completed" ); 
        resume(); 
      }, 100); 
    }); 
                            
    test(function(){ 
      pause(); 
      setTimeout(function(){ 
        assert( true, "Second test completed" ); 
        resume(); 
      }, 200); 
    }); 
Async Tests
      (function(){ 
        var queue = [], paused = false; 
                             
        this.test = function(fn){ 
          queue.push( fn ); 
          runTest(); 
        }; 
                             
        this.pause = function(){ 
          paused = true; 
        }; 
                             
        this.resume = function(){ 
          paused = false; 
          setTimeout(runTest, 1); 
        }; 
                             
        function runTest(){ 
          if ( !paused && queue.length ) { 
            queue.shift()(); 
            if ( !paused ) { 
              resume(); 
            } 
          } 
        } 
      })(); 
TestRunner
✦   Responsible for loading an executing tests.
✦   Sometimes individual test groups can run
    standalone (Dojo) sometimes they require
    the test runner (QUnit, JSUnit).
Popular Test Frameworks

250.0


187.5


125.0


 62.5


   0
        QUnit   JSUnit   Selenium YUITest FireUnit Screw.Unit JSSpec
Unit Testing
✦   Break code into logical chucks for testing.
✦   Focus on one method at a time.
✦   Popular Frameworks:
    ✦ QUnit
    ✦ JSUnit
    ✦ YUITest
QUnit
✦   Unit Testing framework built for jQuery.
✦   Additional features:
    ✦ Supports asynchronous testing.
    ✦ Can break code into modules.
    ✦ Supports test timeouts.

✦   http://docs.jquery.com/QUnit
QUnit Style
   test("a basic test example", function() { 
     ok( true, "this test is fine" ); 
     var value = "hello"; 
     equals( "hello", value, "We expect value to be hello" ); 
   }); 
                                  
   module("Module A"); 
                                  
   test("first test within module", function() { 
     ok( true, "all pass" ); 
   }); 
                                  
   test("second test within module", function() { 
     ok( true, "all pass" ); 
   }); 
                                  
   module("Module B"); 
                                  
   test("some other test", function() { 
     expect(2); 
     equals( true, false, "failing test" ); 
     equals( true, true, "passing test" ); 
   }); 
QUnit
JSUnit
✦   One of the oldest JavaScript testing
    frameworks.
✦   A port of JUnit to JavaScript, circa 2001.
✦   Code feels very 2001 (frames!)
✦   http://www.jsunit.net/
JSUnit
        function coreSuite() { 
            var result = new top.jsUnitTestSuite(); 
            result.addTestPage("tests/jsUnitAssertionTests.html"); 
            result.addTestPage("tests/jsUnitSetUpTearDownTests.html"); 
            result.addTestPage("tests/jsUnitRestoredHTMLDivTests.html"); 
            result.addTestPage("tests/jsUnitFrameworkUtilityTests.html"); 
            result.addTestPage("tests/jsUnitOnLoadTests.html"); 
            result.addTestPage("tests/jsUnitUtilityTests.html"); 
            return result; 
        } 
                                               
        function serverSuite() { 
            var result = new top.jsUnitTestSuite(); 
            result.addTestPage("tests/server/jsUnitVersionCheckTests.html"); 
            result.addTestPage("tests/server/jsUnitServerAjaxTests.html"); 
            return result; 
        } 
                                               
        function librariesSuite() { 
            var result = new top.jsUnitTestSuite(); 
            result.addTestPage("tests/jsUnitMockTimeoutTest.html"); 
            return result; 
        } 
                                               
        function suite() { 
            var newsuite = new top.jsUnitTestSuite(); 
            newsuite.addTestSuite(coreSuite()); 
            newsuite.addTestSuite(serverSuite()); 
            newsuite.addTestSuite(librariesSuite()); 
            return newsuite; 
        }
JSUnit
   function testAssertNotUndefined() { 
       assertNotUndefined("1 should not be undefined", 1); 
       assertNotUndefined(1); 
   } 
                                             
   function testAssertNaN() { 
       assertNaN("a string should not be a number", "string"); 
       assertNaN("string"); 
   } 
                                             
   function testAssertNotNaN() { 
       assertNotNaN("1 should not be not a number", 1); 
       assertNotNaN(1); 
   } 
                                             
   function testFail() { 
       var excep = null; 
       try { 
           fail("Failure message"); 
       } catch (e) { 
           excep = e; 
       } 
       assertJsUnitException("fail(string) should throw a JsUnitException", excep); 
   } 
                                             
   function testTooFewArguments() { 
       var excep = null; 
       try { 
           assert(); 
       } catch (e1) { 
           excep = e1; 
       } 
       assertNonJsUnitException("Calling an assertion function with too 
         few arguments should throw an exception", excep); 
   }
JSUnit
YUITest (2 & 3)
✦   Testing framework built and developed by
    Yahoo (released Oct 2008).
✦   Completely overhauled to go with YUI v3.
✦   Features:
    ✦ Supports async tests.
    ✦ Has good event simulation.

✦   v2: http://developer.yahoo.com/yui/
    examples/yuitest/
✦   v3: http://developer.yahoo.com/yui/3/test/
YUITest 2
   YAHOO.example.yuitest.ArrayTestCase = new YAHOO.tool.TestCase({ 
      name : "Array Tests", 
                                         
      setUp : function () { 
          this.data = [0,1,2,3,4] 
      }, 
                                         
      tearDown : function () { 
          delete this.data; 
      }, 
                                           
      testPop : function () { 
          var Assert = YAHOO.util.Assert;          
          var value = this.data.pop(); 
                                             
          Assert.areEqual(4, this.data.length); 
          Assert.areEqual(4, value);             
      },         
                                         
      testPush : function () { 
          var Assert = YAHOO.util.Assert; 
                                             
          this.data.push(5); 
                                             
          Assert.areEqual(6, this.data.length); 
          Assert.areEqual(5, this.data[5]);             
      }
  }); 
YUITest 2
YUITest 3
    Y.example.test.DataTestCase = new Y.Test.Case({ 
        name : "Data Tests", 
                                        
        setUp : function () { 
            this.data = { 
                name: "test", 
                year: 2007, 
                beta: true 
            }; 
        }, 
         
        tearDown : function () { 
            delete this.data; 
        }, 
                                        
        testName : function () { 
            var Assert = Y.Assert; 
                                            
            Assert.isObject(this.data); 
            Assert.isString(this.data.name); 
            Assert.areEqual("test", this.data.name);             
        }, 
                                        
        testYear : function () { 
            var Assert = Y.Assert; 
                                            
            Assert.isObject(this.data); 
            Assert.isNumber(this.data.year); 
            Assert.areEqual(2007, this.data.year);             
        }
    }); 
YUITest 3
Behavior Testing
✦   Similar to unit testing, but broken up by
    task.
✦   Functionally very similar to unit testing,
    uses different terminology
✦   Popular frameworks:
    ✦ Screw.Unit
    ✦ JSSpec
Screw.Unit
✦   Popular BDD framework.
✦   http://github.com/nathansobo/screw-unit/
    tree/master
Screw.Unit
 describe("a nested describe", function() { 
   var invocations = []; 
                                     
   before(function() { 
     invocations.push("before"); 
   }); 
                                     
   describe("a doubly nested describe", function() { 
     before(function() { 
       invocations.push('inner before'); 
     }); 
                                     
     it("runs befores in all ancestors prior to an it", function() { 
       expect(invocations).to(equal, ["before", "inner before"]); 
     }); 
   }); 
 }); 
Screw.Unit
JSSpec
✦   Used by MooTools as their testing
    framework.
✦   http://jania.pe.kr/aw/moin.cgi/JSSpec
JSSpec
   describe('"Should have"s', { 
     'String length': function() { 
       expect("Hello").should_have(4, "characters"); 
     }, 
     'Array length': function() { 
       expect([1,2,3]).should_have(4, "items"); 
     }, 
     'Object's item length': function() { 
       expect({name:'Alan Kang', email:'jania902@gmail.com',
         accounts:['A', 'B']}).should_have(3, "accounts"); 
     }, 
     'No match': function() { 
       expect("This is a string").should_have(5, "players"); 
     }, 
     'Exactly': function() { 
       expect([1,2,3]).should_have_exactly(2, "items"); 
     }, 
     'At least': function() { 
       expect([1,2,3]).should_have_at_least(4, "items"); 
     }, 
     'At most': function() { 
       expect([1,2,3]).should_have_at_most(2, "items"); 
     } 
   }) 
JSSpec
Automation
✦   Functional Testing
✦   Browser launching
✦   Server-Side
Functional Testing
✦   Selenium IDE
✦   There may be others by Selenium is far
    and away the best.
Selenium IDE
✦   Records and automates actions performed
    by a user.
✦   An extension for Firefox that records the
    actions.
✦   Can play them back in all browsers
    (limited by cross-domain issues).
✦   Primarily for testing web applications -
    everyone should use it, though!
✦   http://seleniumhq.org/projects/ide/
Selenium IDE
Browser Launching
✦   Automates the process of opening browser
    windows, running tests, and getting results.
✦   Frequently require a specific framework.
✦   Popular frameworks:
    ✦ WebDriver http://code.google.com/p/
      webdriver/ (Java)
    ✦ Waitr http://wtr.rubyforge.org/ (Ruby)
    ✦ JsTestDriver http://code.google.com/p/
      js-test-driver/ (Java)
    ✦ Selenium RC http://seleniumhq.org/
      projects/remote-control/ (Java)
Browser Launching
Server-Side
✦   Ignore the browser! Simulate it on the
    server-side.
✦   Almost always uses Java + Rhino to
    construct a browser.
✦   Some frameworks:
    ✦ Crosscheck
    ✦ Env.js
    ✦ Blueridge
Server-Side
✦   Crosscheck
    ✦ Pure Java, even simulates browser bugs.
    ✦ http://www.thefrontside.net/crosscheck

✦   Env.js
    ✦ Pure JavaScript, focuses on standards
      support.
    ✦ http://github.com/thatcher/env-js/tree/
      master
✦   Blueridge
    ✦ Env.js + Screw.Unit + Rhino
    ✦ http://github.com/relevance/blue-ridge/
Env.js
  $ java -jar build/js.jar
  Rhino 1.6 release 6 2007 06 28
  js> load('build/runtest/env.js');

  js> window.location = 'test/index.html';
  test/index.html

  js> load('dist/jquery.js');

  // Add pretty printing to jQuery objects:
  js> jQuery.fn.toString = DOMNodeList.prototype.toString;

  js> $('span').remove();
  [ <span#å°åŒ—Taibei>, <span#å°åŒ—>, <span#utf8class1>,
    <span#utf8class2>, <span#foo:bar>, <span#test.foo[5]bar> ]

  // Yes - UTF-8 is supported in DOM documents!
  js> $('span')
  [ ]

  js> $('div').append('<span><b>hello!</b> world</span>');
  [ <div#main>, <div#foo> ]

  js> $('span')
  [ <span>, <span> ]

  js> $('span').text()
  hello! worldhello! world
Distributed
✦   Selenium Grid
    ✦ Push Selenium tests out to many
      machines (that you manage),
      simultaneously.
    ✦ Collect and store the results.
    ✦ http://selenium-grid.seleniumhq.org/

✦   TestSwarm
    ✦ Push tests to a distributed swarm of
      clients.
    ✦ Results viewable on the server.
    ✦ http://testswarm.com/
TestSwarm
Choose Your Browsers
Cost / Benefit




  IE 7     IE 6          FF 3    Safari 3   Opera 9.5
                  Cost          Benefit


         Draw a line in the sand.
Graded Support




   Yahoo Browser Compatibility
Browser Support Grid
           IE      Firefox   Safari   Opera Chrome


Previous   6.0       2.0      3.0      9.5


Current    7.0       3.0      3.2      9.6    1.0


 Next      8.0       3.1      4.0     10.0    2.0

                 jQuery Browser Support
Browser Support Grid
           IE       Firefox   Safari   Opera Chrome


Previous   6.0        2.0      3.0      9.5


Current    7.0        3.0      3.2      9.6    1.0


 Next      8.0        3.1      4.0     10.0    2.0

                jQuery 1.3 Browser Support
The Scaling Problem
✦   The Problem:
    ✦ jQuery has 6 test suites
    ✦ Run in 11 browsers
    ✦ (Not even including multiple platforms!)

✦   All need to be run for every commit,
    patch, and plugin.
✦   JavaScript testing doesn’t scale well.
Distributed Testing
✦   Hub server
✦   Clients connect and help run tests
✦   A simple JavaScript client that can be run
    in all browsers
    ✦ Including mobile browsers!


✦ TestSwarm
FF 3.5 FF 3.5 FF 3.5
                                                  IE 6
                                                         IE 6
       FF 3                                                      IE 6
                                           Op 9
FF 3

                                                                 IE 7

                               TestSwarm
                                                                  IE 7




              Test Suite        Test Suite          Test Suite
Manual Testing
✦   Push tests to users who follow pre-defined
    steps
✦   Answer ‘Yes’/’No’ questions which are
    pushed back to the server.
✦   An effective way to distribute manual test
    load to dozens of clients.
TestSwarm.com
✦   Incentives for top testers (t-shirts, books)
✦   Will be opening for alpha testing very soon
✦   Help your favorite JavaScript library
    become better tested!
✦   http://testswarm.com
Questions
✦   Contact:
    ✦ John Resig
    ✦ http://ejohn.org/
    ✦ http://twitter.com/jeresig

✦   More info:
    ✦ http://jsninja.com/Overview
    ✦ http://ejohn.org/blog/javascript-testing-
      does-not-scale/

More Related Content

What's hot

An introduction to Google test framework
An introduction to Google test frameworkAn introduction to Google test framework
An introduction to Google test frameworkAbner Chih Yi Huang
 
GeeCON 2012 Bad Tests, Good Tests
GeeCON 2012 Bad Tests, Good TestsGeeCON 2012 Bad Tests, Good Tests
GeeCON 2012 Bad Tests, Good TestsTomek Kaczanowski
 
Confitura 2012 Bad Tests, Good Tests
Confitura 2012 Bad Tests, Good TestsConfitura 2012 Bad Tests, Good Tests
Confitura 2012 Bad Tests, Good TestsTomek Kaczanowski
 
Unit testing in iOS featuring OCUnit, GHUnit & OCMock
Unit testing in iOS featuring OCUnit, GHUnit & OCMockUnit testing in iOS featuring OCUnit, GHUnit & OCMock
Unit testing in iOS featuring OCUnit, GHUnit & OCMockRobot Media
 
Testing javascript in the frontend
Testing javascript in the frontendTesting javascript in the frontend
Testing javascript in the frontendFrederic CABASSUT
 
Painless JavaScript Testing with Jest
Painless JavaScript Testing with JestPainless JavaScript Testing with Jest
Painless JavaScript Testing with JestMichał Pierzchała
 
Redux for ReactJS Programmers
Redux for ReactJS ProgrammersRedux for ReactJS Programmers
Redux for ReactJS ProgrammersDavid Rodenas
 
33rd Degree 2013, Bad Tests, Good Tests
33rd Degree 2013, Bad Tests, Good Tests33rd Degree 2013, Bad Tests, Good Tests
33rd Degree 2013, Bad Tests, Good TestsTomek Kaczanowski
 
Jasmine - why JS tests don't smell fishy
Jasmine - why JS tests don't smell fishyJasmine - why JS tests don't smell fishy
Jasmine - why JS tests don't smell fishyIgor Napierala
 
Advanced Jasmine - Front-End JavaScript Unit Testing
Advanced Jasmine - Front-End JavaScript Unit TestingAdvanced Jasmine - Front-End JavaScript Unit Testing
Advanced Jasmine - Front-End JavaScript Unit TestingLars Thorup
 
xUnit Style Database Testing
xUnit Style Database TestingxUnit Style Database Testing
xUnit Style Database TestingChris Oldwood
 
JUnit Kung Fu: Getting More Out of Your Unit Tests
JUnit Kung Fu: Getting More Out of Your Unit TestsJUnit Kung Fu: Getting More Out of Your Unit Tests
JUnit Kung Fu: Getting More Out of Your Unit TestsJohn Ferguson Smart Limited
 
C++ Unit Test with Google Testing Framework
C++ Unit Test with Google Testing FrameworkC++ Unit Test with Google Testing Framework
C++ Unit Test with Google Testing FrameworkHumberto Marchezi
 
Unit tests in node.js
Unit tests in node.jsUnit tests in node.js
Unit tests in node.jsRotem Tamir
 
2012 JDays Bad Tests Good Tests
2012 JDays Bad Tests Good Tests2012 JDays Bad Tests Good Tests
2012 JDays Bad Tests Good TestsTomek Kaczanowski
 
Unit testing with Easymock
Unit testing with EasymockUnit testing with Easymock
Unit testing with EasymockÜrgo Ringo
 

What's hot (20)

An introduction to Google test framework
An introduction to Google test frameworkAn introduction to Google test framework
An introduction to Google test framework
 
GeeCON 2012 Bad Tests, Good Tests
GeeCON 2012 Bad Tests, Good TestsGeeCON 2012 Bad Tests, Good Tests
GeeCON 2012 Bad Tests, Good Tests
 
Confitura 2012 Bad Tests, Good Tests
Confitura 2012 Bad Tests, Good TestsConfitura 2012 Bad Tests, Good Tests
Confitura 2012 Bad Tests, Good Tests
 
Unit testing in iOS featuring OCUnit, GHUnit & OCMock
Unit testing in iOS featuring OCUnit, GHUnit & OCMockUnit testing in iOS featuring OCUnit, GHUnit & OCMock
Unit testing in iOS featuring OCUnit, GHUnit & OCMock
 
Testing javascript in the frontend
Testing javascript in the frontendTesting javascript in the frontend
Testing javascript in the frontend
 
Painless JavaScript Testing with Jest
Painless JavaScript Testing with JestPainless JavaScript Testing with Jest
Painless JavaScript Testing with Jest
 
Agile Swift
Agile SwiftAgile Swift
Agile Swift
 
Agile Android
Agile AndroidAgile Android
Agile Android
 
JS and patterns
JS and patternsJS and patterns
JS and patterns
 
Redux for ReactJS Programmers
Redux for ReactJS ProgrammersRedux for ReactJS Programmers
Redux for ReactJS Programmers
 
33rd Degree 2013, Bad Tests, Good Tests
33rd Degree 2013, Bad Tests, Good Tests33rd Degree 2013, Bad Tests, Good Tests
33rd Degree 2013, Bad Tests, Good Tests
 
Jasmine - why JS tests don't smell fishy
Jasmine - why JS tests don't smell fishyJasmine - why JS tests don't smell fishy
Jasmine - why JS tests don't smell fishy
 
Advanced Jasmine - Front-End JavaScript Unit Testing
Advanced Jasmine - Front-End JavaScript Unit TestingAdvanced Jasmine - Front-End JavaScript Unit Testing
Advanced Jasmine - Front-End JavaScript Unit Testing
 
xUnit Style Database Testing
xUnit Style Database TestingxUnit Style Database Testing
xUnit Style Database Testing
 
JUnit Kung Fu: Getting More Out of Your Unit Tests
JUnit Kung Fu: Getting More Out of Your Unit TestsJUnit Kung Fu: Getting More Out of Your Unit Tests
JUnit Kung Fu: Getting More Out of Your Unit Tests
 
C++ Unit Test with Google Testing Framework
C++ Unit Test with Google Testing FrameworkC++ Unit Test with Google Testing Framework
C++ Unit Test with Google Testing Framework
 
Unit tests in node.js
Unit tests in node.jsUnit tests in node.js
Unit tests in node.js
 
2012 JDays Bad Tests Good Tests
2012 JDays Bad Tests Good Tests2012 JDays Bad Tests Good Tests
2012 JDays Bad Tests Good Tests
 
PL/SQL Unit Testing Can Be Fun!
PL/SQL Unit Testing Can Be Fun!PL/SQL Unit Testing Can Be Fun!
PL/SQL Unit Testing Can Be Fun!
 
Unit testing with Easymock
Unit testing with EasymockUnit testing with Easymock
Unit testing with Easymock
 

Viewers also liked

JavaScript Libraries (Ajax Exp 2006)
JavaScript Libraries (Ajax Exp 2006)JavaScript Libraries (Ajax Exp 2006)
JavaScript Libraries (Ajax Exp 2006)jeresig
 
Processing and Processing.js
Processing and Processing.jsProcessing and Processing.js
Processing and Processing.jsjeresig
 
JavaScript Libraries (Kings of Code)
JavaScript Libraries (Kings of Code)JavaScript Libraries (Kings of Code)
JavaScript Libraries (Kings of Code)jeresig
 
jQuery Internals + Cool Stuff
jQuery Internals + Cool StuffjQuery Internals + Cool Stuff
jQuery Internals + Cool Stuffjeresig
 
Testing Mobile JavaScript (Fall 2010
Testing Mobile JavaScript (Fall 2010Testing Mobile JavaScript (Fall 2010
Testing Mobile JavaScript (Fall 2010jeresig
 
Secrets of JavaScript Libraries
Secrets of JavaScript LibrariesSecrets of JavaScript Libraries
Secrets of JavaScript Librariesjeresig
 
Khan Academy Computer Science
Khan Academy Computer ScienceKhan Academy Computer Science
Khan Academy Computer Sciencejeresig
 
Testing React Applications
Testing React ApplicationsTesting React Applications
Testing React Applicationsstbaechler
 
War of Attrition: AWS vs. Google, IBM and Microsoft Azure
War of Attrition: AWS vs. Google, IBM and Microsoft AzureWar of Attrition: AWS vs. Google, IBM and Microsoft Azure
War of Attrition: AWS vs. Google, IBM and Microsoft AzureIT Brand Pulse
 
Javascript Unit Testting (PHPBenelux 2011-05-04)
Javascript Unit Testting (PHPBenelux 2011-05-04)Javascript Unit Testting (PHPBenelux 2011-05-04)
Javascript Unit Testting (PHPBenelux 2011-05-04)Tom Van Herreweghe
 
Testing of React JS app
Testing of React JS appTesting of React JS app
Testing of React JS appAleks Zinevych
 
Modular development with redux
Modular development with reduxModular development with redux
Modular development with reduxJavier Lafora Rey
 
Workshop 23: ReactJS, React & Redux testing
Workshop 23: ReactJS, React & Redux testingWorkshop 23: ReactJS, React & Redux testing
Workshop 23: ReactJS, React & Redux testingVisual Engineering
 
Advanced QUnit - Front-End JavaScript Unit Testing
Advanced QUnit - Front-End JavaScript Unit TestingAdvanced QUnit - Front-End JavaScript Unit Testing
Advanced QUnit - Front-End JavaScript Unit TestingLars Thorup
 
Building a JavaScript Library
Building a JavaScript LibraryBuilding a JavaScript Library
Building a JavaScript Libraryjeresig
 
JavaScript Test-Driven Development (TDD) with QUnit
JavaScript Test-Driven Development (TDD) with QUnitJavaScript Test-Driven Development (TDD) with QUnit
JavaScript Test-Driven Development (TDD) with QUnitTasanakorn Phaipool
 
Unit testing JavaScript using Mocha and Node
Unit testing JavaScript using Mocha and NodeUnit testing JavaScript using Mocha and Node
Unit testing JavaScript using Mocha and NodeJosh Mock
 
The Many Ways to Test Your React App
The Many Ways to Test Your React AppThe Many Ways to Test Your React App
The Many Ways to Test Your React AppAll Things Open
 
Unit Testing in JavaScript with MVC and QUnit
Unit Testing in JavaScript with MVC and QUnitUnit Testing in JavaScript with MVC and QUnit
Unit Testing in JavaScript with MVC and QUnitLars Thorup
 

Viewers also liked (20)

JavaScript Unit Testing
JavaScript Unit TestingJavaScript Unit Testing
JavaScript Unit Testing
 
JavaScript Libraries (Ajax Exp 2006)
JavaScript Libraries (Ajax Exp 2006)JavaScript Libraries (Ajax Exp 2006)
JavaScript Libraries (Ajax Exp 2006)
 
Processing and Processing.js
Processing and Processing.jsProcessing and Processing.js
Processing and Processing.js
 
JavaScript Libraries (Kings of Code)
JavaScript Libraries (Kings of Code)JavaScript Libraries (Kings of Code)
JavaScript Libraries (Kings of Code)
 
jQuery Internals + Cool Stuff
jQuery Internals + Cool StuffjQuery Internals + Cool Stuff
jQuery Internals + Cool Stuff
 
Testing Mobile JavaScript (Fall 2010
Testing Mobile JavaScript (Fall 2010Testing Mobile JavaScript (Fall 2010
Testing Mobile JavaScript (Fall 2010
 
Secrets of JavaScript Libraries
Secrets of JavaScript LibrariesSecrets of JavaScript Libraries
Secrets of JavaScript Libraries
 
Khan Academy Computer Science
Khan Academy Computer ScienceKhan Academy Computer Science
Khan Academy Computer Science
 
Testing React Applications
Testing React ApplicationsTesting React Applications
Testing React Applications
 
War of Attrition: AWS vs. Google, IBM and Microsoft Azure
War of Attrition: AWS vs. Google, IBM and Microsoft AzureWar of Attrition: AWS vs. Google, IBM and Microsoft Azure
War of Attrition: AWS vs. Google, IBM and Microsoft Azure
 
Javascript Unit Testting (PHPBenelux 2011-05-04)
Javascript Unit Testting (PHPBenelux 2011-05-04)Javascript Unit Testting (PHPBenelux 2011-05-04)
Javascript Unit Testting (PHPBenelux 2011-05-04)
 
Testing of React JS app
Testing of React JS appTesting of React JS app
Testing of React JS app
 
Modular development with redux
Modular development with reduxModular development with redux
Modular development with redux
 
Workshop 23: ReactJS, React & Redux testing
Workshop 23: ReactJS, React & Redux testingWorkshop 23: ReactJS, React & Redux testing
Workshop 23: ReactJS, React & Redux testing
 
Advanced QUnit - Front-End JavaScript Unit Testing
Advanced QUnit - Front-End JavaScript Unit TestingAdvanced QUnit - Front-End JavaScript Unit Testing
Advanced QUnit - Front-End JavaScript Unit Testing
 
Building a JavaScript Library
Building a JavaScript LibraryBuilding a JavaScript Library
Building a JavaScript Library
 
JavaScript Test-Driven Development (TDD) with QUnit
JavaScript Test-Driven Development (TDD) with QUnitJavaScript Test-Driven Development (TDD) with QUnit
JavaScript Test-Driven Development (TDD) with QUnit
 
Unit testing JavaScript using Mocha and Node
Unit testing JavaScript using Mocha and NodeUnit testing JavaScript using Mocha and Node
Unit testing JavaScript using Mocha and Node
 
The Many Ways to Test Your React App
The Many Ways to Test Your React AppThe Many Ways to Test Your React App
The Many Ways to Test Your React App
 
Unit Testing in JavaScript with MVC and QUnit
Unit Testing in JavaScript with MVC and QUnitUnit Testing in JavaScript with MVC and QUnit
Unit Testing in JavaScript with MVC and QUnit
 

Similar to Understanding JavaScript Testing

Js 单元测试框架介绍
Js 单元测试框架介绍Js 单元测试框架介绍
Js 单元测试框架介绍louieuser
 
Unittesting JavaScript with Evidence
Unittesting JavaScript with EvidenceUnittesting JavaScript with Evidence
Unittesting JavaScript with EvidenceTobie Langel
 
How to write clean tests
How to write clean testsHow to write clean tests
How to write clean testsDanylenko Max
 
Unit testing with PHPUnit
Unit testing with PHPUnitUnit testing with PHPUnit
Unit testing with PHPUnitferca_sl
 
Test driven node.js
Test driven node.jsTest driven node.js
Test driven node.jsJay Harris
 
Pragmatic unittestingwithj unit
Pragmatic unittestingwithj unitPragmatic unittestingwithj unit
Pragmatic unittestingwithj unitliminescence
 
Testing basics for developers
Testing basics for developersTesting basics for developers
Testing basics for developersAnton Udovychenko
 
Unit Testing Front End JavaScript
Unit Testing Front End JavaScriptUnit Testing Front End JavaScript
Unit Testing Front End JavaScriptFITC
 
Data-Driven Unit Testing for Java
Data-Driven Unit Testing for JavaData-Driven Unit Testing for Java
Data-Driven Unit Testing for JavaDenilson Nastacio
 
We Are All Testers Now: The Testing Pyramid and Front-End Development
We Are All Testers Now: The Testing Pyramid and Front-End DevelopmentWe Are All Testers Now: The Testing Pyramid and Front-End Development
We Are All Testers Now: The Testing Pyramid and Front-End DevelopmentAll Things Open
 

Similar to Understanding JavaScript Testing (20)

Js 单元测试框架介绍
Js 单元测试框架介绍Js 单元测试框架介绍
Js 单元测试框架介绍
 
Unittesting JavaScript with Evidence
Unittesting JavaScript with EvidenceUnittesting JavaScript with Evidence
Unittesting JavaScript with Evidence
 
Junit 5 - Maior e melhor
Junit 5 - Maior e melhorJunit 5 - Maior e melhor
Junit 5 - Maior e melhor
 
How to write clean tests
How to write clean testsHow to write clean tests
How to write clean tests
 
TestNG vs Junit
TestNG vs JunitTestNG vs Junit
TestNG vs Junit
 
3 j unit
3 j unit3 j unit
3 j unit
 
Unit testing with PHPUnit
Unit testing with PHPUnitUnit testing with PHPUnit
Unit testing with PHPUnit
 
Google guava
Google guavaGoogle guava
Google guava
 
Test driven node.js
Test driven node.jsTest driven node.js
Test driven node.js
 
Pragmatic unittestingwithj unit
Pragmatic unittestingwithj unitPragmatic unittestingwithj unit
Pragmatic unittestingwithj unit
 
JUnit 5
JUnit 5JUnit 5
JUnit 5
 
Junit and testNG
Junit and testNGJunit and testNG
Junit and testNG
 
Good Tests Bad Tests
Good Tests Bad TestsGood Tests Bad Tests
Good Tests Bad Tests
 
Testing basics for developers
Testing basics for developersTesting basics for developers
Testing basics for developers
 
Unit Testing Front End JavaScript
Unit Testing Front End JavaScriptUnit Testing Front End JavaScript
Unit Testing Front End JavaScript
 
Data-Driven Unit Testing for Java
Data-Driven Unit Testing for JavaData-Driven Unit Testing for Java
Data-Driven Unit Testing for Java
 
Good Practices On Test Automation
Good Practices On Test AutomationGood Practices On Test Automation
Good Practices On Test Automation
 
We Are All Testers Now: The Testing Pyramid and Front-End Development
We Are All Testers Now: The Testing Pyramid and Front-End DevelopmentWe Are All Testers Now: The Testing Pyramid and Front-End Development
We Are All Testers Now: The Testing Pyramid and Front-End Development
 
JUnit
JUnitJUnit
JUnit
 
A Test of Strength
A Test of StrengthA Test of Strength
A Test of Strength
 

More from jeresig

Does Coding Every Day Matter?
Does Coding Every Day Matter?Does Coding Every Day Matter?
Does Coding Every Day Matter?jeresig
 
Accidentally Becoming a Digital Librarian
Accidentally Becoming a Digital LibrarianAccidentally Becoming a Digital Librarian
Accidentally Becoming a Digital Librarianjeresig
 
2014: John's Favorite Thing (Neo4j)
2014: John's Favorite Thing (Neo4j)2014: John's Favorite Thing (Neo4j)
2014: John's Favorite Thing (Neo4j)jeresig
 
Computer Vision as Art Historical Investigation
Computer Vision as Art Historical InvestigationComputer Vision as Art Historical Investigation
Computer Vision as Art Historical Investigationjeresig
 
Hacking Art History
Hacking Art HistoryHacking Art History
Hacking Art Historyjeresig
 
Using JS to teach JS at Khan Academy
Using JS to teach JS at Khan AcademyUsing JS to teach JS at Khan Academy
Using JS to teach JS at Khan Academyjeresig
 
Applying Computer Vision to Art History
Applying Computer Vision to Art HistoryApplying Computer Vision to Art History
Applying Computer Vision to Art Historyjeresig
 
NYARC 2014: Frick/Zeri Results
NYARC 2014: Frick/Zeri ResultsNYARC 2014: Frick/Zeri Results
NYARC 2014: Frick/Zeri Resultsjeresig
 
EmpireJS: Hacking Art with Node js and Image Analysis
EmpireJS: Hacking Art with Node js and Image AnalysisEmpireJS: Hacking Art with Node js and Image Analysis
EmpireJS: Hacking Art with Node js and Image Analysisjeresig
 
Applying Computer Vision to Art History
Applying Computer Vision to Art HistoryApplying Computer Vision to Art History
Applying Computer Vision to Art Historyjeresig
 
Introduction to jQuery (Ajax Exp 2006)
Introduction to jQuery (Ajax Exp 2006)Introduction to jQuery (Ajax Exp 2006)
Introduction to jQuery (Ajax Exp 2006)jeresig
 
jQuery Recommendations to the W3C (2011)
jQuery Recommendations to the W3C (2011)jQuery Recommendations to the W3C (2011)
jQuery Recommendations to the W3C (2011)jeresig
 
jQuery Open Source Process (RIT 2011)
jQuery Open Source Process (RIT 2011)jQuery Open Source Process (RIT 2011)
jQuery Open Source Process (RIT 2011)jeresig
 
jQuery Open Source Process (Knight Foundation 2011)
jQuery Open Source Process (Knight Foundation 2011)jQuery Open Source Process (Knight Foundation 2011)
jQuery Open Source Process (Knight Foundation 2011)jeresig
 
jQuery Mobile
jQuery MobilejQuery Mobile
jQuery Mobilejeresig
 
jQuery Open Source (Fronteer 2011)
jQuery Open Source (Fronteer 2011)jQuery Open Source (Fronteer 2011)
jQuery Open Source (Fronteer 2011)jeresig
 
Holistic JavaScript Performance
Holistic JavaScript PerformanceHolistic JavaScript Performance
Holistic JavaScript Performancejeresig
 
New Features Coming in Browsers (RIT '09)
New Features Coming in Browsers (RIT '09)New Features Coming in Browsers (RIT '09)
New Features Coming in Browsers (RIT '09)jeresig
 
Introduction to jQuery (Ajax Exp 2007)
Introduction to jQuery (Ajax Exp 2007)Introduction to jQuery (Ajax Exp 2007)
Introduction to jQuery (Ajax Exp 2007)jeresig
 
Advanced jQuery (Ajax Exp 2007)
Advanced jQuery (Ajax Exp 2007)Advanced jQuery (Ajax Exp 2007)
Advanced jQuery (Ajax Exp 2007)jeresig
 

More from jeresig (20)

Does Coding Every Day Matter?
Does Coding Every Day Matter?Does Coding Every Day Matter?
Does Coding Every Day Matter?
 
Accidentally Becoming a Digital Librarian
Accidentally Becoming a Digital LibrarianAccidentally Becoming a Digital Librarian
Accidentally Becoming a Digital Librarian
 
2014: John's Favorite Thing (Neo4j)
2014: John's Favorite Thing (Neo4j)2014: John's Favorite Thing (Neo4j)
2014: John's Favorite Thing (Neo4j)
 
Computer Vision as Art Historical Investigation
Computer Vision as Art Historical InvestigationComputer Vision as Art Historical Investigation
Computer Vision as Art Historical Investigation
 
Hacking Art History
Hacking Art HistoryHacking Art History
Hacking Art History
 
Using JS to teach JS at Khan Academy
Using JS to teach JS at Khan AcademyUsing JS to teach JS at Khan Academy
Using JS to teach JS at Khan Academy
 
Applying Computer Vision to Art History
Applying Computer Vision to Art HistoryApplying Computer Vision to Art History
Applying Computer Vision to Art History
 
NYARC 2014: Frick/Zeri Results
NYARC 2014: Frick/Zeri ResultsNYARC 2014: Frick/Zeri Results
NYARC 2014: Frick/Zeri Results
 
EmpireJS: Hacking Art with Node js and Image Analysis
EmpireJS: Hacking Art with Node js and Image AnalysisEmpireJS: Hacking Art with Node js and Image Analysis
EmpireJS: Hacking Art with Node js and Image Analysis
 
Applying Computer Vision to Art History
Applying Computer Vision to Art HistoryApplying Computer Vision to Art History
Applying Computer Vision to Art History
 
Introduction to jQuery (Ajax Exp 2006)
Introduction to jQuery (Ajax Exp 2006)Introduction to jQuery (Ajax Exp 2006)
Introduction to jQuery (Ajax Exp 2006)
 
jQuery Recommendations to the W3C (2011)
jQuery Recommendations to the W3C (2011)jQuery Recommendations to the W3C (2011)
jQuery Recommendations to the W3C (2011)
 
jQuery Open Source Process (RIT 2011)
jQuery Open Source Process (RIT 2011)jQuery Open Source Process (RIT 2011)
jQuery Open Source Process (RIT 2011)
 
jQuery Open Source Process (Knight Foundation 2011)
jQuery Open Source Process (Knight Foundation 2011)jQuery Open Source Process (Knight Foundation 2011)
jQuery Open Source Process (Knight Foundation 2011)
 
jQuery Mobile
jQuery MobilejQuery Mobile
jQuery Mobile
 
jQuery Open Source (Fronteer 2011)
jQuery Open Source (Fronteer 2011)jQuery Open Source (Fronteer 2011)
jQuery Open Source (Fronteer 2011)
 
Holistic JavaScript Performance
Holistic JavaScript PerformanceHolistic JavaScript Performance
Holistic JavaScript Performance
 
New Features Coming in Browsers (RIT '09)
New Features Coming in Browsers (RIT '09)New Features Coming in Browsers (RIT '09)
New Features Coming in Browsers (RIT '09)
 
Introduction to jQuery (Ajax Exp 2007)
Introduction to jQuery (Ajax Exp 2007)Introduction to jQuery (Ajax Exp 2007)
Introduction to jQuery (Ajax Exp 2007)
 
Advanced jQuery (Ajax Exp 2007)
Advanced jQuery (Ajax Exp 2007)Advanced jQuery (Ajax Exp 2007)
Advanced jQuery (Ajax Exp 2007)
 

Recently uploaded

Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
Cloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial DataCloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial DataSafe Software
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
Introduction to Quantum Computing
Introduction to Quantum ComputingIntroduction to Quantum Computing
Introduction to Quantum ComputingGDSC PJATK
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.francesco barbera
 
RAG Patterns and Vector Search in Generative AI
RAG Patterns and Vector Search in Generative AIRAG Patterns and Vector Search in Generative AI
RAG Patterns and Vector Search in Generative AIUdaiappa Ramachandran
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
PicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer ServicePicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer ServiceRenan Moreira de Oliveira
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 

Recently uploaded (20)

Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
Cloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial DataCloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial Data
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
Introduction to Quantum Computing
Introduction to Quantum ComputingIntroduction to Quantum Computing
Introduction to Quantum Computing
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.
 
RAG Patterns and Vector Search in Generative AI
RAG Patterns and Vector Search in Generative AIRAG Patterns and Vector Search in Generative AI
RAG Patterns and Vector Search in Generative AI
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
PicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer ServicePicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer Service
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 

Understanding JavaScript Testing

  • 1. JavaScript Testing John Resig http://ejohn.org/ - http://twitter.com/jeresig
  • 2. Why Test JavaScript? ✦ Cross-browser issues. ✦ The possibility for causing an unforeseen problem is simply too great.
  • 5. People don’t test. :-( 900 675 450 225 0 None
  • 6. Basic Components ✦ Writing and understanding a JavaScript test suite is easy. ✦ Test Suite ✦ Tests ✦ Assertions ✦ Async Tests ✦ Test Runner
  • 7. Assertions  <html>   <head>     <title>Test Suite</title>     <script>     function assert( value, desc ) {       var li = document.createElement("li");       li.className = value ? "pass" : "fail";       li.appendChild( document.createTextNode( desc ) );       document.getElementById("results").appendChild( li );     }          window.onload = function(){       assert( true, "The test suite is running." );     };     </script>     <style>       #results li.pass { color: green; }       #results li.fail { color: red; }     </style>   </head>   <body>     <ul id="results"></ul>   </body>   </html> 
  • 8. Tests      test("A test.", function(){         assert( true, "First assertion completed" );         assert( true, "Second assertion completed" );         assert( true, "Third assertion completed" );       });              test("Another test.", function(){         assert( true, "First test completed" );         assert( false, "Second test failed" );         assert( true, "Third assertion completed" );       }); 
  • 9. Tests    var results;          function assert( value, desc ) {       var li = document.createElement("li");       li.className = value ? "pass" : "fail";       li.appendChild( document.createTextNode( desc ) );       results.appendChild( li );       if ( !value ) {         li.parentNode.parentNode.className = "fail";       }       return li;     }          function test(name, fn){       results = document.getElementById("results");       results = assert( true, name ).appendChild(         document.createElement("ul") );       fn();     } 
  • 10. Async Tests  test(function(){     pause();     setTimeout(function(){       assert( true, "First test completed" );       resume();     }, 100);   });      test(function(){     pause();     setTimeout(function(){       assert( true, "Second test completed" );       resume();     }, 200);   }); 
  • 11. Async Tests  (function(){     var queue = [], paused = false;          this.test = function(fn){       queue.push( fn );       runTest();     };          this.pause = function(){       paused = true;     };          this.resume = function(){       paused = false;       setTimeout(runTest, 1);     };          function runTest(){       if ( !paused && queue.length ) {         queue.shift()();         if ( !paused ) {           resume();         }       }     }   })(); 
  • 12. TestRunner ✦ Responsible for loading an executing tests. ✦ Sometimes individual test groups can run standalone (Dojo) sometimes they require the test runner (QUnit, JSUnit).
  • 13. Popular Test Frameworks 250.0 187.5 125.0 62.5 0 QUnit JSUnit Selenium YUITest FireUnit Screw.Unit JSSpec
  • 14. Unit Testing ✦ Break code into logical chucks for testing. ✦ Focus on one method at a time. ✦ Popular Frameworks: ✦ QUnit ✦ JSUnit ✦ YUITest
  • 15. QUnit ✦ Unit Testing framework built for jQuery. ✦ Additional features: ✦ Supports asynchronous testing. ✦ Can break code into modules. ✦ Supports test timeouts. ✦ http://docs.jquery.com/QUnit
  • 16. QUnit Style  test("a basic test example", function() {     ok( true, "this test is fine" );     var value = "hello";     equals( "hello", value, "We expect value to be hello" );   });      module("Module A");      test("first test within module", function() {     ok( true, "all pass" );   });      test("second test within module", function() {     ok( true, "all pass" );   });      module("Module B");      test("some other test", function() {     expect(2);     equals( true, false, "failing test" );     equals( true, true, "passing test" );   }); 
  • 17. QUnit
  • 18. JSUnit ✦ One of the oldest JavaScript testing frameworks. ✦ A port of JUnit to JavaScript, circa 2001. ✦ Code feels very 2001 (frames!) ✦ http://www.jsunit.net/
  • 19. JSUnit        function coreSuite() {             var result = new top.jsUnitTestSuite();             result.addTestPage("tests/jsUnitAssertionTests.html");             result.addTestPage("tests/jsUnitSetUpTearDownTests.html");             result.addTestPage("tests/jsUnitRestoredHTMLDivTests.html");             result.addTestPage("tests/jsUnitFrameworkUtilityTests.html");             result.addTestPage("tests/jsUnitOnLoadTests.html");             result.addTestPage("tests/jsUnitUtilityTests.html");             return result;         }                  function serverSuite() {             var result = new top.jsUnitTestSuite();             result.addTestPage("tests/server/jsUnitVersionCheckTests.html");             result.addTestPage("tests/server/jsUnitServerAjaxTests.html");             return result;         }                  function librariesSuite() {             var result = new top.jsUnitTestSuite();             result.addTestPage("tests/jsUnitMockTimeoutTest.html");             return result;         }                  function suite() {             var newsuite = new top.jsUnitTestSuite();             newsuite.addTestSuite(coreSuite());             newsuite.addTestSuite(serverSuite());             newsuite.addTestSuite(librariesSuite());             return newsuite;         }
  • 20. JSUnit  function testAssertNotUndefined() {       assertNotUndefined("1 should not be undefined", 1);       assertNotUndefined(1);   }      function testAssertNaN() {       assertNaN("a string should not be a number", "string");       assertNaN("string");   }      function testAssertNotNaN() {       assertNotNaN("1 should not be not a number", 1);       assertNotNaN(1);   }      function testFail() {       var excep = null;       try {           fail("Failure message");       } catch (e) {           excep = e;       }       assertJsUnitException("fail(string) should throw a JsUnitException", excep);   }      function testTooFewArguments() {       var excep = null;       try {           assert();       } catch (e1) {           excep = e1;       }       assertNonJsUnitException("Calling an assertion function with too  few arguments should throw an exception", excep);   }
  • 22. YUITest (2 & 3) ✦ Testing framework built and developed by Yahoo (released Oct 2008). ✦ Completely overhauled to go with YUI v3. ✦ Features: ✦ Supports async tests. ✦ Has good event simulation. ✦ v2: http://developer.yahoo.com/yui/ examples/yuitest/ ✦ v3: http://developer.yahoo.com/yui/3/test/
  • 23. YUITest 2   YAHOO.example.yuitest.ArrayTestCase = new YAHOO.tool.TestCase({       name : "Array Tests",              setUp : function () {           this.data = [0,1,2,3,4]       },              tearDown : function () {           delete this.data;       },                testPop : function () {           var Assert = YAHOO.util.Assert;                    var value = this.data.pop();                      Assert.areEqual(4, this.data.length);           Assert.areEqual(4, value);                   },                      testPush : function () {           var Assert = YAHOO.util.Assert;                      this.data.push(5);                      Assert.areEqual(6, this.data.length);           Assert.areEqual(5, this.data[5]);                   }  }); 
  • 25. YUITest 3  Y.example.test.DataTestCase = new Y.Test.Case({       name : "Data Tests",              setUp : function () {           this.data = {               name: "test",               year: 2007,               beta: true           };       },              tearDown : function () {           delete this.data;       },              testName : function () {           var Assert = Y.Assert;                      Assert.isObject(this.data);           Assert.isString(this.data.name);           Assert.areEqual("test", this.data.name);                   },              testYear : function () {           var Assert = Y.Assert;                      Assert.isObject(this.data);           Assert.isNumber(this.data.year);           Assert.areEqual(2007, this.data.year);                   }  }); 
  • 27. Behavior Testing ✦ Similar to unit testing, but broken up by task. ✦ Functionally very similar to unit testing, uses different terminology ✦ Popular frameworks: ✦ Screw.Unit ✦ JSSpec
  • 28. Screw.Unit ✦ Popular BDD framework. ✦ http://github.com/nathansobo/screw-unit/ tree/master
  • 29. Screw.Unit  describe("a nested describe", function() {     var invocations = [];        before(function() {       invocations.push("before");     });        describe("a doubly nested describe", function() {       before(function() {         invocations.push('inner before');       });          it("runs befores in all ancestors prior to an it", function() {         expect(invocations).to(equal, ["before", "inner before"]);       });     });   }); 
  • 31. JSSpec ✦ Used by MooTools as their testing framework. ✦ http://jania.pe.kr/aw/moin.cgi/JSSpec
  • 32. JSSpec  describe('"Should have"s', {     'String length': function() {       expect("Hello").should_have(4, "characters");     },     'Array length': function() {       expect([1,2,3]).should_have(4, "items");     },     'Object's item length': function() {       expect({name:'Alan Kang', email:'jania902@gmail.com', accounts:['A', 'B']}).should_have(3, "accounts");     },     'No match': function() {       expect("This is a string").should_have(5, "players");     },     'Exactly': function() {       expect([1,2,3]).should_have_exactly(2, "items");     },     'At least': function() {       expect([1,2,3]).should_have_at_least(4, "items");     },     'At most': function() {       expect([1,2,3]).should_have_at_most(2, "items");     }   }) 
  • 34. Automation ✦ Functional Testing ✦ Browser launching ✦ Server-Side
  • 35. Functional Testing ✦ Selenium IDE ✦ There may be others by Selenium is far and away the best.
  • 36. Selenium IDE ✦ Records and automates actions performed by a user. ✦ An extension for Firefox that records the actions. ✦ Can play them back in all browsers (limited by cross-domain issues). ✦ Primarily for testing web applications - everyone should use it, though! ✦ http://seleniumhq.org/projects/ide/
  • 38. Browser Launching ✦ Automates the process of opening browser windows, running tests, and getting results. ✦ Frequently require a specific framework. ✦ Popular frameworks: ✦ WebDriver http://code.google.com/p/ webdriver/ (Java) ✦ Waitr http://wtr.rubyforge.org/ (Ruby) ✦ JsTestDriver http://code.google.com/p/ js-test-driver/ (Java) ✦ Selenium RC http://seleniumhq.org/ projects/remote-control/ (Java)
  • 40. Server-Side ✦ Ignore the browser! Simulate it on the server-side. ✦ Almost always uses Java + Rhino to construct a browser. ✦ Some frameworks: ✦ Crosscheck ✦ Env.js ✦ Blueridge
  • 41. Server-Side ✦ Crosscheck ✦ Pure Java, even simulates browser bugs. ✦ http://www.thefrontside.net/crosscheck ✦ Env.js ✦ Pure JavaScript, focuses on standards support. ✦ http://github.com/thatcher/env-js/tree/ master ✦ Blueridge ✦ Env.js + Screw.Unit + Rhino ✦ http://github.com/relevance/blue-ridge/
  • 42. Env.js $ java -jar build/js.jar Rhino 1.6 release 6 2007 06 28 js> load('build/runtest/env.js'); js> window.location = 'test/index.html'; test/index.html js> load('dist/jquery.js'); // Add pretty printing to jQuery objects: js> jQuery.fn.toString = DOMNodeList.prototype.toString; js> $('span').remove(); [ <span#å°åŒ—Taibei>, <span#å°åŒ—>, <span#utf8class1>, <span#utf8class2>, <span#foo:bar>, <span#test.foo[5]bar> ] // Yes - UTF-8 is supported in DOM documents! js> $('span') [ ] js> $('div').append('<span><b>hello!</b> world</span>'); [ <div#main>, <div#foo> ] js> $('span') [ <span>, <span> ] js> $('span').text() hello! worldhello! world
  • 43. Distributed ✦ Selenium Grid ✦ Push Selenium tests out to many machines (that you manage), simultaneously. ✦ Collect and store the results. ✦ http://selenium-grid.seleniumhq.org/ ✦ TestSwarm ✦ Push tests to a distributed swarm of clients. ✦ Results viewable on the server. ✦ http://testswarm.com/
  • 46. Cost / Benefit IE 7 IE 6 FF 3 Safari 3 Opera 9.5 Cost Benefit Draw a line in the sand.
  • 47. Graded Support Yahoo Browser Compatibility
  • 48. Browser Support Grid IE Firefox Safari Opera Chrome Previous 6.0 2.0 3.0 9.5 Current 7.0 3.0 3.2 9.6 1.0 Next 8.0 3.1 4.0 10.0 2.0 jQuery Browser Support
  • 49. Browser Support Grid IE Firefox Safari Opera Chrome Previous 6.0 2.0 3.0 9.5 Current 7.0 3.0 3.2 9.6 1.0 Next 8.0 3.1 4.0 10.0 2.0 jQuery 1.3 Browser Support
  • 50. The Scaling Problem ✦ The Problem: ✦ jQuery has 6 test suites ✦ Run in 11 browsers ✦ (Not even including multiple platforms!) ✦ All need to be run for every commit, patch, and plugin. ✦ JavaScript testing doesn’t scale well.
  • 51. Distributed Testing ✦ Hub server ✦ Clients connect and help run tests ✦ A simple JavaScript client that can be run in all browsers ✦ Including mobile browsers! ✦ TestSwarm
  • 52. FF 3.5 FF 3.5 FF 3.5 IE 6 IE 6 FF 3 IE 6 Op 9 FF 3 IE 7 TestSwarm IE 7 Test Suite Test Suite Test Suite
  • 53. Manual Testing ✦ Push tests to users who follow pre-defined steps ✦ Answer ‘Yes’/’No’ questions which are pushed back to the server. ✦ An effective way to distribute manual test load to dozens of clients.
  • 54. TestSwarm.com ✦ Incentives for top testers (t-shirts, books) ✦ Will be opening for alpha testing very soon ✦ Help your favorite JavaScript library become better tested! ✦ http://testswarm.com
  • 55. Questions ✦ Contact: ✦ John Resig ✦ http://ejohn.org/ ✦ http://twitter.com/jeresig ✦ More info: ✦ http://jsninja.com/Overview ✦ http://ejohn.org/blog/javascript-testing- does-not-scale/