Adventures with AngularJS 1.3

The new AngularJS (specifically v1.3) offers many new features and under-the-hood improvements. For details about this release you should check out the changelog.

There are a few breaking changes and I want to discuss one in particular that gave me headaches. Let’s say you have a directive such as this one:

Your unit test for this directive would be like this (as an example here, I’m using Jasmine):

If you run the above unit test in 1.2.*, it will pass. In angular 1.3.*, it will not.

The reason is due to changes to the ngIf directive. The initial element bound to the directive is a simple HTML comment when loaded, because the condition is false. Before, this comment node had access to the child scope generated by the directive (by calling the angular.element object’s method scope()). This is no longer the case, this html directive will NOT return the child scope of the directive and your unit tests will fail.

I have not found a solution for this problem and ended up wrapping the ngIf directive in a common div, avoiding the HTML comment entirely. A proper solution for this problem would be appreciated!

This is a just heads up to one of the issues you may have when upgrading your angular apps and you find yourself stuck debugging your unit tests! Happy coding!

Related posts

Comments are closed.