AngularJs test throwing exception with Jasmine via Karma

Question

I am facing a weird exception while testing my angular things written in TypeScript here is both my files:

file name: routeStates.ts

module Application {
    'use strict';

    class RootState implements ng.ui.IState {
        name: string;
        url: string;
        template: string;
        'abstract': boolean;

        constructor(settings: ISettings) {
            this.name = 'portal';
            this.url = '';
            this.template = '<div ui-view></div>';
            this.abstract = true;
        }
    }

    class ReportsState implements ng.ui.IState {
        name: string;
        url: string;
        templateUrl: string;
        'abstract': boolean;

        constructor(settings: ISettings) {
            this.name = 'portal.reports';
            this.url = '/reports';
            this.templateUrl = settings.partialsPath + 'reports/partial-reports.html';
            this.abstract = true;
        }
    }

    class AdminState implements ng.ui.IState {
        name: string;
        url: string;
        templateUrl: string;
        'abstract': boolean;

        constructor(settings: ISettings) {
            this.name = 'portal.admin';
            this.url = '/admin';
            this.templateUrl = settings.partialsPath + 'admin/partial-admin.html';
            this.abstract = true;
        }
    }

    export class ApplicationRoutingConfig {
        public static configure(
            $stateProvider: ng.ui.IStateProvider,
            $urlRouteProvider: ng.ui.IUrlRouterProvider,
            settings: ISettings) {
            $urlRouteProvider.otherwise('/reports/generate-reports');
            $stateProvider
                .state(new RootState(settings))
                .state(new ReportsState(settings))
                .state(new AdminState(settings));
        }
    }
}

file name: routeStatesTests.ts

/// <reference path="../../lib/jasmine/jasmine.d.ts" />
module App {
    'use strict';

    describe('Application Route States Tests', () => {

        beforeEach(() => {
            module('ui.router');
            module('Application');
        });

        //beforeEach(module('Application'));


        it('should have a ApplicationRoutingConfig controller', () => {
            expect(Application.ApplicationRoutingConfig).toBeDefined();
        });

        it('should initialize ApplicationRoutingConfig', () => {
            expect(Application.ApplicationRoutingConfig.configure).toBeDefined();
        });

        var $stateProvider: ng.ui.IStateProvider;
        var $urlRouterProvider: ng.ui.IUrlRouterProvider;
        var settings: Application.ISettings = new Application.Settings();

        //This is throwing exception 

        it('should not return empty config', () => {
            expect(Application.ApplicationRoutingConfig.configure($stateProvider, $urlRouterProvider, settings)).toNotEqual(null);
        });

    });
}

I am getting exception:

TypeError: Unable to get property 'otherwise' of undefined or null reference at ApplicationRoutingConfig.configure 

All other tests are getting passed expect this one.

Any help for this will be highly appreciated!

Answer 1

you missed injecting the dependencies ...

 module Application {
            ...
            export class ApplicationRoutingConfig {
                public static configure(
                    $stateProvider: ng.ui.IStateProvider,
                    $urlRouteProvider: ng.ui.IUrlRouterProvider,
                    settings: ISettings) {
                    $urlRouteProvider
                        .otherwise('/reports/generate-reports');
                    $stateProvider
                        .state(new RootState(settings))
                        .state(new ReportsState(settings))
                        .state(new AdminState(settings));
                    //Missing?: should not return empty config?
                    return this; //?
    }}}
and then in routetStateTest

    describe('Application Route States Tests', () => {

        var urlRouterProvider: ng.ui.IUrlRouterProvider;
        var stateProvider: ng.ui.IStateProvider;
        var settings: Application.ISettings = new Application.Settings();

          beforeEach(() => {
               module('ui.router');
            });

           //missing: instantiating/injecting
               beforeEach(module(function($stateProvider, $urlRouterProvider) {
                   urlRouterProvider = $urlRouterProvider;
                   stateProvider = $stateProvider;
               }));

          it('should have a ApplicationRoutingConfig controller', () => {
              expect(Application.ApplicationRoutingConfig).toBeDefined();
          });

          it('should initialize ApplicationRoutingConfig', () => {
              expect(Application.ApplicationRoutingConfig.configure)
              .toBeDefined();
          });

          //missing: instantiating/injecting
          it('should not return empty config', 
              inject(() => {
                  expect(Application
                      .ApplicationRoutingConfig
                      .configure(stateProvider, urlRouterProvider, settings)
                  ).toNotEqual(null);
              }
          ));
Karma: 
SUCCESS myApp.version module interpolate filter should replace VERSION
SUCCESS myApp.version module app-version directive should print current version
SUCCESS myApp.version module version service should return current version
SUCCESS myApp.view1 module view1 controller should ....
SUCCESS myApp.view2 module view2 controller should ....
SUCCESS Application Route States Tests should have a ApplicationRoutingConfig controller
SUCCESS Application Route States Tests should initialize ApplicationRoutingConfig
SUCCESS Application Route States Tests should not return empty config