使用ng-html2js进行AngularJS Componet测试

时间:2017-04-20 08:05:48

标签: angularjs unit-testing ng-html2js

有人可以帮我解决这个问题:

Angular项目:

gui_service /客户端/ SRC / JS / remoteGuiApp.js:

angular.module('remoteGuiApp', ['ui.bootstrap', 'ngRoute', 'ngSanitize', 'ngResource'])

gui_service /客户端/ SRC /模块/登录/ login.js

angular.module('remoteGuiApp')
.component('login', {
    controller: function () {
        this.login = '';
        this.password = '';
        this.showError = false;
    },
    templateUrl: '/src/modules/login/login.html'
});

我还有' /src/modules/login/login.html'该组件的模板。

gui_service /客户端/测试/ karma.conf

module.exports = function (config) {
    'use strict';
    config.set({

        basePath: '',

        frameworks: ['mocha', 'chai'],

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

            //Library Files
             '../src/vendor/js/jquery-2.2.4.min.js',
             '../src/vendor/js/moment.js',
             '../src/vendor/js/bootstrap.min.js',
             '../src/vendor/js/ui-bootstrap.js',

            '../src/js/remoteGuiApp.js',
            '../src/js/Authentication.js',
            '../src/modules/login/login.js',

            //tests
             '*.js',
             //templates
             '../src/modules/**/*.html'
        ],

        // generate js files from html templates
        preprocessors: {
           '../src/modules/**/*.html': ['ng-html2js']
        },

        ngHtml2JsPreprocessor: {
            // strip this from the file path
            stripPrefix: 'client/'
        },

        reporters: ['mocha'],

        port: 9876,
        colors: true,
        autoWatch: true,
        singleRun: false,

        // level of logging
        logLevel: config.LOG_INFO,

        browsers: ['Chrome'],

        concurrency: Infinity
    });
};

最后我的问题点: 的 gui_service /客户端/测试/ LoginComponent-test.js

describe('Component: login', function () {
    beforeEach(module('remoteGuiApp'));

    // load the login template
    beforeEach(module('/src/modules/login/login.html'));

    let scope;
    let element;
    let controller;

    beforeEach(inject(function($rootScope, $compile) {
        element = angular.element('<login></login>');

        scope = $rootScope.$new();
        $compile(element)(scope);
        scope.$digest();
    }));

  it('Controller fields', function(done) {
      expect(true).true;
      done();
  });

});

由于启动业力,我有这样的错误:angular link error

也许有人会告诉解决这个问题的方法。感谢您的帮助。

1 个答案:

答案 0 :(得分:0)

我解决了。 主要问题在于路径。因此,如果你需要配置karma.conf.js来测试Angular指令/组件与templateUrl,请注意标记:

basePath: ''
preprocessors: ''
ngHtml2JsPreprocessor: {
            stripPrefix: ''
            prependPrefix: ''
        },

非常谨慎地阅读手册https://github.com/karma-runner/karma-ng-html2js-preprocessor/blob/master/README.md#configuration,以免像我一样踩着耙子。