使用 templateUrl 和 Jade 测试 Angular 指令答案

【问题标题】：Test Angular directive with templateUrl and Jade使用 templateUrl 和 Jade 测试 Angular 指令
【发布时间】：2014-11-06 16:11:18
【问题描述】：

我在我的网络应用程序中使用 Node.js 和 Express 和 Jade，并启用了 AngularJS最佳。通常，当我构建指令时，我将 Html 包含在指令定义的模板中，然后我测试编写我需要的 Html sn-p 的指令。但是现在我必须编写一个包含很长 HTML 的指令，所以我使用templateUrl：此外，我想使用 Jade 来完成。所以代码看起来像这样：

[...]
.directive('myDirective', function () {
    return {
        restrict: 'E',
        templateUrl: '/snippet',
        link: function (scope, element, attrs) {
            // some code
        }
    };
});

服务器在哪里处理对/snippet的调用：

app.get('/snippet', function (req, res) {
    res.render('templates/mySnippet', {}, 
        function (err, rendered) {
            if (!err)
                res.status(200).send(rendered);
        });
});

所以我的问题是：如何测试这个指令？我通常使用 Karma 和 Mocha/Chai 进行单元测试：当我的指令将搜索 /snippet 时，是否存在任何可以获取翡翠文件、处理它并将其用作假服务器的 karma 插件？

【问题讨论】：

如果您的翡翠模板是无状态的（也就是不依赖于服务器数据），我希望您应该使用 grunt、gulp 或任何 js 项目管理器预编译它们而不是从服务器提供它们。这将极大地促进测试步骤（也可以从 grunt / glup / other 启动）如果它们（模板）不是无状态的 - 好吧，制作它们，因为它们应该。
@PierreGayvallet 你的意思是只为测试预编译更好，还是你的意思是也为服务器提供的正常页面进行预编译？当然我的模板页面是无状态的。
最好也为“普通”页面进行预编译，这样，您在测试阶段和运行/生产阶段以相同的方式处理 tpl 编译（也避免每次请求都编译您的翡翠模板为此模板发送）
connect-jade-static 可能会派上用场。
@PierreGayvallet 你是对的，现在我已经用 grunt-contrib-jade 预处理了我的部分视图，我可以通过 karma-ng-html2js-preprocessor 对其进行测试。如果您将评论重写为答案，我可以将此问题设置为已回答。

标签： angularjs angularjs-directive pug karma-runner karma-mocha

【解决方案1】：

我在一个由 yeoman gulp-angular 生成器引导的项目中使用 gulp（不是 grunt）和 Jade 模板。为了使 Jasmine 单元测试正常工作，我需要进行以下更改：

在 gulp/unit-tests.js 中：

     var htmlFiles = [
-      options.src + '/**/*.html'
+      options.src + '/**/*.html',
+      options.tmp + '/serve/**/*.html' // jade files are converted to HTML and dropped here
     ];
...
-  gulp.task('test', ['scripts'], function(done) {
+  gulp.task('test', ['markups','scripts'], function(done) {
     runTests(true, done);
   });

在 karma.conf.js 中：

     ngHtml2JsPreprocessor: {
-      stripPrefix: 'src/',
-      moduleName: 'gulpAngular'
+      cacheIdFromPath: function(filepath) {
+                         // jade files come from .tmp/serve so we need to strip that prefix
+                         return filepath.substr(".tmp/serve/".length);
+                       },
+      moduleName: 'myAppTemplates'
     },
...
 preprocessors: {
-      'src/**/*.html': ['ng-html2js']
+      // jade templates are converted to HTML and dropped here
+      '.tmp/serve/**/*.html': ['ng-html2js']
 }

这是一个页脚指令的单元测试文件：

'use strict';

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

  // Load the myApp module, which contains the directive
  beforeEach(module('myApp'));
  beforeEach(module('myAppTemplates')); // generated in karma.conf

  // 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('<footer/>')($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('Copyright');
  });
});

【讨论】：