Tag: javascript

Posted on

Using mocks with Jasmine tests for AngularJS

I’m not entirely sure I understand exactly what is going on here or how this is working, but posting to refer back to later.

I have a controller that’s using $interval. Rather than coding a delay into my test in order to let time pass in real time before I do my assertions, a better approach would be to mock out $interval so you can move elapsed time forward programmatically, which is a much better approach.

Luckily the ngMock package provides mocks for most things, including $interval. To move time, you call $interval.flush(millis);

[code language=”javascript”]

describe(‘Test variable date timer’, function () {

it(‘Runs for 1 iteration, 30min interval, adds 30 mins’, function () {
var $scope = {};
angular.mock.inject(function ($controller, _$interval_) {
$interval = _$interval_;
controller = $controller(‘VariableRateDateCtrl’, {$scope: $scope, $interval: $interval});

});

$scope.iterations = 1;
$scope.timeInterval = 30;
$scope.date = moment();
startDate = $scope.date.clone();

$scope.start();
$interval.flush(1000 * $scope.iterations);

endDate = $scope.date;
expectedEndDate = startDate.clone().add($scope.timeInterval, ‘minutes’);
expect(endDate.isAfter(startDate)).toEqual(true);
expect(endDate).toEqual(expectedEndDate);
});[/code]

Posted on

Getting Started with AngularJS (pt 3): understanding $scope

I’m working through a number of sources to help me get up to speed with AngularJS:

Looking at each of these different learning sources is interesting because they all take a slightly different approach, and focus on different key areas. It’s interesting which areas they cover first, and which they leave to later.

Pro AngularJS for example spends half the book walking you through building a complete app end to end, explaining basics as it goes, but then doesn’t get into details until the second half of the book where it digs deeper into each topic area.

The official AngualrJS online tutorial takes a similar approach, walking you building an app step by step with minimal explanation as it goes, but it seems to cover the key basics. Interestingly this tutorial bakes in unit testing and end to end testing right from the start, which I though was very interesting to cover the test tools as an integrated part of development, whereas Pro AngularJS doesn’t get to cover unit testing until the last chapter of the book, which is my only criticism of the book so far.

$scope

The topic I wanted to cover in this post is $scope. As it allows you to create your domain model properties and functions and share between the view templates and your controllers, it seems a rather critical topic, although I don’t think the official tutorial really describe how where it is used controls the visibility between different controllers, and similarly the Pro AngularJS book doesn’t get into details until chapter 13.

On the otherhand, the Beginner to Expert in 7 Steps gets into a great explanation of it’s usage in Step 2. I’m not going to try and summarize their article here as they do a great job, so if you’re like me and learning AngularJS and wondering exactly how $scope is used to control scope… go and take a read of part 2 of their series.

 

Posted on

Getting Started with AngularJS (pt 2): views and ngRoute

Second part of my notes learning AngularJS (first part is here).

Angular handles multiple views in your Single Page Application by adding the ng-view directive at the point where you want your views inserted, e.g.

<div ng-view></div>

The logic to handle URL hash fragments is implemented using $routeProvider to map view template and controller pairs with each hash fragment that your app recognizes. For example:

var simpleApp = angular.module('SimpleApp',
  [
    "ngRoute",
    "SimpleControllers"
  ]);

simpleApp.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
    when('/', {
      templateUrl: 'page1.html',
      controller: 'Page1Controller'
    }).
    when('/page2', {
      templateUrl: 'page2.html',
      controller: 'Page2Controller'
    }).
    when('/page3', {
      templateUrl: 'page3.html',
      controller: 'Page3Controller'
    }).
    otherwise({
      redirectTo: '/'
    });
  }]);

An example working app is here: https://github.com/kevinhooke/SimpleAngularJSExample-ngRoute

Proudly powered by WordPress