JavaScript Unit Testing

Modern web applications use various java-script code to provide better interactivity and responsiveness. For example, java-script libraries like JQuery, KnockoutJS, DurandalJS, RequireJS and etc. So now we need to have proper environment for test java-script code. This will be a different challenge than server side testing.

In this demo I'll show how to test small java-script code which will calculate two input values. For testing, I'll use QUnit, which was written by JQuery team to test JQuery.

Create ASP.net MVC internet application. In HomeController add Demo Action and related view.

As you can see I have used HTML5 data bindings with KnockoutJS. Add calculate.js file with following scripts. If you are not familiar with KnockoutJS, you can read my previous posts.

When a user enter Number1, Number2 and press Add, then calculation will happen and total will be shown. Run this application and try it.

Now we have to test java-script code we wrote in calculate.js.

Download QUnit java-script file and QUnit style-sheet file from QUnit site. Add those files to Scripts and Content folders appropriately.
It's better to create tests separately. So we can add a new ASP.net MVC Area called Test.

Add DemoController and Index action and related view. In Index view add refrences for QUnit style sheet and QUnit java-script files. Also we need to add JQuery, Knockout and calcualte.js files, because calculate.js file requires those java-script libraries. Also add two div elements, which requires for QUnit. Give id for those div elements like below.

CalculateTest.js file is the java-script file which we wrote tests. Content of CalculateTest.js file is like below.

The test function and equal functions are specific to QUnit. In this file there's a test scenario called Calculate Test. Within that, I have created CalculateVM and set num1 and num2 appropriately, then call calculate function. After that, test whether total is correct or not. Run the application and go to /Test/Demo/. Result will be like below.

Now change expected value as 31.

Then result will have errors.

You can find the source of this demo in GitHub.

TFS Branching

The key goal of branching is to provide isolation between parallel streams of work. Branching enables parallel development by providing each development activity a self-contained snapshot of needed sources, tools, external dependencies and process automation. Having more branches increases complexity and merge costs.

You can have different kinds of branches like Dev, Stable, Release, Feature and etc. We can add permissions to each branch. We have to merge the changes from child to parent branch and vise versa.
You can refer Branching and Merging Guide for more details about these new features in TFS.

In this post I'll explain how to do a Basic Branch Plan using Team Foundation Service.

Below is the structure of Basic Branching of source code.

You need to install TfsBranchToolVSExtension.vsix. To do that download the source code from codeplex. Rebuild the TfsBranchToolVSExtension using Visual Studio 2012. You must have installed,

• TFS 2012 Object Model (OM) 
• Visual Studio 2012 SDK

After build the project go to bin folder and install the TfsBranchToolVSExtension.vsix file into Visual Studio 2012.
Go to a project collection in Source Control Explorer. There will be only your solution folder and the build process templates. For this demo I have created my project collection in  Team Foundation Service.

Apply initial branching structure like below.

In the dialog you can select Basic, Feature or MainOnly branching structures. But if you want more branching types you have to do appropriate changes for the downloaded codeplex project. For this demo, select Basic Branch plan and apply it.

After the branch plan has applied, new branches(Dev and Main) will be added like below.

For more details about Branching Plans, go through the Branching and Merging Guide.