Inject Module Dependancies into Unit Tests

When setting up unit tests for a module you need to make sure that your test harness is aware of any dependancies that module has. It doesn't stop there though; you also need to make sure that you include the dependancies of your dependancies. And so it goes on. Thankfully all dependancies are injected in the same way.

Set Up Tests with Jasmine

Since I've been trying to do my entire build process through Grunt I've had to rethink how testing works. Up until recently I've either been using Visual Studio plugins (Chutzpah or ReSharper) or Protractor as a macro in WebStorm. Both of these require a very specific configuration in order to run Jasmine tests. The same is true for setting up Jasmine testing in Grunt. However, what doesn't change is how to actually write the tests. Once you've got the configuration for your particular test harness setup this is how to structure tests.

Use ngInit to Track $index in Nested ngRepeats

Recently some colleagues of mine were trying to do some conditional logic on an input element buried away in a couple of ngRepeats based on the index of the first ngRepeat. They were getting into a pickle using $scope.$parent.$parent.$index. When they were printing out the $index it was giving them the answer they wanted, but then didn't behave in the same way when used within their logic on the input element. It turned out that this input was one $parent further away and they querying the wrong scope. This is the time to use ngInit.

Use Jasmine to Run Tests as Part of the Grunt Process

I've been using Jasmine to runt Unit tests for a while now, but I've always triggered them manually through WebStorm. This is fine as long as I remember to trigger them, which most of the time I don't. I've recently started a new project at work and have been able to define a new process as part of it. This has been a great opportunity for us to learn from the mistakes that we've previously made and think about how we can try to avoid them this time. As part of this we've decided to build our unit testing into our development process. We've set it up so that if our tests don't pass, then the code doesn't get published to the output file and therefore can't be loaded into the browser. Using watch to chain our tasks means that we know the moment we've saved our files whether or not our code works as we want it to.

Use ng-annotate with Grunt in WebStorm

After my last post on using $inject for protecting your dependancy injection against minification I did some further reading on ng-annotate. In his style guide, John Papa says that he uses $inject because it mirrors the technique used by ng-annotate, which he uses to automatically create minification safe dependancies and here is how you can too.

Use $inject for Better Dependency Injection

By now we should all be aware that if you minify your AngularJs code without building in some protection against it, then we can easily lose the references we've entered into the factory / controller / etc. without realising until we fill the console up with errors. Since the beginning I've been using the traditional inline array style protection. This is fine if you have only a couple of dependancies, but soon becomes a readability nightmare when you have any more. Whilst reading through the AngularJs Style Guide by John Papa I came to his recommendation of using $inject. I'm now a convert.

Install and Use the AngularJs Batarang for Chrome

When I first started using AngularJs I did a lot of reading (as one might expect). In one of the books I read it kept mentioning the batarang, but never really explained what this was or how to use it. I eventually went off and Googled it. Not much came up but the Chrome extension itself, and so my team and I had to muddle through and teach ourselves how to use it. Writing this post has been on my list for a long time because I think it's one of the most important tools in your kit as an AngularJs developer.