Unittest with angular, karma and es6 - injecting a service - angularjs

Question

I'm trying to write a test for this directive:
export default angular.module('app.page.section.accountBalance', [])
.directive('accountBalance', accountBalanceConfig);
function accountBalanceConfig() {
return {
restrict: 'E',
replace: true,
scope: {
data: '='
},
template: require('./account-balance.tpl.html'),
controller: accountBalanceController,
controllerAs: 'accountBalance'
}
}
class accountBalanceController {
constructor($scope, domFactory, userService, $filter) {
// controller logic
}
}
As you can see, the directive's controller depend on domFactory which is a custom service I created that compiles the DOM:
export class DomGenerator {
/**
* #constructor
* inject dependencies
*/
constructor() {
'ngInject';
}
// service logic
}
This is the test:
import { DomGenerator } from '../../shared/services/dom-genereator/dom-generator.srv';
import compile from '../compile/compile.drv';
import module from './account-balance.drv';
describe('account balance', () => {
var $rootScope, $compile, $location, $window, $document, userService, domFactory, $provide;
beforeEach(() => {
domFactory = new DomGenerator();
userService = new UserData();
});
beforeEach(angular.mock.module(compile.name));
beforeEach(angular.mock.module(module.name));
beforeEach(inject(($injector) => {
$rootScope = $injector.get('$rootScope');
$compile = $injector.get('$compile');
}));
it('renders account balance widget headline', () => {
var element = $compile(`<account-balance data="{headline: {title: 'account balance'}}"></account-balance>`)($rootScope);
$rootScope.$digest();
expect(element.html()).to.contain('account balance');
});
});
class UserData {
constructor() {
}
}
This is the error I get:
Error: [$injector:unpr] Unknown provider: domFactoryProvider <- domFactory
http://errors.angularjs.org/1.5.8/$injector/unpr?p0=domFactoryProvider%20%3C-%20domFactory
at webpack:///~/angular/angular.js:68:0 <- spec.bundle.js:16824:13
at webpack:///~/angular/angular.js:4511:0 <- spec.bundle.js:21267:20
at Object.getService [as get] (webpack:///~/angular/angular.js:4664:0 <- spec.bundle.js:21420:40)
at webpack:///~/angular/angular.js:4516:0 <- spec.bundle.js:21272:46
at getService (webpack:///~/angular/angular.js:4664:0 <- spec.bundle.js:21420:40)
at injectionArgs (webpack:///~/angular/angular.js:4688:0 <- spec.bundle.js:21444:59)
at Object.invoke (webpack:///~/angular/angular.js:4710:0 <- spec.bundle.js:21466:19)
at $controllerInit (webpack:///~/angular/angular.js:10354:0 <- spec.bundle.js:27110:35)
at nodeLinkFn (webpack:///~/angular/angular.js:9263:0 <- spec.bundle.js:26019:35)
at compositeLinkFn (webpack:///~/angular/angular.js:8620:0 <- spec.bundle.js:25376:14)
Which means that I didn't inject the service to the directive's controller.
What am I doing wrong?
Isn't
beforeEach(() => {
domFactory = new DomGenerator();
userService = new UserData();
});`
enough?

Answer 1

You should do something like that , You should mock the service (Use sinon).
import accountBalanceController from 'path for account balance controller'
// import accountBalanceConfig
// import html template
import { DomGenerator } from '../../shared/services/dom-genereator/dom-generator.srv';
import compile from '../compile/compile.drv';
import module from './account-balance.drv';
import sinon from 'sinon'
describe('account balance', () => {
let $rootScope, makeController,DomGeneratorFactory,$scope,$filter,userService;
beforeEach(inject((_$rootScope_,_$scope_,_$filter_) => {
$rootScope = _$rootScope_;
$scope = _$scope_;
$filter = _$filter_;
DomGeneratorFactory = sinon.createStubInstance(DomGenerator);
// Create mock to user Service
makeController = () => {
return new accountBalanceController($scope, DomGeneratorFactory, userService, $filter);
};
}));
describe('Controller', () => {
// controller specs
it('has a name property [REMOVE]', () => { // erase if removing this.name from the controller
let controller = makeController();
expect(controller).to.have.property('name');
});
it('includes the intended template', () => {
expect(accountBalanceConfig.template).to.equal(htmlTemplate);
});
});
});