CategoryTools

JavaScript unit tests and Visual Studio

Although all my code is always completely bug free (I love sarcasm), I’m still a big fan of unit tests.
As logic moves from server-side to client-side, I’m very happy to see that unit testing for client-side code is getting better supported and more common these days.

Jasmine

Jasmine is a behavior-driven JavaScript testing framework. It allows you to test your client-side code.
It has a clear and easy to understand syntax and is very popular in the community. Even Angular, which is designed with testing in mind, uses Jasmine and has tons of Jasmine examples on their website.

Example

In the example below I have a very simple math function, named multiply. This function is stored in math.js and it accepts two arguments, it should multiply argument 1 by argument 2.

function multiply(a, b)
{
    return a * b;
}

The test below makes sure that the the multiply function works as expected.

/// <reference path="math.js" />

describe('multiply', function () {
    it('multiplies a by b', function () {
        var a = 2;
        var b = 4;
        var result = multiply(2, 4);
        expect(result).toEqual(8);
    });
});

It requires math.js to be loaded. Make sure you reference all required files needed to run the test.
Of course one test is not enough to prove this function is completely bug free, but this is just an example. Normally I would write tests for all edge cases to make sure it handles everything as expected.

Visual Studio

My IDE is Visual Studio and I also use it for all my client-side code (I’m experimenting with TypeScript and enjoying it a lot).
Resharper, one of my most important Visual Studio extensions, does support client-side unit testing, but I do not have a Resharper license for at home, so I was searching for a different solution, until I found Chutzpah.

This Visual Studio extensions adds JavaScript unit testing support and integration with the Visual Studio test runner.
It combines server-side unit tests and client-side unit tests.

The result is as follows:
client-side-test-runner

Pretty sweet!

Setting up Git source control on a QNAP NAS

When I start a new project, the first thing I do is set up source control. Source control is key!
I know all my source code is safe and when I make mistakes I can easily do a rollback.

So why not take it serious and use Git?
GitHub is great, but it is not free when using private repositories. Tho I’m a big fan of open source, not all my projects are open source.

So I wanted to configure Git on my NAS, an old QNAP TS-410 (currently running on firmware 4.2.0).
This is how I configured Git for a QNAP NAS.

Install Git

First of all, install the QNAP package from the app center (currently version 2.1.0) and make sure it is turned on.

There seems to be something wrong with the QNAP Git package, because a manual action is required.
open a ssh connection to your NAS.

If you’re not familiar with ssh, you can download a client (f.e. putty) and open a new connection by entering the IP of your NAS.

now login with your admin account and enter the following command:


#  cd /usr/bin
#  ln -s /Apps/git/bin/git-upload-pack
#  ln -s /Apps/git/bin/git-receive-pack

This fixes an issue with the git-upload-pack and git-receive-pack not being found.

Hosting your repositories

Next, create a new share for your repositories.
I created a new share named ‘git’, but you’re free to choose.

Again, open an ssh connection and go to the just created share:

#  cd /share/MD0_DATA/git

if this does not work, the MD0_DATA folder is probably different. go to the /share folder and check the folder name with the following command:

#  ls -la

This will show a full list of all items and you can figure out what the right name is.

in the ‘git’ folder, enter the following command to create a new repository:

git init --bare NameOfMyRepository

This creates a new repository with the name ‘NameOfMyRepository’. It will automatically create a new subfolder with an identical name.

Cloning the repository

On your development machine, open your git tool and go to the directory where you want to work.
Now enter the following command:

git clone admin@YourIP:/share/git/NameOfMyRepository

This will ask for the admin’s password.
You can also use auto login by generating a ssh keyfile, but I do not want that for security reasons.

Once entered, the repository is cloned in a folder named ‘NameOfMyRepository’ and you’re good to go!

The Git controls integrated in VS2015 do not work with ssh yet, but the guys are working on it. You can read about it here

Creating and maintaining minified files in Visual Studio 2012 (with Web essentials)

Web essentials brings a lot of cool features to Visual Studio. It is a creation of Mads Kristensen. Many of these features will be added to Visual Studio in future releases and Web Essentials is downloadable as nuget package.
One of the cool features of Web Essentials is minification and bundling.
When you right click on a js file, Web essential adds an option to the context menu called “Minify Javascript file(s)”.
This creates two files, one minified file (adds min.js to the original filename) and a map file (adds min.js.map to the original filename).
Map files can be used to make the minified file readable and debuggable. The creation of a map file can be enabled or disabled in Tools > Options.

But now the coolest feature, when you make changes to the original javascript file, the minified file gets updated automatically.

I use this features a lot for my javacript plugins (see http://www.vicreative.nl/Projects). I work in the original files, the minified files are updated automatically and I commit them all in Git.

When selecting more than one file, the option “Create Javascript bundle file” gets enabled. This creates the following files:

  • a bundle file, an xml file containing all filenames for this bundle.
  • a javascript file
  • a minified javascript file
  • a map file

The same features also work for CSS files, but no map is created because this is not necessary for css files.

Creating bundles can also be done automatically, read this post.

Update:
The bundling and minification has moved from Web essentials to a different NuGet package: Bundler & Minifier

Manually setting the navigator.geolocation

Firefox is probably my most favorite browser. Mostly because of all the great extensions.
Every web developer should know Firebug. It really makes my life so much easier. I use it a lot for:

  • Examining and manipulating dom elements
  • Run JavaScript
  • Inspect ajax calls (request and response)
  • Resource manager (see what’s being loaded, cached, etc)

But this post is not about Firebug.
Another great extension is Geolocator.
This tool allows you to change your geolocation. Let me first explain what the geolocation is.
The geolocation is your current position provided by your browser.
It can be requested via JavaScript. This is one of the new features described in the HTML5 standard.

navigator.geolocation

The geolocation object has three methods:

  • getCurrentPosition
  • watchPosition
  • clearWatch

getCurrentPosition gives you the current position, this method accepts two arguments, the first argument is the method called when the position is successfully retrieved. The second argument is the method called when the position could not be retrieved. This could also be because the user has denied location sharing.


function onSuccess(position)
{
    var lat = position.coords.latitude;
    var long = position.coords.longitude;
}

function onError()
{
    // handle failed retrieving of location.
}

navigator.geolocation.getCurrentPosition(onSuccess, onError);

The watchPosition method also returns the current position, but continues to return updated positions.
The clearWatch method stops the watchPosition method.

Not all browsers support html5, so not all browsers support geolocation. You first need to check if geolocation is available.


if (navigator.geolocation) {
    // do location based stuff here
}

I was working on a location based application and wanted to test the applications with different positions, and that’s when I came across the Geolocator extension.
I created several locations and when I reloaded the page, Firefox showed a dropdownlist with my locations so I could easily switch my position.

Locations can be added by going to the Add-ons menu and select the Geolocator options. Search for your location, leave the search screen (tweak settings a bit if you’d like) and click the save button.