2016-08-15 6 views
2

を注入:unittestの - 私はこのディレクティブのテストを書くことをしようとしているサービス

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 
    } 
} 

あなたが見ることができるように、ディレクティブのコントローラはdomFactoryに依存するカスタムサービスであり、I作成されたことは、DOMをコンパイル:

export class DomGenerator { 
    /** 
    * @constructor 
    * inject dependencies 
    */ 
    constructor() { 
     'ngInject'; 
    } 

    // service logic 
} 

これはテストです:

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() { 

    } 
} 

です私が受け取ったエラー:

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) 

これは、私がディレクティブのコントローラにサービスを注入しなかったことを意味します。 私は何が間違っていますか?

beforeEach(() => { 
      domFactory = new DomGenerator(); 
      userService = new UserData(); 
     });` 

十分ではないですか?

答えて

1

あなたはそのようなことをしなければなりません。あなたはサービスを模倣すべきです(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); 
    }); 
    }); 
}); 
+0

ありがとうございます!あなたのコードを適用しました。ユーザーサービスへのモックを作成しました。 'Uncaught TypeError:webpack:/ webpack/bootstrap%208abd7032bd3ba4917b19:19:0 < - spec.bundle.js:20'で未定義のプロパティ 'call'を読み込めません。 –

関連する問題