Тестирование AngularJS-компонентов с помощью ng-html2js

Question

Может ли кто-нибудь помочь мне с этой проблемой:

Угловой проект:

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 / 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();
  });

});

В результате запуска кармы у меня есть ошибка, как это: ошибка угловой ссылки

Может быть, кто-то подскажет решение этой проблемы. Спасибо за вашу помощь.

Answer 1

Я решил это. Основная проблема была в дорожках. Поэтому, если вам нужно настроить karma.conf.js для тестирования Angular-директивы / компонента с templateUrl, будьте осторожны с тегами:

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

Очень внимательно прочитайте руководство https://github.com/karma-runner/karma-ng-html2js-preprocessor/blob/master/README.md#configuration чтобы не наступать на грабли, как я)