working not nginit ngforms csp cloak angularjs jasmine karma-runner karma-jasmine angular-mock

angularjs - not - El simulacro angular no puede inyectar las dependencias de mi módulo



init angular 1 (3)

Quiero probar un controlador angular para mi aplicación fooApp , definido de la siguiente manera:

var fooApp = angular.module(''fooApp'', [ ''ngRoute'', ''ngAnimate'', ''hmTouchEvents'' ]); ...

El controlador, MainCtrl se define:

"use strict"; fooApp.controller(''MainCtrl'', function ($scope, $rootScope, fooService) { ... }

Así que he probado varias formas de crear una prueba, como esta:

''use strict''; describe(''MainController test'', function () { var scope; var controller; beforeEach(function () { angular.mock.module(''ngRoute'', []); angular.mock.module(''ngAnimate'', []); angular.mock.module(''hmTouchEvents'', []); angular.module(''cwfApp'', [ ''ngRoute'', ''ngAnimate'', ''hmTouchEvents'' ]); angular.mock.inject(function ($rootScope, $controller) { scope = $rootScope.$new(); controller = $controller(''MainCtrl'', { $scope: scope }); }); }); it(''should display a list'', function () { console.log(''-------------- Run Test 1 | '' + scope); expect(scope.currentStep).toBe(1); }); });

y el resultado:

Error: [$injector:modulerr] http://errors.angularjs.org/1.2.16-build.64+sha.245de33/$injector/modulerr?p0=undefined&p1=Error%3A%20%5Bng%3Aareq%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.2.16-build.64%2Bsha.245de33%2Fng%2Fareq%3Fp0%3Dfn%26p1%3Dnot%2520a%2520function%252C%2520got%2520undefined%0A%20%20%20%20at%20Error%20(%3Canonymous%3E)%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A9876%2Fbase%2Fapp%2Fbower_components%2Fangular%2Fangular.min.js%3F5961971009303638e9ad386869316e8c83f67e56%3A6%3A471%0A%20%20%20%20at%20wb%20(http%3A%2F%2Flocalhost%3A9876%2Fbase%2Fapp%2Fbower_components%2Fangular%2Fangular.min.js%3F5961971009303638e9ad386869316e8c83f67e56%3A18%3A360)%0A%20%20%20%20at%20Qa%20(http%3A%2F%2Flocalhost%3A9876%2Fbase%2Fapp%2Fbower_components%2Fangular%2Fangular.min.js%3F5961971009303638e9ad386869316e8c83f67e56%3A18%3A447)%0A%20%20%20%20at%20nc%20(http%3A%2F%2Flocalhost%3A9876%2Fbase%2Fapp%2Fbower_components%2Fangular%2Fangular.min.js%3F5961971009303638e9ad386869316e8c83f67e56%3A31%3A191)%0A%20%20%20%20at%20Object.d%20%5Bas%20invoke%5D%20(http%3A%2F%2Flocalhost%3A9876%2Fbase%2Fapp%2Fbower_components%2Fangular%2Fangular.min.js%3F5961971009303638e9ad386869316e8c83f67e56%3A33%3A176)%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A9876%2Fbase%2Fapp%2Fbower_components%2Fangular%2Fangular.min.js%3F5961971009303638e9ad386869316e8c83f67e56%3A32%3A254%0A%20%20%20%20at%20Array.forEach%20(native)%0A%20%20%20%20at%20r%20(http%3A%2F%2Flocalhost%3A9876%2Fbase%2Fapp%2Fbower_components%2Fangular%2Fangular.min.js%3F5961971009303638e9ad386869316e8c83f67e56%3A7%3A298)%0A%20%20%20%20at%20e%20(http%3A%2F%2Flocalhost%3A9876%2Fbase%2Fapp%2Fbower_components%2Fangular%2Fangular.min.js%3F5961971009303638e9ad386869316e8c83f67e56%3A32%3A9) at Error (<anonymous>) at d:/dev/foo/app/bower_components/angular/angular.min.js:6:471 at d:/dev/foo/app/bower_components/angular/angular.min.js:32:400 at Array.forEach (native) at r (d:/dev/foo/app/bower_components/angular/angular.min.js:7:298) at e (d:/dev/foo/app/bower_components/angular/angular.min.js:32:9) at Object.$b [as injector] (d:/dev/foo/app/bower_components/angular/angular.min.js:35:98) at workFn (d:/dev/foo/app/bower_components/angular-mocks/angular-mocks.js:2142:52) at Object.window.inject.angular.mock.inject [as inject] (d:/dev/foo/app/bower_components/angular-mocks/angular-mocks.js:2133:37) at null.<anonymous> (d:/dev/foo/test/jasmine/todo.test.js:15:22) TypeError: Cannot read property ''currentStep'' of undefined at null.<anonymous> (d:/dev/foo/test/jasmine/todo.test.js:25:21) Chrome 31.0.1650 (Windows 7): Executed 1 of 1 (1 FAILED) ERROR (0.023 secs / 0.015 secs)

También probé con beforeEach(angular.mock.module(''cwfApp'')); (en lugar de la primera beforeEach en el código anterior), pero el error es casi el mismo.

En cuanto a mi archivo karma.conf.js, configuré esta lista de archivos:

files: [ ''app/bower_components/angular/angular.min.js'', ''app/bower_components/angular-route/angular-route.min.js'', ''app/bower_components/hammerjs/hammer.min.js'', ''app/bower_components/angular-hammer/angular-hammer.js'', ''app/bower_components/angular-mocks/angular-mocks.js'', ''app/js/foo-application.js'', ''app/js/foo-controllers.js'', ''app/js/foo-services.js'', ''app/js/foo-router.js'', ''test/jasmine/*.js'' ],

La inyección parece fallar, pero realmente no entiendo lo que falta o lo que está mal en mi configuración. La pila de arriba no da muchas explicaciones ...

¿Alguna idea?

Estoy usando Angular 1.2.8.

Saludos

Editar, con el código provisto por @Ingeniero:

beforeEach(angular.mock.module(''fooApp'')); beforeEach(angular.mock.inject(function($rootScope, $controller) { scope = $rootScope.$new(); controller = $controller(''MainCtrl'', { $scope: scope }); })); it(''should display a list'', function () { console.log(''-------------- Run Test 1 | '' + scope); expect(scope.currentStep).toBe(1); });

El error es casi el mismo:

Error: [$injector:modulerr] http://errors.angularjs.org/1.2.16-build.64+sha.245de33/$injector/modulerr?p0=cwfApp&p1=Error%3A%20%5B%24injector%3Amodulerr%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.2.16-build.64%2Bsha.245de33%2F%24injector%2Fmodulerr%3Fp0%3DngAnimate%26p1%3DError%253A%2520%255B%2524injector%253Anomod%255D%2520http%253A%252F%252Ferrors.angularjs.org%252F1.2.16-build.64%252Bsha.245de33%252F%2524injector%252Fnomod%253Fp0%253DngAnimate%250A%2520%2520%2520%2520at%2520Error%2520(%253Canonymous%253E)%250A%2520%2520%2520%2520at%2520http%253A%252F%252Flocalhost%253A9876%252Fbase%252Fapp%252Fbower_components%252Fangular%252Fangular.min.js%253F5961971009303638e9ad386869316e8c83f67e56%253A6%253A471%250A%2520%2520%2520%2520at%2520http%253A%252F%252Flocalhost%253A9876%252Fbase%252Fapp%252Fbower_components%252Fangular%252Fangular.min.js%253F5961971009303638e9ad386869316e8c83f67e56%253A20%253A260%250A%2520%2520%2520%2520at%2520http%253A%252F%252Flocalhost%253A9876%252Fbase%252Fapp%252Fbower_components%252Fangular%252Fangular.min.js%253F5961971009303638e9ad386869316e8c83f67e56%253A21%253A262%250A%2520%2520%2520%2520at%2520http%253A%252F%252Flocalhost%253A9876%252Fbase%252Fapp%252Fbower_components%252Fangular%252Fangular.min.js%253F5961971009303638e9ad386869316e8c83f67e56%253A32%253A69%250A%2520%2520%2520%2520at%2520Array.forEach%2520(native)%250A%2520%2520%2520%2520at%2520r%2520(http%253A%252F%252Flocalhost%253A9876%252Fbase%252Fapp%252Fbower_components%252Fangular%252Fangular.min.js%253F5961971009303638e9ad386869316e8c83f67e56%253A7%253A298)%250A%2520%2520%2520%2520at%2520e%2520(http%253A%252F%252Flocalhost%253A9876%252Fbase%252Fapp%252Fbower_components%252Fangular%252Fangular.min.js%253F5961971009303638e9ad386869316e8c83f67e56%253A32%253A9)%250A%2520%2520%2520%2520at%2520http%253A%252F%252Flocalhost%253A9876%252Fbase%252Fapp%252Fbower_components%252Fangular%252Fangular.min.js%253F5961971009303638e9ad386869316e8c83f67e56%253A32%253A86%250A%2520%2520%2520%2520at%2520Array.forEach%2520(native)%0A%20%20%20%20at%20Error%20(%3Canonymous%3E)%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A9876%2Fbase%2Fapp%2Fbower_components%2Fangular%2Fangular.min.js%3F5961971009303638e9ad386869316e8c83f67e56%3A6%3A471%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A9876%2Fbase%2Fapp%2Fbower_components%2Fangular%2Fangular.min.js%3F5961971009303638e9ad386869316e8c83f67e56%3A32%3A400%0A%20%20%20%20at%20Array.forEach%20(native)%0A%20%20%20%20at%20r%20(http%3A%2F%2Flocalhost%3A9876%2Fbase%2Fapp%2Fbower_components%2Fangular%2Fangular.min.js%3F5961971009303638e9ad386869316e8c83f67e56%3A7%3A298)%0A%20%20%20%20at%20e%20(http%3A%2F%2Flocalhost%3A9876%2Fbase%2Fapp%2Fbower_components%2Fangular%2Fangular.min.js%3F5961971009303638e9ad386869316e8c83f67e56%3A32%3A9)%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A9876%2Fbase%2Fapp%2Fbower_components%2Fangular%2Fangular.min.js%3F5961971009303638e9ad386869316e8c83f67e56%3A32%3A86%0A%20%20%20%20at%20Array.forEach%20(native)%0A%20%20%20%20at%20r%20(http%3A%2F%2Flocalhost%3A9876%2Fbase%2Fapp%2Fbower_components%2Fangular%2Fangular.min.js%3F5961971009303638e9ad386869316e8c83f67e56%3A7%3A298)%0A%20%20%20%20at%20e%20(http%3A%2F%2Flocalhost%3A9876%2Fbase%2Fapp%2Fbower_components%2Fangular%2Fangular.min.js%3F5961971009303638e9ad386869316e8c83f67e56%3A32%3A9) at Error (<anonymous>) at d:/dev/foo/app/bower_components/angular/angular.min.js:6:471 at d:/dev/foo/app/bower_components/angular/angular.min.js:32:400 at Array.forEach (native) at r (d:/dev/foo/app/bower_components/angular/angular.min.js:7:298) at e (d:/dev/foo/app/bower_components/angular/angular.min.js:32:9) at Object.$b [as injector] (d:/dev/foo/app/bower_components/angular/angular.min.js:35:98) at workFn (d:/dev/foo/app/bower_components/angular-mocks/angular-mocks.js:2142:52) TypeError: Cannot read property ''currentStep'' of undefined at null.<anonymous> (d:/dev/foo/test/jasmine/todo.test.js:20:21)

Trataré de crear un violín para reproducir mi problema ...


Está redefiniendo el módulo fooApp en la prueba.

Debe cargarlo con Angular en el código de prueba de esta manera:

angular.mock.module(''ngRoute'', ''ngAnimate'', ''hmTouchEvents'', ''fooApp'');


Mi problema fue, de hecho, debido a un pequeño error en karma.conf.js . De hecho, mi aplicación se define de la siguiente manera:

var fooApp = angular.module(''fooApp'', [ ''ngRoute'', ''ngAnimate'', ''hmTouchEvents'' ]);

y mi karma.conf.js carga los siguientes scripts:

files: [ ''app/bower_components/angular/angular.min.js'', ''app/bower_components/angular-route/angular-route.min.js'', ''app/bower_components/hammerjs/hammer.min.js'', ''app/bower_components/angular-hammer/angular-hammer.js'', ''app/bower_components/angular-mocks/angular-mocks.js'', ''app/js/foo-application.js'', ''app/js/foo-controllers.js'', ''app/js/foo-services.js'', ''app/js/foo-router.js'', ''test/jasmine/*.js'' ], ...

pero el módulo ngAnimate no estaba cargado. Así que acabo de agregar esa línea:

''app/bower_components/angular-animate/angular-animate.min.js'',

¡y funciona!


Pruebe de esta manera:

describe(''MainController test'', function () { var scope; var controller; beforeEach(angular.mock.module(''fooApp'')); beforeEach(angular.mock.inject(function($rootScope, $controller) { scope = $rootScope.$new(); controller = $controller(''MainCtrl'', { $scope: scope }); }); it(''should display a list'', function () { console.log(''-------------- Run Test 1 | '' + scope); expect(scope.currentStep).toBe(1); }); });

Lo que necesitas entender es si declaras algún módulo con sus dependencias (como angular.module(''fooApp'', [ ''ngRoute'', ''ngAnimate'', ''hmTouchEvents'' ]) ), cuando inyectas el módulo ( fooApp ) en sus pruebas, tampoco necesita inyectar los módulos de dependencia.