Testing Javascript <ul><li>Lei Kang @ Kiwiplan </li></ul>
Do you want... <ul><li>Unit Testing of JavaScript code? </li></ul><ul><li>Continuous Integration? </li></ul><ul><li>Automa...
Are those your itches for Web Development? Text Every good work of software starts by scratching a developer’s personal it...
My itches of JavaScript <ul><li>Object Oriented Javascript </li></ul><ul><li>Javascript with Ruby’s flavor  </li></ul><ul>...
Today’s Story <ul><li>Unit Testing using Rhino and RhinoUnit </li></ul><ul><li>Continuous Integration using Jenkins(Hudson...
Rhino?
Rhino is <ul><li>An open-source implementation of JavaScript written entirely in Java. It is typically embedded into Java ...
Rhino now <ul><li>The Mozilla Rhino engine for the JavaScript programming language, is currently included as a feature in ...
Rhino can <ul><li>Run JavaScript inside Java </li></ul>ScriptEngineManager mgr = new ScriptEngineManager(); ScriptEngine j...
Rhino can <ul><li>Run Java inside JavaScript </li></ul>importPackage(javax.swing);  var optionPane = JOptionPane.showMessa...
Rhino can  <ul><li>Run in the Terminal: Linux, Windows and MacOS X:  jrunscript </li></ul><ul><li>$ sudo apt-get install r...
already feeling impatient? <ul><li>Here comes  RhinoUnit   </li></ul>An  Ant  based Javascript testing framework RhinoUnit...
What RhinoUnit can do <ul><li>Almost the same APIs with JUnit </li></ul><ul><ul><li>string and object comparisons </li></u...
A general example /**   * Number.times function. 3.times(function(item){...})   *    * @param handler function   * @return...
A general example eval(loadFile(&quot;src/com/ciphor/ruby/Number.js&quot;)); var testNumber; testCases(test, function setU...
Our Ant build.xml <ul><li><project name=&quot;CiphorJS&quot; basedir=&quot;.&quot; default=&quot;run-unit-tests&quot;> </l...
familiar with this? run-unit-tests : [ rhinounit ] Testsuite: TestCore.js [ rhinounit ] *** Empty TestCase, unavailable fo...
want to see more? assert.that(actual, predicate) assert.mustCall(onThisObject, thisMethod) assert.mustCallNTimes(onThisObj...
Continuous Integration <ul><li>Why do we need CI? </li></ul><ul><li>Can we use CI for Javascript Project? </li></ul><ul><l...
Jenkins jenkins-ci.org Jenkins Jenkins
Jenkins <ul><li>Formerly known as Hudson </li></ul><ul><li>Free to use (applause!) </li></ul><ul><li>Written in Java </li>...
How I use it <ul><li>A Javascript Project in Eclipse </li></ul><ul><li>Using git for version controlling, you need a git p...
Let Jenkins working with github <ul><li>Install Github plugin </li></ul><ul><li>Install Git plugin </li></ul>
Let Jenkins working with github <ul><li>Create a new job for your project </li></ul>
Let Jenkins working with github <ul><li>Set Ant Target to run </li></ul>
Let Jenkins working with github <ul><li>Set Git Publisher </li></ul><ul><li>Optionally push merge results, tags, and/or br...
Let Jenkins working with github <ul><li>Generate SSH key and add it to GitHub </li></ul><ul><li>Set Git autentication info...
Hooray!
10:24:59  Started by user anonymous 10:24:59  Checkout:workspace / /var/lib/jenkins/jobs/CiphorJS/workspace - hudson.remot...
What is it doing behind? 10:25:14  [workspace] $ ant -file build.xml run-unit-tests 10:25:14  Buildfile: build.xml 10:25:1...
What have I done? Commit Git Local  Repository Detected by Build and Test Jenkins  workspace Git Remote  Repository (GitHu...
Extremely bored? Should I continue?
Automated Web UI Testing <ul><li>A lot of options </li></ul><ul><li>Selenium, Tellurium... </li></ul><ul><li>For simplicit...
iMacros Just DRY Don't Repeat Yourself
iMacros Works for both IE and Firefox
iMacros Let's do it Actions speak louder than words.
Web Testing
Web Testing
Web Testing
Web Testing
Web Testing
OK, That's the whole story today,  Thank you!
Reference Rhino  http://www.mozilla.org/rhino/ RhinoUnit  http://code.google.com/p/rhinounit/ Jenkins  http://jenkins-ci.o...
Coming soon... <ul><li>Javascript with Ruby flavor </li></ul><ul><ul><li>Ruby Array object </li></ul></ul><ul><ul><li>Ruby...
Upcoming SlideShare
Loading in...5
×

Testing of javacript

4,358

Published on

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,358
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
19
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Testing of javacript

  1. 1. Testing Javascript <ul><li>Lei Kang @ Kiwiplan </li></ul>
  2. 2. Do you want... <ul><li>Unit Testing of JavaScript code? </li></ul><ul><li>Continuous Integration? </li></ul><ul><li>Automated Testing for JavaScript intensive Web App? </li></ul>
  3. 3. Are those your itches for Web Development? Text Every good work of software starts by scratching a developer’s personal itch. -- The Cathedral and the Bazaar by Eric S. Raymond
  4. 4. My itches of JavaScript <ul><li>Object Oriented Javascript </li></ul><ul><li>Javascript with Ruby’s flavor </li></ul><ul><li>Distributed Event Registering and Triggering </li></ul><ul><li>Reflection of Javascript </li></ul><ul><li>Unit Testing </li></ul><ul><li>Continuous Integration for Javascript Project </li></ul><ul><li>Automated Web UI testing </li></ul>
  5. 5. Today’s Story <ul><li>Unit Testing using Rhino and RhinoUnit </li></ul><ul><li>Continuous Integration using Jenkins(Hudson) </li></ul><ul><li>Automated Web UI testing using iMacros </li></ul>
  6. 6. Rhino?
  7. 7. Rhino is <ul><li>An open-source implementation of JavaScript written entirely in Java. It is typically embedded into Java applications to provide scripting to end users. </li></ul>http://www.mozilla.org/rhino/
  8. 8. Rhino now <ul><li>The Mozilla Rhino engine for the JavaScript programming language, is currently included as a feature in the JDK 6 and JRE 6 libraries. </li></ul>
  9. 9. Rhino can <ul><li>Run JavaScript inside Java </li></ul>ScriptEngineManager mgr = new ScriptEngineManager(); ScriptEngine jsEngine = mgr.getEngineByName(&quot;JavaScript&quot;); try { jsEngine.eval(&quot;print('Hello, world!')&quot;); } catch (ScriptException ex) { ex.printStackTrace(); }
  10. 10. Rhino can <ul><li>Run Java inside JavaScript </li></ul>importPackage(javax.swing); var optionPane = JOptionPane.showMessageDialog(null, 'Hello, world!');
  11. 11. Rhino can <ul><li>Run in the Terminal: Linux, Windows and MacOS X: jrunscript </li></ul><ul><li>$ sudo apt-get install rhino; js </li></ul>
  12. 12. already feeling impatient? <ul><li>Here comes RhinoUnit </li></ul>An Ant based Javascript testing framework RhinoUnit is run from an ANT scriptdef task using the Rhino engine - and uses all the helpful things that ANT provides for that.
  13. 13. What RhinoUnit can do <ul><li>Almost the same APIs with JUnit </li></ul><ul><ul><li>string and object comparisons </li></ul></ul><ul><ul><li>regexp comparisons </li></ul></ul><ul><ul><li>collection comparisons (contains, containsExactly, etc) </li></ul></ul><ul><ul><li>ensure that a function has been called (by wrapping it with assert.mustCall(), or using an assert.functionThatMustBeCalled()). </li></ul></ul><ul><ul><li>ensure that an exception is thrown (using shouldThrowException(...) </li></ul></ul><ul><ul><li>ensure that the global namespace isn't polluted by poor variable scoping. (I will talk about it later) </li></ul></ul>
  14. 14. A general example /** * Number.times function. 3.times(function(item){...}) * * @param handler function * @returns {Array} */ Number.prototype.times = function(handler) { var results = new Array(); if (this > 0 && this == parseInt(this)) { for ( var i = 0; i < Math.ceil(this); i++) { results.push(handler(i)); } } else { throw &quot;Illegal number for times() function. Positive integer is required.&quot;; } return results; }; we have a simple function like this
  15. 15. A general example eval(loadFile(&quot;src/com/ciphor/ruby/Number.js&quot;)); var testNumber; testCases(test, function setUp(){ testNumber = 12; }, function testNumberTimes(){ var aNumber = new Number(10); var temp = 0; var result = aNumber.times(function(item){ temp++; return aNumber*item; }); assert.that(temp, eq(10)); assert.that(result, isCollectionContainingOnly(0,10,20,30,40,50,60,70,80,90)); } ); Test code goes like this
  16. 16. Our Ant build.xml <ul><li><project name=&quot;CiphorJS&quot; basedir=&quot;.&quot; default=&quot;run-unit-tests&quot;> </li></ul><ul><li><scriptdef name=&quot;rhinounit&quot; </li></ul><ul><li> src=&quot; lib/rhinounit/src/rhinoUnitAnt.js &quot; </li></ul><ul><li> language=&quot;javascript&quot;> </li></ul><ul><li><attribute name=&quot;options&quot;/> </li></ul><ul><li><attribute name=&quot;ignoredglobalvars&quot;/> </li></ul><ul><li><attribute name=&quot;haltOnFirstFailure&quot;/> </li></ul><ul><li><attribute name=&quot;rhinoUnitUtilPath&quot;/> </li></ul><ul><li><element name=&quot;fileset&quot; type=&quot;fileset&quot;/> </li></ul><ul><li></scriptdef> </li></ul><ul><li><target name=&quot;run-unit-tests&quot;> </li></ul><ul><li><rhinounit options=&quot;{verbose:true, stackTrace:true}&quot; </li></ul><ul><ul><ul><li>haltOnFirstFailure=&quot;false&quot; </li></ul></ul></ul><ul><ul><ul><li>rhinoUnitUtilPath=&quot;lib/rhinounit/src/rhinoUnitUtil.js&quot;> </li></ul></ul></ul><ul><li><fileset dir=&quot;test&quot;> </li></ul><ul><li><include name=&quot; Test*.js&quot; /> </li></ul><ul><li></fileset> </li></ul><ul><li></rhinounit> </li></ul><ul><li></target> </li></ul><ul><li></project> </li></ul>I am sure you know how to do the next
  17. 17. familiar with this? run-unit-tests : [ rhinounit ] Testsuite: TestCore.js [ rhinounit ] *** Empty TestCase, unavailable for OOAD module. *** [ rhinounit ] Tests run: 1, Failures: 0, Errors: 0 [ rhinounit ] Testsuite: TestEve.js [ rhinounit ] Tests run: 4, Failures: 0, Errors: 0 [ rhinounit ] Testsuite: TestReflection.js [ rhinounit ] Tests run: 5, Failures: 0, Errors: 0 [ rhinounit ] Testsuite: TestRubyArray.js [ rhinounit ] Tests run: 26, Failures: 0, Errors: 0 [ rhinounit ] Testsuite: TestRubyNumber.js [ rhinounit ] Tests run: 3, Failures: 0, Errors: 0 [ rhinounit ] Testsuite: TestRubyOO.js [ rhinounit ] Tests run: 7, Failures: 0, Errors: 0 [ rhinounit ] Testsuite: TestRubyString.js [ rhinounit ] Tests run: 12, Failures: 0, Errors: 0 BUILD SUCCESSFUL Total time: 922 milliseconds
  18. 18. want to see more? assert.that(actual, predicate) assert.mustCall(onThisObject, thisMethod) assert.mustCallNTimes(onThisObject, numberOfTimes, thisMethod) assert.functionThatMustBeCalled(thisMethod, originalFunction) assert.functionThatMustBeCalledNTimes(thisMethod, numberOfTimes, originalFunction) assert.mustNotCall(onThisObject, thisMethod) assert.functionThatMustNotBeCalled(thisMethod) assert.fail(message) assert.callStack(optionalIgnoreAfterMatching) eq(expected) similar(expected) matches(regExp) isTrue(message) isFalse(message) not(predicate) hasConstructor(expected) isA(expected) isOfType(expected) isCollectionContaining(value, value, value...) isCollectionContainingOnly(value, value, value...) containsInOrder(value, value, value...) isNull(message) eqFloat(expected, accuracy) shouldThrowException(theTest, message, checkException) Assert Object Test Functions http://code.google.com/p/rhinounit/ Test Functions
  19. 19. Continuous Integration <ul><li>Why do we need CI? </li></ul><ul><li>Can we use CI for Javascript Project? </li></ul><ul><li>Which CI system are we going to use? </li></ul><ul><li>How to do it? </li></ul>
  20. 20. Jenkins jenkins-ci.org Jenkins Jenkins
  21. 21. Jenkins <ul><li>Formerly known as Hudson </li></ul><ul><li>Free to use (applause!) </li></ul><ul><li>Written in Java </li></ul><ul><li>Distributed by jenkins.war (Easy to deploy) </li></ul><ul><li>Native package for ubuntu </li></ul>
  22. 22. How I use it <ul><li>A Javascript Project in Eclipse </li></ul><ul><li>Using git for version controlling, you need a git plugin for eclipse </li></ul><ul><li>Source code hosted on GitHub ( github.com ) </li></ul><ul><li>Unit tested by RhinoUnit (Ant) </li></ul>Interested in Git?
  23. 23. Let Jenkins working with github <ul><li>Install Github plugin </li></ul><ul><li>Install Git plugin </li></ul>
  24. 24. Let Jenkins working with github <ul><li>Create a new job for your project </li></ul>
  25. 25. Let Jenkins working with github <ul><li>Set Ant Target to run </li></ul>
  26. 26. Let Jenkins working with github <ul><li>Set Git Publisher </li></ul><ul><li>Optionally push merge results, tags, and/or branches to remote repositories. </li></ul>
  27. 27. Let Jenkins working with github <ul><li>Generate SSH key and add it to GitHub </li></ul><ul><li>Set Git autentication info in Jenkins workspace </li></ul>$ git config user.name “your.name” $ git config user.email “your.name@email.com”
  28. 28. Hooray!
  29. 29. 10:24:59 Started by user anonymous 10:24:59 Checkout:workspace / /var/lib/jenkins/jobs/CiphorJS/workspace - hudson.remoting.LocalChannel@1077aa7 10:24:59 Using strategy: Default 10:24:59 Last Built Revision: Revision 711a1c557c248b5e45364d3aafd8a4c98031f8a1 (local/master) 10:24:59 Checkout:workspace / /var/lib/jenkins/jobs/CiphorJS/workspace - hudson.remoting.LocalChannel@1077aa7 10:24:59 GitAPI created 10:24:59 Fetching changes from the remote Git repository 10:24:59 Fetching upstream changes from /home/lei.kang/workspaces/java/CiphorJS/.git 10:24:59 [workspace] $ git fetch -t /home/lei.kang/workspaces/java/CiphorJS/.git +refs/heads/*:refs/remotes/local/* 10:25:00 [workspace] $ git ls-tree HEAD 10:25:00 Fetching upstream changes from git@github.com:kangleay/CiphorJS.git 10:25:00 [workspace] $ git fetch -t git@github.com:kangleay/CiphorJS.git +refs/heads/*:refs/remotes/origin/* 10:25:13 [workspace] $ git ls-tree HEAD 10:25:13 Seen branch in repository local/master 10:25:13 Seen branch in repository origin/master 10:25:13 Commencing build of Revision 711a1c557c248b5e45364d3aafd8a4c98031f8a1 (local/master) 10:25:13 GitAPI created 10:25:13 Checking out Revision 711a1c557c248b5e45364d3aafd8a4c98031f8a1 (local/master) 10:25:13 [workspace] $ git checkout -f 711a1c557c248b5e45364d3aafd8a4c98031f8a1 10:25:13 [workspace] $ git tag -a -f -m &quot;Hudson Build #37&quot; hudson-CiphorJS-37 10:25:13 Recording changes in branch local/master 10:25:14 [workspace] $ git whatchanged --no-abbrev -M –pretty=raw 711a1c557c248b5e45364d3aafd8a4c98031f8a1..711a1c557c248b5e45364d3aafd8a4c98031f8a1 What is it doing behind?
  30. 30. What is it doing behind? 10:25:14 [workspace] $ ant -file build.xml run-unit-tests 10:25:14 Buildfile: build.xml 10:25:15 10:25:15 run-unit-tests: 10:25:15 [rhinounit] Testsuite: TestCore.js 10:25:15 [rhinounit] *** Empty TestCase, unavailable for OOAD module. *** 10:25:15 [rhinounit] Tests run: 1, Failures: 0, Errors: 0 10:25:15 [rhinounit] 10:25:15 [rhinounit] Testsuite: TestEve.js 10:25:15 [rhinounit] Tests run: 4, Failures: 0, Errors: 0 10:25:15 [rhinounit] 10:25:15 [rhinounit] Testsuite: TestReflection.js 10:25:15 [rhinounit] Tests run: 5, Failures: 0, Errors: 0 10:25:15 [rhinounit] 10:25:15 [rhinounit] Testsuite: TestRubyArray.js 10:25:15 [rhinounit] Tests run: 26, Failures: 0, Errors: 0 10:25:15 [rhinounit] 10:25:15 [rhinounit] Testsuite: TestRubyNumber.js 10:25:15 [rhinounit] Tests run: 3, Failures: 0, Errors: 0 10:25:15 [rhinounit] 10:25:15 [rhinounit] Testsuite: TestRubyOO.js 10:25:15 [rhinounit] Tests run: 7, Failures: 0, Errors: 0 10:25:15 [rhinounit] 10:25:15 [rhinounit] Testsuite: TestRubyString.js 10:25:15 [rhinounit] Tests run: 12, Failures: 0, Errors: 0 10:25:15 [rhinounit] 10:25:15 10:25:15 BUILD SUCCESSFUL 10:25:15 Total time: 0 seconds 10:25:15 GitAPI created 10:25:15 [workspace] $ git tag -d hudson-CiphorJS-37 10:25:15 [workspace] $ git tag -a -f -m &quot;Hudson Build #37&quot; hudson-CiphorJS-37-SUCCESS 10:25:15 GitAPI created 10:25:15 Pushing HEAD to branch master at repo origin 10:25:15 [workspace] $ git push git@github.com:kangleay/CiphorJS.git HEAD:master 10:25:20 Finished: SUCCESS
  31. 31. What have I done? Commit Git Local Repository Detected by Build and Test Jenkins workspace Git Remote Repository (GitHub) Publish Success As an open source project, people now can check out source from github and enjoy!
  32. 32. Extremely bored? Should I continue?
  33. 33. Automated Web UI Testing <ul><li>A lot of options </li></ul><ul><li>Selenium, Tellurium... </li></ul><ul><li>For simplicity, iMacros </li></ul>
  34. 34. iMacros Just DRY Don't Repeat Yourself
  35. 35. iMacros Works for both IE and Firefox
  36. 36. iMacros Let's do it Actions speak louder than words.
  37. 37. Web Testing
  38. 38. Web Testing
  39. 39. Web Testing
  40. 40. Web Testing
  41. 41. Web Testing
  42. 42. OK, That's the whole story today, Thank you!
  43. 43. Reference Rhino http://www.mozilla.org/rhino/ RhinoUnit http://code.google.com/p/rhinounit/ Jenkins http://jenkins-ci.org/ iMacros https://addons.mozilla.org/en-us/firefox/addon/imacros-for-firefox/ CiphorJS http://www.ciphor.com/wiki/index.php/CiphorJS
  44. 44. Coming soon... <ul><li>Javascript with Ruby flavor </li></ul><ul><ul><li>Ruby Array object </li></ul></ul><ul><ul><li>Ruby Number object </li></ul></ul><ul><ul><li>Ruby String object </li></ul></ul><ul><ul><li>... </li></ul></ul><ul><li>Reflection of Javascript </li></ul><ul><li>Event Listening Extension </li></ul><ul><li>CiphorJS project </li></ul><ul><li>Object oriented way of writing javascript </li></ul><ul><ul><li>Inheritance </li></ul></ul><ul><ul><li>Package importing </li></ul></ul><ul><ul><li>Interface </li></ul></ul><ul><ul><li>... </li></ul></ul>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×