Testing of javacript

  • 4,190 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
4,190
On Slideshare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
17
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Testing Javascript
    • Lei Kang @ Kiwiplan
  • 2. Do you want...
    • Unit Testing of JavaScript code?
    • Continuous Integration?
    • Automated Testing for JavaScript intensive Web App?
  • 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. My itches of JavaScript
    • Object Oriented Javascript
    • Javascript with Ruby’s flavor
    • Distributed Event Registering and Triggering
    • Reflection of Javascript
    • Unit Testing
    • Continuous Integration for Javascript Project
    • Automated Web UI testing
  • 5. Today’s Story
    • Unit Testing using Rhino and RhinoUnit
    • Continuous Integration using Jenkins(Hudson)
    • Automated Web UI testing using iMacros
  • 6. Rhino?
  • 7. Rhino is
    • An open-source implementation of JavaScript written entirely in Java. It is typically embedded into Java applications to provide scripting to end users.
    http://www.mozilla.org/rhino/
  • 8. Rhino now
    • The Mozilla Rhino engine for the JavaScript programming language, is currently included as a feature in the JDK 6 and JRE 6 libraries.
  • 9. Rhino can
    • Run JavaScript inside Java
    ScriptEngineManager mgr = new ScriptEngineManager(); ScriptEngine jsEngine = mgr.getEngineByName("JavaScript"); try { jsEngine.eval("print('Hello, world!')"); } catch (ScriptException ex) { ex.printStackTrace(); }
  • 10. Rhino can
    • Run Java inside JavaScript
    importPackage(javax.swing); var optionPane = JOptionPane.showMessageDialog(null, 'Hello, world!');
  • 11. Rhino can
    • Run in the Terminal: Linux, Windows and MacOS X: jrunscript
    • $ sudo apt-get install rhino; js
  • 12. already feeling impatient?
    • Here comes RhinoUnit
    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. What RhinoUnit can do
    • Almost the same APIs with JUnit
      • string and object comparisons
      • regexp comparisons
      • collection comparisons (contains, containsExactly, etc)
      • ensure that a function has been called (by wrapping it with assert.mustCall(), or using an assert.functionThatMustBeCalled()).
      • ensure that an exception is thrown (using shouldThrowException(...)
      • ensure that the global namespace isn't polluted by poor variable scoping. (I will talk about it later)
  • 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. 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. Our Ant build.xml
    • <project name=&quot;CiphorJS&quot; basedir=&quot;.&quot; default=&quot;run-unit-tests&quot;>
    • <scriptdef name=&quot;rhinounit&quot;
    • src=&quot; lib/rhinounit/src/rhinoUnitAnt.js &quot;
    • language=&quot;javascript&quot;>
    • <attribute name=&quot;options&quot;/>
    • <attribute name=&quot;ignoredglobalvars&quot;/>
    • <attribute name=&quot;haltOnFirstFailure&quot;/>
    • <attribute name=&quot;rhinoUnitUtilPath&quot;/>
    • <element name=&quot;fileset&quot; type=&quot;fileset&quot;/>
    • </scriptdef>
    • <target name=&quot;run-unit-tests&quot;>
    • <rhinounit options=&quot;{verbose:true, stackTrace:true}&quot;
        • haltOnFirstFailure=&quot;false&quot;
        • rhinoUnitUtilPath=&quot;lib/rhinounit/src/rhinoUnitUtil.js&quot;>
    • <fileset dir=&quot;test&quot;>
    • <include name=&quot; Test*.js&quot; />
    • </fileset>
    • </rhinounit>
    • </target>
    • </project>
    I am sure you know how to do the next
  • 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. 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. Continuous Integration
    • Why do we need CI?
    • Can we use CI for Javascript Project?
    • Which CI system are we going to use?
    • How to do it?
  • 20. Jenkins jenkins-ci.org Jenkins Jenkins
  • 21. Jenkins
    • Formerly known as Hudson
    • Free to use (applause!)
    • Written in Java
    • Distributed by jenkins.war (Easy to deploy)
    • Native package for ubuntu
  • 22. How I use it
    • A Javascript Project in Eclipse
    • Using git for version controlling, you need a git plugin for eclipse
    • Source code hosted on GitHub ( github.com )
    • Unit tested by RhinoUnit (Ant)
    Interested in Git?
  • 23. Let Jenkins working with github
    • Install Github plugin
    • Install Git plugin
  • 24. Let Jenkins working with github
    • Create a new job for your project
  • 25. Let Jenkins working with github
    • Set Ant Target to run
  • 26. Let Jenkins working with github
    • Set Git Publisher
    • Optionally push merge results, tags, and/or branches to remote repositories.
  • 27. Let Jenkins working with github
    • Generate SSH key and add it to GitHub
    • Set Git autentication info in Jenkins workspace
    $ git config user.name “your.name” $ git config user.email “your.name@email.com”
  • 28. Hooray!
  • 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. 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. 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. Extremely bored? Should I continue?
  • 33. Automated Web UI Testing
    • A lot of options
    • Selenium, Tellurium...
    • For simplicity, iMacros
  • 34. iMacros Just DRY Don't Repeat Yourself
  • 35. iMacros Works for both IE and Firefox
  • 36. iMacros Let's do it Actions speak louder than words.
  • 37. Web Testing
  • 38. Web Testing
  • 39. Web Testing
  • 40. Web Testing
  • 41. Web Testing
  • 42. OK, That's the whole story today, Thank you!
  • 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. Coming soon...
    • Javascript with Ruby flavor
      • Ruby Array object
      • Ruby Number object
      • Ruby String object
      • ...
    • Reflection of Javascript
    • Event Listening Extension
    • CiphorJS project
    • Object oriented way of writing javascript
      • Inheritance
      • Package importing
      • Interface
      • ...