AngularJS 使用 ng-html2js 进行组件测试

Question

谁能帮我解决这个问题：

Angular 项目：

gui_service/client/src/js/remoteGuiApp.js:

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

gui_service/client/src/modules/login/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/client/test/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/client/test/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

也许有人会告诉这个问题的解决方案。谢谢你的帮助。

Answer 1

我解决了。主要问题出在路径上。因此，如果您需要使用 templateUrl 为测试 Angular directive/component 配置 karma.conf.js，请注意标签：

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

仔细阅读手册https://github.com/karma-runner/karma-ng-html2js-preprocessor/blob/master/README.md#configuration以免像我一样踩到耙子）

AngularJS 使用 ng-html2js 进行组件测试

AngularJS Componet testing with ng-html2js

unit-testing

angularjs

ng-html2js