Angularjs用Karma进行单元测试

Question

测试指令有一些问题 - 我们的应用程序试图模块化，因此需要module.exports导出角度模块;

module.exports = angular.module('project', [])

    .config(function ($stateProvider) {
        $stateProvider
            .state('alive', {
                url: '/college',
                templateUrl: 'dashboard.html',
                controller: 'CollegeCtrl',
                authenticate: true
            });
    })
    .factory('College', require('./services/college.service.js'))
    .controller('CollegeCtrl', require('./dashboard/college.controller.js'))
    .directive('collegeTile', require('./dashboard/tile/tile.directive.js'))
    .run(function ($rootScope, SideFactory) {  
        SideFactory.push({                
            'priority': 1,
            'icon': 'fa-th-large'
        });
    });

指令看起来像这样;

<div class="thumbnail" ng-click="openProject(college._id)">   
        <span>{{college}}</span>
    </div>
</div>

指令规范如下所示 - 注意，模板加载所有html模板;

'use strict';

describe('Directive: tile', function () {
    var $compile;
    var $scope;

    // load the directive's module and view
    beforeEach(module('ui.router'));
    beforeEach(module('project'));
    beforeEach(module('templates'));

    // Create the SideFactory
    beforeEach(module(function ($provide) {
        var sideFactory = {
            push: function () {
            }
        };
        $provide.value('SideFactory', sideFactory);
    }));

    beforeEach(inject(function (_$compile_, _$rootScope_) {
        $compile = _$compile_;
        $scope = _$rootScope_.$new();
    }));  

    it("should validate to true", function () {
        expect(true).toBe(true);
    });

});

运行业力时出现以下错误;

TypeError: 'undefined' is not a function (evaluating 'expect(true).toBe(true)')

Karma配置;

module.exports = function (config) {
    config.set({
        // base path, that will be used to resolve files and exclude
        basePath: '',

        // testing framework to use (jasmine/mocha/qunit/...)
        frameworks: ['jasmine', 'chai'],

        // list of files / patterns to load in the browser
        files: [
            'dev/assets/bundle.js',
            'angular-mocks/angular-mocks.js',

            'sample/client/*.html',
            'sample/client/*.spec.js',
            'client/**/*.html',
            'client/**/*.spec.js'
        ],

        preprocessors: {
            'client/**/*.html': ['ng-html2js']
        },

        ngHtml2JsPreprocessor: {
            // strip this from the file path
            stripPrefix: 'client/',
            prependPrefix: 'college/',
            // setting this option will create only a single module that contains templates
            // from all the files, so you can load them all with module('foo')
            moduleName: 'templates'
        },

        // list of files / patterns to exclude
        exclude: [],

        // test results reporter to use
        // possible values: 'dots', 'progress', 'junit'
        reporters: ['progress', 'coverage'],

        coverageReporter: {
            type: 'html',
            dir: 'coverage'
        },

        // enable / disable colors in the output (reporters and logs)
        colors: true,

        // web server port
        port: 8080,

        // level of logging: LOG_DISABLE || LOG_ERROR || LOG_WARN || LOG_INFO || LOG_DEBUG
        logLevel: 'INFO',

        // enable / disable watching file and executing tests whenever any file changes
        autoWatch: true,

        // - IE (only Windows)
        browsers: ['PhantomJS'],

        // Continuous Integration mode
        // if true, it capture browsers, run tests and exit
        singleRun: false
    });
};