Question

我在使用karma测试角度指令时遇到了一些问题，问题是来自templateUrl的时候从不翻译它。

这是我的karma.conf.js

'use strict';
var wiredep = require('wiredep');
var bowerFiles = wiredep().js;
var appFiles = [
  'src/modules/**/*-module.js',
  'src/modules/**/**/*.js',
  { pattern: 'src/modules/**/*.mol', watched: true, served: true, included: false },
  'src/modules/**/**/templates/*.html',
  {
    pattern: '../src/assets/images/*.*',
    watched: false,
    included: false,
    served: true
  },
  'src/modules/**/**/templates/*.html'
];
module.exports = function (config) {
  config.set({
    // base path that will be used to resolve all patterns (eg. files, exclude)
    basePath: '',
    // frameworks to use
    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
    frameworks: [
      'mocha',
      'chai',
      'sinon-chai'
    ],
    junitReporter: {
      outputFile: '../reports/test-results/test-results.xml'
    },
    coverageReporter: {
      dir: 'reports/test-coverage/',
      subdir: function (browser) {
        // normalization process to keep a consistent browser name across different OS
        return browser.toLowerCase().split(/[ /-]/)[0];
      },
      check: {
        global: {
          statements: 10,
          branches: 1,
          functions: 10,
          lines: 10
        },
        each: {
          statements: 0,
          branches: 0,
          functions: 0,
          lines: 0
        }
      },
      reporters: [
        { type: 'html', file: 'coverage.html' },
        { type: 'cobertura', file: 'coverage.xml' },
        { type: 'json' },
        { type: 'text-summary' }
      ]
    },
    reporters: ['junit', 'dots', 'coverage'],
    // list of files / patterns to load in the browser
    files: [].concat(bowerFiles, appFiles),
    // list of files to exclude
    exclude: [],
    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors: {
      'src/modules/**/**/!(*.test).js': 'coverage',
      'src/modules/**/**/templates/*.html': ['ng-html2js']
    },
    ngHtml2JsPreprocessor: {
      stripPrefix: 'src/',
      moduleName: 'templates'
    },
    // test results reporter to use
    // possible values: 'dots', 'progress'
    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
    // web server port
    port: 9876,
    // enable / disable colors in the output (reporters and logs)
    colors: true,
    // level of logging
    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
    logLevel: config.LOG_INFO,
    // enable / disable watching file and executing tests whenever any file changes
    autoWatch: true,
    // start these browsers
    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
    browsers: ['Chrome'],
    // Continuous Integration mode
    // if true, Karma captures browsers, runs the tests and exits
    singleRun: false,
    // Concurrency level
    // how many browser should be started simultaneous
    concurrency: Infinity
  });
};

测试......

'use strict';

describe('dra-header-directive', function () {
  var compile;
  var rootScope;
  var templateCache;

  beforeEach(module('dd'));
  beforeEach(module('templates'));

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

  it('Replace the element with the appropiate element', function () {
    var scope = rootScope.$new();
    var el = angular.element('<testing></testing><dra-header></dra-header><input-bar></input-bar>');
    var element = compile(el)(scope);
    scope.$digest();
    console.log(element);
  });

});

第一个标签由于未被定义为templateUrl而被翻译，但其他标签未被定义。

如果我使用$ templateCache获取模板，我可以阅读内容，所以我认为ng-html2js正在做它的工作。有任何想法吗？谢谢你的帮助！

Answer 1

它解决了，我在每个模块之前更改了以避免导入不必要的模块依赖项，看起来有些东西正在修改我的rootScope，我只是加载了具有该指令的模块，现在工作正常

'use strict';

describe('dra-header-directive', function () {
  var compile;
  var scope;
  var templateCache;

  beforeEach(module('dra.components.DRAHeaderModule'));

  beforeEach(function () {
    module('templates');
  });

  beforeEach(inject(function ($compile, $rootScope, $templateCache) {
    compile = $compile;
    templateCache = $templateCache;
    scope = $rootScope.$new();
  }));

  it('Replace the element with the appropiate element', function () {
    var el = angular.element('<dra-header></dra-header>');
    compile(el)(scope);
    scope.$digest();
    expect(el.find('div')[0]).to.not.be.undefined();
  });

});

karma angular templateUrl未找到

1 个答案: