我正在尝试测试包含其他指令的AngularJS指令，使用业力和Jasmine进行测试时会遇到多个错误。这是一些示例代码： 我有一个名为“项目计划”的指令。它还有另外两个指令ivh-dropdown和dateRange
...
<div class="form-group row">
<div class="col-sm-12 col-lg-12 form-inline">
<label class="col-sm-5 col-lg-2 ">{{'FORM.APPLICATION' | translate}}
</label>
<div class="col-sm-7 col-lg-7">
<ivh-dropdown style="margin-right:50px;width:44%;"
ivh-model="appGrpList"
selected-Text="newProperties.application">
</ivh-dropdown>
</div>
</div>
</div>
<div class="form-group row">
<div class="col-sm-12 col-lg-12 form-inline">
<label class="col-sm-5 col-lg-2 ">
{{'FORM.DATE_RANGE' | translate}}
</label>
<div class="col-sm-7 col-lg-7">
<date-filter
on-click-date-filter="onselectDateFilter(dates)"
from-date="newProperties.startDate"
to-date="newProperties.endDate"> \
</date-filter>
</div>
</div>
</div>
... 运行此测试代码后，我得到了
'use strict'
describe('Project Plan Directive', function()
{
var compile, scope, directiveElem;
beforeEach(module('demoApp'));
/* should be the path from root
the path to your templateURL needs to match exactly to the path to the
templates inside the files section in karma config*/
beforeEach(module('js/directives/projectPlan/projectPlan.html'));
beforeEach(inject(function($compile, $rootScope){
compile = $compile;
scope = $rootScope.$new();
directiveElem = getCompiledElement();
}));
function getCompiledElement()
{
var element = angular.element('<esi-project-plan></esi-project-plan>');
var compiledElement = compile(element)(scope);
scope.$digest();
return compiledElement;
}
it('Check form validity', function()
{
//scope.$digest();
var formObject = directiveElem.isolateScope().myform;
expect(formObject.$invalid).toBeTruthy();
expect(formObject.Taskname.$invalid).toBeTruthy();
expect(formObject.label.$invalid).toBeTruthy();
expect(directiveElem.find('button')[0].disabled).toBeTruthy();
expect(directiveElem.find('button')[1].disabled).toBeFalsy();
});
...
错误
Error: Unexpected request: GET js/directives/ivh-dropdown/ivh-dropDown.html
error properties: Error
at <Jasmine>
at $httpBackend (angular-mocks.js:1226)
at m (angular.min.js:83)
at f (angular.min.js:80)
at angular.min.js:112
at l.$eval (angular.min.js:126)
at a.$$ChildScope.$$ChildScope.$digest (angular.min.js:123)
at getCompiledElement (projectPlanSpec.js:34)
at UserContext.<anonymous> (projectPlanSpec.js:27)
at Object.e [as invoke] (angular.min.js:37)
at UserContext.workFn (angular-mocks.js:2350)
at <Jasmine>
at window.inject.angular.mock.inject (angular-mocks.js:2321)
at Suite.<anonymous> (projectPlanSpec.js:24)
at <Jasmine>
at projectPlanSpec.js:2
我尝试过包括 beforeEach（module（'js / directives / ivh-dropdown / ivh-dropdown.html'））;; beforeEach（module（'js / directives / dateRange / dateRange.html'））;
但如果我这样做
beforeEach(inject(function($compile, $rootScope){
compile = $compile;
scope = $rootScope.$new();
directiveElem = getCompiledElement();
}));
代码未输入！
我的Karma配置为
// Karma configuration
module.exports = function(config) {
config.set({
client: {
jasmine: {
random: false
}
},
// base path that will be used to resolve all patterns (eg. files,
exclude)
basePath: '',
frameworks: ['jasmine'],
//the path to your templateURL needs to match exactly to the path to
the templates inside the files section in karma config
//if it doesn't match use ngHtml2JsPreprocessor:{stripPrefix:'app/'}
to strip any starting folders to make it the same as the unit test file
// list of files / patterns to load in the browser
files: [
'node_modules/jquery/dist/jquery.js',
'node_modules/angular/angular.min.js',
'node_modules/angular-ui-bootstrap/dist/ui-bootstrap.js',
'node_modules/angular-mocks/angular-mocks.js',
'node_modules/lodash/index.js',
'node_modules/backbone/backbone.js',
'node_modules/graphlib/dist/graphlib.core.js',
'node_modules/dagre/dist/dagre.core.js',
'node_modules/ng-file-upload/dist/ng-file-upload-shim.min.js',
'node_modules/ng-file-upload/dist/ng-file-upload.min.js',
'node_modules/angular-translate/dist/angular-translate.js',
'node_modules/angular-ui-grid/ui-grid.min.js',
'js/thirdparty/build/rappid.js',
/*'js/config/*.js',*/
'js/app.js',
'js/constants.js',
'js/config/*.js',
'js/services/*.js',
'js/tab.js',
'js/i18n.js',
'js/directives/**/*.js',
'js/directives/**/*.html'
],
// list of files / patterns to exclude
exclude: [
'**/*.swp',
'**/*.bak',
'**/*.js~',
'js/directives/content-layout/**/*.js'
],
preprocessors: {
'js/directives/**/*.html':['ng-html2js']
},
reporters: ['spec','dots','junit','coverage','html','jasmine-runner'],
junitReporter: {
outputFile: 'test-results.xml'
},
htmlReporter: {
outputFile: 'tests/units.html',
// Optional
pageTitle: 'Unit Tests',
subPageTitle: 'A sample project description',
groupSuites: true,
useCompactStyle: true,
useLegacyStyle: true
},
// web server port
port: 9876,
// enable / disable colors in the output (reporters and logs)
colors: true,
// level of logging
// possible values: config.LOG_DISABLE || config.LOG_ERROR ||
config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
logLevel: config.LOG_INFO,
// enable / disable watching file and executing tests whenever any
file changes
autoWatch: true,
// start these browsers
// available browser launchers:
https://npmjs.org/browse/keyword/karma-launcher
browsers: ['Chrome'],
plugins : [
'karma-chrome-launcher',
'karma-jasmine',
'karma-spec-reporter',
'karma-ng-html2js-preprocessor',
'karma-junit-reporter',
'karma-html-reporter',
'karma-coverage',
'karma-htmlfile-reporter',
'karma-jasmine-runner-reporter'
],
// Continuous Integration mode
// if true, Karma captures browsers, runs the tests and exits
singleRun: false,
// Concurrency level
// how many browser should be started simultaneous
concurrency: Infinity
})
}
我的package.json是
{
"name": "",
"version": "1.0.0",
"description": "",
"main": "js/main.js",
"scripts": {
"start": "electron .",
"start-live-server": "node node_modules/live-server/live-server.js --
port=9876 --cors",
"test": "karma start karma.config.js",
"install-deps": "npm install --dev",
"build-win": "node_modules/.bin/electron-builder.cmd -w",
"test-jasmine": "http-server -c-1 -o js/directives/SpecRunner.html -p
1337 -w *.js/*.html",
"webpack-prod": "webpack --config webpack-production.config.js -p",
"watch": "webpack-dev-server --port 3000"
},
"author": "",
"license": "",
"private": true,
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-env": "^1.7.0",
"electron": "~1.8.2",
"electron-builder": "^19.35.1",
"http-server": "^0.11.1",
"jasmine": "^3.1.0",
"jasmine-core": "^3.1.0",
"jasmine-jquery": "^2.1.1",
"jasmine-runner": "^0.2.9",
"jsdoc": "^3.5.5",
"jshint": "^2.9.6",
"jshint-loader": "^0.8.4",
"karma": "^2.0.2",
"karma-chrome-launcher": "^2.2.0",
"karma-coverage": "^1.1.2",
"karma-html-reporter": "^0.2.7",
"karma-htmlfile-reporter": "^0.3.5",
"karma-jasmine": "^1.1.2",
"karma-jasmine-runner-reporter": "^0.2.0",
"karma-js-coverage": "^0.4.0",
"karma-junit-reporter": "1.2.0",
"karma-ng-html2js-preprocessor": "^1.0.0",
"karma-phantomjs-launcher": "^1.0.4",
"karma-spec-reporter": "0.0.32",
"node-libs-browser": "^2.1.0",
"protractor-beautiful-reporter": "^1.2.1",
"strip-loader": "^0.1.2",
"webpack": "^4.16.4"
},
"dependencies": {
"angular": "1.3.7",
"angular-mocks": "1.3.7",
"angular-translate": "2.6.0",
"angular-ui-bootstrap": "^2.5.6",
"angular-ui-grid": "3.0.6",
"backbone": "1.3.3",
"bootstrap": "3.3.7",
"bootstrap-datetime-picker": "^2.4.4",
"dagre": "0.7.4",
"graphlib": "1.0.7",
"jquery": "^2.2.4",
"live-server": "1.1.0",
"lodash": "3.10.1",
"ng-file-upload": "^12.2.13",
"protractor": "5.3.2",
"rgbcolor": "^1.0.1",
"stackblur": "1.0.0",
"watch": "^1.0.2",
"daterange": "~1.0.0",
"angular-markdown-editor": "1.1.0"
}
}
任何帮助将不胜感激
答案 0 :(得分：0)
看起来您需要安装karma-ng-html2js-preprocessor，然后在karma.config中对其进行配置，如下所示：
plugins: [
...etc,
'karma-ng-html2js-preprocessor',
...etc
],
preprocessors: {
...etc,
'app/**/*.html': ['ng-html2js'],
...etc
},
然后，加载html应该没有问题。您无需将其注入到beforeEach中。哦，请确保将其传递给html。我以“ app / ** / *。html”为例。
然后您需要将其添加到规范文件的顶部：
beforeEach(module('HtmlTemplates'));
'HtmlTemplates'是模块的名称，不能替代文件或任何内容的路径。不要更改模块的名称。