3

我在我的 Web 应用程序中使用带有Express和Jade的Node.js ，并在顶部使用AngularJS 。通常，当我构建指令时，我会在指令定义的模板中包含 Html，然后我测试该指令以编写我需要的 Html 片段。但是现在我必须编写一个包含很长 HTML 的指令，所以我使用: 而且我想使用 Jade 来完成它。所以代码看起来像这样：templateUrl

[...]
.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 进行单元测试：当我的指令将搜索时，它是否存在任何可以获取翡翠文件、处理它并将其用作假服务器的 karma 插件/snippet？

4

1 回答 1

2

我在一个由 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');
  });
});
于 2015-06-12T17:27:10.987 回答