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 Commented 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
    Commented Aug 31, 2020 at 8:03

0

Your Answer

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