カルマジャスミンによる角度テストが失敗しました

カルマジャスミンでアンギュラテストをユニットテストしようとしています。カルマジャスミンによる角度テストが失敗しました

のように私のindex.htmlに見える：

<body ng-app="heroApp"> 
    <!-- components match only elements --> 
<div ng-controller="MainCtrl as ctrl"> 
    <b>Hero</b><br> 
    <hero-detail hero="ctrl.hero"></hero-detail> 
</div> 
</body> 
</html>

そしてindex.jsは、次のようになります。

(function(angular) { 
    'use strict'; 
    angular.module('heroApp', []).controller('MainCtrl', function MainCtrl() { 
     this.hero = { 
      name: 'Miles Bronson' 
     }; 
    }); 
})(window.angular);

そしてコンポーネントheroDetail.jsは、次のようになります。

(function(angular){ 
    'use strict'; 

    function HeroDetailController(){ 

    } 

    angular.module('heroApp').component('heroDetail',{ 
     template:'<span>Name: {{$ctrl.hero.name}}</span>', 
     controller:HeroDetailController, 
     bindings:{ 
      hero: '=' 
     } 
    }); 

})(window.angular);

私のカルマspecファイルを見て今以下のようなS：

describe('Component:heroDetailComponent',function(){ 
    beforeEach(function(){ 
     module('heroApp'); 
    }); 

    var element, 
     scope; 
    beforeEach(inject(function($rootScope,$compile){ 
     scope = $rootScope; 
     scope.name = "Miles Bronson"; 
     element = angular.element('<hero-detail hero="name"></hero-detail>'); 
     element = $compile(element)(scope); 
     scope.$apply(); 
    })); 

    it('should render the text',function(){ 
     var span = element.find('span'); 
     expect(span.text()).toBe('Name: Miles Bronson') 
    }); 

});

しかし、これはに失敗しました。 Saying :

Chrome 55.0.2883 (Windows 8.1 0.0.0) Component:heroDetailComponent should render the text FAILED 
     Expected 'Name: ' to be 'Name: Miles Bronson'. 
      at Object.<anonymous> (test/controllers/main-controller-spec.js:35:29) 
Chrome 55.0.2883 (Windows 8.1 0.0.0): Executed 2 of 2 (1 FAILED) (0.065 secs/0.058 secs)

私が間違って何をしているのですか？助けてください。私もelement.isolateScope().nameで試しましたが、それは定義されていません。。

正しい方法はどれですか？私はscope = $rootScope;があるべきと考えてい

出典

2017-01-19 StrugglingCoder

テンプレートの '{{$ ctrl.hero.name}}'は '{{hero.name}}'それはうまくいくでしょう。 –

@AdnanUmer ..しかし、これはコントローラの構文正しいですか？ – StrugglingCoder

角2のControllerAsに相当するものはありません –

scope = $rootScope.$new();

UPD：scope.name = "Miles Bronson";はscope.hero = { name: "Miles Bronson" };

は私がplunker https://plnkr.co/edit/9ZLzr4AWtCB0q43vBAdf?p=preview

の作業テストでこのテストパスを作ることができたようになります。また、あなたのセットアップに誤りがありました：

describe('Component:heroDetailComponent', function() { 
    var element, 
     scope; 

    beforeEach(module('plunker')); 

    beforeEach(inject(function($rootScope,$compile){ 
     scope = $rootScope.$new(); 
     scope.hero = { name: "Miles Bronson" }; 
     element = angular.element('<hero-detail hero="hero"></hero-detail>'); 
     element = $compile(element)(scope); 
     scope.$digest(); 
    })); 

    it('should render the text',function(){ 
     var span = element.find('span'); 
     expect(span.text()).toBe('Name: Miles Bronson') 
    }); 
});

出典

2017-01-19 13:14:50

私は同じことを試みた。いいえ、運がありません:( – StrugglingCoder

@StrugglingCoder更新された回答を参照してください –

あなたはplunkerを提供してくださいますか？ – StrugglingCoder

カルマジャスミンによる角度テストが失敗しました

答えて

関連する問題