Recently, we have converted a few portlets to use AngularJS for the front end. We have also used the Jasmine framework for unit testing. Since our portlets are already configured with Maven, we have added Jasmine support with jasmine-maven-plugin to the existing set up. This posts will walk you through the configuration required to run Jasmine tests with Maven.
Portlet directory layout
| |——– src
| | | ——– main
| | | | ——— webapp
| | | |————- js
| | | ——– test
| | |———— webapp
| | | |————- js
Our angularJs files are contained in src/main/webapp/js directory. Jasmine spec files are placed in a test directory that reflects main.
Based on the directory structure, we can configure jasmine-maven-plugin. we are using version 2.0 which requires Maven 3.1.x. This is an example plugin configuration for our portlet:
<build> … <plugins> … <plugin> <groupId>com.github.searls</groupId> <artifactId>jasmine-maven-plugin</artifactId> <version>2.0</version> <executions> <execution> <goals> <goal>test</goal> </goals> </execution> </executions> <!-- keep the configuration out of the execution so that the bdd goal has access to it --> <configuration> <jsSrcDir>src/main/webapp/js</jsSrcDir> <sourceIncludes> <include>app.js</include> </sourceIncludes> <jsTestSrcDir>src/test/webapp/js</jsTestSrcDir> <specIncludes> <include>*Spec.js</include> </specIncludes> <preloadSources> <source>webjars/angular.js</source> <source>webjars/angular-sanitize.js</source> <source>webjars/angular-mocks.js</source> <source>webjars/jquery.js</source> </preloadSources> </configuration> </plugin> … </plugins> … </build>
<dependencies> <!-- jasmin maven plugin dependencies --> <dependency> <groupId>org.webjars</groupId> <artifactId>jquery</artifactId> <scope>test</scope> </dependency> <dependency> <groupId>org.webjars</groupId> <artifactId>angularjs</artifactId> <scope>test</scope> </dependency> <!-- for headful tests <dependency> <groupId>org.seleniumhq.selenium</groupId> <artifactId>selenium-firefox-driver</artifactId> <scope>test</scope> </dependency> --> </dependencies>
<sourceIncludes> specifies which files within jsSrcDir should be included and in which order (added sequentially as defined)
<jsTestSrcDir> points to directory with your Jasmin specs
<specIncludes> specifies which spec files to include and in which order
Out of the box, jasmine-maven-plugin comes preconfigured with PhantomJS for headless tests. For headful tests, configure the plugin with a different driver, such as:
Jasmine can be used for TDD (Test Driven Development). Run
This will fire off the browser at http://localhost:8234 and run the specs from the test directory whenever you refresh the page. This will give you an immediate feedback as you develop your angular controllers etc.
will run the headless tests by default, unless configured otherwise.
mvn clean test
will run all your tests in the portlet, including Jasmine headless tests provided there were no test failures before.
With this configuration we are now ready to write Jasmine specs for our portlets.