Angular Test with TemplateUrl and Jade
I am using Node.js with Express and Jade in my web app with AngularJS > on top. Usually, when I build directives, I include the Html in the directive definition template, and then check the directive where I want to write the HTML snippet. But now I have to write a directive that includes very long HTML, so I use templateUrl
: moreover, I want to do it with Jade. So the code looks like this:
[...]
.directive('myDirective', function () {
return {
restrict: 'E',
templateUrl: '/snippet',
link: function (scope, element, attrs) {
// some code
}
};
});
If the server handles the call /snippet
with this:
app.get('/snippet', function (req, res) {
res.render('templates/mySnippet', {},
function (err, rendered) {
if (!err)
res.status(200).send(rendered);
});
});
So my problem is, how can I test this directive? I usually do a unit test with Karma and Mocha / Chai: is there any karma plugin that can take a jade file, process it and serve it as a fake server when my directive searches /snippet
?
source to share
I am using gulp (no grunt) with Jade templates in a project loaded with the yoman gulp generator - angular. In order for Jasmine's explicit tests to work correctly, I needed to make the following changes:
In 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);
});
In the karma.conf.js file:
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']
}
Here is the unit test file for the footer directive:
'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');
});
});
source to share