角度成分のテンプレートテスト

Question

私はコンポーネントとの角度devpを学んでいます、私のWebページが怒鳴るなどの単一成分を有する考える

angular 
    .module('mainPageModule', []) 
    .component('mainPage', { 
    templateUrl: 'mainPage.html', 
    controller: mainPageController 
    }); 

コントローラーのコードは次のとおりです。

class mainPageController{ 
    constructor(){ 
     let vm =this; 
     vm.value=100; 
    } 
} 

HTMLコード：仮定すべての角度アプリなどここに含まれるもの

私はこのビューを次のようにテストしようとしています：

describe('main page',() => { 
 
    let element, scope; 
 

 
    beforeEach(inject(function($rootScope, $compile) { 
 
    scope = $rootScope.$new(); 
 
    })); 
 

 
    it('should verify some ',() => { 
 
    element = angular.element('<main-page></main-page>'); 
 
    element = $compile(element)(scope); 
 
    scope.value = 5000; 
 
    scope.$apply(); 
 
    dump(element); 
 
    }); 
 

 
});

scopeビューに適用し、要素がどのように私は、これはダミーの例であることを任意の構文エラー無視した場合（このビューをテストすることができます理解する上で価値5000.Pleaseヘルプを表示しませんダンプ取得されていません）

Answer 1

あなたはスコープではなく、コントローラに値をバインドしています。だから、コントローラをテストするために、あなたは本当に何をコンパイルする必要はありません。あなたがやらなければならないことは、$componentControllerサービスとコンポーネントコントローラをインスタンス化し、それを適切に構築することを確認することです。

たとえば期待は次のようになります。

var $componentController; 

beforeEach(inject(function(_$componentController_) { 
    $componentController = _$componentController_; 
})); 

it('should verify some ',() => { 
    var controller = $componentController('mainPage'); 
    expect(controller.value).toBe(100); 
}); 

Answer 2

を（あなたはコンポーネントとは別にテンプレートをテストするよう）あなたはこのテストのために手動でvalueをバインドする必要があります。では

element = angular.element('<main-page value="value"></main-page>'); 

結合成分の場合は、（それがコントローラに定義されている場合）自動的に行われ、又は値の外部ソースの場合bindingsコンポーネント支柱によって。

私がテストしたい