Wednesday, May 7, 2014

ATDD (Acceptance Test Driven Development) or BDD using SpecFlow and Fluent Assertions


Specflow is popular framework for acceptance test driven development. The aim of specflow to provide interface where both domain experts and developers can work together. The domain expert can write acceptance test in business readable language and specflow provides easy interface to generate ATDD/BDD test from that. SpecFlow is inspired from the Cucumber in Ruby. To know details of SpecFlow follow this url http://www.specflow.org/

Fluent Assertions is a simple ways of writing assertions in a more natural , more readable  and more expressive manner. You can use Fluent Assertions with any unit testing frameworks i. e. NUnit, MSTest, XUnit or Mb-Unit. You just need to add reference to that unit test framework in your project. Fluent Assertions contains huge number of extensions methods even for throwing exceptions.  There have good documentation on supported extension methods here https://fluentassertions.codeplex.com/documentation

Preparing Development Environment:

a) Install Nuget packege for SpecFlow with NUnit:
If you want to use SpecFlow with NUnit you can install the following nuget package manager. However, you can also install SpecFlow and Nunit package separately.
image

b) Install Fluent Assertion : you will also get dll of Fluent Assertions from nuget.
image

c) Install Visual Studio 2010 features : You can write BDD code with these packages. But, this will not generate NUnit test code. You will need .feature files where domain expert can write acceptance test. Also from .feature file NUnit code will be generated. So you will need to install visual studio extension to add feature files. http://visualstudiogallery.msdn.microsoft.com/9915524d-7fb0-43c3-bb3c-a8a14fbd40ee

Development Steps:

When you will install specflow visual studio extension then you will be able to add feature file in your project.
image
.feature file provide domain experts to collaborate with acceptance tests in normal and readable language. However, you can also first write your unit test code and after that you can integrate your code with feature definitions. Here is one example of feature file. The acceptance tests are written in natural language with Given.. When.. Then format. Here is an example of adding task in Kanban board. Kanban service responsibility is to add a new task to Kanban board.
image

But you may not want to write all test cases at a time for this acceptance scenario. In such case you can comment out one of the expected result and you can generate test for this later.
image

This will help to develop in TDD style development. Where developer want to write code for passing those acceptance test.
Specflow also make it easy to generate step definitions from this feature file. Just right click on the scenario and generate step definitions
image

When you will generate code from specflow definitions then it will create functions for each steps.
image

There have no NUnit test attribute then how NUnit can understand these attribute and test? If you open the .feature.cs file then you will see auto generated code for NUnit framework
image

As we are writing code test assertions using Fluent assertions so it is independent of NUnit attribute. Lets now write code for all these pending functions to pass the scenario tests.
image

You can use BeforeScenario and AfterScenario function as Setup and CleanUp for unit testing. Also to communicate within scenario and to store the state of variable you can use ScenarioContext.  Which is very important feature for writing test within a scenario. It provides dictionary with key value pair to store records.
Also using fluent assertions you can compare your expected result easy way.
image

Now suppose a scenario where user will also provide status of task when it will create a ticket.  In this case most of the step definition of this scenario will be same as previous one but only when user will add task then user will also provide status. Do we need to generate all steps again from feature files?
A good feature of SpecFlow that you do not need to write same Given.. steps again. You can directly map the existing definitions with New scenario.
image
So for whole scenario you will need to add only two step definitions.
image

Lets also pass this scenario. What if you want to run only one scenario not both?. Then just comment one scenario from the feature file.
image
After writing and passing the test code also need to be re factored which is must for TDD .

Run Acceptance Tests:

As I mentioned that tested are actually auto generated for NUnit Framework. So using NUnit UI Runner we can check those tests. All my acceptance tests are written using SpecFlow and fluent assertions but as specflow is integrated with NUnit so it will generate dll which we can run through Nunit Runner. As many automated tools already support NUnit Tests results to display so it will be easy to integrate acceptance test results with TeamCity or other continuous integration tools.
image

If you are using Resharper then you can easily run and debug step definition within Visual Studio. As the Resharper supports NUnit by default so you do not need to install any plugin for that.

Generate Report:

If you used NUnit console before then you would have generated TestResults.xml which can be easily integrated with Automation tools. You will not  need spectflow help to generate this xml file. But if you want to generate report in specflow format then the following command will generate html file.
image

The output html will look like this :
image

I have tried TDD approach to pass those acceptance tests which provided me a skeleton for Kanban service. But there will have many features and progressively new scenarios will be added. 
source code : https://dl.dropboxusercontent.com/u/20275838/kanbanservice.rar

Thursday, May 30, 2013

Kendo UI MVC: Display Detail/Child records for each Grid row using Detail Templates

 

Kendo has good feature to display the detail of any row or relevant child records using detail template. The example already exists in Kendo UI demo site.

example http://demos.kendoui.com/web/grid/detailtemplate.html

There have three different ways to display detail template for grid rows.

1. Server detail template:

If you make server binding in main grid using MVC wrapper then Server Detail Template  is very good option to display child records or detail element for each grid row. Here it is very similar to adding a child control inside a grid using DetailTemplate(…) action. It also gives expression to write as razor MVC syntax.

Example :

http://docs.kendoui.com/getting-started/using-kendo-with/aspnet-mvc/helpers/grid/server-detail-template

2. Client Detail Template :

Some cases you need to display grid records on ajax call.  Example of Datasource ajax call is:

   1: .DataSource(dataSource => dataSource
   2:           .Ajax()
   3:           .Read(read => read.Action("Products_Read", "Home"))
   4:        )

In this case Server Detail Template will not work. Because main grid records are loaded by ajax call dynamically. To display detail template for ajax read call you need to use Client Detail Template . 


Example: http://docs.kendoui.com/getting-started/using-kendo-with/aspnet-mvc/helpers/grid/client-detail-template


The problem is that you need to know some kendo client template syntax. Here has example to write client template scripts ( if-else condition, for loop ) using kendo expression http://docs.kendoui.com/getting-started/framework/templates/overview


But You can still write MVC wrapper widget and at the end you have to call ToClientTemplate to use it inside client template.


 


3. Hybrid Solution:


It is a mix solution of client detail template and using server call to render HTML . So I called this hybrid solution. Inside client script you can also make Javascript ajax call.



   1: <script id="client-template" type="text/x-kendo-template">
   2: <div id="placeholder">
   3: <script>
   4: $.get("url",function(data){
   5:  // do somethings
   6: $(document.getElementById("placeholder)).html(data);
   7: });
   8: </script>
   9: </script>

 


In this example I am making an simple Javascript ajax call to get data from server side ( calling MVC controller action). In server side through Partial View I am getting the html which is rendered in server side. Using this way you are getting full freedom to write code in MVC razor syntax and Kendo MVC wrapper though you are using client template. After getting html from server side the placeholder div is populated with the resultant HTML.


Note: Jquery element select option “$(‘#placeholder’) does not work as # is used also for Kendo syntax. so that I used  document.getElementById.

Sunday, March 24, 2013

Wizard control widget: my first Jquery Widget

 

We are familiar with ASP.NET Wizard control and that is powerful to create form which need to perform many steps clicking on next and next button.But in Javascript, the problem in writing such widget control is we usually become dependent to HTML controls. Jquery Widget is giving us such power full and object oriented way to create control or plugin which we can easily make it independent on HTML control and more re-usable. It provides object oriented features such as encapsulation, inheritance.Widget also provides constructor and destructor to manage lifetime of plugin.

In MSDN there have a nice article on JQuery Widget http://msdn.microsoft.com/en-us/library/hh404085.aspx. Silk Project is real good example of Jquery Widget.

I found some nice wizard control using Jquery those are dependent on HTML controls. Some good articles on Jquery Widget :

http://blog.degree.no/2012/03/creating-a-simple-form-wizard-in-asp-net-mvc-4/

http://afana.me/post/create-wizard-in-aspnet-mvc-3.aspx

both are almost same and I am not here reinventing wheel. I am using the second article code to create wizard plugin so that I can make it more reusable but I can not say that is perfect for any type of requirement.

If you read the second article ( mentioned above) Code  are pretty simple to understand. I am here just trying here to covert it into Jquery widget.

Jquery widget has constructor like _create method which is invoked first time. Here underscore is used to define private scope. So other object can not call _create method.

So in the _create method I have defined how control can be bind to methods and how control would be displayed initially.

To make it independent of particular Form, I have some properties inside Widget options so that we can set ui element or action there. Wizard widget can be called in form as like other widget.

   1: var wizard= $("#WizardForm").Wizard(
   2:       {
   3:           backButtonId: '#back-step',
   4:           nextButtonId: '#next-step',
   5:           finalButtonId: '#next-step',
   6:           confirmAction: ConfirmAction,
   7:           finalAction: FinalAction
   8:       });

  Here back-step, next-step are HTML button ids. and ConfirmAction and FinalAction are methods which is using as callback method.


To set those properties jquery widget provides us to create options object with these properties.



   1: $.widget("system.Wizard", {
   2:         options: {
   3:             backButtonId: '',
   4:             nextButtonId: '',
   5:             finalButtonId: '',
   6:             finalAction: null,
   7:             confirmAction: null
   8:         },
   9:  
  10:         _create: function () {
  11:             var that = this, name = this.element.name;
  12:             this.FirstStep = this.element.find(".wizard-step:first");
  13:             this.FirstStep.fadeIn();
  14:             this.CurrentStep = this.FirstStep;
  15:             $(this.options.backButtonId).click(function () { that.moveBack(); })
  16:             $(this.options.nextButtonId).click(function () { that.moveNext(); })
  17:         },

In this code we have exposed some properties so that user can set those properties as defined above and in _create method provided control ids are bind with widget method to make it reusable.


We exposed two method for logic to go next step or in previous step. This code need more improvement to make it more reusable. In the moveNext() method I have called callback method so that we can perform some actions which are dependent on particular UI control



   1: moveNext: function () {
   2:  
   3:            var $step = this.CurrentStep; // get current step
   4:  
   5:           //part of code
   6:  
   7:           if ($step.next().hasClass("confirm")) { // is it confirmation?
   8:               //invoking callack method
   9:                this.options.confirmAction($step);
  10:  
  11:            }
  12:  
  13:            //part of code 
  14:  
  15:            else { // this is last step, submit form
  16:                this.options.finalAction();
  17:            }
  18:        }     

Here is complete code of Wizard plugin. https://dl.dropbox.com/u/20275838/Wizard.js

Sunday, March 17, 2013

Custom Conditional Validation Depends on Another Property Value using JQuery Unobtrusive feature and ASP.NET MVC

 

Data Annotation Validation Attribute ( example [Required]) makes easy to provide validation in ASP.NET MVC. Also if Enable unobtrusive validation, we do not need to write any code in JavaScript for client validation. Jquery unobtrusive  validation parse the data attribute in HTML and we do not need to any custom code to validate form.

To enable client side  validation and unobtrusive validation we need to provide settings in web.config or in server side HtmlHelper.

 

   1: <appSettings>
   2:     <add key="ClientValidationEnabled" value="true" />
   3:     <add key="UnobtrusiveJavaScriptEnabled" value="true" />
   4: </appSettings>

or



   1: HtmlHelper.ClientValidationEnabled = true;
   2: HtmlHelper.UnobtrusiveJavaScriptEnabled = true;

If  jquery unobtrusive library is referenced in cshtml then there do not need to write any custom code to validate form with the help of data annotation validation attribute.



   1: public class CustomerFormModel : ICustomerCommand
   2:   {
   3:       public int Id { get; set; }
   4:       
   5:       [Required(AllowEmptyStrings = false, ErrorMessageResourceName = "CustomerNameRequired", ErrorMessageResourceType = typeof(StringTable))]
   6:       [StringLength(200, ErrorMessageResourceName = "CustomerNameLenthValidationError", ErrorMessageResourceType = typeof(StringTable))]
   7:       public string Name { get; set; }
   8: }

When this code will be executed the form can be validated automatically by jquery unobtrusive validation.


image


When you enable unobtrusive validation ASP.NET MVC add data attribute in HTML  for each data annotation.


image


In HTML attributes are generated for data annotation in server side and jquery unobtrusive library parsed those attribute for client validation.


But what will happen if validation on any field depends on the value of another field value. You may also want this validation not only client side but also in server side. Usually in such case we write custom validation before submitting form and also do same validation in server side.  We can also do same custom validation using Data annotation and jquery unobtrusive validation without directly referencing client control.


Suppose the requirement is to validate Email field as required only if Name field is not empty. So if Name field is not empty then we do not have to provide Email.


It this case the server side validation would be not difficult. We can create an data annotation attribute which will make decision based on value of Name property.


This is not final code.



   1: namespace SimpleTier.Domain.Validators
   2: {
   3:     using System;
   4:     using System.Collections.Generic;
   5:     using System.Linq;
   6:     using System.Text;
   7:     using System.ComponentModel.DataAnnotations;
   8:     using System.Web.Mvc;
   9:     using SimpleTier.Domain.Properties;
  10:  
  11:     public class EmailValueValidator : ValidationAttribute
  12:     {
  13:         private string _dependentPropery;
  14:         private bool _isRequired;
  15:         public EmailValueValidator(string dependentpropery, bool isrequired)
  16:             : base()
  17:         {
  18:             _dependentPropery = dependentpropery;
  19:             _isRequired = isrequired;
  20:         }
  21:  
  22:         protected override ValidationResult IsValid(object value, ValidationContext validationContext)
  23:         {
  24:             if (_isRequired == false) return null;
  25:             System.Reflection.PropertyInfo property = validationContext.ObjectType.GetProperty(_dependentPropery);
  26:             if (property != null)
  27:             {
  28:                 var value1 = property.GetValue(validationContext.ObjectInstance, null) as string;
  29:                 if (string.IsNullOrEmpty(value1) == false && string.IsNullOrEmpty(value as string))
  30:                     return new ValidationResult("Value can not be empty");
  31:  
  32:                 return null;
  33:  
  34:             }
  35:             else
  36:                 new ValidationResult(string.Format("Unknown Properties {0}", _dependentPropery));
  37:  
  38:             return null;
  39:  
  40:         }
  41:  
  42:     }
  43: }

In this code a custom validation attribute is created. IsValid() function gets the value of Name field and make decision based on Name value. Attribute on Email property can be defined as:



   1: public class CustomerFormModel : ICustomerCommand
   2:    {
   3:        public int Id { get; set; }
   4:        
   5:        [Required(AllowEmptyStrings = false, ErrorMessageResourceName = "CustomerNameRequired", ErrorMessageResourceType = typeof(StringTable))]
   6:        [StringLength(200, ErrorMessageResourceName = "CustomerNameLenthValidationError", ErrorMessageResourceType = typeof(StringTable))]
   7:        [TextLineInputValidator]
   8:        public string Name { get; set; }
   9:  
  10:        //[Required(AllowEmptyStrings = false, ErrorMessageResourceName = "EmailRequired", ErrorMessageResourceType = typeof(StringTable))]
  11:        [EmailValueValidator("Name",true)]
  12:        [StringLength(200, ErrorMessageResourceName = "EmailStringLengthValidationError", ErrorMessageResourceType = typeof(StringTable))]
  13:        public string Email { get; set; }
  14: }

Here Name is the property on which validation depends and also sets another value to determine validation logic is required or not.  But this validation works only on server side and in the HTML code no such validation attribute is created.


image


To make this validation work also on client side some Html attribute need to be created and make jquery unobtrusive library understand those attribute. To create those html attribute our custom attribute class need to be implemented  by IClientValidatable interface. If class is implemented by IClientValidatable interface,  method name GetClientValidationRules() can be implemented to define the rules that will be generate as html attribute.


 


image 



We need to define such rule in unobtrusive adapter so that client side validation understand these html attribute. unobtrusive adapter gives option to define method which will work with such rules and defined data attribute.



   1: <script type="text/javascript">
   2:     $.validator.unobtrusive.adapters.add(
   3:         'emailcustomvalidation',['dependentpropery','isrequired'],function(options)
   4:         {
   5:             options.rules["emailcustomvalidation"] =
   6:                 {
   7:                     dependentpropery: options.params.dependentpropery,
   8:                     isrequired: options.params.isrequired
   9:                 };
  10:             options.messages["emailcustomvalidation"] = options.message;
  11:         });
  12:     $.validator.addMethod("emailcustomvalidation", function(value, element, params)
  13:     {
  14:         var parts = element.name.split(".");
  15:         var prefix = "";
  16:         if (parts.length > 1)
  17:             prefix = parts[0] + ".";
  18:         var emailvalue = $('input[name="' + prefix + params.dependentpropery + '"]').val();
  19:         if (!value && !emailvalue)
  20:             return true;
  21:         if (emailvalue && !value)
  22:             return false;
  23:         return true;
  24:     })
  25:            
  26:     
  27: </script>

Here same validation is defined as server side code. When the save button will be clicked the form will be be validate and it will call this method. Client side validation provides same validation with error message defined in server side. Such validation can be used for multiple controls as that does not depend on any HTML control.