AngularJS testing using Jasmine + Karma in Visual Studio 2013

Question

I am new to Angularjs framework and also testing it using Jasmine framework and Karma. I have a ASP.NET MVC app built with Visual Studio 2013 and I would like to include Jasmine package and Karma in order to test js.

Maybe this issue is already discussed here, but could you please show a tutorial or a demo of how to include a Jasmine file, and test it and show the results? For testing spa app is Jasmine and Karma the best choice?

Could you please show me some steps of where to include Jasmine in project and how to bind it with my .js in order to test it?

Enlightenment

Answer 1

I ran into the same issue - all of the tutorials seem to be based on Node.js. However, I found some excellent resources to get started with from the Chutzpah Javascript Test Runner project. Chutzpah appears to support QUnit, Jasmine, and Mocha testing frameworks. Essentially, install the packages/extensions listed below, follow the Jasmine tutorials for building out unit tests on the Pivotal Gist (or the Angular demo), and you'll be able to right-click (to pull up the context menu) on a Javascript test and run it (selecting the option "Run JS Tests"). Hope these resources help!

Visual Studio Extensions:

• Chutzpah Test Adapter for Test Explorer (VS2012/2013 support)
• Chutzpah Context Menu Extension (VS2012/2013 support)
• Jasmine NuGet Package

Tutorials

• Yuriy Tyukhnin's tutorial
• Rosher Consulting's tutorial

Edit: Because it has been linked here, I also threw a blog post together about this - http://codeforcoffee.org/Setting-Up-Angular-JS-Jasmine-and-Karma-in-Visual-Studio

Dragonhead

@code4coffe - thanks for the blog post - it helped me a lot. One thing I wanted to ask please. I had to add references for the MainCtrl.js, angular-mocks.js and angular.js to get the tests to pass with the Chutzpah ,which I assume is normal, Is it? – Cadenza

@Cadenza sounds right. I have to do the same myself. You can select all files in the solution explorer an then click+drag them into your test file to auto-include them using the ///path-to-file.js syntax. You'll need to make sure they're in proper dependency order for (such as jQuery before Angular) but that's the case with any script dependency. – Dragonhead