运行Karmatesting的angular度错误:HTML5模式需要一个<base>标记
我有一个Rails后端的单页Angular应用程序。 我在我的index.html
文件中使用了一个标签,但是当我使用Karma运行我的前端unit testing时,我得到了以下结果:
$location in HTML5 mode requires a <base> tag to be present
我在我的主要.js文件中这样做:
angular.module('my.module').config( function($locationProvider, $routeProvider) { $locationProvider.html5Mode( true ); }
那么,有什么办法可以在业务实际呈现的页面中注入<base>
元素? 否则,在运行unit testing时告诉Angular / Karma忽略这个错误?
更新
这个Google网上论坛线程和这个GitHub问题都描述了这个问题,但是在这两种情况下,解决scheme都是简单地修改Angular的版本。 我已经这样做了,我甚至可以看到angular-mocks.js
中默认的baseHref
被设置的行。
这是规格问题:
describe 'amnResource', -> $compile = null $rootScope = null beforeEach -> module 'ngMock' module 'amn' module 'directive.template.cache' inject([ '$compile', '$rootScope', ($c, $r) -> $compile = $c $rootScope = $r ]) it 'compiles to an article', -> console.log $rootScope console.log $rootScope.foo $rootScope.foo = title: 'Foo' excerpt: 'foo bar qux' element = $compile('<amn-resource resource="foo"></amn-resource>')($rootScope) console.log element.html() console.log $rootScope.foo expect( element.html() ).toMatch /Foo/
噶玛输出:
Running "karma:unit" (karma) task INFO [karma]: Karma v0.12.28 server started at http://localhost:9876/ INFO [launcher]: Starting browser Chrome INFO [Chrome 39.0.2171 (Mac OS X 10.9.5)]: Connected on socket hOvsC6ji15heHZmiHxJt with id 45528987 ERROR: 'Error: [$location:nobase] $location in HTML5 mode requires a <base> tag to be present! http://errors.angularjs.org/1.3.5/$location/nobase at http://localhost:9876/base/vendor/assets/javascripts/angular/angular.js?3a16995fbea0062d6334adb9277e9776ca069fa1:63:12 at $LocationProvider.$get (http://localhost:9876/base/vendor/assets/javascripts/angular/angular.js?3a16995fbea0062d6334adb9277e9776ca069fa1:11187:15) at Object.invoke (http://localhost:9876/base/vendor/assets/javascripts/angular/angular.js?3a16995fbea0062d6334adb9277e9776ca069fa1:4138:17) at $LocationProvider.origProvider.$get (http://localhost:9876/base/vendor/assets/javascripts/angular/angular.js?3a16995fbea0062d6334adb9277e9776ca069fa1:4024:43) at Object.invoke (http://localhost:9876/base/vendor/assets/javascripts/angular/angular.js?3a16995fbea0062d6334adb9277e9776ca069fa1:4138:17) at http://localhost:9876/base/vendor/assets/javascripts/angular/angular.js?3a16995fbea0062d6334adb9277e9776ca069fa1:3956:37 at getService (http://localhost:9876/base/vendor/assets/javascripts/angular/angular.js?3a16995fbea0062d6334adb9277e9776ca069fa1:4097:39) at Object.invoke (http://localhost:9876/base/vendor/assets/javascripts/angular/angular.js?3a16995fbea0062d6334adb9277e9776ca069fa1:4129:13) at http://localhost:9876/base/vendor/assets/javascripts/angular/angular.js?3a16995fbea0062d6334adb9277e9776ca069fa1:3956:37 at getService (http://localhost:9876/base/vendor/assets/javascripts/angular/angular.js?3a16995fbea0062d6334adb9277e9776ca069fa1:4097:39)' ERROR: 'Error: [$location:nobase] $location in HTML5 mode requires a <base> tag to be present! http://errors.angularjs.org/1.3.5/$location/nobase at http://localhost:9876/base/vendor/assets/javascripts/angular/angular.js?3a16995fbea0062d6334adb9277e9776ca069fa1:63:12 at $LocationProvider.$get (http://localhost:9876/base/vendor/assets/javascripts/angular/angular.js?3a16995fbea0062d6334adb9277e9776ca069fa1:11187:15) at Object.invoke (http://localhost:9876/base/vendor/assets/javascripts/angular/angular.js?3a16995fbea0062d6334adb9277e9776ca069fa1:4138:17) at $LocationProvider.origProvider.$get (http://localhost:9876/base/vendor/assets/javascripts/angular/angular.js?3a16995fbea0062d6334adb9277e9776ca069fa1:4024:43) at Object.invoke (http://localhost:9876/base/vendor/assets/javascripts/angular/angular.js?3a16995fbea0062d6334adb9277e9776ca069fa1:4138:17) at http://localhost:9876/base/vendor/assets/javascripts/angular/angular.js?3a16995fbea0062d6334adb9277e9776ca069fa1:3956:37 at getService (http://localhost:9876/base/vendor/assets/javascripts/angular/angular.js?3a16995fbea0062d6334adb9277e9776ca069fa1:4097:39) at Object.invoke (http://localhost:9876/base/vendor/assets/javascripts/angular/angular.js?3a16995fbea0062d6334adb9277e9776ca069fa1:4129:13) at http://localhost:9876/base/vendor/assets/javascripts/angular/angular.js?3a16995fbea0062d6334adb9277e9776ca069fa1:3956:37 at getService (http://localhost:9876/base/vendor/assets/javascripts/angular/angular.js?3a16995fbea0062d6334adb9277e9776ca069fa1:4097:39)' Chrome 39.0.2171 (Mac OS X 10.9.5) Midway: Resource performs a GET request FAILED Error: Timeout - Async callback was not invoked within timeout specified by jasmine.DEFAULT_TIMEOUT_INTERVAL. LOG: Scope{$id: 2, $$childTail: null, $$childHead: null, $$prevSibling: null, $$nextSibling: null, $$watchers: null, $parent: null, $$phase: null, $root: Scope{$id: 2, $$childTail: null, $$childHead: null, $$prevSibling: null, $$nextSibling: null, $$watchers: null, $parent: null, $$phase: null, $root: Scope{$id: ..., $$childTail: ..., $$childHead: ..., $$prevSibling: ..., $$nextSibling: ..., $$watchers: ..., $parent: ..., $$phase: ..., $root: ..., $$destroyed: ..., $$listeners: ..., $$listenerCount: ..., $$isolateBindings: ..., $$asyncQueue: ..., $$postDigestQueue: ..., $$applyAsyncQueue: ...}, $$destroyed: false, $$listeners: Object{}, $$listenerCount: Object{}, $$isolateBindings: null, $$asyncQueue: [], $$postDigestQueue: [], $$applyAsyncQueue: []}, $$destroyed: false, $$listeners: Object{}, $$listenerCount: Object{}, $$isolateBindings: null, $$asyncQueue: [], $$postDigestQueue: [], $$applyAsyncQueue: []} LOG: undefined LOG: '' LOG: Object{title: 'Foo', excerpt: 'foo bar qux'} Chrome 39.0.2171 (Mac OS X 10.9.5) amnResource compiles to an article FAILED Expected '' to match /Foo/. Error: Expected '' to match /Foo/. at Object.<anonymous> (/Users/acobster/Dropbox/amn/amn-0.5/spec/javascripts/unit/directives/resource_spec.js:27:35) Chrome 39.0.2171 (Mac OS X 10.9.5): Executed 3 of 3 (2 FAILED) (5.078 secs / 5.074 secs)
您可以通过执行以下操作来禁用基本标记检查:
$locationProvider.html5Mode({ enabled: true, requireBase: false });
你可以在你的index.html <head>
指定你的基本标签:
<head> <base href="/"> ... </head>
资料来源: http : //www.jonahdempcy.com/2014/12/29/angularjs-error-locationnobase-location-html5-mode-requires-base-tag-present/
如果您不能或不想将requireBase
设置为false
,则解决scheme(如其他人指出的那样)是在主HTML文件的标头中添加<base href="/">
。 为此,您需要为Karma指定自定义HTML文件,然后您可以编辑它们。
首先查找并复制node_modules/karma/static/context.html
和node_modules/karma/static/debug.html
到您的unit testing文件夹,并修改两者的头文件。
然后在你的karma.conf.js中添加以下两行:
customContextFile: 'test/unit/context.html', customDebugFile: 'test/unit/debug.html',
当然你的path可能会有所不同。