Testing Jasmine, Karma, and Angular to create a controller

Question

Testing Jasmine, Karma, and Angular to create a controller

Can someone help me with identifying where I went wrong? How do I obtain an instance of a controller in Jasmine + Angular? What should I use to resolve this issue?

'use strict';

angular.module('myApp.contact', ['ui.router'])
.controller('contactCtrl', ['$scope', function ($scope) {
    $scope.contact = {
        name: 'John Doe'
    };
}]);


describe('Testing the myApp.contact module', function () {
    var scope, createController;

    beforeEach(inject(function ($rootScope, $controller) {
        scope = $rootScope.$new();

        createController = function () {
            return $controller('contactCtrl', {
                '$scope': scope
            });
        };
    }));

    it('verifying contact name as John Doe', function () {
        var controller = createController();
        expect(controller).toEqual('John Doe');
    });
});

Testing for myApp.contact module
    ✗ verifying contact name as John Doe
        Error: [ng:areq] Argument 'contactCtrl' is not a function, got undefined
        http://errors.angularjs.org/1.4.9/ng/areq?p0=contactCtrl&p1=not%20a%20function%2C%20got%20undefined
            at E:/angular-seed/app/bower_components/angular/angular.js:68:12
            at assertArg (E:/angular-seed/app/bower_components/angular/angular.js:1816:11)
            at assertArgFn (E:/angular-seed/app/bower_components/angular/angular.js:1826:3)

javascript angularjs jasmine karma-jasmine

Answer 1

Answer №1

It seems like you overlooked a few key points in your code

To ensure that your controller and other components are available, make sure to initialize the angular module by using module('myApp.contact') in your before each block. This will prevent the error message
```
Error: [ng:areq] Argument 'contactCtrl' is not a function, got undefined
```
.
When writing your Assert statement in the test, remember to use the scope object instead of the controller (you can use the controller when properties are bound to this).
Additionally, do not forget to include contactCtrl.js and ui-router.js on the page.
```
expect(scope.contact.name).toEqual('John Doe');
```

Code

describe('myApp.contact module tests', function () {
    var scope, createController;
    beforeEach(module('myApp.contact')); //1st change

    beforeEach(inject(function ($rootScope, $controller) {
        scope = $rootScope.$new();
        createController = function () {
            return $controller('contactCtrl', {
                '$scope': scope
            });
        };
    }));

    it('contact name is John Doe', function () {
        var controller = createController();
        expect(scope.contact.name).toEqual('John Doe'); //2nd change
    });
});

Answer 2

It seems like you overlooked a few key points in your code

To ensure that your controller and other components are available, make sure to initialize the angular module by using module('myApp.contact') in your before each block. This will prevent the error message
```
Error: [ng:areq] Argument 'contactCtrl' is not a function, got undefined
```
.
When writing your Assert statement in the test, remember to use the scope object instead of the controller (you can use the controller when properties are bound to this).
Additionally, do not forget to include contactCtrl.js and ui-router.js on the page.
```
expect(scope.contact.name).toEqual('John Doe');
```

Code

describe('myApp.contact module tests', function () {
    var scope, createController;
    beforeEach(module('myApp.contact')); //1st change

    beforeEach(inject(function ($rootScope, $controller) {
        scope = $rootScope.$new();
        createController = function () {
            return $controller('contactCtrl', {
                '$scope': scope
            });
        };
    }));

    it('contact name is John Doe', function () {
        var controller = createController();
        expect(scope.contact.name).toEqual('John Doe'); //2nd change
    });
});

Testing Jasmine, Karma, and Angular to create a controller

Answer №1

Similar questions

The data point on jqPlot does not display in full

The pagination feature in ui-bootstrap-tpls 1.0.0 or later versions is not showing up as expected

Step-by-step guide on permanently updating the text of select options with JavaScript

Having trouble with a Three.JS/WebGL 3D object not loading in Firefox?

Getting systemjs to load a module from a CDN in global format: The ultimate guide

What are some solutions for resolving conflicts between map zoom and page zoom on a mobile website?

"Encountered a Http502 error while running the Node component (code provided for reference purposes

Can you explain the concept of Object Buffer in Node.js?

Updating another component when an input value changes in React

The error block in AJAX is not triggered when the API server responds with an HTTP 500 status code

Incorporate the "PartialView" utilizing the template URL on localhost using IIS 7.5 and AngularJs

Is there a way to modify a CSS class in Chrome that is only visible when I perform a drag action?

Using JavaScript Regular Expressions to locate all prefixes leading up to a specific character

Tips for implementing a tile vendor in AngularJs Leaflet?

Having trouble implementing highlighting functionality for a WebElement in Selenium with JavascriptExecutor on Firefox version 35

Guide to redirecting to another page with parameters in React

encounter with file compression using gzip

Retrieving AJAX data in a Node.js environment

Ignore a directory during TypeScript compilation

Encountering a roadblock while trying to work with AngularJS Material radio buttons