Karma/Jasmine Test Angular mit Controller Modul

Question

Ich versuche meine App zu testen, die jeden Controller auf seinem eigenen Modul definiert hat, dh nicht als Controller des App-Moduls, und dann als Abhängigkeit von der Haupt-App geladen Modul. Wenn ich versuche, einen Test auszuführen, die nur überprüft, ob die loginController definiert ist, unter Verwendung von Karma/Jasmin, ich folgende Ausgabe:

'Expected undefined to be defined.'

bearbeiten

I aktualisiert login.controller.spec und schaltete den Karma-Browser auf chrome um, was mir nützlichere Debug-Informationen gab. Jetzt einen Fehler ich bin immer zu einer Fabrik bezogen, die zu $ ​​httpProvider.interceptors in der Haupt-App-Datei hinzugefügt wird:

Unbekannt Anbieter: authFactoryProvider < - authFactory < - $ http < - $ translateStaticFilesLoader < - $ translate

fand ich ähnliche Probleme im Zusammenhang mit diesem durch Hinzufügen Winkeltranslate-loader-static-files.js aufgelöst wurden, die ausgeführt wird, wenn das Karma geladen wird:

DEBUG [web-server]: Portion (gecached): /path/to/my/app/bower_components/angular-translate-loader-static-files/angular-translate-loader-static-files.js

Wie löse ich alle diese Abhängigkeitsprobleme mit Karma?

index.js

'use strict'; 

angular.module('app', 
    [ 
    //'mockBackend', //uncomment when loading mock backend 
    'ngAnimate', 
    'ngCookies', 
    'ngTouch', 
    'ngSanitize', 
    'ngResource', 
    'ui.bootstrap', 
    'ui.router', 
    'ui.router.stateHelper', 
    'pascalprecht.translate', 
    'utilsModule', 
    'loginModule', 
    'vsmsPackageModule', 
    'vsmsCampaignModule', 
    'vdmsCampaignModule', 
    'vdmsDashboardModule', 
    'daterangepicker', 
    'ui.event', 
    'idmAdminModule', 
    'helpdeskModule', 
    'ncy-angular-breadcrumb', 
    'rzModule', 
    'vsmsDashboardModule', 
    'highcharts-ng', 
    'permission', 
    'dndLists' 
    ]) 
    .config(function ($stateProvider, $urlRouterProvider, $httpProvider, $locationProvider, $translateProvider, $breadcrumbProvider, $compileProvider) { 
    $urlRouterProvider.otherwise('/'); 
    //initialize get if not there 
    if (!$httpProvider.defaults.headers.get) { 
     $httpProvider.defaults.headers.get = {}; 
    } 
    //disable IE ajax request caching 
    $httpProvider.defaults.headers.get['If-Modified-Since'] = 'Mon, 26 Jul 1997 05:00:00 GMT'; 
    // extra 
    $httpProvider.defaults.headers.get['Cache-Control'] = 'no-cache'; 
    $httpProvider.defaults.headers.get['Pragma'] = 'no-cache'; 

    $locationProvider.html5Mode({ 
     enabled: false, 
     requireBase: false 
    }); 
    $translateProvider.useSanitizeValueStrategy('sanitize'); 
    $translateProvider.useStaticFilesLoader({ 
     prefix: '/locales/', 
     suffix: '.json' 
    }); 

    $translateProvider 
    .preferredLanguage('en_us') 
    .fallbackLanguage('en_us'); 

    $breadcrumbProvider.setOptions({ 
     templateUrl: 'components/templates/breadcrumb.tpl.html' 
    }); 
    $compileProvider.debugInfoEnabled(false); 
    // $compileProvider.aHrefSanitizationWhitelist(/^\s*(|blob|):/); 
    $httpProvider.interceptors.push('authFactory'); 
     $httpProvider.interceptors.push('headersFactory'); 
    }) 

login.module.js

angular.module('loginModule', []); 

login.controller.js

angular.module('loginModule') 
    .controller('loginController', login); 

    login.$inject = [ 
     '$log', 
     '$uibModal', 
     '$rootScope', 
     'storageFactory', 
     'loginFactory', 
     '$state', 
     'RoleStore', 
     'PermissionStore' 
    ]; 

    function login($log, $uibModal, $rootScope, storageFactory, loginFactory, $state, RoleStore, PermissionStore) { 

     /* jshint validthis: true */ 
     var vm = this; 
     vm.loginUser = loginUser; 
     vm.forgotPassword = forgotPassword; 
     vm.errorCode = null; 
     PermissionStore.clearStore(); 

     function loginUser() { 
     ... 

Ich bin j ust versucht zu testen, ob der Controller vorhanden ist, und ich kann über die Fehler nicht erhalten:

Expected undefined to be defined.

login.controller.spec.js

describe('loginController', function() { 

    beforeEach(module('app')); 

    var $controller, 
    $scope, 
    $log, 
    $uibModal, 
    $rootScope, 
    storageFactory, 
    loginFactory, 
    $state, 
    RoleStore, 
    PermissionStore, 
    vsmsCoreFactory; 

    beforeEach(inject(function(_$controller_, _$log_, _$uibModal_, _$rootScope_, _storageFactory_, _loginFactory_, _$state_, _RoleStore_, _PermissionStore_, _vsmsCoreFactory_){ 
    $controller = _$controller_; 
    $scope = $rootScope.new(); 
    $log = _$log_; 
    $uibModal = _$uibModal_; 
    $rootScope = _$rootScope_; 
    storageFactory = _storageFactory_; 
    loginFactory = _loginFactory_; 
    $state = _$state_; 
    RoleStore = _RoleStore_; 
    PermissionStore = _PermissionStore_; 
    vsmsCoreFactory = _vsmsCoreFactory_; 
    })); 

    describe('vm.loginUser', function() { 
    it('should be defined', function() { 
     var loginController = $controller('loginController', { 
     $log: $log, 
     $uibModal: $uibModal, 
     $rootScope: $rootScope, 
     storageFactory: storageFactory, 
     loginFactory: loginFactory, 
     $state: $state, 
     RoleStore: RoleStore, 
     PermissionStore: PermissionStore, 
     vsmsCoreFactory: vsmsCoreFactory 
     }); 
     expect(loginController).toBeDefined(); 
     // expect(testController.model.name).toEqual("controllerAs vm test"); 
    }); 
    }); 

}); 

einheits tests.js

'use strict'; 

var gulp = require('gulp'); 

var $ = require('gulp-load-plugins')(); 

var wiredep = require('wiredep'); 

var paths = gulp.paths; 

function runTests (singleRun, done) { 
    var bowerDeps = wiredep({ 
    directory: 'bower_components', 
    exclude: ['bootstrap-sass-official'], 
    dependencies: true, 
    devDependencies: true 
    }); 

    var testFiles = bowerDeps.js.concat([ 
    './src/app/index.js', 
    './src/components/scripts/ui-bootstrap-custom-tpls-2.1.3.js', 
    './src/{app,components}/**/*.module.js', 
    './src/{app,components}/**/*.factory.js', 
    './src/{app,components}/**/*.controller.js', 
    './src/{app,components}/**/*.spec.js' 
    ]); 

    gulp.src(testFiles) 
    .pipe($.karma({ 
     configFile: 'karma.conf.js', 
     action: (singleRun)? 'run': 'watch' 
    })) 
    .on('error', function (err) { 
     // Make sure failed tests cause gulp to exit non-zero 
     throw err; 
    }); 
} 

gulp.task('test', function (done) { runTests(true /* singleRun */, done) }); 
gulp.task('test:auto', function (done) { runTests(false /* singleRun */, done) }); 

Answer 1

Bitte beachten Sie den folgenden Link ist es bereits beantwortet.

How to inject controller dependencies in Jasmine tests?

loginController Abhängigkeiten nicht in Ihrem Gerät Test bestanden.

Der zweite Parameter von $ controller ist für Controller-Abhängigkeiten.

Leere Abhängigkeit wird übergeben.

$ controller ('loginController', {});

Stellen Sie sicher, dass alle abhängigen Module geladen sind, bevor Sie loginCollector testen.

Ich habe Ihren Code geändert. Ich hoffe, dass es funktionieren wird.

'use strict'; 

describe('loginController', function() { 

    beforeEach(module('loginModule')); 

    var loginController; 

    beforeEach(inject(function($controller, _$log_, _$uibModal_, _$rootScope_, _storageFactory_, _loginFactory_, _$state_, _RoleStore_, _PermissionStore_){ 
    scope = _$rootScope_.$new(); 
    loginController = $controller('loginController', 
    { // all dependencies has to be passed in order 
     '$log' : _$log_, 
     '$uibModal' : _$uibModal_, 
     '$rootScope' : _$rootScope_, 
     'storageFactory' : _storageFactory_, 
     'loginFactory': _loginFactory_, 
     '$state': _$state_, 
     'RoleStore': _RoleStore_, 
     'PermissionStore': _PermissionStore_ 
    }, 
    {}); 
    })); 

    it('should be defined', function() { 
    expect(loginController).toBeDefined(); 
    }); 

}); 

Answer 2

Das Problem ist, mit Ihrer login.module.js Datei.

Sie müssen ui.bootstrap und ui.router als Abhängigkeiten beim Definieren der loginModule injizieren. Andernfalls wird $uibModal und $state bei der Definition der loginController nicht erhalten.

Dies sollte die Definition Ihrer loginModule

angular.module('loginModule', ['ui.bootstrap', 'ui.router']); 

PS sein: Ich gehe davon aus, dass hier storageFactory, loginFactory, RoleStore und PermissionStore auf loginModule selbst definiert sind.

Hoffe, das hilft!