Gulp 角度单元测试指令 templateUrl答案

【问题标题】：Gulp angular unit testing directive templateUrlGulp 角度单元测试指令 templateUrl
【发布时间】：2015-02-26 16:28:49
【问题描述】：

我在互联网上阅读了很多帖子，但找不到任何有效的解决方案我正在尝试为指令编写单元测试，并希望从模板缓存中提供 html 文件

我使用 Gulp 作为构建工具

测试的 gulp 任务如下所示

gulp.task('test', function (done) {
    karma.start({
        configFile:__dirname + '/' + config.test.karmaconf,
        singleRun: false
    }, done);
});

在 karma.conf 中，我已经定义了

    browserify: {
        debug: true,
        transform: [['browserify-ng-html2js', {
            module: 'templates',
            extension: 'html'
        }]]
    }

在单元测试中，我声明了

beforeEach(angular.mock.module('templates'));

但收到

Error: Unexpected request: GET path/to/some.html
No more request expected
    at $httpBackend

我也尝试在 karma.conf 中使用 preprocessors 和 ngHtml2JsPreprocessor 但没有成功。谁能提供解决方案或指出我该如何调试为什么不提供模板？

【问题讨论】：

标签： angularjs unit-testing angularjs-directive gulp browserify

【解决方案1】：

解决方案

您可以通过多种方式来做到这一点。这是我的做法：

使用gulp-angular-templatecache:

gulp.task('bundle-common', function() {
  return merge(
    // Store all html files in $templateCache
    gulp.src([
      appDir + '/common/**/*.html'
    ])
    .pipe($$.angularTemplatecache({
      root: 'common'
    }))

    // Append everything else: directives, tests, etc.
    gulp.src([
      appDir + '/common/**/*.js'
    ])
  )
  .pipe($$.concat('common.js'))
  .pipe(gulp.dest('public/js/'));
});

这将输出一个名为 common.js 的文件，其中包含您所有的 html 模板和指令。

看起来有点像这样：

angular.module("templates").run(["$templateCache", function($templateCache) {
$templateCache.put("common/a-great-eye.html","<div>lidless, wreathed in flame, 2 times</div>");}]);

angular.module("common")

.directive('aGreatEye', function () {
    return {
        restrict: 'E',
        replace: true,
        templateUrl: 'common/a-great-eye.html'
    };
});

...

在karma.conf.js 加载common.js:

     files: [
      '../vendor/jquery/dist/jquery.js',
      '../vendor/angular/angular.js',
      '../vendor/angular-mocks/angular-mocks.js',
      '../public/js/common.js'
    ]

在您的测试文件中引用templates 模块：

describe('Unit testing great quotes', function() {
  var $compile,
      $rootScope;

  // Load the common module, which contains the directive
  beforeEach(function() {
    module('templates');
    module('common');
  });

  // Store references to $rootScope and $compile
  // so they are available to all tests in this describe block
  beforeEach(inject(function(_$compile_, _$rootScope_){
    // The injector unwraps the underscores (_) from around the parameter names when matching
    $compile = _$compile_;
    $rootScope = _$rootScope_;
  }));

  it('Replaces the element with the appropriate content', function() {
    // Compile a piece of HTML containing the directive
    var element = $compile("<a-great-eye></a-great-eye>")($rootScope);
    // fire all the watches, so the scope expression {{1 + 1}} will be evaluated
    $rootScope.$digest();
    // Check that the compiled element contains the templated content
    expect(element.html()).toContain("lidless, wreathed in flame, 2 times");
  });
});

调试

在 Chrome 浏览器中开始您的测试并点击调试按钮。然后打开开发者控制台。

小贴士：

您可以在测试中添加断点。
确保控制台窗口中没有错误，尤其是注入错误。如果这样做，请验证您在 karma.config.js 中请求的所有 js 文件（它们将在开发者控制台中列出）均已正确加载并包含您需要的代码（角度、模板、指令等）。

【讨论】：