Test Угловая директива с templateUrl и Джейд

Question

Я использую Node.js с Экспресс и Джейд в моем веб-приложение, с 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: существует ли какой-либо плагин для кармы, который может взять нефритовый файл, обрабатывать его и служить ему поддельным сервером, когда моя директива будет искать /snippet?

Answer 1

Я использую gulp (не хрюкать) с шаблонами Jade в проекте, загруженном с генератором gammer-gular. Для того, чтобы сделать Жасмин модульные тесты работают правильно, мне нужно, чтобы сделать следующие изменения:

В глотке/юнит-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'); 
    }); 
});