angularjs - tutorial - run angular test

Error angular al ejecutar pruebas de Karma: el modo HTML5 requiere una etiqueta<base>

Question

Tengo una aplicación angular de una sola página con un servidor de Rails. Estoy usando una etiqueta en mi archivo index.html , pero cuando ejecuto mis pruebas de unidad de front-end usando Karma, obtengo esto:

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

Estoy haciendo esto en mi archivo .js principal:

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

Entonces, ¿hay alguna forma en que pueda inyectar un elemento <base> en la página que el karma en realidad representa? O bien, ¿decirle a Angular / Karma que ignore este error al ejecutar pruebas unitarias?

Actualizar

Este hilo de Grupos de Google y este número de GitHub describen este problema, pero en ambos casos la solución es simplemente aumentar la versión de Angular. Lo he hecho e incluso puedo ver la línea en angular-mocks.js donde se establece el baseHref defecto ...

Aquí está la especificación en cuestión:

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/

Salida de Karma:

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)

Answer 1

Puede desactivar la verificación de la etiqueta base haciendo lo siguiente:

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

Answer 2

Puede especificar su etiqueta base en su index.html <head> así:

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

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

Answer 3

Si no puede o no quiere establecer requireBase en false , la solución, como señalaron otros, es agregar <base href="/"> en el encabezado de su archivo HTML principal. Para hacer esto, necesitará especificar archivos HTML personalizados para Karma, que luego puede editar.

Primero encuentre y copie node_modules/karma/static/context.html y node_modules/karma/static/debug.html en la carpeta de prueba de su unidad, y modifique los encabezados de ambos.

Luego, en su karma.conf.js, agregue las siguientes dos líneas:

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

Por supuesto, tu camino puede variar.