Я некоторое время искал ответы на этот вопрос в Интернете. Это касается тестирования пользовательской директивы AngularJS с использованием внешнего templateUrl, хранящегося в html-файле, в сборке Maven. (После того, как он успешно заработал на Карме)
Существует много информации и ответов о том, как заставить пользовательские тесты директив с внешним templateUrl работать на Karma, но я почти ничего не нашел, что применимо к плагину Jasmine Maven. Все, что я нашел, это API на http://searls.github.io/jasmine-maven-plugin и обзорные описания. Не так много подробных руководств или руководств, а также проблем, с которыми сталкивались другие, которые напрямую связаны с тестированием пользовательской директивы в сборке Maven.
Во-первых, мне нужно было решить проблему с запуском на Karma, как мы все делаем в первый раз. Я решил это с помощью предварительной обработки, и сначала я объясню настройку (используя псевдофайлы и пути):
karma.conf.js (упрощенная версия, которая скрывает несвязанные с этим вопросом файлы)
module.exports = function(config) {
config.set({
basePath: 'src/',
preprocessors: {
'main/pathToHtmlFiles/myModule/directive/**/*.html': 'ng-html2js'
},
files: [
'https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js',
'https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-resource.min.js',
'main/pathToJsFiles/myModule/mainApp.js',
'main/pathToJsFiles/myModule/directive/myDirective.js',
'test/pathToJsFiles/**/*.js',
'main/pathToHtmlFiles/myModule/directive/myDirectiveTemplate.html'
],
ngHtml2JsPreprocessor: {
stripPrefix : 'main/pathToHtmlFiles/',
moduleName: 'directiveHtmlTemplates'
},
frameworks: ['jasmine'],
autowatch: true,
browsers: ['PhantomJS'],
plugins: [
'karma-jasmine',
'karma-chrome-launcher',
'karma-opera-launcher',
'karma-ng-html2js-preprocessor'
]
})
};
Конфигурация, которая добавляется специально для тестирования пользовательской директивы для работы в Karma, является
- препроцессоры
- ngHtml2JsПрепроцессор
- 'karma-ng-html2js-preprocessor' под плагинами
- myDirective.js и myDirectiveTemplate.html в файлах.
Свойство templateUrl в пользовательской директиве — «myModule/directive/myDirectiveTemplate.html»,
Я не считаю содержимое html-файла релевантным для вопроса. Я не включил angular-mocks.js в приведенный выше код, но он включен в реальную работу.
В тестах жасмина я ввожу предварительно обработанную директиву:
beforeEach(module('mainApp'));
beforeEach(module('directiveHtmlTemplates'));
Затем я компилирую директиву перед каждым тестом:
var element = angular.element('<my-custom-directive><my-custom-directive>');
var compiledElement = compile(element)(scope);
scope.$digest();
Пока все хорошо, тесты работают.
Теперь возникает настоящая проблема: заставить это работать с Maven build.
Настройка, которую мы имели с jasmine-maven-plugin, была следующей:
pom.xml
<plugin>
<groupId>com.github.searls</groupId>
<artifactId>jasmine-maven-plugin</artifactId>
<version>2.0</version>
<executions>
<execution>
<goals>
<goal>test</goal>
</goals>
</execution>
</executions>
<configuration>
<jsSrcDir>src/main/pathToJsFiles/myModule/js</jsSrcDir>
<jsTestSrcDir>src/test/pathToJsFiles/myModule/js</jsTestSrcDir>
<preloadSources>
<source>https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js</source>
<source>https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-resource.min.js</source>
<source>${basedir}/src/main/pathToJsFiles/myModule/mainApp.js</source>
<source>${basedir}/src/main/pathToJsFiles/myModule/directive/myDirective.js</source>
</preloadSources>
</configuration>
</plugin>
myDirective.js — это новый файл здесь.
(Я только что обнаружил, что «jsSrcDir» устарел, когда пишу это, но, учитывая, что раньше у нас не было никаких проблем, я предполагаю, что и «jsSrcDir», и «jsTestSrcDir» имеют пути, перекрывающиеся с файлами в «preloadSources». Тем не менее , это то, что у нас было до сих пор, поэтому я добавлю их на случай, если вы увидите там что-то актуальное)
Я также попытался добавить некоторые дополнительные элементы в package.json, чтобы заставить сборку работать.
package.json
{
"name": "my-module",
"version": "1.3.0-SNAPSHOT",
"dependencies": {
"grunt-cli": "1.2.0",
"jasmine-core": "^2.4.1",
"karma-cli": "0.1.2"
},
"devDependencies": {
"grunt": "~0.4.5",
"grunt-contrib-jshint": "~0.10.0",
"grunt-contrib-nodeunit": "~0.4.1",
"grunt-contrib-uglify": "~0.5.0",
"grunt-karma": "^0.12.1",
"karma": "^0.13.22",
"karma-jasmine": "^0.3.8",
"karma-phantomjs-launcher": "^1.0.0",
"karma-ng-html2js-preprocessor": "0.2.1"
}
}
'karma-ng-html2js-preprocessor' внизу - это новое дополнение, но настройка в остальном выполняется моими коллегами, и я не обязательно знаю все, что должен, о том, что работает в фоновом режиме (например, фантомы)
Проблема
Если я попытаюсь построить maven, это то, что я получу для каждого теста в myCustomDirectiveTest
[$injector:modulerr] http://errors.angularjs.org/1.4.9/$injector/modulerr?p0=directiveHtmlTemplates&p1=[$injector:nomod]
Я знаком с этим, когда страдал от плохой кармы (каламбур), инжектор не может найти модуль 'directiveHtmlTemplate'. Теперь это исправлено для Karma, но как мне это сделать для jasmine-maven-plugin?
Я знаю о существовании specRunners и возможности использования пользовательских бегунов (customRunnerTemplate, customRunnerConfiguration), но краткое объяснение на домашних страницах jasmine-maven-plugin не делает меня намного мудрее.
Другие подробности: - Перед добавлением препроцессора в package.json выполните следующую команду:
$ npm установить карму-ng-html2js-препроцессор --save-dev
Вот где я в недоумении: куда мне идти дальше? Как мне получить jasmine-maven-plugin для предварительной обработки и добавить html-файл в качестве именованного компонента 'directiveHtmlTemplates', как у меня в Karma?
