Visual Studio requires a number of tools to be installed before you can work with AngularJS.
First install http://chocolatey.org/ – Follow install instruction on the site.
Setting up the Node.js environment
Now we can use chocolatey to install a number of programs. Run the command prompt as administrator and run the following command:
choco install nodejs.install
This will install nodejs and npm onto your machine.
If you don’t like chocolatey, you can always install them manually:
Install Node.js from http://nodejs.org/dist/v0.10.28/x64/node-v0.10.28-x64.msi (v0.10.28)
Download npm – grab zip file from here: http://nodejs.org/dist/npm/ and put it in the same folder as node.exe
Install Node.js Tools for Visual Studio
You can get it from http://nodejstools.codeplex.com
This will bring Node.js and npm integration to Visual Studio and you will see new options to create Node.js projects.
Node.js Tools for Visual Studio has user interface support for installing npm packages but you can do a similar approach with NuGet and command line. To get access to a convenient way to launch the command line for Node.js, install Productivity Power Tools extension for Visual Studio: https://visualstudiogallery.msdn.microsoft.com/dbcb8670-889e-4a54-a226-a48a15e4cace
Now you can right -click on the test project node in Solution Explorer and navigate to Power Commands -> Open Command Prompt
Install AngularJS package
Run the following command in NuGet Package Manager Console:
To see a list of potential updates that can be applied, run the folowing:
To install Karma, run following npm commands:
npm install karma --save -dev npm install karma-jasmine karma-chrome-launcher --save-dev
Also there are packages that can be installed in the Node.js installation folder and they will have global scope, which allows to execute Karma directoly from any Node.js project that has a Karma package installed
npm install -g karma-cli
Execute following command line:
karma init karma.conf.js
This will create Karma configuration file that will be used to locate the tests and exectue them against browsers you want and produce test output.
Accept all the default answers to series of questions following next in the command window by pressing Enter.
Default testing framework to be used is Jasmine Use Require.js: No Browser used to run tests: Chrome File inclusions: do not specify any File exclusions: do not specify any Whether you want to run test each time file is changed: yes
Now open file karma.conf.js in editor and include external files, app code and tests similarly like this:
// list of files / patterns to load in the browserS files: [ //external files 'packages/AngularJS.Core.1.3.14/content/scripts/angular.js', 'packages/AngularJS.Core.1.3.14/content/scripts/angular-mocks.js', //App code 'ng/services/SharedServices.js', 'ng/modules/List/ListModule.js', 'ng/modules/List/ListController.js', 'ng/modules/List/DetailModule.js', 'ng/modules/List/DetailController.js', //Tests 'tests/unit/controllers/List.tests.js', ],
Creating unit tests with Jasmine
BDD defines tests as desired behaviour, where the test outcome is specified first, followed by the actual test assertion.
Jasmine uses describe/it syntax while others use Given/When/Then. A simple test should be like this:
Run Karma tests
Run Karma tests from the Node.js project command window by executing the command:
karma start karma.conf.js
This will launch Chrome Browser you specified earlier and you will see results in command line console:
Install Visual Studio Adapter for Google’s Karma Test Runner
Use an additional test reporter provided by the karma-xml-reporter npm package which will convert the test results to a Visual Studio friendly format. Download it from https://visualstudiogallery.msdn.microsoft.com/bfe6feb7-7ec4-4e8e-9d90-cf6ea2cd2169 or execute command:
npm install karma-xml-reporter --save-dev
Restart Visual Studio. This will itegrate test results from Karma Test Runner into Visual Studio.
Enable Run Tests After Debug
Go to Visual Studio menu option under TEST | Test Settings and enable Run Tests After Build
Note: test-results.testxml file should be added into your Visual Studio project to display unit tests in Test Explorer window
That’s it folks!
Join 164 other followers and receive monthly newsletter and free bonus
Ivan Grigoryev's Blog
Living in New Zealand. Blogging about the country, beautiful places, everyday life.
Do a skydive - halfway completed; get 1400 - still working on; reach 300kph - completed by 96.6%