5

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 - to give it a go, before 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 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?

2
  • Seems the "app" directory is not directly in your "jasmine" folder May 8, 2020 at 10:47
  • @Noble-Surfer you can add language specific tags block ```lang-js to format the code in the post.
    – Prome
    Aug 31, 2020 at 8:03

1 Answer 1

0

Your issue seems to be that the tests are not running. To resolve it, you can follow these steps:

  1. Make sure the Karma configuration file, karma.conf.js, is correctly configured. The file should specify the path to your tests and source files, as well as the browsers you want to run your tests in.

  2. Check the syntax in both users.spec.js and users.js for any errors. In users.spec.js, you have a missing parenthesis after the inject function:

    beforeEach(inject(function(Users) { Users = Users; });

It should be:

beforeEach(inject(function(_Users_) {
        Users = _Users_;
    }));
  1. Make sure your tests are properly importing and using Angular and AngularJS dependencies. You are using angular.mock.module in users.spec.js, which assumes that you have the angular-mocks.js file included in your project.

  2. Make sure that the test files, users.spec.js and users.js, are correctly referenced in the Karma configuration file, karma.conf.js.

If you have tried all of these steps and still not getting the expected result, please share the complete error message and the relevant code files.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.