带有外部模板的单元测试 angularjs 自定义组件，当模板是外部模板时服务中断

Question

您好，我创建了一个使用外部模板并需要服务的自定义组件，当模板定义为外部时，单元测试中断。 main.html <cc-accordion items="genres"></cc-accordion> 中的模板引用这是组件 js

angular.module("ccAccordion", [])
.directive("ccAccordion", function () {
 return {
      restrict: "AE",
      templateUrl: "components/accordion/accordion.html",
      scope: {
          items: "="
      },
      link: function (scope) {
          scope.$watch("items", function (items) {
              angular.forEach(items, function (item) {
                  item.selected = false;
              });

             scope.select = function (index) {
                  (scope.items[index].selected === true ) ? scope.items[index].selected = false : scope.items[index].selected = true;
                  angular.forEach(scope.items, function (item, key) {
                      if(key !== index) {
                        item.selected = false;  
                      }
                  });
              };
          });
      }
  };
 });

这里是单元测试

describe('ccAccordion', function () {
var elm, scope;
beforeEach(module('ccAccordion'));

beforeEach(inject(function ($rootScope, $compile) {
    elm = angular.element(
      '<cc-accordion items="genres"></cc-accordion>'
   );

    scope = $rootScope;
    scope.genres = [{
            title: 'Scifi', 
            description: 'Scifi description'
        }, {
            title: 'Comedy',
            description: 'Comedy description'
        }];
    $compile(elm)(scope);
    scope.$digest();
}));

it('should create clickable titles', function () {
    var titles = elm.find('.cc-accord h2');

    expect(titles.length).toBe(2);
    expect(titles.eq(0).text().trim()).toBe('Scifi');
    expect(titles.eq(1).text().trim()).toBe('Comedy');
});

it('should bind the content', function () {
    var contents = elm.find('.cc-accord-content p');

    expect(contents.length).toBe(2);
    expect(contents.eq(0).text().trim()).toBe('Scifi description');
    expect(contents.eq(1).text().trim()).toBe('Comedy description');

});

it('should change active content when header clicked', function () {
    var titles = elm.find('.cc-accord h2'),
        divs = elm.find('.cc-accord');

    // click the second header
    titles.eq(1).find('a').click();

    // second div should be active
    expect(divs.eq(0)).not.toHaveClass('active');
    expect(divs.eq(1)).toHaveClass('active');
});
});

这是模板

<div class="cc-accord" ng-repeat="item in items" ng-class="{active:item.selected}" ng-click="select($index)">
 <h2><a>
      {{item.title}} <cc-up-down-arrow></cc-up-down-arrow>
     </a></h2>
   <div class="cc-accord-content"><p>{{item.description}}</p></div>
</div>

如果我将模板放在指令中，测试就会通过。我试过编辑 karma.conf 以使用预处理器和 'ng-html2js' 但无法让它工作。任何帮助将非常感激。提前致谢

这是我的 karma.conf，我正在使用 mean stack 搭建应用程序

// Karma configuration
// http://karma-runner.github.io/0.10/config/configuration-file.html

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'],
    // list of files / patterns to load in the browser
    files: [
        'client/bower_components/jquery/dist/jquery.js',
        'client/bower_components/angular/angular.js',
        'client/bower_components/angular-mocks/angular-mocks.js',
        'client/bower_components/angular-resource/angular-resource.js',
        'client/bower_components/angular-animate/angular-animate.js',
        'client/bower_components/angular-cookies/angular-cookies.js',
        'client/bower_components/angular-sanitize/angular-sanitize.js',
        'client/bower_components/angular-route/angular-route.js',
        'client/bower_components/lodash/dist/lodash.compat.js',
        'client/bower_components/angular-socket-io/socket.js',
        'client/bower_components/angular-ui-router/release/angular-ui-     router.js',
        'client/app/app.js',
        'client/app/**/*.js',
        'client/components/**/*.js',
        'client/app/**/*.html',
        'client/components/**/*.html'
    ],

    preprocessors: { 
        'client/components/accordion/accordion.html': 'ng-html2js'
    },
    ngHtml2JsPreprocessor: {
        /*stripPrefix: 'client/',
        stripSufix: '.ext',
        // prepend this to the
        prependPrefix: 'served/'*/
    },
    ngJade2JsPreprocessor: {
        stripPrefix: 'client/'
    },
    // list of files / patterns to exclude
    exclude: [],
    // web server port
    port: 8080,
    // level of logging
    // possible values: LOG_DISABLE || LOG_ERROR || LOG_WARN || LOG_INFO || LOG_DEBUG
    logLevel: config.LOG_INFO,
    // enable / disable watching file and executing tests whenever any file changes
    autoWatch: false,
    // Start these browsers, currently available:
    // - Chrome
    // - ChromeCanary
    // - Firefox
    // - Opera
    // - Safari (only Mac)
    // - PhantomJS
    // - IE (only Windows)
    browsers: ['PhantomJS'],
    // Continuous Integration mode
    // if true, it capture browsers, run tests and exit
    singleRun: false
});

};

jasmine 2.0 的新匹配器功能

beforeEach(function () {
    jasmine.addMatchers({
        toHaveClass: function () {
            return {
                compare: function (actual, expected) {
                    var classTest = actual.hasClass(expected);
                    classTest ? classTest = true : classTest = false;
                    return {
                        pass: classTest,
                        message: 'Expected ' + angular.mock.dump(actual) + ' to have class ' + expected
                    };
                }
            };
        }
    });
});

用法

expect(divs.eq(0)).not.toHaveClass('active');
expect(divs.eq(1)).toHaveClass('active');

Answer 1

我刚刚将你的 karma 配置文件与我的进行了比较，发现了以下差异：

在字段预处理器中，尝试提供一个数组而不是单个处理器
使用 ngHtml2JsPreprocessor 字段

您的 karma conf 文件应包含以下内容：

preprocessors: {
    'client/components/accordion/accordion.html': ['ng-html2js']
},
ngHtml2JsPreprocessor: {
    stripPrefix: 'client/'
}

Answer 2

正如 Himmet 所说，karma.conf 文件需要编辑，您需要将模板的位置放入预处理器部分

preprocessors: {
'client/components/accordion/accordion.html': ['ng-html2js'],
'another-template-path/template.html': ['ng-html2js']
},
ngHtml2JsPreprocessor: {
  stripPrefix: 'client/'
}

带有外部模板的单元测试 angularjs 自定义组件，当模板是外部模板时服务中断

Unit Testing angularjs custom component with external template and service breaks when the template is external

service

templates

unit-testing

external

angularjs