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

Question

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.

Answer 1

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.