Monday, 23 November 2015

Run the Unit testing of Angular Applications in Visual studio 2015 Test Explorer using Chutzpah Test Adapter

In this post we are going to see how to run the test cases in the Visual Studio Test Explorer using Chutzpah Test Adapter.

Before proceeding with this please refer the following link to install the Jasmine and Chutzpah Test Runner in your applications (Visual Studio)   we have to do the following steps before install the chutzpah test adapter for running the applications in chutzpah test runner.

How to install and Configure the Chutzpah test runner in Visual studio


First to do this we have to install the extension of Chutzpah Test Adapter for visual studio. Already i had installed the chutzpah test runner which is used to run the Js for Testing.

Visual Studio :  Tools - > Extensions and Updates    -> Type Chutzpah in search



























we can see in the above image that Test Runner is already installed, after installing the Chutzpah restart the application, Now give a Rebuild or build in the Visual studio then only applications are get updated. Now Go to View -> TestExplorer and click it. You can see Test explorer updated with some tests, now click Run all.

App Code:


 Test Code:



Test Explorer




In the  above images it shows more cases are failed, but we had written the 6 test cases, then why so many cases are listed it is because of _references.js,  this file have the entry of each js, so when test explorer scans this file it haves our test file also so again the Test file is scanned for testing , for that location it will give error for all test cases so remove the Test File js entry from the _reference.js, Now again Give Build in Solution, we can get the updated test cases now.





above image shows the correct test cases , now click Run all , This will run the test cases, Now we have one issue , a Test case is failed, so we are going to see the details in the Details section. Below image have the detail explanation of test case error. That the expected value is wrong is the issue







From this post you can see how to run the test cases in test explorer of Visual studio using the Chutzpah Test Adapter. By this way you can enable the UI for testing the test cases of Angular Applications. In the Later Post we will see how to test the Applications using Karma JS.



Detail analysis of Chutzpah test runner for Test Driven Development in angular applications in visual studio 2015

In this post we will discuss about some detail analysis of Chutzpah test runner, which will run the unit test case for angular applications.

This is based on the previous post reference
http://dotnetvisio.blogspot.in/2015/11/configure-visual-studio-for-unit.html

As we see in the previous post we are referencing a some js files in the Test.js file, because mock file specifying the Dependencies, now how the test runner know Jasmine Framework, Where it is specified ? How the Dynamic Html is created while debugging or running the tests.

We already installed the JasmineTest using package manager console, because of this we have a controller, Views, Some Jasmine Js in our project . but it is not actually played role while testing. Now we see it in detail, below is the controller code 




Unit Test Code





Now when we start debug the unit test in visual studio, Chutzpah run a dynamic Html in Browser, when we see the Resources of the Page it is clearly shows that the dependencies are loaded which are mentioned in comment and also some other Jasmine files are also loaded in application, but it loads from AppData instead of from project, so Jasmine is loaded from Global.



see the structure of the Spec test runner for Chutzpah. Sequence of Loading the Scripts for Testing.
You can see the Files which are require to test the file other than the dependencies what we specified it is injected by test runner.

Jasmine.css
Jasmine.js
Jasmine-html.js
boot.js















This post may be give the detail analysis of Chutzpah Test Runner for Unit testing the Angular Applications in Visual Studio 

Sunday, 22 November 2015

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.