How to unit test JQuery fadeIn and fadeOut with Qunit

I wasn’t unit testing much my client side code until I joined Microsoft. Most of the time to reason was the time and also that most of the web application I was working on did not require to have this degree of testing. Since I am working in a division that does not have testers we have to have a bigger coverage. In JavaScript, it is possible to hide html element with JQuery with fadeOut and make them reappears with fadeIn. Under the hood, it just do an animation that has the final result to have a style that display to none or to display block the control. Nevertheless, in some scenario you want to unit test if in a particular condition the html element is really there or not.

This can be done easily with Qunit and SinonJs. Qunit is the JQuery JavaScript unit test framework and SinonJs is a mock/stub/fake library. For the purpose of this article, I will not explain how Qunit and SinonJs works but concentrate on the fact that you cannot simply invoke something that move in time and expect to assert right away. The reason is simple : the animation takes time to be completed.

test("should animate element over 500ms", function () {
    var el = jQuery("<div></div>");
    el.appendTo(document.body);
    ok(el.css('display').indexOf("block") > -1);
    el.fadeOut();
    ok(el.css('display').indexOf("none") > -1);
  
});

This test fail on the second assertion. The reason is that fadeOut is not yet done and we are already asserting the display which is still to block. We need to play with the time. We need to fake the time to something in the future. This is where SinonJs come to the rescue.

test("should animate element over 500ms", function () {
    var el = jQuery("<div></div>");
    el.appendTo(document.body);
    ok(el.css('display').indexOf("block") > -1);
    el.fadeOut();
    this.clock.tick(510);
    ok(el.css('display').indexOf("none") > -1);
  
});

testpass

It is possible to add some tick to the testing framework. To do so, use the clock property and use the tick function. The parameter takes the time in millisecond you want to move forward. If you check the Date of the browser, you will notice that this has a direct impact of the date time. You can call that method as many time you need. In the example, I have used 510 milliseconds because the default fadeOut method takes 500 ms. The end result is that this unit test pass. You can see that demo working on that JSFiddle.

This way to unit test fadeIn and fadeOut works with any kind of JQuery animation and also any code that require some time in JavaScript. You can use it if you are using JQuery UI libary too.

Entity Framework Complex Type and its Tracking

Entity Framework has something called complex type. They are classes that does not have unique identifier. They are used has a subset of an entity. For example, you can have an Address class that you want to have inside another class but do not want to have to have a table for the Address. This is useful for concepts that can be shared across entities without having to refer them as entity themselves. Another example could be Audit. An Audit table can be a solution, but you may want to have a ModifiedDate and ModifiedUser for some of your entities. The solution would be to copy paste those two properties on all your entities or to have a class that has those two properties and to use this class inside entities that want to have audit.

Let’s see a coding example.

public class House
{
	public int Id { get; set; }
	public double Price { get; set; }
	public Address Address { get; set; }
}

public class Address
{
	public string Street { get; set; }
	public int Number { get; set; }
	public string City { get; set; }
}

An house has an Address. Later on, if we add Business entity, this one could also refer to the Address entity without having to copy and paste all Address properties.

The main point of that article is that every properties inside a complex type is considered as one by Entity Framework’s tracking system. It means that if you mark any of the property to IsModified true that the whole complex type will be tracked as changed. Same thing if you mark that complex type has IsModified to true, than every property, even if not changed, will be marked to be changed. The principle behind that is that complex type is treated as an immutable type. That mean that complex type is a whole. Changing one value of this one would mean to create a new instance of that object. I am not sure that this is very convenient in many “real life scenario” but in theory it makes sense.

To illustrate more the point, here is a second example with Entity Framework calls.

	public class MyEntity
	{
	    public MyComplexClass Property1 { get; set; }
	}

	var entityLocal = this.Set<MyEntity>().Local.SingleOrDefault(d => d.Id == entity.Id);
	if (entityLocal == null)
	{
	   entityLocal = this.Set<MyEntity>().Attach(entity);
	}
	this.ChangeTracker.Entries<MyEntity>().Single(d => d.Entity == entityLocal).State = EntityState.Modified;
	this.Entry(entity).Property(s => s.Property1.SubProperty1).IsModified = true;
	this.Entry(entity).Property(s => s.Property1.SubProperty2).IsModified = false;//This remove all modification of the object!!!
	this.SaveChanges();

As you can see, the entity is marked as modified and I set one of the complex type property to false. The result is that none of the complex type properties will be saved. Here is the SQL generated:

    update [dbo].[MyEntity]
    set @p = 0
    where (([Id] = @0))

The Sql update just the property of the entity, not the one of the complex type. However, if we do not mark the SubProperty2 with IsModified to False, we have a SQL that save the whole entity, with the complex type.

    update [dbo].[MyEntity]
    set [Property1_SubProperty1] = @0
    , [Property1_SubProperty2] = null
    where (([Id] = @1))

I took the shortcut to profile the Sql Database to see the output but you could just check from the database context the properties changed and realize the same behavior.

var entry = DatabaseContext.Entry(entity);
var namesOfChangedProperties = entry.CurrentValues.PropertyNames
       .Where(p => entry.Property(p).IsModified)
        .ToArray();

At the end, you have to think the Complex Type as a whole. That mean that everything is related for Entity Framework. It also mean that if you are concerned about performance that you may not want to have huge complex type because, during load or save, the transportation of the information become into a single package. You may have end result that is not what desired, have too much information loaded or half a complex type saved (in the case you have just fill up half of the object). Take in consideration that Entity Framework limitation/feature when you create your classes design.

Avoid using JSON Data Island and use Data Parachute instead or Html Data

JSON Data Island is born from the Xml Data Island. It was a way to drop client side information from the server into Html in the page. You could, before Internet Explorer 10, drop a XML tag directly into the Html or having this one between a script tag. Later, with JavaScript or VbScript you were able to go read the information of those islands by accessing the desired information with a unique identifier to the element, often an id.

Finally, we got rid of those data island. What was the problem? First, at the end, website had a lot of these island because it was easy to drop them everywhere. Second, the information is not tight to anything, it is just a bunch of information in a formatted structure but still not related to any JavaScript objects or Html elements. Third, the problem is also how to read that Xml. JavaScript is more suited to access JSON.

However, some people thought that we could replace Xml Data Island with Json Data. The principle is the same, you create from your server side inside a Script tag your JSON. Here is an example:

<script id="my-island">
    {
       prop1:'value1'
     , prop2:'value2'
    }
</div>

The problem is to read that you need to use Eval.

var jsonIsland = document.getElementById('my-island').firstChild;
var information = eval('(' + jsonIsland.data + ')');

I am not a big fan of evaluating on the fly information form the Html. I also think this is not required because we have more natural solution that does not require to use eval. This is what I call “Data Parachute”.

The concept of Data Parachute is almost the same but instead of creating an island of data, you drop calmly a Json object into a structure of your application.

<script>
    windows.application.variables = {
       prop1:'value1'
     , prop2:'value2'
    };
</script>

No need to eval, you can access the windows.application variable from your JavaScript files. The structure is created on the master page (layout) so you can have the variables object created and later in the process to create the page fill up with your variable. Usually, I have also under the application object an object called “localizedstring” which allow me to add string localized in the language of the user. This solution is cleaner than that Json Data Island and remains similar so it is easy to change a current Json Data Island into a Data Parachute one.

An other alternative, if possible, is to use the Html5 data attribute. So instead of adding information into a global variable or in a floating script in your Html, you attach the information directly into the Html element that need the information. This is a good approach but is limited.

<div id="abc" data-prop1="value1"></div>

The problem is that if you wanted to pass from the resource file of the server an error string that is displayed only during an Ajax call than you need to have that error inside an html’s data attribute of the element in error. This can result to some duplication if the same error is shown on every of your controls.

At the end, you shouldn’t have to use XML Data Island or Json Data Island. Use directly JavaScript variables by setting these one into a Script tag from the server, or use the Html5 data attribute to enhance your Html’s controls to have additional information that with JavaScript you will manipulate.

How to clone a branch from a Git Repository without downloading every branches

gitlogo

The hard way to get a branch clone is to clone the repository and do a checkout to the desired branch. The first operation will download every files from the repositories. This mean that if you have several branches that you will download them all. Indeed, Git is smart and you do have the master branch and branches are only a difference. Nevertheless, this can be huge and if you really want just to access a specific branch can be long and a waste of bandwidth. This is why Git gives you the posibility to clone a branch with the -b. This will save you the checkout operation but it does not save you the download problem — you still download all commits. To be efficient, you should use the –single-branch argument which will tell Git to take care of only the branch specified.

Here is an example:

git clone -b TheBranchName --single-branch https://YourGitUrl/RepositotyName LocalFolderNameForTheBranch

This is very efficient. If your branch has only 1 file, than you will download only that single file instead of all files from all others branches.

Create a new branch from an existing remote branch

If you want to quickly works on a new feature without affecting the team’s branch or the master branch, you may want to create a specific branch for your work. This is also known as a topic branch. Here are the commands that I use.

mkdir MyNewFeature
cd MyNewFeature
git init
git clone -b teamBranch https://yourgit.git
git checkout -b users/mrdesjardins/MyNewFeature
git branch -u origin/teamBranch
git push origin users/mrdesjardins/MyNewFeature

The first two lines create a new folder and move your position into it. This has nothing to do with Git. The next one create a new local branch with the specified existing remote branch of the remote server. At that moment, you have the same branch. You need to create a new local branch from that branch. This is done with checkout. Something interesting but not required is to set the upstream. Setting the upstream allow to know if the branch you branched from has changed. This way you can synchronize (pull). The last line is pushing your new local branch to the server. In that example, the same name so I do not need semi-colon. Otherwise you need to specify local:remove. For example, I could create the local without having the users/mrdesjardins/ and just using MyNewFeature local branch into the remote location users/mrdesjardins/MyNewFeature.