IONIC, Karma, Angular-Mock, httpBackend


#1

Hello. I am applying the Karma test. I used the tutorial - https://www.airpair.com/angularjs/posts/testing-angular-with-karma. I’ve got the problem with httpBackend.
What should I use with Karma Mock or Mokee2e?
How should I inject the moke module to the application?
What should I use: expect or when?
There is my first Karma test - https://github.com/vlikin/car_budget/tree/master/karma/SyncService .

Could anybody share your own success solution with Karma and $httpBackend service?

Thank you.


#2

I am using karma and $httpbackend and it works like charme :smile:

read the ngMock part of this article:

After you added ngMock $httpbackend is injectable and ready


#3

Should I attach ngMock at the real project or at the test? Like

beforeEach(module('myApp'));

#4

read the section of the article i mentioned carfully :wink:

thats it

after that your module should be automatically a mocks.module :slight_smile:


#5

Notice:

lib/ionic/js/ionic.bundle.js

There is my script:

// list of files / patterns to load in the browser
    files: [
        pathes.ionic + 'lib/ionic/js/ionic.bundle.js',
        pathes.ionic + 'lib/angular-messages/angular-messages.js',
        pathes.ionic + 'lib/angular-translate/angular-translate.js',
        pathes.ionic + 'lib/moment/moment.js',
        pathes.ionic + 'lib/satellizer/satellizer.js',
        pathes.ionic + 'lib/d3/d3.js',
        pathes.ionic + 'lib/n3-line-chart/build/line-chart.js',
        pathes.ionic + 'cordova.js',

        pathes.node + 'angular-mocks/angular-mocks.js',
        pathes.node + 'underscore/underscore.js',
        pathes.ionic + 'js/build/app.js',
        'test/*.js'
    ],

#6

Mocking works. httpBackend does not work correctly. I receive a such log:

 Connected on socket hBdxIyhedA_QLIFpAAAA with id 43952661
Chromium 41.0.2272 (Ubuntu 0.0.0) Car Budget Sync Service FAILED
    TypeError: undefined is not a function
        at sendReq (/github/vlikin/car_budget/ionic/www/lib/ionic/js/ionic.bundle.js:17905:24)
        at serverRequest (/github/vlikin/car_budget/ionic/www/lib/ionic/js/ionic.bundle.js:17627:16)
        at processQueue (/github/vlikin/car_budget/ionic/www/lib/ionic/js/ionic.bundle.js:21472:27)
        at /github/vlikin/car_budget/ionic/www/lib/ionic/js/ionic.bundle.js:21488:27
        at Scope.$eval (/github/vlikin/car_budget/ionic/www/lib/ionic/js/ionic.bundle.js:22684:28)
        at Scope.$digest (/github/vlikin/car_budget/ionic/www/lib/ionic/js/ionic.bundle.js:22500:31)
        at Function.$httpBackend.flush (/github/vlikin/car_budget/karma/node_modules/angular-mocks/angular-mocks.js:1506:38)
        at Object.<anonymous> (/github/vlikin/car_budget/karma/SyncService/test/sync.js:56:18)

#7

@bengtler Your ways works with angular only. It does not work with ionic.bundle. So I’ve separated project into separated modules and tested the needed module with angular. My config almost likes yours.


#8

Latest changelog says Ionic 1.3 works with Angular 1.5 so my bower is thus:

“dependencies”: {
“angular”: “~1.3”,
“angular-touch”: “~1.3”,
“angular-animate”: “~1.3”,
“angular-sanitize”: “~1.3”,
“angular-mocks”: “~1.3”,
“angular-ui-router”: “*”,
“angular-cookies”: “~1.3”,
“ionic”: “~1.3.0”,
“angular-google-maps”: “~2.3.2”,
“angular-xml2js”: “~1.0.1”,
“ngToast”: “ngtoast#~2.0.0”,
“ngstorage”: “~0.3.10”
}

and my karma.json is thus:

    // list of files / patterns to load in the browser
    files: [
        'www/lib/angular/angular.js',
        'www/lib/angular-animate/angular-animate.js',
        'www/lib/angular-cookies/angular-cookies.js',
        'www/lib/angular-mocks/angular-mocks.js',
        'www/lib/angular-sanitize/angular-sanitize.min.js',
        'www/lib/angular-ui-router/release/angular-ui-router.min.js',
        'www/lib/angular-touch/angular-touch.min.js',
        'www/lib/angular-google-maps/dist/angular-google-maps.js',
        'www/lib/angular-ui-router/release/angular-ui-router.js',
        'www/lib/angular-xml2js/dist/angular-xml2js.js',
        'www/lib/ionic/release/js/ionic.js',
        'www/lib/ionic/release/js/ionic-angular.min.js',
        'www/js/app.js',
        'www/js/controllers.js',
        'www/js/services.js',
        'tests/**/*.js'
    ],

but I still can’t get past this:

Error: [$injector:modulerr] Failed to instantiate module ngMock due to:
Error: [$injector:unpr] Unknown provider: $$asyncCallbackProvider
http://errors.angularjs.org/1.5.3/$injector/unpr?p0=%24%24asyncCallbackProvider
    at /Users/phaggood/working/emumobileapp/www/lib/angular/angular.js:68:12
    at /Users/phaggood/working/emumobileapp/www/lib/angular/angular.js:4418:19