Question

未加载指令的模板。

现在我得到了：

$ karma start test/config/karma.config.js 
INFO [karma]: Karma v0.10.10 server started at http://localhost:9876/
INFO [launcher]: Starting browser Chrome
INFO [Chrome 35.0.1916 (Mac OS X 10.9.4)]: Connected on socket PC84tuDRk52x9Cq4G_xp
Chrome 35.0.1916 (Mac OS X 10.9.4) Directive pagination test has the number of the page as text in each page item FAILED
    Error: Unexpected request: GET static/src/partials/pagination.tpl.html

我试图对一个简单的指令进行单元测试。指令在directives.js。

中声明

angular.module('app.directives', [])
.directive('pagination', function() {
    return {
        restrict: "E",
        scope: {
            numPages: "=",
            currentPage: "="
        },
        templateUrl: 'static/src/partials/pagination.tpl.html',
        replace: true,
        link: function(scope) {
            // ...
        }
    };
});
;

目录结构：

static
├── Gruntfile.js
├── bower.json
├── node_modules
├── package.json
├── src
│   ├── app.js
│   ├── controllers.js
│   ├── directives.js
│   ├── partials
│   │   ├── add.tpl.html
│   │   ├── edit.tpl.html
│   │   ├── list.tpl.html
│   │   ├── pagination.tpl.html
│   │   ├── secpage.tpl.html
│   │   └── toolbar.tpl.html
│   └── services.js
├── test
│   ├── config
│   │   └── karma.config.js
│   └── unit
│       ├── button-directive.test.js
│       ├── pagination-directive.test.js
│       └── t1.test.js
└── vendor

测试文件pagination-directive.test.js

describe('Directive pagination test', function () {

    var $rootScope,
        $compile,
        element,
        lis;

    beforeEach(angular.mock.module('app.directives'));
    beforeEach(angular.mock.module('templates'));
    beforeEach(inject(function (_$rootScope_, _$compile_) {
        $rootScope = _$rootScope_;
        $compile = _$compile_;

        $rootScope.numPages = 5;
        $rootScope.currentPage = 3;

        element = $compile('<pagination num-pages="numPages" current-page="currentPage"></pagination>')($rootScope);
        $rootScope.$digest();

        lis = function() {return element.find('li');};
    }));
    it('has the number of the page as text in each page item', function() {
        for (var i=1; i<=$rootScope.numPages; i++) {
            expect(lis().eq(i).text()).toEqual(''+i);
        }
    });
});

和业力配置：

module.exports = function(config) {
  config.set({
    basePath: '',

    frameworks: ['jasmine'],

    files: [
        '../../vendor/angular/angular.js',
        '../../vendor/angular-mocks/angular-mocks.js',
        '../../vendor/angular-cookies/angular-cookies.js',
        '../../vendor/angular-route/angular-route.js',
        '../../vendor/angular-resource/angular-resource.js',

        '../../src/*.js',
        '../../src/partials/*.html',

        '../unit/*.test.js',
    ],

    exclude: [],

    preprocessors: {
        "../../src/**/*.html": "ng-html2js"
    },

    ngHtml2JsPreprocessor: {
      stripPrefix: "../../",
      prependPrefix: "static/",
      moduleName: "templates"
    },

    reporters: ['progress'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false
  });
};

请帮帮我。

源代码： https://github.com/Istergul/directive_test

Answer 1

试试这个：

在静态文件夹下移动karma.config.js。

static
├── karma.config.js

karma.config.js

files: [
    'vendor/angular/angular.js',
    'vendor/angular-mocks/angular-mocks.js',
    'vendor/angular-cookies/angular-cookies.js',
    'vendor/angular-route/angular-route.js',
    'vendor/angular-resource/angular-resource.js',

    'src/*.js',
    'src/partials/*.html',

    'test/unit/*.test.js',
],

preprocessors: {
    "src/**/*.html": "ng-html2js"
},

ngHtml2JsPreprocessor: {
  stripPrefix: "src/",
  moduleName: "templates"
},

指令

templateUrl: 'partials/pagination.tpl.html',

希望这有帮助。

Answer 2

比./static/node_modules/karma/bin/karma start static/test/config/karma.config.js

更大的配置

module.exports = function(config) {
  config.set({

    // base path that will be used to resolve all patterns (eg. files, exclude)
    basePath: '../../',

    // frameworks to use
    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
    frameworks: ['jasmine'],

    // list of files / patterns to load in the browser
    files: [
        './vendor/angular/angular.js',
        './vendor/angular-mocks/angular-mocks.js',
        './vendor/angular-cookies/angular-cookies.js',
        './vendor/angular-route/angular-route.js',
        './vendor/angular-resource/angular-resource.js',
        './src/*.js',
        './src/partials/*.html',
        './test/unit/*.test.js',
    ],

    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors: {
        "./src/partials/*.html": "ng-html2js"
    },

    ngHtml2JsPreprocessor: {
      moduleName: "templates"
    }
  });
};

由于某种原因 ng-html2js 无法理解interpolateProvide提供程序的更改

.config(["$interpolateProvider", function($interpolateProvider){
    $interpolateProvider.startSymbol('[[');
    $interpolateProvider.endSymbol(']]');
}])

karma / jasmine / angular - 麻烦单元测试指令使用templateUrl的AngularJS

2 个答案: