测试角指令与templateUrl和玉

我使用Node.js的与快速和玉在我的web应用程序，与AngularJS之上。通常，当我构建指令时，我将Html包含在指令定义的模板中，然后测试编写我需要的Html代码段的指令。但是现在我必须编写一个包含非常长的HTML的指令，所以我使用的是templateUrl：此外我想用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进行单元测试：它是否存在任何可以接受玉文件的业务插件，如果我的指令将搜索/snippet，则可以将它处理并作为假服务器提供服务？

来源

2014-11-06 napcoder

，如果你的玉模板是无状态（又名不依赖服务器的数据），这我希望你应该预编译它们，而不是从你的服务器上使用grunt，gulp或任何js项目经理来提供它们。这将极大地促进测试步骤（也可以从grunt/glup/other启动）。如果它们（模板）不是无状态的 - 好吧，制作它们，因为它们应该。 – 2014-11-06 17:35:13

@PierreGayvallet你的意思是预编译只用于测试，还是你的意思是预编译服务器的普通页面服务？当然，我的模板页面是无状态的。 – napcoder 2014-11-07 09:06:23

对于'普通'页面，预编译也会更好，这样，您可以在测试阶段和运行/生产阶段以相同的方式处理tpl编译（也可以避免在每次发送此模板请求时编译您的模板） – 2014-11-07 09:10:08

我在使用yeoman gulp-angular generator启动的项目中使用gulp（而不是grunt）与Jade模板。为了使茉莉花单元测试正常工作，我需要做以下修改：

在一饮而尽/单位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-12 17:27:10 zsteinkamp

测试角指令与templateUrl和玉

回答

相关问题