DEV Community: Dima Kuzmich

Test Angular2 now or how to set up Angular2 unit tests

Dima Kuzmich — Fri, 21 Aug 2015 12:57:43 +0000

Currently, I’m working on a project and I decided to build it with Angular2. It was a brave decision. It’s really not as simple as it looks when you try to build something with alpha versions of new technology. Loads of changes that part of them are breaking, difficulty in lack of documentation. Nevertheless, it’s incredibly exciting to see how Angular is growing up, to observe a collaboration of the team, and to feel a part of this interesting process.

One of the tasks that weren’t trivial for me is to set up the unit tests for my project. That’s the reason for my decision to describe this process. So let’s begin:

TypeScript

As Microsoft published nearly half-a-year ago, Angular2 is written in TypeScript. At the beginning that was a piece of shocking news for me. But later on, I’ve understood this step. I checked out a new version of TypeScript and was surprised to discover that it’s pretty close to ES6, erhh… JavaScript 2015?!.. Mmm… never mind, the latest JavaScript version :-) It also brings additional features, such as optional types, annotations, and more. These facts were convincing enough to try to write my project with TypeScript. I think that it is pretty clear, that if a code is written in TypeScript, tests should be written in TypeScript as well. If the tests are written in TypeScript, I should transpile them into ES5. And so I did with two tasks of Gulp:

Source code is here.

Karma

Karmais a test runner that was developed by the Angular team during the development of Angular.js. Among its main features is the ability to run tests fast and on real browsers. Also, it’s agnostic to the testing framework so that you can use whatever framework you’d like. I chose a Jasmine, but you can easily switch it to another one. So I installed Karma and Jasmine on my environment and started to set up my first test. here is an interesting part of the file:

Source code is here.

First of all, we need to add traceur-runtime.js. These are basically polyfills that allow us to use ES6 features in the browser despite their not being implemented yet.

Then we add our source files. The files should already be transpiled into ES5 code and should be only served by Karma and not actually be included with a script tag. That’s because we will import them into the tests using System.js.

And here they are es6 module loader and system.js files. System.js is a universal dynamic module loader that loads ES6 modules, AMD, CommonJS, and global scripts in the browser and NodeJS. Later on, we will see how to configure System.js to work with our tests properly.

We should definitely add an angular2 file :-) and then our test files. They also should be served and not included.

Surely, you noticed this test-main.js file that I included but didn’t explain. This file is the highlight of this post! So, Ladies and Gentlemen please welcome:

The System.js hook

As I said before, in order to support modules’ imports we use System.js. Currently, Karma does not support this feature, so that we need to implement some workaround that will be able to import all needed modules and only then to run our tests. Here is what we need to do:

First of all, you should stop karma from executing. This is made by

\_\_karma\_\_.loaded = function () { };

Next, we should configure our system.js with appropriate files by setting baseUrl and paths properties of System global object.

System.baseURL = ‘/base/scripts/’;
System.paths = {
 ‘test/\*’: ‘/base/scripts/test/\*.js’,
 ‘build/\*’: ‘/base/scripts/build/\*.js’,
 ‘angular2/\*’: ‘angular2/\*’,
 ‘rx’: ‘rx’
};

Then we take all files that served by Karma, filter only test files, normalize file names to module names and import them one-by-one using System.import method.

One important thing to notice: each test file has to export the main function that includes whole tests related to a module. When the module is imported, we run its main method in order to expose the tests. Here is an example of a test module:

Lastly, when entire tests were imported and exposed we run the karma engine:

\_\_karma\_\_.start(); // after all tests were exposed

And voilà, our Angular2 test environment is ready!

You can find the source code on Github. To set up the environment, just clone the repository and run:

$ npm start

Also, you are welcome to check out an angular-starter that my college Elad and I developed. It’s really simple and uses gulp for a build workflow.

I’ve based my test environment on an angular test environment. You can find their tests-main.js here.

One more thing, if you liked this post, please share it. For any question, you can find @me on Twitter

Prevent Gulp from stopping watching of files after exception

Dima Kuzmich — Thu, 26 Feb 2015 10:43:39 +0000

Recently I developed some small project and decided to try and build automated workflow with Gulp. It was very fun and easy. I really liked its features and node-like syntax.

My project included React.js and I used their JSX technology. I wanted to debug my code, thus I needed to compile JSX into vanilla JavaScript. Here is where Gulp came to my rescue. You can easily install gulp-react and it does the magic.

After building my tasks and integrating a compiling I wanted to run my tasks constantly. That’s not a problem when you use Gulp. Just use gulp.watch() and there you are. But after I’ve started to change code, I’ve understood, that my compiled file isn’t updating. When I took a look into a console, I noticed the exception after which my watching task stopped:

The fix for this problem was another gulp package that called gulp-plumber. This plugin prevents pipe breaking caused by exceptions. Generally saying, it overrides pipe method of gulp and removes onerror handler which un-pipes streams on an error by default.

To sum it up, it was a really good experience using Gulp and its plugins.

Binding event to all elements except specific element and all its contents.

Dima Kuzmich — Wed, 28 May 2014 09:29:23 +0000

Recently I’ve encountered a challenge to close navigation menu on every touch or click, except clicks and touches in the menu area. I’ve tried many ways to resolve it, and at last, I’ve found the optimal solution for me. The solution is in two steps and relies on event bubbling.

Firstly, I’ve attached a click/touch event on the

that on every click/touch closes the menu.

function clickOnBody(event){
 // you can close here the menu
 alert(‘clicked everywhere except the menu area’);
}
document.body.addEventListener(‘mousedown’, clickOnBody, false);
document.body.addEventListener(‘touchstart’, clickOnBody, false);

Secondly, I’ve attached another click/touch event on a specific element, and inside this event, I’ll prevent event propagation (bubbling), so that every click/touch inside element area will stop on the parent element.

function clickOnMenu(event){
 event.stopPropagation();
}
var menu = document.getElementById(‘menu’);
menu.addEventListener(‘mousedown’, clickOnMenu, false);
menu.addEventListener(‘touchstart’, clickOnMenu, false);

You can check the solution in jsFiddle

Memory leaks in SPA built with Knockout.js

Dima Kuzmich — Mon, 28 Apr 2014 12:08:03 +0000

Memory leaks in SPA built with Knockout.js

The Problem:

When we build large SPA applications with MV* frameworks that have data bindings, such as Knockout.js, we actually create a connection between our JS models and DOM elements. Those connections may be done in a number of ways, but the bottom line is that DOM elements may have references to our models. In Knockout, for example, every element that has bindings has relation to closure object that stores reference to binding context. This binding context has a pointer to our model. Now, with this in mind, we can see the problem that will come. If we simply remove the DOM element that has bindings, a closure from above will still hold a pointer to our model and as a result, will be never released from memory. This problem is especially critical in SPA applications as to change page we simply swap inner HTML of some container and never do full reload of the page.

Detection:

To detect an above problem in SPA with Knockout we don’t need to do much. If we bind our models and never unbind them, we almost certainly have a leak. However, I’ll show a way to ensure it with Chrome DevTools.

We need to run our application and to open a DevTools (F12 for Windows users). I created a simple application with Knockout and Sammy.js for routing. Download it here. After we run an application we need to take a heap snapshot. Press ‘Profiles’ tab in DevTools, check ‘Take Heap Snapshot’ and press ‘Take Snapshot’

After that change between pages 1 and 2 for 10 times and take another snapshot. Now, when we have these two snapshots, we can compare them. We simply switch the mode of snapshot preview to ‘Comparison’

While in comparison mode, we can sort our results by the ‘# Delta’ field. This field says how many objects from a particular type are living now in memory. You can also check how many new objects were created and how many objects were released by looking at ‘# New’ and ‘# Deleted’ fields respectively. What we are looking for now are the objects that created and never released. In my test application is very simple. We know that we visited each page 5 times, so I will look for objects that have 5 in the ‘Delta’ field.

As we can see, neither VM1 nor VM2 was released during our session.

Solution:

The solution to this problem is very simple. As I said before, we only need to release bindingContext object of the DOM node that we want to remove. Knockout provides us with a number of methods that could be useful in this situation. We can use a ko.cleanNode(element) method before we remove an HTML or we can use ko.removeNode(element), that cleans Node and also removes it. No matter which way we are choosing to use, we need always remember — If we created bindings, we must unbind them!

JavaScript Global Object, Namespaces and Object constructors

Dima Kuzmich — Sat, 09 Nov 2013 14:47:15 +0000

Global Object

A global object is an object that created once the application is running. We can’t recreate it or affect his creation in any way. After a creation Global Object uses as a global scope of the application. Actually, in JavaScript, we haven’t global variables and functions. All variables and functions that defined globally become properties of the Global Object. So, all variables in JavaScript are placed under the Global Object. ECMA-262 does not indicate a way to access the Global object directly, but we can implement the access to him by using this.

The example below shows you how to do it:

var globalObject = (function(){
 return this;
})();

Check it on jsFiddle

In web applications the browser implementation of ECMA-262 has an object called window that uses as a delegate to a Global Object, so all the way we can access him very simply:

var globalObject = window;

In the above examples, we created variables that hold a reference to the Global Object. As discussed previously, all global variables become properties of Global Object, so we simply created properties on Global Object that refer to themselves.

Because all new variables and functions are placed under the Global Object, there is a very high chance of name collision. As we know, JavaScript is loosely typed language and as such he is not preserving a type for created variables. So, all variables can overhead other variables just by using the same name. This is a name collision that we talked about before.

To prevent a name collision we can use a number of techniques such as using namespaces, using modules, and more.

Namespaces

Namespaces are objects that created under Global Object and hold variables and functions. Think about it like a tree. A tree has a root (Global object) and branches. Every branch is a new namespace.

To implement it in JavaScript we use next code:

var myNamespace = myNamespace || {};

The left side of the example above simply declares a variable for our namespace. Right side a little bit more complicated. First of all, we try to get a namespace with the same name, if declared somewhere in the application. This technique prevents the recreation of the same namespace and not allow us to overhead his logic. Another pro of this technique is that we can use the same namespace in several files. Anyway, if a namespace was not declared before in application, we simply assign the variable with the empty object and thereby create a new namespace.

Object constructors

As we know in JavaScript we can create a new object in two ways. First way is to use the new keyword:

var rectangle = new Object();
rectangle.a = 10;
rectangle.b = 5;
rectangle.getPerimeter = function() {
 return 2\*(this.a + this.b);
}

Second way is to use object literal that is commonly used way. The big pro of this way is that you can encapsulate a creation of an object. The previous example can be rewritten as follows:

var rectangle = {
 a: 10,
 b: 5,
 getPerimeter: function() {
 return 2\*(this.a + this.b);
 }
}

Two ways above show us how to create a simple JavaScript object. It’s fine, but what if I want to create number of rectangles in my application? Do I need to duplicate that code for every rectangle instance? The answer, of course, is no. We can use a constructors. Two previous examples can be rewritten with constructor as follows:

function Rectangle(a, b) {
 this.a = a;
 this.b = b;
 this.getPerimeter = function() {
 return 2\*(this.a + this.b);
 };
}
var rectangle = new Rectangle(10,5);

Constructors in ECMAScript are used to create specific types of objects. Constructors provide us with the ability to create new object instances in a simple way. More of that, every instance created with a constructor can be identified which type is he.

function Rectangle(a, b) {
 this.a = a;
 this.b = b;
 this.getPerimeter = function() {
 return 2\*(this.a + this.b);
 };
}
var rectangle = new Rectangle(10,5);
alert(rectangle.constructor == Rectangle); // alerts true
alert(rectangle instanceof Rectangle); //alerts true

Try it in jsFiddle

The example above shows that we can identify the type of object in two ways. By checking his constructor property and by using instanceof operator. During object creation, the constructor property is automatically assigned with a reference to the constructor function. But the constructor is not placed on the object itself. It’s placed on a prototype of the object. We can check the object prototype by inspecting an object by Dev Tools or by accessing a __proto__ property of an object in Chrome, Safari, and Firefox.

So until now, we can understand 3 important things:

All variables and functions are placed on the Global Object
To prevent name collision we can use a namespaces
We need to use a constructor to create specific types of objects

But when we look at constructors we can understand that it is just regular JavaScript function and as such, when placed on global scope, can be easily overwritten by another function with same name. So we will want to place it under namespace as well. It can look like follows:

var namespace = namespace || {};
namespace.Rectangle = function(a, b) {
 this.a = a;
 this.b = b;
 this.getPerimeter = function() {
 return 2\*(this.a + this.b);
 };
}
var rectangle = new namespace.Rectangle(10,5);

It’s good, but when we will expect a constructor of the rectangle, we will see that there is an anonymous function so the prototype will be of the regular Object type.

What we want, is to be able with a namespace to look at prototype and to identify that this object is instance of Rectangle. I still can use instanceof operator and it’s smart enough to say me that is a Rectangle, but as a developer I will like to see it in my DevTools as well and to know that object prototype is Rectangle. To achieve that, we can use a next trick:

var namespace = namespace || {};
namespace.Rectangle = function <strong>Rectangle</strong>(a, b) {
 this.a = a;
 this.b = b;
 this.getPerimeter = function() {
 return 2\*(this.a + this.b);
 };
}
var rectangle = new namespace.Rectangle(10,5);

What I did is I simply gave the name to the constructor function. Now we can see that our object constructor is under namespace and we still can see that object prototype is Rectangle:

Using this way take care of IE <= 8.

Thanks

Prevent scrolling of parent element with JavaScript

Dima Kuzmich — Tue, 16 Jul 2013 13:16:30 +0000

In my current project, I was asked to avoid scrolling of the parent element, when reaching the end of the scroll of the inner element.

It sounds like a very simple task. Not when you want to implement it cross-browser. So, I searched a little and foundnext example from the book: “JavaScript: The Definitive Guide”. By the way, it’s a very good book to start with when you want to learn JavaScript basics.

So, based on this examplehere is jsFiddle with my solution for a problem.

Enjoy

KnockoutJS simple truncate text binding handler

Dima Kuzmich — Mon, 24 Jun 2013 09:07:05 +0000

Hello everyone,

On my current project I needed to truncate text in some titles. Since we’re using KnockoutJS, I decided to write custom binding handler. And so I did.

Custom binding handlers are great solution, that provides you with ability to control how your observables interact with DOM elements. In addition you encapsulate your custom behaviors, thus they became reusable. It’s very useful when you use third party widgets that need to be updated all the time when observable values are updated.

So here is an example of my truncate binding handler:

ko.bindingHandlers.truncatedText = {
 update: function (element, valueAccessor, allBindingsAccessor) {
 var originalText = ko.utils.unwrapObservable(valueAccessor()),
 // 10 is a default maximum length
 length = ko.utils.unwrapObservable(allBindingsAccessor().maxTextLength) || 20,
 truncatedText = originalText.length &gt; length ? originalText.substring(0, length) + “…” : originalText;
 // updating text binding handler to show truncatedText
 ko.bindingHandlers.text.update(element, function () {
 return truncatedText; 
 });
 }
};

You can try it here

Use this binding handler and use binding handlers in general.

Enjoy.