Testing angular controller with jasmine

I'm using angular since a couple of weeks and I'd like to introduce serious tests for controllers and filters.

I tried to write tests using jasmine but nothing seems to work. I then tried to reproduce the tests described in the official tutorials without success.

Check it out: http://jsfiddle.net/rortelli/K2BAH/1/

Thanks in advance

var phonecatApp = angular.module('phonecatApp', []); 
phonecatApp.controller('PhoneListCtrl', function ($scope) {
  $scope.phones = [
    {'name': 'Nexus S',
     'snippet': 'Fast just got faster with Nexus S.',
     'age': 1},
    {'name': 'Motorola XOOMâ„¢ with Wi-Fi',
     'snippet': 'The Next, Next Generation tablet.',
     'age': 2},
    {'name': 'MOTOROLA XOOMâ„¢',
     'snippet': 'The Next, Next Generation tablet.',
     'age': 3}
  ];
});

describe('PhoneCat controllers', function() {

  describe('PhoneListCtrl', function(){
    var scope, ctrl;

    beforeEach(module('phonecatApp'));

    beforeEach(inject(function($controller) {
      scope = {};
      ctrl = $controller('PhoneListCtrl', {$scope:scope});
    }));

    it('should create "phones" model with 3 phones', function() {
      expect(scope.phones.length).toBe(3);
    });

    it('should set the default value of orderProp model', function() {
      expect(scope.orderProp).toBe('age');
    });

  });
});

Answers


Its the order of loading scripts that's failing the fiddle with "ReferenceError: module is not defined"

Remove both angular files and add them again to the bottom of the list, then your fiddle works.


Two things:

  1. include angular-mocks.js

  2. scope.orderProp doesnt exist in the spec so just add it to the controller and then you will have 2 successful test like you see below.

http://jsfiddle.net/zNnvx/

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-mocks.js"></script>

$scope.orderProp = 'age';

Need Your Help

jQuery UI working in Firefox, but not in Chrome & Safari?

jquery jquery-ui browser google-chrome cross-browser

I'm using jQuery UI, specifically Datepicker and Autocomplete, as follows:

Simple CSS centering (centering text + tall image inside a div)

html css xhtml css-float

I have been trying to do the following. I have a &lt;div&gt; element