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 

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. 

    

How Formatted drives or Deleted files and folders are easily recovered from Hard disk ,Pen drive, Memory cards

In this post we are going to see why deleted files and folders are recovered from Hard disk and pendrive. Let we see first what are the different types of disk present. HDD and SSD are the two types present to store a data, 

HDD is the Hard disk Drive which have a plate of Disk coated with magnetic.

                                          


SSD is a Solid State Drive which doesn't have the plates to store the data instead it have a memory chips integrated with the board or separated.

                                          

All the Data are stored in the format of 1's and 0's.

Both the Drive are used to store the data.Now let we see how the operating system are works. Normally when ever users store a data in Drives, it will store the records  in the drive and make a entry in the Sectors table, about the Files and Folders, So File systesm have a pointer to each file in the sector table and have the information about the File like length, start index and end index, name etc

Whenever you give a delete to the File , Operating system checks the File in the Sector table and removes the pointer to the File,and mark the space for available for another write, so now what happens the data is actually present in the disk, but the Pointer to the data is removed from the sector, Again if some file are stored in the Computer now , operating system checks for the available space and make a entry to the Drive, if the storage space is marked for deleted, then it's overwrite the data and make a new entry in sector. Now the existing data is partially over written by another data.

There is a chance that sometimes  storage is not used by file system, so existing data will be available in Hard disk.Now if we have recover tool we can recover the whole data stored in Hard disk, What recover tool will do is read the drive information and gives data So every time if you don't want  others to recover your files from drive then delete it permanently,  

Now days some SSD have a trim concepts that is you cant recover the deleted data, because whenever deletion happens it removes the pointer as well as delete the storage by overwriting the data with empty spaces are full of Zero's.

Keep one thing in mind that Deletion also takes the almost same time as copying because it rewrite the every single block of storage.

Now days because of these reasons only many person's personnel information are recovered by third persons easily form there Hard disk, memory chips and pen drives, Because end users doesn't have knowledge of  concept of storing records in the Drives, so whenever they delete a file or folder , they thought it is deleted from disk or drive, but actually they doesn't that it is retained there in the blocks of actual storage,they doesn't know that only the pointer are removed from the sectors for that file . 

We can easily recover the data from the formatted Drive also, i am also recovered data from my formatted hard disk many times by myself. So Formatting drives also doesn't remove the records,it also can give back your stored data when you tried recover.

So every time while you delete a file or giving the Hard drive to others persons. Delete the data's permanently from the storage. Because it will safe for you as well as for confidential document like PDF, DOC, .music's , videos, etc .. every single block storage files can be recovered from  drives. because every data is 0's and 1's


Now most of the companies are providing the Recover software for the storage Drives while buying itself. From this post you may know why the deleted files are recovered easily from Hard drive or Pen drive or Memory sticks 

Create a directive which will track the model changes and acts as a Converters between the View and the Model using $parsers and $formatters

In this post we are going to see how to create a converters between the View and the Model in angular js. For this we take an example that maintain a history in the model like oldvalue and newvalue in model, but display the newvalue in the view, how we can do this ? This can be only done by the directive which have implemented the ng-model.

Let we see in example: 
We are going to create a Directive which will tracking the model changes .... Let name it as track-change.

First we understand about the $parsers and $formatters.

$parsers : which consists of a collection of functions, where executes when the value  changes in the View. 
                   ie. View -> Model

$formatters: which consists of a collection of functions, where executes when the value changes in the model
                      i.e Model - . View

Now we create a Directive which will track the elements by maintaining the NewValue and OldValue.

Directive:

Controller:
*************************

appRoot.controller('MainController', function ($scope) {
    'use strict';   
     $scope.Product = {};
    
     $scope.sourceList = [{"id":1,"name":"Apple"},
                          {"id":2,"name":"Orange"},
                          {"id":3,"name":"Banana"},
                          {"id":4,"name":"Papaya"},
                          {"id":5,"name":"Jackfruit"}];

    $scope.Product.Selected = $scope.sourceList[0];
    
});

Html:
*************
Use the track-change directive in tag that you implement the ng-model, in this example i am used in select , where whenever user selects the new value, old value is retained in OldValue property, you can see the Model that maintains the history, but in view when we bind it shows only the latest value ,This is because of $formatters.

Output:
*******************

Full Code:
*********************

appRoot.directive('trackChange',function(){
    return{
        restrict:'A',
        require:'ngModel',
        link:function(scope,element,attrs,ngModel){
            
            var historyObject = {NewValue:undefined,OldValue:undefined};
            var OldValue = {};
            var NewValue = {};

            ngModel.$formatters.push(function(value){
                if(historyObject.NewValue!=undefined)
                    return historyObject.NewValue;
                if(value!=undefined){
                    historyObject.NewValue = value;
                }
                return value;
            });
            
            ngModel.$parsers.push(function(value){             
                
                historyObject.OldValue = historyObject.NewValue;;
                historyObject.NewValue =  value;
                ngModel.$setViewValue(historyObject.NewValue);
                ngModel.$render();
                ngModel.$setValidity('is_valid',true);
                return historyObject;
            });
            
        }
    }
})

var appRoot = angular.module('appRoot',[]);

appRoot.controller('MainController', function ($scope) {
    'use strict';   
     $scope.Product = {};
    
     $scope.sourceList = [{"id":1,"name":"Apple"},
                          {"id":2,"name":"Orange"},
                          {"id":3,"name":"Banana"},
                          {"id":4,"name":"Papaya"},
                          {"id":5,"name":"Jackfruit"}];

    $scope.Product.Selected = $scope.sourceList[0];
    
});

<div ng-app="appRoot">
    <div style="margin-left:40px;" ng-controller="MainController">
      
        <br />
        <select ng-change="modelChange()" track-change="" ng-model="Product.Selected" 
                ng-options="prod.name for prod in sourceList" >
        </select>  
        <span style="color:orange">[[Product.Selected]]</span>

</div>
</div>

From this post you can learn how to create a Directive which will track the model changes and acts as a Converters between the View and Model using $parsers and $formatters.