CODEWITHSUNDEEP
javascriptangularjsjasmine
leaksterrr
leaksterrr

Reputation: 4167

Angular + Jasmine Testing

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...

Upvotes: 3

Views: 456

Answers (1)

Matti Lehtinen
Matti Lehtinen

Reputation: 1764

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.

Upvotes: 3

Related Questions