3

I am looking to implement the Karma/ Jasmine test suite/ framework for use with my AngularJS app.

Having never used a testing framework previously, I have followed the tutorial at: https://scotch.io/tutorials/testing-angularjs-with-jasmine-and-karma-part-1 to give it a go, prior to trying to integrate it into my existing AngularJS app.

But, when I run karma start in the command line, although a browser window does open, I get different output in the console to what the tutorial indicates I should see...

The browser window that opens is:

browser screenshot

As far as I can tell, I have done exactly what it says to do in each step of the tutorial, and yet, in the last step, where it shows that I should get the following output:

screenshot from end of Karma tutorial

What I actually see is this:

screenshot of what I actually see

The output I'm getting seems to indicate that none of my tests are actually being run:

... Executed 0 of 0 ERROR ...

I'm not sure why this is...?

My tests are all defined in the users.spec.js file, with the list of users & the functions to be called defined in users.js, as indicated in the tutorial.

The users.spec.js file is:

describe('Users factory', function() {
    var Users;

    // The array of users our factory will provide us
    var userList = [
        {
            id: '1',
            name: 'Jane',
            role: 'Designer',
            location: 'New York',
            twitter: 'gijane'
        },
        {
            id: '2',
            name: 'Bob',
            role: 'Developer',
            location: 'New York',
            twitter: 'billybob'
        },
        {
            id: '3',
            name: 'Jim',
            role: 'Developer',
            location: 'Chicago',
            twitter: 'jimbo'
        },
        {
            id: '4',
            name: 'Bill',
            role: 'Designer',
            location: 'LA',
            twitter: 'dabill'
        }
    ];

    // The single user we expect to receive when calling findById('2')
    var singleUser = {
        id: '2',
        name: 'Bob',
        role: 'Developer',
        location: 'New York',
        twitter: 'billybob'
    };

    //Before each test load our api.users module
    beforeEach(angular.mock.module('api.users'));

    //Before each test set our injected Users factory (_Users_) to our local Users variable
    beforeEach(inject(function(_Users_) {
        Users = _Users_;
    });

    // A simple test to verify the Users factory exists
    it('should exist', function() {
        expect(Users).toBeDefined();
    });

    // A set of tests for our User.all() method
    describe('.all()', function() {
        // A simple test to verify the method all exists
        it('should exist', function() {
            expect(Users.all).toBeDefined();
        });

        // A test to verify that calling all() returns the array of user we hard-coded above
        it('should returna hard-coded list of users', function() {
            expect(Users.all()).toEqual(userList);
        });
    });

    // A set of tests for our Users.findById() method
    describe('.findById()', function() {
        // A simple test to verify the method findById exists
        it('should exist', function() {
            expect(Users.findById).toBeDefined();
        });

        // A test to verify that calling findById() with an id, in this case '2', returns a single user
        it('should return one user object if it exists', function() {
            expect(Users.findById('2')).toEqual(singleUser);
        });

        // A test to verify that calling dindById() with an id that doesn't exist, in this case 'ABC', returns undefined
        it('should return undefined if the user cannot be found', function() {
            expect(Users.findById('ABC')).not.toBeDefined();
        });
    });


});

and the users.js file is:

(function() {
    'use strict';

    // Creating the module and factory we referenced in the beforeEach blocks in our test file
    angular.module('api.users', [])
    .factory('Users', function() {
        var Users = {};
        var userList = [
            {
                id: '1',
                name: 'Jane',
                role: 'Designer',
                location: 'New York',
                twitter: 'gijane'
            },
            {
                id: '2',
                name: 'Bob',
                role: 'Developer',
                location: 'New York',
                twitter: 'billybob'
            },
            {
                id: '3',
                name: 'Jim',
                role: 'Developer',
                location: 'Chicago',
                twitter: 'jimbo'
            },
            {
                id: '4',
                name: 'Bill',
                role: 'Designer',
                location: 'LA',
                twitter: 'dabill'
            }
        ];

        // Users.method = function() {};
        Users.all = function() {
            return userList;
        };

        // Defining findById to make our test pass. It doesn't need to do anything yet
        Users.findById = function(id) {
            // Return a single user object, as our test is expecting
            return userList.find(function(user) {
                return user.id === id;
            });
        };

        return Users;
    });
})();

I have also included both of those files in the files: [...] section of the karma.conf.js file:

files: [
    './node_modules/angular/angular.js',
    './node_modules/angular-ui-router/release/angular-ui-router.js',
    './node_modules/angular-mocks/angular-mocks.js',
    './app/services/users/users.js',
    './app/app.js',
    './app/services/users/users.spec.js'
],

What am I doing wrong/ missing here? Why is it that the tutorial indicates that I should be seeing some output from the tests, but I am not seeing any of that output?

Your Answer

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

Browse other questions tagged or ask your own question.