Question

我在我的网络应用程序中使用 Node.js 与 Express 和 Jade ，并使用 AngularJS 最佳。通常，当我构建指令时，我在指令定义的模板中包含Html，然后我测试编写我需要的Html代码段的指令。但现在我必须写一个包含很长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进行单元测试：是否存在任何可以获取jade文件的业力插件，处理它并在我的指令搜索/snippet时将其作为虚假服务器提供？

Answer 1

我正在使用自动gulp-angular发生器引导的项目中使用gade（而不是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');
  });
});

使用templateUrl和Jade测试Angular指令

1 个答案: