運行Karma測試的角度錯誤:HTML5模式需要一個標簽

[英]Angular error running Karma tests: HTML5 mode requires a tag


I have a single-page Angular app with a Rails backend. I am using a tag in my index.html file, but when I run my front-end unit tests using Karma, I get this:

我有一個帶Rails后端的單頁角應用程序。我正在索引中使用標記。html文件,但是當我使用Karma運行前端單元測試時,我得到以下信息:

$location in HTML5 mode requires a <base> tag to be present

I am doing this in my main .js file:

我在主.js文件中這樣做:

angular.module('my.module').config( function($locationProvider, $routeProvider) {
  $locationProvider.html5Mode( true );
}

So, is there any way I can inject a <base> element in the page that karma actually renders? Or else, tell Angular/Karma to ignore this error when running unit tests?

那么,我是否可以在karma實際渲染的頁面中注入一個元素?或者,在運行單元測試時,告訴角度/業力忽略這個錯誤?

Update

This Google Groups thread and this GitHub issue both describe this problem but in both cases the solution is to simply bump up the version of Angular. I've done that and I can even see the line in angular-mocks.js where the default baseHref gets set...

谷歌組線程和GitHub問題都描述了這個問題,但在這兩種情況下,解決方案都是簡單地增加角度。我這樣做了,我甚至可以在angular-mocks中看到這條線。這里設置了默認的baseHref…

Here is the spec in question:

這里是所討論的規格:

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/

Karma output:

業力輸出:

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)

3 个解决方案

#1


78  

You can disable the base tag check by doing the following:

您可以通過以下操作禁用基本標記檢查:

$locationProvider.html5Mode({
  enabled: true,
  requireBase: false
});

#2


22  

You can specify your base tag in your index.html <head> like that:

可以在索引中指定基標記。這樣的html <頭> :

<head>
  <base href="/">
  ...
</head>

Source: http://www.jonahdempcy.com/2014/12/29/angularjs-error-locationnobase-location-html5-mode-requires-base-tag-present/

來源:http://www.jonahdempcy.com/2014/12/29/angularjs-error-locationnobase-location-html5-mode-requires-base-tag-present/

#3


3  

If you can't or do not want to set requireBase to false, the solution - as others pointed out - is to add <base href="/"> in the header of your primary HTML file. To do this, you will need to specify custom HTML files for Karma, which you can then edit.

如果您不能或不想將requireBase設置為false,那么解決方案(正如其他人指出的)是在主HTML文件的頭中添加。為此,您將需要為Karma指定定制的HTML文件,然后可以對其進行編輯。

First find and copy node_modules/karma/static/context.html and node_modules/karma/static/debug.html to your unit test folder, and amend the headers of both.

首先找到並復制node_modules/karma/static/context。html和node_modules /業力/靜態/調試。html到您的單元測試文件夾,並修改兩者的標題。

Then in your karma.conf.js add the following two lines:

然后在你的karma.conf。js添加以下兩行:

customContextFile: 'test/unit/context.html',
customDebugFile:   'test/unit/debug.html',

Of course your path may vary.

當然,你的道路可能會改變。


注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2014/12/05/72fed3922dc3740ad110a1b43129a83.html



 
粤ICP备14056181号  © 2014-2021 ITdaan.com