Angular + Jasmine Testing

Question

I'm very new, (a total newb) to both AngularJS and BDD testing with Jasmine. My goal for this weekend is to become a little more competent with both.

I'm currently following the tutorial that's available on the angularJS site and I'm working on the files locally. In Chapter 2 it briefly touches on creating Angular tests with Jasmine.

However, I've done exactly as the tutorial states and Jasmine is failing. The test is simply to ensure that exactly 3 phones are rendered in the HTML. (which there are).

Here's the test:

describe('PhoneListCtrl', function() {
    it('should create "phones" model with 3 phones', function() {
        var scope = {},
            ctrl = new PhoneListCtrl(scope);
        expect(scope.phones.length).toBe(3);
    });
});

The error that I'm getting on my tests.html page is:

ReferenceError: PhoneListCtrl is not defined

Here's tests.html:

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Jasmine Spec Runner v2.0.0</title>

    <link rel="shortcut icon" type="image/png" href="jasmine/jasmine_favicon.png">
    <link rel="stylesheet" type="text/css" href="jasmine/jasmine.css">

    <script type="text/javascript" src="jasmine/jasmine.js"></script>
    <script type="text/javascript" src="jasmine/jasmine-html.js"></script>
    <script type="text/javascript" src="jasmine/boot.js"></script>

    <!-- include source files here... -->
    <script src="js/controllers.js"></script>

    <!-- include spec files here... -->
    <script type="text/javascript" src="spec/spec.js"></script>

</head>

<body>
</body>
</html>

I know there's nothing wrong with js/controllers.js because 3 phones are being rendered (by Angular) in my index.html page so I've definitely gone wrong somewhere with setting up Jasmine but not entirely sure where...

Update: PhoneListCtrl is defined as follows:

var phonecatApp = angular.module('phonecatApp', []);
phonecatApp.controller('PhoneListCtrl', function ($scope) { .. });

I have also tried the following:

describe('PhoneListCtrl', function(){

  beforeEach(module('phonecatApp'));

  it('should create "phones" model with 3 phones', inject(function($controller) {
    var scope = {},
        ctrl = $controller('PhoneListCtrl', {$scope:scope});

    expect(scope.phones.length).toBe(3);
  }));

});

but with the above I get 'module' is not defined...

How is PhoneListCtrl defined? If it's mymodule.controller('PhoneListCtrl', ...) then it won't work like this. — Karolis Juodelė
– Karolis Juodelė, Commented May 17, 2014 at 10:16
@KarolisJuodelė I have updated the main post with how it's defined :) — leaksterrr
– leaksterrr, Commented May 17, 2014 at 10:17
Module is not defined because you are not loading angular-mocks.js — Konstantinos
– Konstantinos, Commented May 17, 2014 at 10:21
@Constantinos where should it be included? There didn't seem to be anything in the documentation about angular-mocks! — leaksterrr
– leaksterrr, Commented May 17, 2014 at 10:25

Matti Lehtinen · Accepted Answer · 2014-05-17 13:57:46Z

3

The tutorial project Angular-phonecat is based on angular-seed which uses karma test runner to run jasmine tests.

All the JS files should be included on karma config file test/karma.conf.js. See the example from angular-phonecat sources. The line that will include the PhoneListCtrl is:

'app/js/**/*.js'

Tests can be run using npm test which equals to karma start test/karma.conf.js (the command is configured on package.json file)

If you have cloned the angular-phonecat project like instructed on the tutorial main page, you should already have working karma config file.

answered May 17, 2014 at 13:57

Matti Lehtinen

1,7642 gold badges16 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular + Jasmine Testing

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related