Phil Hudson Phil Hudson - 2 months ago 13
AngularJS Question

Angular 1.x service injection in unit tests

I've been trying different variations based on the info that's out there, but haven't got to a working solution yet.

I'm trying to inject a service into a unit test for testing.

My current implementation is below. The issue is, the service isn't:

ReferenceError: Can't find variable: SerializationService
- I've tried using
inject()
in the beforeeach too to no avail.

spec.js

'use strict';

describe('SerializationService', function () {

var SerializationService;

beforeEach(function () {

module('app');

inject(function (_SerializationService_) {
SerializationService = _SerializationService_;
});
});

it('should have a SerializationService', function () {
expect(SerializationService).toBeDefined();
});
});


Other things I've tried:


  • Using separate module includes between the app module and injecting services in another foreach using the underscore notation



karma.conf

// Karma configuration
// http://karma-runner.github.io/0.12/config/configuration-file.html
// Generated on 2016-08-15 using
// generator-karma 0.8.3

module.exports = function (config) {
'use strict';

config.set({
// enable / disable watching file and executing tests whenever any file changes
autoWatch: true,

// base path, that will be used to resolve files and exclude
basePath: '../../',

// testing framework to use (jasmine/mocha/qunit/...)
frameworks: ['jasmine'],

// list of files / patterns to load in the browser
files: [
'bower_components/angular/angular.js',
'bower_components/angular-mocks/angular-mocks.js',
'bower_components/angular-animate/angular-animate.js',
'bower_components/angular-cookies/angular-cookies.js',
'bower_components/angular-resource/angular-resource.js',
'bower_components/angular-route/angular-route.js',
'bower_components/angular-sanitize/angular-sanitize.js',
'bower_components/angular-touch/angular-touch.js',
'bower_components/json3/lib/json3.js',
'bower_components/es5-shim/es5-shim.js',
'bower_components/jquery/dist/jquery.js',
'bower_components/bootstrap-sass-official/assets/javascripts/bootstrap.js',
'bower_components/angular-resource/angular-resource.js',
'bower_components/angular-cookies/angular-cookies.js',
'bower_components/angular-sanitize/angular-sanitize.js',
'bower_components/angular-animate/angular-animate.js',
'bower_components/angular-touch/angular-touch.js',
'bower_components/angular-route/angular-route.js',
'bower_components/angular-ui-router/release/angular-ui-router.js',
'bower_components/angular-audio/app/angular.audio.js',
'bower_components/socket.io.client/dist/socket.io-1.3.5.js',
'bower_components/angular-socket-io/socket.js',
'bower_components/angular-local-storage/dist/angular-local-storage.js',
'bower_components/moment/moment.js',
'bower_components/angular-moment/angular-moment.js',
'bower_components/angular-scroll-glue/src/scrollglue.js',
'bower_components/angular-gravatar/build/angular-gravatar.js',
'bower_components/angular-socialshare/dist/angular-socialshare.min.js',
'bower_components/clipboard/dist/clipboard.js',
'bower_components/ngclipboard/dist/ngclipboard.js',
'bower_components/color-thief/src/color-thief.js',
'bower_components/ngColorThief/angular-colorthief.js',
'bower_components/hashids/dist/hashids.js',
'bower_components/ngEmbed/src/ng-embed.js',
'bower_components/angular-bootstrap/ui-bootstrap-tpls.js',
'bower_components/ngEmbed/src/ng-embed.js',
'app/scripts/**/*.js',
'test/unit/mock/**/*.js',
'test/unit/spec/**/*.js'
],

// list of files / patterns to exclude
exclude: [],

// web server port
port: 8081,

// Start these browsers, currently available:
// - Chrome
// - ChromeCanary
// - Firefox
// - Opera
// - Safari (only Mac)
// - PhantomJS
// - IE (only Windows)
browsers: [
'PhantomJS'
],

// Which plugins to enable
plugins: [
'karma-phantomjs-launcher',
'karma-jasmine'
],

// Continuous Integration mode
// if true, it capture browsers, run tests and exit
singleRun: false,

colors: true,

// level of logging
// possible values: LOG_DISABLE || LOG_ERROR || LOG_WARN || LOG_INFO || LOG_DEBUG
logLevel: config.LOG_INFO

//// Uncomment the following lines if you are using grunt's server to run the tests
// proxies: {
// '/': 'http://localhost:9000/'
// },
// //URL root prevent conflicts with the site root
// urlRoot: '_karma_'
});
};

Answer

Issue was in my mocking modules

I was using the crate method instead of the get:

This is wrong:

angular
  .module('meow-mock', [])
  .factory('somemock', function () {
  //code
  });

This is right:

angular
  .module('meow-mock')
  .factory('somemock', function () {
  //code
  });
Comments