jueves, febrero 23, 2012

If there ain't all that much to lug around, Better run like hell when you hit the ground. When the morning comes. (This Too Shall Pass - Ok Go)

Javascript has become much more important to interactive website development than five years ago. With the advent of HTML 5 and new Javascript libraries like jQuery and all libraries that depends on it, more and more functionalities are being implemented using Javascript on client side, not only for validating input forms, but as UI creator or Restful interface to server side.

With the growing use of Javascript, new testing frameworks have appeared too. We could cite a lot of them but in this post I am going to talk only about one called Jasmine

Jasmine is a BDD framework for testing Javascript code. It does not depend on any other JavaScript framework, and uses a really clean syntax, similar to xUnit framework. See next example:

To run Jasmine, you should simply point your browser to SpecRunner.html file which will contain  references to scripts under test and spec scripts. An example of SpecRunner is shown here:

From my point of view, Javascript has become so popular thanks to jQuery, which has greatly simplified the way we wrote Javascript code. And you can also test jQuery applications with Jasmine using Jasmine-jQuery module, which provides two extensions for testing:

  • set of matchers for jQuery framework like toBeChecked(), toBeVisible(), toHaveClass(), ...
  • an API for handling HTML fixtures which enable you to load HTML code to be used by tests. 
So with Jasmine you can test your Javascript applications; but we still have a small big problem. We should launch manually all tests by opening SpecRunner page into browser. But don't worry, exists jasmine-maven-plugin. This plugin is a Maven plugin that runs Jasmine spec files during test phase automatically, without needing to write SpecRunner boilerplate file.

So I suppose you want to start coding. We are going to create a simple jQuery plugin in standard Maven war layout, where Javascript files go to src/webapp/js, css at src/webapp/css and Javascript tests at src/test/javascript. Of course this directory structure is fully configurable, for example if your project was a Javascript project, src/main/javascript would be better place. Next image shows you directory layout.

Let's start. First of all we are going to create a css file which will define a red class. Not complicated code:

Next step, create a js file containing jQuery plugin code. It is a simple plugin that adds red class to affected element.

And finally html code that uses previous functionality. Not much secret, a div element modified by our jQuery plugin.

Now it is time for testing. Yes I know write tests first, and then business code, but I thought it will be more appropriate to show first the code to test.

So let's write Jasmine test file.

First thing to do is add a description (behaviour) of what we are going to test with describe function. Then with beforeEach, we are defining what function we want to execute before each test execution (like @Before JUnit annotation). In this case we are setting our fixture to test plugin code, you can set an html file as template or you can define html inline as done here.

And finally the test, written inside it function. Our test should validate that div element with id content, defined in fixture, should contain class attribute with value red after running redColor function. See how we are using jasmine-query toHaveClass matcher.

Now we have got our Javascript test written and it is time to run it, but instead of using SpecRunner file, we are going to make Jasmine tests being executed by Maven during test phase.

Let's see how to configure jasmine-maven plugin.

First thing to do is register plugin into pom.

And then configure plugin with required parameters. In two first parameters (jsSrcDir and jsTestSrcDir) we are setting Javascript locations for production code and testing code.  Since we are writing tests for jQuery plugin in Jasmine, both jquery and jasmine-jquery libraries should be imported into generated SpecRunner, and this is accomplished by using preloadSources tag.

All these parameters will change depending on your project but in case you are creating a Maven war project, this layout is enough.

And now you can run Maven by typing:

mvn clean test

And next console output should be printed:

I think we have integrated Javascript tests into Maven in an easy and clean way; and now our continuous integration server (Jenkins or Hudson) will run Javascript tests too. If you are planning to mount a continuous delivery system with your next project, and this project will contain Javascript file, take in consideration using Jasmine as BDD tool because it suits perfectly with Maven.

I wish you have found this post useful.

Download code

Music: http://www.youtube.com/watch?feature=player_embedded&v=qybUFnY7Y8w#!

4 comentarios:

Javin @ spring interview question answer dijo...

Very nice information on javascript. thanks for sharing.

Alex Soto dijo...

Hi Javin, thank you very much for your comment. I am happy you have found useful.

chenlina dijo...

michael kors handbags
louis vuitton outlet stores
coach outlet
coach outlet
ghd hair straighteners
louis vuitton outlet
adidas nmd
toms shoes
true religion outlet
ray ban sunglasses discount
oakley sunglasses
louis vuitton bags
michael kors outlet
louis vuitton
hermes handbags
nike trainers men
ray ban sunglasses
nike free runs
pandora jewelry
cheap nfl jerseys
cheap air jordans
gucci handbags
louis vuitton handbags
burberry bags
louboutin shoes
michael kors outlet online sale
michael kors purses
adidas superstar
oakley sunglasses
beats by dr dre
gucci belts
coach factory outlet online
cheap oakley sunglasses
michael kors outlet
louis vuitton handbags
coach factory outlet
oakley canada
toms wedges
louis vuitton
coach outlet

Gege Dai dijo...

mulberry handbags
ralph lauren outlet
nba jerseys
coach outlet online
rolex outlet
ralph lauren outlet
fitflops sale clearance
swarovski jewelry
true religion jeans sale
tiffany and co
michael kors handbags
ray-ban sunglasses
cheap jordan shoes
coach outlet
cazal outlet
michael kors handbags
mulberry handbags
abercrombie outlet
fitflops outlet
tiffany outlet
nike huarache
oakley sunglasses wholesale
ferragamo shoes
ray ban sunglasses
cheap nba jerseys
gucci outlet
cheap mlb jerseys
michael kors outlet
michael kors outlet
police sunglasses for men
michael kors handbags
michael kors outlet
michael kors outlet online
coach outlet

Donate If You Can and Find Post Useful