The document discusses setting up continuous integration for a JavaScript project using Jenkins. It describes configuring Jenkins to run unit tests with RhinoUnit after checking out the code from a GitHub repository. Jenkins fetches the latest code, runs the unit tests via an Ant target, and reports the results, allowing for continuous integration and automated testing of the JavaScript project.

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 ...