angularjs - Test Angular directive with templateUrl and Jade -

angularjs - Test Angular directive with templateUrl and Jade -

i'm using node.js express , jade in web application, angularjs on top. usually, when build directives, include html in template of directive definition, , test directive writing html snippet need. have write directive includes long html, i'm using templateurl: want using jade. code looks this:

[...] .directive('mydirective', function () { homecoming { restrict: 'e', templateurl: '/snippet', link: function (scope, element, attrs) { // code } }; });

where server handle phone call /snippet this:

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

so problem is: how can test directive? create unit test karma , mocha/chai: exist plugin karma can take jade file, process , serve false server when directive search /snippet?

i using gulp (not grunt) jade templates in project bootstrapped yeoman gulp-angular generator. in order create jasmine unit tests work properly, needed create next changes:

in gulp/unit-tests.js:

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

in karma.conf.js:

nghtml2jspreprocessor: { - stripprefix: 'src/', - modulename: 'gulpangular' + cacheidfrompath: function(filepath) { + // jade files come .tmp/serve need strip prefix + homecoming filepath.substr(".tmp/serve/".length); + }, + modulename: 'myapptemplates' }, ... preprocessors: { - 'src/**/*.html': ['ng-html2js'] + // jade templates converted html , dropped here + '.tmp/serve/**/*.html': ['ng-html2js'] }

here unit test file footer directive:

'use strict'; describe('unit testing footer', function() { var $compile, $rootscope; // load myapp module, contains directive beforeeach(module('myapp')); beforeeach(module('myapptemplates')); // generated in karma.conf // store references $rootscope , $compile // available tests in describe block beforeeach(inject(function(_$compile_, _$rootscope_){ // injector unwraps underscores (_) around parameter names when matching $compile = _$compile_; $rootscope = _$rootscope_; })); it('replaces element appropriate content', function() { // compile piece of html containing directive var element = $compile('<footer/>')($rootscope); // fire watches, scope look {{1 + 1}} evaluated $rootscope.$digest(); // check compiled element contains templated content expect(element.html()).tocontain('copyright'); }); });

angularjs angularjs-directive jade karma-runner karma-mocha