angular-mock.js conflicts with htmlunit? How to test angular application using angular-mock.js in maven-jasmine

angularjs, htmlunit, jasmine-maven-plugin, mocking, unit-testing

Solution

In the CHROME browser version the error occurs when angular tries to load JQLite a api-compatible subset of the jQuery library that allows angular to manipulate the DOM. I was able to fix the issue by downloading uncompressed versions of jQuery (v1.10.2), angular (v1.0.7), and angular-mocks (v1.0.7). I added the following to the configuration in the jasmine-maven-plugin.

<preloadSources>
  <preloadSource>${angular-test-deps}/jQuery.js</preloadSource>
  <preloadSource>${angular-test-deps}/angular.js</preloadSource>
  <preloadSource>${angular-test-deps}/angular-mocks.js</preloadSource>
</preloadSources>

The angular documentation states that "Real jQuery always takes precedence over jqLite, provided it was loaded before `DOMContentLoaded` event fired" (line 1448 of uncompressed 1.0.7). This fix still fails with the CHROME browser version but works with FIREFOX_3_6, FIREFOX_17, INTERNET_EXPLORER_9, INTERNET_EXPLORER_8, and INTERNET_EXPLORER_7. The jasmine-maven-plugin defaults to the FIREFOX_3_6 borwser version so there is no need to specify a browser version.

Problem

I'm new to maven and jasmine, and I have a problem setting up maven to run unit tests on an angular application. I get into trouble as soon as I add angular-mocks.js to the test/javascript/lib folder. `mvn test` throws a `htmlunit.ScriptException` just by adding the angular-mocks file. If I remove the file, it runs just fine (without the parts relying on mocking of course, but they fail as a unit test rather than throwing an error). Does anyone know what could cause this error and how to fix it? EDIT I stronly suspect that this is a htmlunit problem, because the error differs when changing the `<browserVersion>`: CHROME gives: TypeError: Cannot find function attachEvent in object [object HTMLDocument]. (`http://localhost:55408/src/lib/angular.js#1568`) FIREFOX_3_6 gives: Exception invoking Node.removeEventListener() with arguments [String, NativeArray, Boolean] INTERNET_EXPLORER_9 gives: Exception invoking Node.detachEvent() with arguments [String, NativeArray] Stack trace (excerpt FF): ``` [ERROR] Failed to execute goal com.github.searls:jasmine-maven-plugin:1.3.1.2:test (default) on project my-jasmine-project: The jasmine-maven-plugin encountered an exception: [ERROR] java.lang.RuntimeException: org.openqa.selenium.WebDriverException: com.gargoylesoftware.htmlunit.ScriptException: Exception invoking Node.removeEventListener() with arguments [String, NativeArray, Boolean] [ERROR] Build info: version: '2.32.0', revision: '6c40c187d01409a5dc3b7f8251859150c8af0bcb', time: '2013-04-09 10:39:28' [ERROR] System info: os.name: 'Mac OS X', os.arch: 'x86_64', os.version: '10.8.4', java.version: '1.6.0_51' [ERROR] Driver info: driver.version: HtmlUnitDriver [ERROR] at com.github.searls.jasmine.runner.SpecRunnerExecutor.execute(SpecRunnerExecutor.java:39) ... ``` pom.xml (excerpt): ``` <plugin> <groupId>com.github.searls</groupId> <artifactId>jasmine-maven-plugin</artifactId> <version>1.3.1.2</version> <configuration> <preloadSources> <source>lib/angular.js</source> <!-- <source>lib/angular-mocks.js</source> --> <source>http://code.angularjs.org/1.1.5/angular-mocks.js</source> </preloadSources> </configuration> <executions> <execution> <goals> <goal>test</goal> </goals> </execution> </executions> </plugin> ``` Both adding angular-mocks.js to the test/javascript/lib folder and referencing it directly from the angularjs website give the same error.

Original source