Sunday 5 June 2016

Configure the Visual Studio 2015 for Test Driven Development in Angular Js applications using Jasmine in Chutzpah



In this post we are going to see how we can unit testing the Angular Js application using Jasmine Framework in Visual Studio

Angular Applications can test the unit test cases using the Jasmine Framework By Karma Js or Chutzpah Js,  First Let we see about the Chutzpah, later we can see how we can test the unit test case using karma.

First we have to configure the Visual studio for Chutzpah and jasmine 

1. Install the Chutzpah visual studio extension from the following link 
    https://visualstudiogallery.msdn.microsoft.com/71a4e9bd-f660-448f-bd92-f5a65d39b7f0

2. Open your project in Visual studio and install the Angular js using package manager console window.
Tools ---> Nuget Package Manager ---> Package Manager Console




3. Type  install-package AngularJS.Core  in package manager console and press enter, this command will download the core files needed for angular application

        PM> install-package AngularJS.Core 

4. Type  install-package JasmineTest in package manager console and press enter, This command download the package of jasmine along with tests and controller. Jasmine is a framework used for testing the Js Appplications.

        PM> install-package JasmineTest




you can see above that the files are download for jasmineTest command, A controller, Jasmine Core, Spec Files.


5. Now create a sample app js for angular module




6. Now create a unit test case for app.js , so create a new file Test,js and add the references in comment, i,e the file which are mentioned in reference are loaded by runner by considering it as Dependencies. We can mention the files separately also in Chutzpah configuration file




you can see above we are reference three files two angular js files, one is core and another one is used in mocking i.e testing angular-mocks.js is used for angular testing along with jasmine framework

7. Now right click in the visual studio on the unit test case file and select the Run Js Tests. It will give you the unit test case results.

8. If you want to debug the test case , then place a breakpoint in some case and select the Debugger in Run Chutzpah with  menu option present in right click. Now you can able to debug the application.






While Debugging                          



Above image clear shows how to debug a unit testing js file in Chutzpah, set the debug point in the application.

9. Output Window will look like below, below image consists of lot of test cases so don't bother about that, if the cases are success it is highlighted in green and failed cases are highlighted in red, we can see the error message for failed cases.







Detail explanation of error in the output window





From this post you can see how to configure the visual studio for Unit testing the Angular js Application using jasmine in Chutzpah. In the future post we can see how we can configure the Karma Js in visual studio for testing the Angular unit test cases. 

    

No comments:

Post a Comment