Back to blog home page

Testing Two-Way Data Binding in AngularJS

Posted by on Aug 27, 2014

Two-way data binding is one of the strongest capabilities of AngularJS.

Testing Two-Way Data Binding

Once you accumulate controllers and directives you can then begin to use various libraries such as High Charts. You will then need to test that two-way data binding works across all these constructions.

Testing data-binding with explicit user actions such as filling input boxes or clicking buttons is cumbersome and requires littering your web application screens with testing artifacts.

The following will describe some cleaner techniques.

Periodic Data Change

One alternative approach, that was used in several projects, is to have your controller/directive code modify your data periodically with an ‘$interval’ AngularJS ‘setInterval’:

where in your ux, you have:

<div>{{value}}</div>

There is nothing more exciting than to see the data changing before your eyes every so often.

When using libraries, for example visualization libraries, you need to use structured data such as a time series. Therefore you will periodically need to generate random data:

where the Underscore sample function was used to sample the array.

The data is then used with High Charts:

<highchart id=”chart1″ config=”chartConfig”></highchart>

where in your controller you have:

Periodically you can change the data in a random way with:

Watches

On the flip side, when directives involving form elements, such as an input elements, are used you need to test that two-way data binding works across a call chain of directives and controllers.

If you have a directive using an input element:

used as:

<div ng-controller=”myController”>
<div my-input field=”username”></div>
</div>

To test for two-way data binding, you would place a watch on the field given to the controller: