Question

我遇到了奇怪的问题，我被困住了。

我的观点是测试项目中的指令列表。

指令如下所示：

angular.module('lessons', []).directive('uwTextarea', ['usUmpire', 'usConfig', function (usUmpire, usConfig) {
    return {
        scope: {
            settings: "="
        },
        restrict: 'E',
        replace: true,
        transclude : true,
        templateUrl: 'rki/directive/uw-textarea/uw-textarea.html',
        controller: function ($scope, $element) {
            // blah blah
        }
    };
}]);

测试看起来像这样：

describe('uwTextarea', function() {

    var scope, rscope, elem, compile;

    beforeEach(module('lessons'));

    beforeEach(module('directive/uw-textarea/uw-textarea.html'));

    beforeEach(inject(function($rootScope, $compile) {
        rscope = $rootScope;
        compile = $compile;
    }))


    it('Directive Compiles', function() {
        elem = compile('<uw-textarea></uw-textarea>')(rscope);
        console.log(elem);
        rscope.$digest();

    });
});

console.log(elem)给了我这个

LOG: {0: <uw-textarea class="ng-scope"></uw-textarea>, length: 1}

我获取模板的方式是

beforeEach(inject(function($rootScope, $compile, $templateCache) {
    rscope = $rootScope;
    compile = $compile;
    tmpl = $templateCache.get('directive/uw-textarea/uw-textarea.html');
}))

但我认为这不是正确的方法。

karma.conf.js

module.exports = function(config) {
    config.set({
    basePath: '',
    frameworks: ['jasmine'],
    files: [
        'bower_components/jquery/dist/jquery.min.js',
        'bower_components/angular/angular.min.js',
        'bower_components/angular-mocks/angular-mocks.js',

        'app.js',

        'service/*.js',

        'directive/uw-textarea/uw-textarea.js',
        'directive/uw-textarea/uw-textarea-spec.js',
        'directive/uw-textarea/uw-textarea.html'
    ],
    preprocessors: {
        'directive/uw-textarea/uw-textarea.html' : 'ng-html2js'
    },
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false
  });
};

我尝试使用ng-directive-testing示例进行测试，并且执行相同的指令尚未编译。

我的代码出了什么问题？

Answer 1

我知道这是一篇很老的帖子，但最近我自己也遇到了一些麻烦。这是我的指令测试的一个例子，它现在有效。

describe('Directive', function () {
  var element, scope, isolatedScope;

  // Load the directive module and the html file
  beforeEach(module('directives'));
  beforeEach(module('path/to/directive/directive.html'));


  beforeEach(inject(function ($compile, $rootScope) {

    // Directive
    var html = '<div somedirective></div>';

    // Create the angular element
    var elem = angular.element(html);

    // Add stuff to scope if needed
    scope = $rootScope;
    scope.settings = 'bar';

    //Compile with the scope
    element = $compile(elem)(scope);
    scope.$digest();

    //Sometimes handy
    isolatedScope = element.isolateScope();

    it(' ... ', function () { /** Test **/ });

除了karma配置的问题，我还包括：

   // Enabled plugins
    plugins: [
      "ng-html2js",
      "karma-phantomjs-launcher",
      "karma-jasmine",
      "karma-ng-html2js-preprocessor"
    ]

希望这有帮助

指令使用karma进行角度编译

1 个答案: