configure CruiseControl.NET(ccnet) and integrate with mstests using msbuild

Intro:

To setup a continuous integration process for a sample project and integrate mstest into the build.

Continuous integration:

Automated process for preparing your code for deployment generally involves running build

Scripts and unit tests, staging a release, tracking changes, and notifying dev. team of problems.

CruiseControl.NET:

(CCNet) is an Open source continuous integration (CI) server.it automatically build with every commit,

run unit tests, record results and track build history.

Build process:

Developer commits code and build server retrieves from source control, compiles code, run unit tests.

Build script:

Script whose primary purpose is to compile your main project and prepare it for release

ex:msbuild

Integrating MSTest into your build

You can use MSTest.exe to execute your MSTest unit tests from the command-line. You can find a list of the MSTest.exe command-line options here. You will need to using the /resultsfile: command-line option in order to get MSTest to log the test results to file so that they can be included in the build report.

MSTest.exe can be invoked from your MSBuild script.

Installation:

Let's try to set up a CCNet server to continuously integrate our project.

·         Go to http://sourceforge.net/projects/ccnet/ and Download CruiseControl.Net-1.8.4.0-Setup.exe

·         Run this exe with default options, after that a service will be created with name “CruiseControl.NET Server” and also a folder “CruiseControl.NET” will be created in program files(in general C:\Program Files (x86)\).

·         CCNet is able to work standalone or as a Windows service. If you plan to use CCNet as a production CI server, it surely should run as a Windows service. Standalone mode is very helpful while configuring and troubleshooting the server. Note that the CCNet Windows service will not be started automatically after the installation. for this demo we are running ccnet as windows service.

·         Go to services.msc and click start on CruiseControl.NET Server service.

After running the setup, a site named ccnet will be created in iis. If that doesn’t happen follow the below steps:

Creating a ccnet Website in IIS:

·         Open inetmgr(make sure iis installed in your machine) from run and go to “Sites” and right click on it,Select Add Web Site

·         Give “ccnet” against Site name field,

·         Give “C:\Program Files (x86)\CruiseControl.NET\webdashboard” against Physical Path field,

·         Give ”523” against Port field

·         Leave remaining with defaults and click on Ok. Now a site with name “CCNet” will be created in IIS.

Now the CCNet installer is able to prepare everything on the IIS for the Web Dashboard. This way, you will only have to configure your CCNet instance to make it work.

·         Expand ccnet and right click on ccnet site and select “Switch to content view”

·         Now files will appear on right panel, among them select default.aspx and right click on it and select browse.

·         Browser will open a site http://localhost:523/ViewFarmReport.aspx”

If error shows up like : This configuration section cannot be used at this path. This happens when the section is locked at a parent level. Locking is either by default (overrideModeDefault="Deny"), or set explicitly by a location tag with overrideMode="Deny" or the legacy allowOverride="false". 

Follow the below steps to resolve:

• Click "Start button"
• in the search box, enter "Turn windows features on or off"
• in the features window, Click: "Internet Information Services"
• Click: "World Wide Web Services"
• Click: "Application Development Features"
• Check (enable) the features. check all but CGI

We have not configured project for cruise control yet. So far we have installed cruise control.net as windows service and created ccnet site in IIS.

Working environment with a repository:

Creating a project that contains unit tests

·         Create a unit test project from visual studio and created a class with simple assert(not a real scenario, its only a sample to test) as below:

[TestClass]

    public class Test

    {

        [TestMethod]

        public void Test1()

        {

            Assert.AreEqual(“test”, “test”);

        }

    }

Solution and project name is “sampletest”.

Choosing source control and creating repository and pulling data from source control to cruise control:

I have chosen tortoise svn as my source control.Follw the below steps to run it

·         Go to http://tortoisesvn.net/downloads.html and download TortoiseSVN 1.8.6.exe

·         Run the exe with default options, a folder with name “svn_repos” will be created in the respective directory (in general C:\)

Some basics on tortoise svn:

SVN Usage Diagram:

·         This diagram illustrates the basic usage of an SVN repository.  Developers commit changes to the SVN and generally one person would be responsible for exporting to production at regular intervals.

SVN repo vocab:

·         Import: To copy files into a repository.

·         Checkout: To copy files out of a repository with version data. The inital checkout creates your working copy. This is to copy the code from the repository to the computer you use for developing the code.

·         Commit: To copy files that have a modified date more recent than what is in the repository. Commit also perform actions previously indicated by various function like add, delete, move, rename.

·         Update: To copy files from that repository that have more recent changes than your local version.

Importing your Code:

·         Select a project and right click on it and select import and give file:///C:/svn_repos/trunk/sampletestrepo against URL of repository field and click on ok.( Navigate to the sampletest project we have created and right click on it and select import.here am using my local system as SVN repository(web server) so file:///)

Checkout:

·         Check out in D: drive by right click and select SVN Checkout from context menu. Give “D:\Machine1Repo” against Checkout directory and don’t change the URL of repository field (it should be filled with “file:///C:/svn_repos/trunk/sampletestrepo”).click ok.

·         Here using Machine1Repo as one of the dev. machines.

·         Check out in E: drive by right click and select SVN Checkout from context menu. Give “E:\Machine2Repo” against Checkout directory and don’t change the URL of repository field (it should be filled with “file:///C:/svn_repos/trunk/sampletestrepo”).click ok.

·         Here using Machine2Repo as ccnet server.

Configure ccnet:

·         Basically tortoise svn is a shell extension. It cannot be called from command prompt. So it should be downloaded manually.

·         To run svn.exe from command prompt you have to install subversion from http://www.collab.net/downloads/subversion, download Subversion 1.8.8 (Windows 64-bit)

All the configuration files we’re going to talk about are placed or are to be placed in C:\%ProgramFiles%\CruiseControl.NET\server.

Open ccnet.config and modify it as shown in below:

ccnet.config is an xml file with a root element named <cruisecontrol> and a child element, named <project>, for each set of activities that we want CruiseControl.NET to execute, as shown in the following example:

<cruisecontrol>

<project name="project1">

    ...

  </project>

<project name="project2">

    ...

  </project>

</cruisecontrol>

Source Control Block:

Source Control configuration block tells CruiseControl.NET that the project named “CruiseControlSampleTestDemo” is bound to a Subversion repository.
This means that the task performed when executing this project depends on the status of that particular Subversion repository.As soon as CruiseControl.NET detects a new revision in the repository it updates its working copy and executes the tasks related to the current project.

Here we are getting data from svn repository(file:///C:/svn_repos/trunk/sampletestrepo) and pushing the it to ccnet server(E:\Machine2Repo).we are using (D:\Machine1Repo) as dev. machine. So if I change code in D:\Machine1Repo\ sampletestrepo project and commit to the svn repository and force a build. Ccnet config will get the latest changes from svn repository(file:///C:/svn_repos/trunk/sampletestrepo) and pushes them to (E:\Machine2Repo\ sampletestrepo).

<sourcecontrol type="svn">

   <executable>C:\Program Files\CollabNet\Subversion Client\svn.exe</executable>

    <trunkUrl>file:///C:/svn_repos/trunk/bankrepo</trunkUrl>

    <workingDirectory>E:\Machine2Repo</workingDirectory>

  </sourcecontrol>

Bat file:

batch file is the name given to a type of script file, a text file containing a series ofcommands to be executed by the command interpreter.contains list of commands like del,start.

Include the below code in deltrx.bat:

del E:\Machine2Repo\ sampletestrepo \test.trx

Tasks Block:

The tasks block represents how the build of the project actually takes place.In our example we will use an MsBuild Task to accomplish the main purpose of our project, which is to compile the versioned Visual Studio solution.
After that we will use an Executable Task to run our unit tests, if the build succeeds.

MsBuild Task:

Let’s have a look at the meaning of the xml nodes children of the <msbuild> node:

<executable>: contains the path to the msbuild executable file. You don’t really need to set it because the default value is the standard installation path:C:\WINDOWS\Microsoft.NET\Framework\v4.0.30319\MSBuild.exe.
<projectFile>: is the name of the project to build. MsBuild accepts a Visual Studio solution file as the project file to build. Obviously the MsBuild Task accepts it as well.
<buildArgs> This row provides additional command line arguments to MsBuild.

ccnet.config

--------------------------------------------------------------------------------------------------------------------------------------

<cruisecontrol xmlns:cb="urn:ccnet.config.builder">

<!—this name appears in web dashboard -->

   <project name="CruiseControlSampleTestDemo">

   <artifactDirectory>E:\Machine2Repo</artifactDirectory>

    <triggers>

     <intervalTrigger name="continuous" seconds="30" buildCondition="ForceBuild"   initialSeconds="30" />

    </triggers>

   <sourcecontrol type="svn">

   <executable>C:\Program Files\CollabNet\Subversion Client\svn.exe</executable>

    <trunkUrl>file:///C:/svn_repos/trunk/sampletestrepo</trunkUrl>

    <workingDirectory>E:\Machine2Repo</workingDirectory>

  </sourcecontrol> 

    <tasks>

<msbuild>

        <executable>C:\Windows\Microsoft.NET\Framework\v4.0.30319\msbuild.exe</executable>       

        <projectFile>E:\Machine2Repo\sampletestrepo.sln</projectFile>       

        <timeout>900</timeout>

        <logger>C:\Program Files (x86)\CruiseControl.NET\server\ThoughtWorks.CruiseControl.MsBuild.dll</logger>

      </msbuild>

<exec>

            <executable>E:\Machine2Repo\sampletestrepo\deltrx.bat</executable>

            <buildArgs></buildArgs>

            <buildTimeoutSeconds>30</buildTimeoutSeconds>

      </exec>

      <exec>           

      <executable>C:\Program Files (x86)\Microsoft Visual Studio 11.0\Common7\IDE\MSTest.exe</executable>

            <buildArgs>/testcontainer:E:\Machine2Repo\sampletestrepo\bin\Debug\sampletestrepo.dll /resultsfile:E:\Machine2Repo\sampletestrepo\test.trx</buildArgs>

            <buildTimeoutSeconds>30</buildTimeoutSeconds>

      </exec>     

    </tasks>

   <publishers>

         <!--to get the test results in the dashboard we have to merge the results XML file -->

         <merge>

               <files>

                     <file>E:\Machine2Repo\sampletestrepo\test.trx</file>

               </files>

         </merge>

         <xmllogger />

</publishers>

  </project>

</cruisecontrol>

Save this file and go to ccnet in IIS. Refresh on ccnet site and click browse from default.aspx and it opens as shown in below.

The build fails because of the (failing test case) below code as

[TestClass]

    public class Test

    {

        [TestMethod]

        public void Test1()

        {

            Assert.AreEqual(“test”, “test1”);

        }

    }

Now, change that code to

[TestClass]

    public class Test

    {

        [TestMethod]

        public void Test1()

        {

            Assert.AreEqual(“test”, “test”);

        }

    }

Commit this change from  D:\Machine2Repo\sampletestrepo and click on “Force” from dashboard

Now the build succeeds as shown below:

Click on the record Last Build Time, and see the code change committed to the svn repository under Modifications since last build.

autoEl

Ext.create("Ext.Component", {
renderTo: Ext.getBody(),
autoEl: {
html: "Link",
href: "#",
tag: "a"
}
});

fix for wcf error - Could not load file or assembly 'someapplicationname' or one of its dependencies. An attempt was made to load a program with an incorrect format.

To resolve the error, follow the below steps

1.Type "inetmgr" in run
2.click on Application Pools
3.right click on the application pool where your application is pointed to and select Advanced Settings
4.Set Enable 32 bit applications to True

Ext.form.Panel

    
Form panel class serves as the container for forms. You can add the controls in Ext.form.field package to the form panel class. The form panel provides support for processing form, validation etc.

Ext.create("Ext.form.Panel",
    {
        title: "Controls",
    items: [
    {
        xtype: "radiogroup",
        fieldLabel: "Title",
        vertical: true, columns: 1,
        items: [
        { boxLabel: "Mr", name: "title" },
        { boxLabel: "Ms", name: "title" }
        ]
    },
    {
        xtype: "textfield",
        fieldLabel: "Name",
        fieldLabel: "Name",
        allowBlank: false,
        maxLength: 50,
        msgTarget: "side"
    },
    {
        xtype: "datefield",
        fieldLabel: "Date of birth",
        msgTarget: "side"
    },
    {
        xtype: "textfield",
        fieldLabel: "Blog"
    },
    {
        xtype: "numberfield",
        fieldLabel: "Years of experience",
        minValue: 5,
        maxValue: 15
    },
    {
    xtype: "textarea",
    fieldLabel: "Address"
    },
    {
    xtype: "button",
    text: "Submit",
    listeners: {
        "click": function () { alert("yahoooooo"); }
    }
    }
    ],
    renderTo: Ext.getBody()
});

The form controls can be wired up with basic validation rules. For instance, the common validation properties of the text based controls are allowBlank, maxLength, minLength, and so on.

Another useful property called vtype can be used for using built-in validation rules like e-mail, URL, and so forth.
The blog text field we have used in our example can be configured to have a validation type as shown here.
{
xtype : "textfield",
fieldLabel : "Blog",
vtype : "url"
}

xtype

In Ext JS 4 every UI component class has an alias name or a short name known as ‘xtype.’ Using xtype in our code offers some advantages. Let’s discuss them by creating a Panel with a textbox and a button as shown below.

Ext.create("Ext.panel.Panel",{

items : [

Ext.create("Ext.form.field.Text",{

fieldLabel : "Name"

}),

Ext.create("Ext.Button",{

text : "Submit"

})]

});

Let’s move the creation of textbox and button out of the Panel as shown below.

var nameText = Ext.create("Ext.form.field.Text",{

fieldLabel : "Name"

});

var submitButton = Ext.create("Ext.Button",{

text : "Submit"

});

The Panel will refer to the nameText and submitButton variables in the items collection.

Ext.create("Ext.Panel",{

items : [

nameText,submitButton

]});

We have stored the textbox and button objects in separate variables and reused them inside the Panel. There are some disadvantages to writing code in this style, although it is useful to se[erate the container and the individual components.

Ext.create("Ext.form.field.Text") creates a text box and holds it in the DOM tree. It occupies memory even if we don’t render it on to the screen. Suppose we don’t add the nameText variable in the Panel, it would remain in the DOM tree occupying memory. In an application, we want to instantiate UI components only when required and not create them at will. At the same time we want the component creation code maintained separately.

Using the fully qualified class name like Ext.form.field.Text everywhere is a tedious task, particularly when we create custom components. It would be better if we can use the xtype of these UI components. Let’s rewrite the example as shown below.

var nameText = {

xtype : "textfield",

fieldLabel : "Name"

};

var submitButton = {

xtype : "button",

text : "Submit"

};

Ext.create("Ext.panel.Panel",{

renderTo : Ext.getBody(),

items : [

nameText,submitButton

]});

The nameText and submitButton are plain JavaScript objects. They have an additional xtype property with values textfield and button, respectively. The actual text box and button objects are created when they get added to the Panel and rendered to the body. This not only makes the code simpler but also provides us the lazy instantiation facility.

extjs define,create,constructor,property,config,extend,mixin,alias

Classes and Objects

You can define a new class in Ext JS 4 using the Ext.define method. You pass in the class name and the object where you define the attributes and behavior of the class as arguments to the Ext.define method.

Ext.define("Mobile",{});

If you have worked with Ext JS 3 or the earlier versions, you will notice that the Ext.define method incorporates the functionalities of using Ext.reg, Ext.ns, and Ext.extend methods.

You can create an object of the Mobile class using Ext.create method as shown here.

Ext.create("Mobile ");

In traditional OO languages the new keyword is used to create objects. You can use new to create objects in Ext JS 4 also.

var mobile1 = new Mobile ();

The Ext.create("classname") method dynamically loads all the JavaScript files that the classname is dependent on before creating an instance, whereas this is not possible when you use the new keyword.

Constructor

Constructor is the first function that’s called when an object is created. You can define constructors in our classes using the special property constructor. The constructor property is wired to a function that gets invoked when an object is created using Ext.create.

Ext.define("Mobile ",{

constructor : function(){

alert("Mobile created");

}

});

The second argument of the Ext.define method is an object that has a constructor property. On creating an object of class Mobile the constructor gets invoked and you’ll see Mobile created alert message.

You can define properties of the class and initialize them in constructors.

Property

Let’s define our Mobile class with two properties title and price. These two properties will be initialized in our constructors.

Ext.define("Mobile ",{

title : "sony xoeria neo v",

price : 17500,

constructor : function(title,price){

this.title = title;

this.price = price;

}

});

The two properties are initialized using the this keyword, which makes them visible to the objects of the class.You can instantiate the Mobile class and initialize it as shown below.

var sony = Ext.create("Mobile ","xperiaz",400000);

alert(sony.title);

alert(sony.price);

You can access title and price properties using the object reference. The above code snippet alerts xperiaz and 400000.

A class may have a number of attributes. It becomes tedious to define and initialize them one after the other using the constructor. It’ll be better if we can define the attributes with default values and initialize only the required ones.

Config

Ext JS 4 provides a config section for every class where you can list the attributes of the class with default values. The object can be created by initializing the attributes in which you are interested.

Ext.define("Mobile",{

config : {

title : "",

price : -1,

manufacturers :[]

},

constructor : function(cfg){

this.initConfig(cfg);

}

});

In the code snippet above, we’ve defined a Mobile class with title, price, and authors listed in the config section. The config section is initialized in the constructor by calling the initConfig method. The initConfig method that is present in Ext.Base class initializes the configuration object. You can create an object of the Mobile class as shown below.

var sony = Ext.create("Mobile",{

title : "xperiay", manufacturers: ["sony1","sony2"]

});

We’ve created the Mobile object by initializing the title and manufacturers attributes. As mentioned earlier, it’s not mandatory to initialize these attributes while creating the instance. The variables declared in the config section have the getter/setter methods generated automatically. In the above example where sony is a reference to the Mobile object,you can access the properties as shown below.

alert(sony.getTitle());

sony.setPrice(1200000);

alert(sony.getManufacturers()[0]);

In OO languages the getter and setter methods are usually known as accessor methods. They are used to access a variabl.If you have a variable called age, the accessor methods for it will be getAge() and setAge(age). The getAge method will return the value of age and the setAge method will modify the value of the age.

You can override the getter/setter methods if you want to take more control of the class. For example, say you want the price of the Mobile to have a minimum price of 5000. You can perform this validation in the overridden setPrice method

Validating the Mobile Price

Ext.define("Mobile", {

config: {

title: "",

price: 5000,

manufacturers: []

},

constructor: function (cfg) {

this.initConfig(cfg);

},

setPrice: function (priceVal) {

if (priceVal < 5000)

alert("Invalid value for price " + priceVal);

else

this.price = priceVal;

}

});

var sony = Ext.create("Mobile",{

title : "xperiaaaaaaaa", authors : ["sony3","sony4"]

});

sony.setPrice(3000);

alert(sony.getPrice());

sony.setPrice(30000);

alert(sony.getPrice());

the setPrice method has been overridden with the validation check. The output of the code will be

Invalid value of price 3000

5000

30000  

The config generates an apply method for every attribute automatically as well. The apply method is called internally by the setter method. you can override the applyPrice method to implement the validation rule

Overriding the applyPrice Method

Ext.define("Mobile", {

config: {

title: "",

price: 5000,

manufacturers: []

},

constructor: function (cfg) {

this.initConfig(cfg);

},

applyPrice: function (priceVal) {

if (priceVal < 5000)

console.log("Invalid value for price " + priceVal);

else

this.price = priceVal;

return this.price;

}

});

Methods

You can define custom methods in classes as shown below.

Ext.define("Mobile",{

config : {

title : "",

 price: 0

},

constructor : function(cfg){

this.initConfig(cfg);

},

run: function(){

alert("running " + this.getTitle());

}

});

The Mobile class has a run function that can be accessed using the object reference.

var sony = Ext.create("Mobile",{

title : "xperia", price:12000.00

});

sony.run(); //alerts running xperia

Ext JS 4 provides support for inheritance.

Inheritance

We have an extend keyword that can be used to inherit a class in Ext JS 4. Let’s create an Employee class and a Manager class that inherits the Employee class.

Ext.define("Employee",{

config : {

employeeid : "",

name : "",

salary : 0

},

constructor : function(cfg){

this.initConfig(cfg);

},

work : function(){

alert(this.getName() + " is working");

}

});

Ext.define("Manager",{

extend : "Employee",

config : {

level : 1

}

});

The Manager class inherits the Employee class using the extend keyword. The configuration properties and the work function in the Employee class are available to the Manager class.

We can create a Manager object and invoke the work function as shown below.

var mgr = Ext.create("Manager",{

employeeid:"1529", name: "mani kumar", level: 4

});

mgr.work(); //alerts mani kumar is working

We can override the Employee’s work function in Manager’s class.

Ext.define("Manager",{

extend : "Employee",

work : function(){

alert(this.getName() + " is in a meeting");

}

});

We can call the base class work function using this.callParent()

Ext.define("Manager",{

extend : "Employee",

work : function(){

this.callParent();

alert(this.getName() + " is in a meeting");

}

});

The arguments passed to the Manager’s work function can be supplied to the Employee’s work function by using the arguments keyword in JavaScript as shown below.

this.callParent(arguments);

You can extend a class and override the constructor as shown below. You can invoke the base class

constructor using this.callParent method.

Ext.define("Manager",{

extend : "Employee",

constructor : function(cfg){

this.callParent(arguments);

}

});

You can override the constructor of the base class whenever you inherit generic classes like Employee, Manager,etc. However, you have to be careful when you inherit UI classes. The constructor of the UI component classes have a set of operations like initializing events, plugins, etc. Inheriting a UI component class and overriding the constructor is not a recommended practice. The UI component classes provide a method called initComponent(), which is used to initialize the component. This initComponent method is usually invoked from the constructor. The general practice is to override the initComponent method in the derived class. Say you want to create a custom Button, then you can

do that as shown below.

Ext.define("MyButton",{

extend : "Ext.button.Button",

initComponent : function(){

//Your code goes here

}

});

Multiple inheritance is not supported in Ext JS 4. We have mixins for multiple inheritance similar to interfaces in Java and C#.

Mixins

Mixins help you to mix the behavior of different classes into your class. Your class can have the functionalities of any number of classes mixed together. It’s somewhat similar to interfaces in Java where a class can implement any number of interfaces.

Let’s create two classes, Aquatic and Terrestrial, with swim and walk functions, respectively.

Ext.define("Aquatic",{

swim : function(){

alert("Swimming");

}

});

Ext.define("Terrestrial",{

walk : function(){

alert("Walking");

}

});

We’ll create a class Reptile that can walk as well as swim. The Reptile class is created by mixing Aquatic and Terrestrial together.

Ext.define("Reptile",{

mixins : ["Aquatic","Terrestrial"]

});

A Reptile instance can invoke the walk and swim functions.

var reptile = Ext.create("Reptile");

reptile.swim();

reptile.walk();

We have discussed the basic OO concepts in Ext JS 4. Let’s learn few other features in the class system in Ext JS 4.

Alias

You can define an alias name for the classes. The alias name is mainly used when you create custom components.

You can use the alias property in the definition of the class as shown below.

Ext.define("Mobile.SmartPhone.Sony.Xperia", {

alias : "Mobile",

});

Ext.create("Mobile");