In the previous article we have seen how to install Microsoft Release Management. In this article we are going to see how to configure environments and release paths.

To start, we need to define the stage types. The stage types are the logical steps required to bring a build from development to production. Go to Administration -> Manage Pick Lists -> Stage Type and add three stages: DEV, QA and PROD.

[caption id="attachment_132" align="alignnone" width="1036"]Manage Pick Lists Manage Pick Lists[/caption]

The next step is to add a new server to Release Management. A server is a machine where a deployment agent is installed. Go to Configure Paths -> Servers, expand the New button and click on Scan for new.

[caption id="attachment_135" align="alignnone" width="1036"]Scan for new server Scan for new server[/caption]

A list of unregistered servers will be shown. Select the server and click on Register

[caption id="attachment_137" align="alignnone" width="882"]Unregistered servers Unregistered servers[/caption]

The next step is to create the different environments to be used in the release path we will define later. Go to Configure Paths -> Environments and click on New

[caption id="attachment_129" align="alignnone" width="1036"]Create Environment Create Environment[/caption]

Fill the general information form. Now, we have to link this environment to a server (remember, a server is a machine with the deployment agent installed). Click on Link existing.

[caption id="attachment_131" align="alignnone" width="882"]Link server Link server[/caption]

Select the server and click on Link. Save the environment and repeat the operation for the QA and PROD environments.

[caption id="attachment_130" align="alignnone" width="1036"]Environments Environments[/caption]

We are ready to configure the release path. A release path is the path used for distributing the software. We can define as many paths as we need (standard, customer emergency, etc). Go to Configure Paths -> Release Paths and click on New.

[caption id="attachment_133" align="alignnone" width="1036"]Release Path Release Path[/caption]

After filling the name and description of the release path, we are ready to configure the stages. Click on Add. Select the stage type from the Stage dropdown. Select the environment associated to the stage from the Environment dropdown. Each step is composed of 3 sequential steps:

  • Acceptance step: the user selected as the approver in the Approver dropdown will be the responsible for approving or rejecting the deployment of the release in the stage. This step can be automated by selecting the Automated check box.
  • Deployment step: is composed of 2 parts:
    • Deployment of the components: the user selected as the approver in the Approver dropdown will have the responsibility of the deployment and he will be notified about it.
    • Validation of the deployment: the user selected as the validator in the Validator dropdown will have the reponsibility to validate that the components have been deployed correctly.
  • Apporval step: the users added to the Approvers list will have the responsibility to aprove or reject the release.

Repeat these steps for all three stages.

[caption id="attachment_134" align="alignnone" width="1036"]Release Path Complete Release Path Complete[/caption]

And that's all for today. In the next article we will see how to configure the deployment of a web site using this release path.

See you soon!

In the Visual Studio 2013 launch event (where Plain Concepts. the company where I work, contributed making the demos), Microsoft presented a new product for Team Foundation Server 2013: Microsoft Release Management.

Nowadays, a lot of people are talking about continuous delivery. Companies like Amazon deploys a new version of its website every 12 seconds. Until now, if you try to do this with TFS you don't have a specific tool and you have to do magic with TFS Builds. It's a little bit weird because you don't want to build, you want to deploy.

Luckily we have a new tool in our toolbox now that will help us in our path to continuous delivery: Microsoft Release Management. In this series of articles I will show you how to work with this tool.

First of all we need to install the tool. Microsoft Release Management is composed by three components: a server, a client and a deployment agent. So let's go to the download page and download the three components.

We will start installing the server. Double-click on the file.

[caption id="attachment_112" align="alignnone" width="460"]Server installation, step 1. Server installation, step 1.[/caption]

Click on Install.

[caption id="attachment_113" align="alignnone" width="460"]Server installation, step 2. Server installation, step 2.[/caption]

When the installation finishes, click Launch. The configuration window will be shown.

[caption id="attachment_114" align="alignnone" width="576"]Server installation, step 3. Server installation, step 3.[/caption]

Provide an account for the service and configure the web service port and the database server where the database that Release Management uses will be created. Click on Apply settings.

[caption id="attachment_115" align="alignnone" width="500"]Server installation, step 4. Server installation, step 4.[/caption]

We have the server installed now. Let's install the deployment agent. The deployment agent is the service in charge of deploying our applications. So, if you want to configure an environment with three physical machines you will need to install three deployment agents, and pay for them. More information about licensing here.

We have a 90-day trial installer, so double-click on it.

[caption id="attachment_116" align="alignnone" width="460"]Deployment agent installation, step 1. Deployment agent installation, step 1.[/caption]

Click on Install. When the installation finishes, click Launch. The configuration window will be shown.

[caption id="attachment_117" align="alignnone" width="576"]Deployment agent installation, step 2. Deployment agent installation, step 2.[/caption]

Provide an account for the service and configure the URL of the Release Management Server just installed. Click on Apply settings.

[caption id="attachment_118" align="alignnone" width="500"]Deployment agent installation, step 3. Deployment agent installation, step 3.[/caption]

It's time to install the client. Double click on the installer.

[caption id="attachment_119" align="alignnone" width="460"]Client installation, step 1. Client installation, step 1.[/caption]

Click on Install. When the installation finishes, click Launch. The configuration window will be shown.

[caption id="attachment_120" align="alignnone" width="700"]Client installation, step 2. Client installation, step 2.[/caption]

Provide the URL of the Release Management Server just installed and click OK.

Before using Microsoft Release Management, we have to configure it a little bit. Open the Release Management Client and go to Administration tab. Click on Manage TFS.

[caption id="attachment_121" align="alignnone" width="1036"]Initial configuration, step 1. Initial configuration, step 1.[/caption]

Here we will configure the connection to our TFS. Click on New.

[caption id="attachment_122" align="alignnone" width="1036"]Initial configuration, step 2. Initial configuration, step 2.[/caption]

This window is quite similar to build service configuration window. Provide a TFS address, a collection name and a user to connect to TFS. Click on Verify to verify the data provided is correct and Release Management could connect to TFS.

[caption id="attachment_123" align="alignnone" width="1036"]Initial Configuration, step 3. Initial Configuration, step 3.[/caption]

We need another step to be made before configuring our first deployment. We must assure that the user configured to access TFS from Release Management has the "Make requests on behalf of others" permission. So, let's open the team web access URL of our TFS and click on the settings button.

[caption id="attachment_124" align="alignnone" width="926"]Initial configuration, step 4. Initial configuration, step 4.[/caption]

And grant the permission to the user.

[caption id="attachment_125" align="alignnone" width="1012"]Initial configuration, step 5. Initial configuration, step 5.[/caption]

And that's all! In the following articles I will show you how to configure a deployment for your website.

See you soon!

 

Last thursday I had the pleasure to give a workshop about CasperJS at SpainJS. You could get the presentation and the code samples here. At the end of the workshop an attendant asked me if it's possible to compare a capture with a reference image. My first answer was no. I was wrong. In this article we will see how we can accomplish this.

The idea, and the code, is super simple. Read both images and compare the bytes. Let's start casper, include the file system library and go to the page we want to capture:

var casper = require('casper').create({
	viewportSize: {
		width: 1024,
		height: 768
	}
});

var fs = require('fs'); 

casper.start('http://www.plainconcepts.com');

Now, we have to read the reference image, make a capture of the page and read the captured image to be able to compare with the reference one:

casper.then(function(){
	var referenceImageContent = fs.read('./plainconceptsOld.png');

	this.capture('plainconcepts.png');
	var newImageContent = fs.read('./plainconcepts.png');

	this.test.assert(newImageContent == referenceImageContent);
});

And finally, call to run function:

casper.run(function(){
	this.echo('finished');
	this.test.done(1);
	this.test.renderResults(true);
});

If you execute the code with the right reference image you will get this result:

[caption id="attachment_101" align="alignleft" width="720"]test passed test passed[/caption]

 

 

 

 

If you make a change in a single pixel of the image, then you will get this result:

[caption id="attachment_102" align="alignleft" width="719"]test faiiled test failed[/caption]

 

 

 

 

 

 

 

And that's all! Now you could compare a capture with a reference image. Remember that you can also capture a selector using captureSelector function.

 

Sometimes you need to do special stuff when a work item, build, etc changes in your Team Foundation Server. The best option that you have is to create a server event handler. To do that you need to follow this steps:

1.- Create a new Class Library project

[caption id="attachment_92" align="alignnone" width="955"]Create Class Library Create Class Library[/caption]

2.- Add reference to those libraries

[caption id="attachment_93" align="alignnone" width="447"]libraries libraries[/caption]

You could add the first three ones from Assemblies -> Extensions in the add reference window:

[caption id="attachment_94" align="alignnone" width="790"]add reference add reference[/caption]

You have to add the other two libraries from C:\Program Files\Microsoft Team Foundation Server 11.0\Application Tier\Web Services\bin

3.- Create a class that implements the ISubscriber interface

public class WorkItemChangedEventHandler : ISubscriber

4.- Implement the interface. To do that you have to implement the SubscribedTypes method:

public Type[] SubscribedTypes()
{
    return new Type[1] { typeof(WorkItemChangedEvent) };
}

The name property

public string Name
{
    get { return "WorkItemChangedEventHandler"; }
}

The priority property

public SubscriberPriority Priority
{
    get { return SubscriberPriority.Normal; }
}

And the ProcessEvent method

public EventNotificationStatus ProcessEvent(TeamFoundationRequestContext requestContext, NotificationType notificationType,
                                                    object notificationEventArgs, out int statusCode, out string statusMessage,
                                                    out ExceptionPropertyCollection properties)
{
    statusCode = 0;
    properties = null;
    statusMessage = String.Empty;
    try
    {
        if (notificationType == NotificationType.Notification && notificationEventArgs is WorkItemChangedEvent)
        {
            var ev = notificationEventArgs as WorkItemChangedEvent;
            // Do what you want
        }
    }
    catch (Exception exception)
    {
        TeamFoundationApplicationCore.LogException("Error processing event", exception);
    }
    return EventNotificationStatus.ActionPermitted;
}

In this example we are only subscribing to WorkItemChangedEvent. But you can subscribe to another events. To do that, just add more event types in SubscribedTypes method. You could find a list of available events here.

Can I debug the library?

Yes you can, and it's easy. First of all, change the output path in the project settings window and put C:\Program Files\Microsoft Team Foundation Server 11.0\Application Tier\Web Services\bin\Plugins\.

[caption id="attachment_95" align="alignnone" width="809"]project properties project properties[/caption]

And after that, attach your Visual Studio 2012 to the w3wp.exe process.

Conclusion

In this article we have seen how to develop a Team Foundation Server event handler and how to debug it. A very usefull technique in some scenarios.

See you soon!

In the previous tutorials ( 1 and 2 ) we have seen how to install CasperJS and make our first script. Today we are going to start writing tests with the API that CasperJS provide and doing some navigation between pages. To do that we will add a new model in our website:

public class InformationRequest
{
    public int InformationRequestId { get; set; }
    public string Name { get; set; }
    public string Surname { get; set; }
    public string Email { get; set; }
    public string Request { get; set; }
}

Now, using the capabilities of Visual Studio 2012 and ASP.NET MVC, we could make a new controller and views easily to create a form to request information. Add a new controller using the template which uses Entity Framework.

[caption id="attachment_73" align="alignnone" width="604"]add new controller add new controller[/caption]

Don't worry about the Data Context, we will not use it. Now we have a skeleton of controller methods and views to submit the form. Remove any reference to Entity Framework and the edit, delete, and list methods and views. Your project must look like the one in this screenshot

[caption id="attachment_75" align="alignnone" width="566"]solution explorer solution explorer[/caption]

The controller must have this code

public class InformationRequestController : Controller
{
    public ActionResult Index()
    {
        return RedirectToAction("Create");
    }

    public ActionResult Create()
    {
        return View();
    }

    [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult Create(InformationRequest informationrequest)
    {
        return View("Thanks", informationrequest);
    }
}

And the Thanks.cshtml view is a very simple view with this markup

@model TestCasperJS.Models.InformationRequest

@{
    ViewBag.Title = "Thanks";
}

<h2>Thanks</h2>

Thanks @Model.Name @Model.Surname for contacting us. We will contact you as soon as possible.

<br/>

@Html.ActionLink("Return to index", "Index", "Home", null, new {id="returnToHomeLink"})

Finally, let's add the new option to main menu

<li>@Html.ActionLink("Information", "Index", "InformationRequest", null, new {id="informationRequestMenuLink"})</li>

Ok, now we can start writing our tests. Lets start with a simple assert. Go to the javascript file where your are writing the tests and put the following code

var url = 'http://localhost:8000/';
casper.start(url, function() {
    this.test.assert(this.getCurrentUrl() === url, 'url is the one expected');
});

casper.run(function () {
    this.test.done();
    this.echo("Done.").exit();
});

If you execute the file as usual

casperjs testCasperjs.js

The output should be

[caption id="attachment_80" align="alignnone" width="677"]test1 test 1[/caption]

Great! We have our first test passing.

Now, we will do the same same assertion than in the previous article, but using the test API.

casper.then(function() {
    this.test.assertResourceExists('error.js', 'error.js script was loaded');
});

And the output should be

[caption id="attachment_82" align="alignnone" width="677"]test 2 test 2[/caption]

Let's continue with our first interaction. We will click a link in the main menu and assert that we have navigated to the correct page.

casper.then(function() {
    this.click('#informationRequestMenuLink');
});

casper.then(function() {
    this.test.assertTitle('Information request', 'the page has the correct title');
});

The output should be:

[caption id="attachment_83" align="alignnone" width="677"]test 3 test 3[/caption]

Now we will fill a form, submit it and check that we are in the correct page.

casper.then(function() {
    this.fill('form', {
        'Name': 'John',
        'Surname': 'Smith',
        'Email': 'jsmith@example.com',
        'Request': 'Example request'
    }, true);
});

casper.then(function() {
    this.test.assertTextExists('Thanks John Smith', 'page body contains "John Smith"');
});

With the last parameter of the fill function we are telling CasperJs that we want to submit the form.

The ouput should be

[caption id="attachment_84" align="alignnone" width="677"]test 4 test 4[/caption]

That's great!

Finally we will return to the main page and assert than a particular selector exists to ensure that we are in the main page.

casper.then(function () {
    this.click('#returnToHomeLink');
});

casper.then(function() {
    this.test.assertSelectorExists('ol[class=round]', 'there is an ol with round class');
});

And the output should be.

[caption id="attachment_85" align="alignnone" width="677"]test 5 test 5[/caption]

We have seen how to use the test API from CasperJS and how to make a basic but useful interaction. I recommend you to take a look at the great documentation that CasperJS has. It's really good and has lots of information.

In the next tutorial we will see how to integrate this tests results into a Team Foundation Server build.

See you soon!