Модульное тестирование AngularJS директива с templateUrl
У меня есть директива AngularJS, которая имеет templateUrl определены. Я пытаюсь протестировать его с Жасмин.
Мой Jasmine JavaScript выглядит следующим образом, согласно рекомендации этого:
describe('module: my.module', function () {
beforeEach(module('my.module'));
describe('my-directive directive', function () {
var scope, $compile;
beforeEach(inject(function (_$rootScope_, _$compile_, $injector) {
scope = _$rootScope_;
$compile = _$compile_;
$httpBackend = $injector.get('$httpBackend');
$httpBackend.whenGET('path/to/template.html').passThrough();
}));
describe('test', function () {
var element;
beforeEach(function () {
element = $compile(
'<my-directive></my-directive>')(scope);
angular.element(document.body).append(element);
});
afterEach(function () {
element.remove();
});
it('test', function () {
expect(element.html()).toBe('asdf');
});
});
});
});
Когда я запускаю это в своей спецификации Jasmine, я получаю следующую ошибку:
TypeError: Object #<Object> has no method 'passThrough'
Все, что я хочу, это чтобы templateUrl загружался как есть - я не хочу использовать respond, Я считаю, что это может быть связано с использованием ngMock вместо ngMockE2E. Если это виновник, как я могу использовать последнее вместо первого?
Заранее спасибо!
12 ответов
В итоге я получил кеш шаблона и поместил там представление. У меня нет контроля над тем, чтобы не использовать ngMock, получается:
beforeEach(inject(function(_$rootScope_, _$compile_, $templateCache) {
$scope = _$rootScope_;
$compile = _$compile_;
$templateCache.put('path/to/template.html', '<div>Here goes the template</div>');
}));
Вы правы, что это связано с ngMock. Модуль ngMock автоматически загружается для каждого теста Angular и инициализирует макет $httpBackend справиться с любым использованием $http сервис, который включает в себя выборку шаблона. Система шаблонов пытается загрузить шаблон через $http и это становится "неожиданным запросом" к макету.
Какой вам нужен способ предварительной загрузки шаблонов в $templateCache так что они уже доступны, когда Angular просит их, не используя $http,
Предпочтительное решение: карма
Если вы используете Karma для запуска ваших тестов (и вы должны это делать), вы можете настроить его для загрузки шаблонов с помощью препроцессора ng-html2js. Ng-html2js читает указанные вами HTML-файлы и преобразует их в угловой модуль, который предварительно загружает $templateCache,
Шаг 1: Включите и настройте препроцессор в своем karma.conf.js
// karma.conf.js
preprocessors: {
"path/to/templates/**/*.html": ["ng-html2js"]
},
ngHtml2JsPreprocessor: {
// If your build process changes the path to your templates,
// use stripPrefix and prependPrefix to adjust it.
stripPrefix: "source/path/to/templates/.*/",
prependPrefix: "web/path/to/templates/",
// the name of the Angular module to create
moduleName: "my.templates"
},
Если вы используете Yeoman для создания своего приложения, этот конфиг будет работать
plugins: [
'karma-phantomjs-launcher',
'karma-jasmine',
'karma-ng-html2js-preprocessor'
],
preprocessors: {
'app/views/*.html': ['ng-html2js']
},
ngHtml2JsPreprocessor: {
stripPrefix: 'app/',
moduleName: 'my.templates'
},
Шаг 2: Используйте модуль в своих тестах
// my-test.js
beforeEach(module("my.templates")); // load new module containing templates
Для полного примера, посмотрите на этот канонический пример от углового гуру испытаний Войта Джина. Он включает в себя всю настройку: конфигурацию кармы, шаблоны и тесты.
Решение без кармы
Если вы по какой-либо причине не используете Karma (у меня был негибкий процесс сборки в унаследованном приложении) и просто тестировали в браузере, я обнаружил, что вы можете обойти захват ngMock $httpBackend с помощью необработанного XHR, чтобы получить шаблон по-настоящему и вставить его в $templateCache, Это решение гораздо менее гибкое, но оно выполняет свою работу на данный момент.
// my-test.js
// Make template available to unit tests without Karma
//
// Disclaimer: Not using Karma may result in bad karma.
beforeEach(inject(function($templateCache) {
var directiveTemplate = null;
var req = new XMLHttpRequest();
req.onload = function() {
directiveTemplate = this.responseText;
};
// Note that the relative path may be different from your unit test HTML file.
// Using `false` as the third parameter to open() makes the operation synchronous.
// Gentle reminder that boolean parameters are not the best API choice.
req.open("get", "../../partials/directiveTemplate.html", false);
req.send();
$templateCache.put("partials/directiveTemplate.html", directiveTemplate);
}));
Если серьезно. Используйте Карму. Настройка требует небольшой работы, но позволяет запускать все тесты в нескольких браузерах одновременно из командной строки. Таким образом, вы можете использовать его как часть вашей системы непрерывной интеграции, и / или вы можете сделать его клавишей быстрого доступа из вашего редактора. Гораздо лучше, чем alt-tab-refresh-ad-infinitum.
Эта начальная проблема может быть решена путем добавления этого:
beforeEach(angular.mock.module('ngMockE2E'));
Это потому, что он пытается найти $httpBackend в модуле ngMock по умолчанию, и он не заполнен.
Решение, которое я достиг, нуждается в jasmine-jquery.js и прокси-сервере.
Я следовал за этими шагами:
- В karma.conf:
добавьте jasmine-jquery.js в ваши файлы
files = [
JASMINE,
JASMINE_ADAPTER,
...,
jasmine-jquery-1.3.1,
...
]
добавить прокси-сервер, который будет обслуживать ваши приборы
proxies = {
'/' : 'http://localhost:3502/'
};
В вашей спецификации
description ('MySpec', function() { var $scope, template; jasmine.getFixtures().fixturesPath = 'public/partials/'; // пользовательский путь, чтобы вы могли обслуживать реальный шаблон, который вы используете в приложении beforeEach(функция) () {template = angular.element ('');
module('project'); inject(function($injector, $controller, $rootScope, $compile, $templateCache) { $templateCache.put('partials/resources-list.html', jasmine.getFixtures().getFixtureHtml_('resources-list.html')); //loadFixture function doesn't return a string $scope = $rootScope.$new(); $compile(template)($scope); $scope.$apply(); }) });});
Запустите сервер в корневом каталоге вашего приложения
python -m SimpleHTTPServer 3502
Запусти карму.
Мне потребовалось некоторое время, чтобы понять это, поскольку мне приходится искать во многих постах, я думаю, что документация по этому вопросу должна быть более понятной, поскольку это очень важный вопрос.
Мое решение:
test/karma-utils.js:
function httpGetSync(filePath) {
var xhr = new XMLHttpRequest();
xhr.open("GET", "/base/app/" + filePath, false);
xhr.send();
return xhr.responseText;
}
function preloadTemplate(path) {
return inject(function ($templateCache) {
var response = httpGetSync(path);
$templateCache.put(path, response);
});
}
karma.config.js:
files: [
//(...)
'test/karma-utils.js',
'test/mock/**/*.js',
'test/spec/**/*.js'
],
тест:
'use strict';
describe('Directive: gowiliEvent', function () {
// load the directive's module
beforeEach(module('frontendSrcApp'));
var element,
scope;
beforeEach(preloadTemplate('views/directives/event.html'));
beforeEach(inject(function ($rootScope) {
scope = $rootScope.$new();
}));
it('should exist', inject(function ($compile) {
element = angular.element('<event></-event>');
element = $compile(element)(scope);
scope.$digest();
expect(element.html()).toContain('div');
}));
});
Если вы используете Grunt, вы можете использовать grunt-angular-templates. Он загружает ваши шаблоны в templateCache и прозрачен для вашей спецификации.
Мой пример конфигурации:
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
ngtemplates: {
myapp: {
options: {
base: 'public/partials',
prepend: 'partials/',
module: 'project'
},
src: 'public/partials/*.html',
dest: 'spec/javascripts/angular/helpers/templates.js'
}
},
watch: {
templates: {
files: ['public/partials/*.html'],
tasks: ['ngtemplates']
}
}
});
grunt.loadNpmTasks('grunt-angular-templates');
grunt.loadNpmTasks('grunt-contrib-watch');
};
Я решил ту же проблему немного иначе, чем выбранное решение.
Сначала я установил и настроил плагин ng-html2js для кармы. В файле karma.conf.js:
preprocessors: { 'path/to/templates/**/*.html': 'ng-html2js' }, ngHtml2JsPreprocessor: { // you might need to strip the main directory prefix in the URL request stripPrefix: 'path/' }Затем я загрузил модуль, созданный в beforeEach. В вашем файле Spec.js:
beforeEach(module('myApp', 'to/templates/myTemplate.html'));Затем я использовал $ templateCache.get, чтобы сохранить его в переменной. В вашем файле Spec.js:
var element, $scope, template; beforeEach(inject(function($rootScope, $compile, $templateCache) { $scope = $rootScope.$new(); element = $compile('<div my-directive></div>')($scope); template = $templateCache.get('to/templates/myTemplate.html'); $scope.$digest(); }));Наконец, я проверил это таким образом. В вашем файле Spec.js:
describe('element', function() { it('should contain the template', function() { expect(element.html()).toMatch(template); }); });
Для динамической загрузки шаблона html в $templateCache вы можете просто использовать препроцессор html2js karma, как описано здесь
это сводится к добавлению шаблонов '.html' к вашим файлам в файле conf.js, а также к препроцессорам = {'.html': 'html2js'};
и использовать
beforeEach(module('..'));
beforeEach(module('...html', '...html'));
в ваш файл JS тестирования
Если вы используете плагин jasmine-maven-plugin вместе с RequireJS, вы можете использовать текстовый плагин, чтобы загрузить содержимое шаблона в переменную и затем поместить его в кэш шаблона.
define(['angular', 'text!path/to/template.html', 'angular-route', 'angular-mocks'], function(ng, directiveTemplate) {
"use strict";
describe('Directive TestSuite', function () {
beforeEach(inject(function( $templateCache) {
$templateCache.put("path/to/template.html", directiveTemplate);
}));
});
});
Если вы используете Karma, рассмотрите возможность использования препроцессора karma-ng-html2js- pre -compcess для предварительной компиляции ваших внешних HTML-шаблонов и избегайте попытки Angular HTTP GET их во время выполнения теста. Я боролся с этим для нескольких из нас - в моем случае частичные пути templateUrl разрешались во время обычного выполнения приложения, но не во время тестов - из-за различий в структуре между dir и test dir.
Если вы используете requirejs в своих тестах, то вы можете использовать плагин 'text', чтобы вставить html-шаблон и поместить его в $templateCache.
require(["text!template.html", "module-file"], function (templateHtml){
describe("Thing", function () {
var element, scope;
beforeEach(module('module'));
beforeEach(inject(function($templateCache, $rootScope, $compile){
// VOILA!
$templateCache.put('/path/to/the/template.html', templateHtml);
element = angular.element('<my-thing></my-thing>');
scope = $rootScope;
$compile(element)(scope);
scope.$digest();
}));
});
});
Я решаю эту проблему с компиляцией всех шаблонов в templatecache. Я использую глоток, вы можете найти аналогичное решение для grunt тоже. Мой templateUrls в директивах выглядит так:
`templateUrl: '/templates/directives/sidebar/tree.html'`
Добавьте новый пакет npm в мой package.json
"gulp-angular-templatecache": "1.*"В файл gulp добавьте templatecache и новое задание:
var templateCache = require('gulp-angular-templatecache'); ... ... gulp.task('compileTemplates', function () { gulp.src([ './app/templates/**/*.html' ]).pipe(templateCache('templates.js', { transformUrl: function (url) { return '/templates/' + url; } })) .pipe(gulp.dest('wwwroot/assets/js')); });Добавьте все файлы js в index.html
<script src="/assets/js/lib.js"></script> <script src="/assets/js/app.js"></script> <script src="/assets/js/templates.js"></script>Наслаждайтесь!