Angularjs: test with karma doesn't work inject

0
votes

I start learning testing on AngularJS with Karma and get some problem:

All test in my spec fail, although one always must be pass:

describe('IncidentListCtrl', function(){

  beforeEach(module('App'));

  var scope, ctrl, $httpBackend;

  beforeEach(inject(function( $rootScope, $controller) {
    // $httpBackend = _$httpBackend_;
    // $httpBackend.expectGET('phones/phones.json').
    //     respond([{name: 'Nexus S'}, {name: 'Motorola DROID'}]);

    scope = $rootScope.$new();
    ctrl = $controller('ChangeListCtrl', {$scope: scope});
  }));

  it('Контроллер списка должен вернуть 5 инцидентов', function() {
    // var scope = {},
    //     ctrl = $controller('IncidentListCtrl', {$scope:scope});
    // console.log(scope.data);
    expect(scope.itemsPerPage).toBe(5);
    // expect(5).toBe(5);
  });

  it('test', function(){
    expect(5).toBe(5);
  });
});

If I comment beforeEach(inject()); block - second test passed. I think error in inject function, but I don't know what a error.

Trace from karma console:

Firefox 34.0.0 (Linux) IncidentListCtrl Контроллер списка должен вернуть 5 инцидентов FAILED
	minErr/<@/home/al1/projects/ailabs/tp_rosreestr/vendor/assets/components/angular/angular.js:63:12
	loadModules/<@/home/al1/projects/ailabs/tp_rosreestr/vendor/assets/components/angular/angular.js:4104:15
	forEach@/home/al1/projects/ailabs/tp_rosreestr/vendor/assets/components/angular/angular.js:322:11
	loadModules@/home/al1/projects/ailabs/tp_rosreestr/vendor/assets/components/angular/angular.js:4065:5
	createInjector@/home/al1/projects/ailabs/tp_rosreestr/vendor/assets/components/angular/angular.js:3991:11
	workFn@/home/al1/projects/ailabs/tp_rosreestr/vendor/assets/components/angular-mocks/angular-mocks.js:2339:44
	TypeError: scope is undefined in /home/al1/projects/ailabs/tp_rosreestr/spec/javascripts/IncidentCtrl_spec.js (line 20)
	@/home/al1/projects/ailabs/tp_rosreestr/spec/javascripts/IncidentCtrl_spec.js:20:5
Firefox 34.0.0 (Linux) IncidentListCtrl test FAILED
	minErr/<@/home/al1/projects/ailabs/tp_rosreestr/vendor/assets/components/angular/angular.js:63:12
	loadModules/<@/home/al1/projects/ailabs/tp_rosreestr/vendor/assets/components/angular/angular.js:4104:15
	forEach@/home/al1/projects/ailabs/tp_rosreestr/vendor/assets/components/angular/angular.js:322:11
	loadModules@/home/al1/projects/ailabs/tp_rosreestr/vendor/assets/components/angular/angular.js:4065:5
	createInjector@/home/al1/projects/ailabs/tp_rosreestr/vendor/assets/components/angular/angular.js:3991:11
	workFn@/home/al1/projects/ailabs/tp_rosreestr/vendor/assets/components/angular-mocks/angular-mocks.js:2339:44
Firefox 34.0.0 (Linux): Executed 2 of 2 (2 FAILED) ERROR (0.032 secs / 0.014 secs)

UPDATE: Controller code:

App.controller({
    IncidentListCtrl: IncidentListCtrl
});

/* @ngInject */
function IncidentListCtrl($scope, $location, IncidentService, FilterService, DictionaryService) {
    $scope.list = [];
    $scope.reverse = false;
    $scope.filteredItems = [];
    $scope.groupedItems = [];
    $scope.itemsPerPage = 5;
    $scope.pagedItems = [];
    $scope.currentPage = 0;
    $scope.updatePage = updatePage;
    // $scope.offset = 1;

    getBunch(1, $scope.itemsPerPage);
    //************implementations below*****************
 }

Main module:

var App = angular.module('App', [
  'ui.router',
  'ngTouch',
  // 'ngRoute',
  // 'attrsFilters',
  'flash',
  'ab-base64',
  'ui.select',
  'ngSanitize',
  'naif.base64'
], config);

/* @ngInject */
function config($httpProvider, $stateProvider, $locationProvider, $compileProvider, uiSelectConfig)
{
  uiSelectConfig.theme = 'selectize';
  $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|blob|data|mailto|chrome-extension):/);
  $httpProvider.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
  $httpProvider.defaults.headers.common['X-CSRF-Token'] = angular.element('meta[name="csrf-token"]').attr('content');
  $locationProvider.html5Mode(true);
  $stateProvider
    .state('incident-list', {
        url: '/app/incidents',
        templateUrl: '/pages/templates/incidents/list',
        controller: 'IncidentListCtrl',
        // controllerAs: 'vm',
        reloadOnSearch: false
    }).state('incident-new',{
        url: '/app/incidents/new',
        templateUrl: '/pages/templates/incidents/new',
        controller: 'IncidentNewCtrl'
    }).state('incident-detail', {
        url: '/app/incidents/:id',
        templateUrl: '/pages/templates/incidents/show',
        controller: 'IncidentDetailCtrl',
        reload: true

        /*,
        resolve:{
            incident: getIncident
        }*/
    }).state('logout', {
        url: '/app/logout',
        controller: function($http, $location){
            // $httpProvider.delete("/users/sign_out");
            $http.delete("/users/sign_out").
              success(function(data, status, headers, config) {
              // console.log(data);
              $location.path('/users/sign_in');
              // window.location =('/users/sign_in')
            });

        }
    }).state('changes-new',{
        url: '/app/changes/new',
        templateUrl: '/pages/templates/changes/new',
        controller: 'ChangeNewCtrl'
    }).state('changes-list', {
        url: '/app/changes',
        templateUrl: '/pages/templates/changes/list',
        controller: 'ChangeListCtrl',
        reloadOnSearch: false
    }).state('changes-detail', {
        url: '/app/changes/:id',
        templateUrl: '/pages/templates/changes/show',
        controller: 'ChangeDetailCtrl'
    });

karma config:

// Karma configuration
// Generated on Mon Feb 03 2014 16:16:15 GMT+0100 (CET)

module.exports = function(config) {
  config.set({

   basePath: '..',

    frameworks: ['jasmine'],

    autoWatch: true,

    // preprocessors: {
    //   '**/*.js': 'js'
    // }, 

    files: [
      'vendor/assets/components/angular/angular.js',
      'vendor/assets/components/angular-mocks/*.js',
      'vendor/assets/components/angular-route/*.js',
      'vendor/assets/components/angular-base64/*.js',
      'vendor/assets/components/angular-base64-upload/src/*.js',
      'vendor/assets/components/angular-flash-messages/*.js',
      'vendor/assets/components/angular-sanitize/*.js',
      'vendor/assets/components/angular-touch/*.js',
      'vendor/assets/components/angular-ui-router/src/*.js',
      'vendor/assets/components/angular-ui-select/dist/*.js',
      'vendor/assets/components/angular-utf8-base64/*.js',


      // 'vendor/assets/components/angular-ui-router/*.js',
      'app/assets/javascripts/common/init/app.js',
      'app/assets/javascripts/controllers/*.js',
      'app/assets/javascripts/services/*.js',
      'app/assets/javascripts/filters/*.js',
      // 'venodr/assets/components/angular/controllers/RestaurantIndexCtrl.js.coffee',
      // 'vendor/assets/components/angular/*.js',
      'spec/javascripts/*_spec.js'
    ],
    // autoWatch : true,

    // frameworks: ['jasmine'],

    browsers : ['Firefox'],

    plugins : [
            'karma-chrome-launcher',
            'karma-firefox-launcher',
            'karma-jasmine'
            ],

    junitReporter : {
      outputFile: 'test_out/unit.xml',
      suite: 'unit'
    }

  // });
  });
};
1
angularjskarma-runner
pls also post your controller – hjl
I think the problem might be in your karma config file. Are you using any libraries with Angular like angular-datepicker or other stuff like that? If yes, be sure to add the angular plugins in the karma.conf.js also – Cristi Berceanu
Added code from controller, main module and karma config. I tried to add all angularjs plugins in a karma config file but don't get a positive result. – kunashir

1 Answers

1
votes

My problem was in avoiding jQuery in the list of files in karmas configuration.

I use Ror for backend and jQuery connected from gem and I add jQuery to vendor directory and add to the list of dependencies in karams config.

 files: [
      'vendor/assets/javascript/jquery/jquery.min.js',
       ......... ];