4
\$\begingroup\$

I'd like someone to review these tests to make sure I'm along the right lines in Angular testing.

Note - They do all pass (great) but I feel like I'm struggling to understand the finer points of Angular testing.

Any thoughts?

var headerControllers = angular.module('header.controllers', []);
headerControllers.controller('headerController', ['$scope', 'headerService', function($scope, headerService){

this.headerService = headerService;
this.headerTitle = headerService.headerTitle;
this.show = false;

$scope.$watch('header.headerService.headerTitle', function (newVal, oldVal, scope) {
    if(newVal) {
        $scope.header.headerTitle = headerService.headerTitle;
        $scope.header.show = true;
    } else {
        $scope.header.show = false;
    }
});
$scope.header = this;
}]);

Above is the controller to be tested and below are the tests:

describe( "Unit Test:  Header Bar Controller", function() {

var scope, headerService, headerBarController;
var title = "Test header title";

beforeEach( module('Header.controllers'));
beforeEach( module('Header.services') );
beforeEach( inject( function( $injector, $rootScope, $controller, _headerService_ ) {

    scope = $rootScope.$new();

    headerService = $injector.get( 'headerService' );
    headerService.setTitle( title );

    headerBarController = $controller( 'HeaderController',
    {
       $scope: scope,
       headerService: headerService
    }); 

}));

it( "should have the controller defined", function() {
    expect( headerBarController ).not.toBe( undefined );   
});

it( "should receive and load the header-service", function() {
    expect( headerService ).not.toBe( undefined );
    expect( headerBarController.headerService ).toBe( headerService );
});

it( "should have a header title set to the value received from the header-service", function() {
    expect( headerBarController.headerTitle ).toBe( title );
});

it( "should have an initial show value of false", function() {
    expect( headerBarController.show ).toBe( false );
});

it( "should set the header object show value to true when the title is changed", function() {

    headerService.headerTitle = title;
    scope.$apply();

    expect( scope.header.show ).toBe( true );
});  

it( "should have header object show value of false if title is not set", function() {

    expect( scope.header.show ).toBe( false );
});

});
\$\endgroup\$
1
\$\begingroup\$

It doesn't look to me like proper Unit test. You are injecting the real dependency but are not mocking. Unit test is about testing your single Unit of functionality in isolation, with all it dependencies mocked.

Here is example from of my own test code. This is a proper mock - I am producing a fake Constant:

beforeEach(module(function($provide) {
  $provide.constant('hotelsArray', [{i: 1, n: 'h1'}, {i: 2, n: 'h2'}, {n: 'h3'}, "11"]);
}));

And this is injecting the actual Service:

beforeEach(inject(function(_Hotels_) {
  Hotels = _Hotels_;
}));
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.