Replaceをtrueに設定した指令をAngularJSがテストします

Question

My <custom-directive>はreplace:trueとtemplate: '<img />'です。 ユニットテストを書くにはどうしたらいいですか？実際にはimgでカスタムディレクティブを置き換えることをテストしたいと思う。

it('should be transformed to <img>', function(){ 
    var elm = $compile('<custom-directive></custom-directive>')(scope); 
    scope.$digest(); 

    var t = elm.find('img'); // wrong! it replaces the element. it won't find another one inside 
//expect(elm).toBeAnImgElement ? 
}); 

正しいマッチャーが見つかりません。 私が見た中で最も近いのは内容（elm.html()またはelm.text()）のチェックですが、私のタグは空です。

Answer 1

のようなdivの中にあなたのディレクティブをラップ：なぜ我々は `$ rootScopeが必要なのです

describe('Directive: custom', function() { 
    beforeEach(module('App')); 

    var element, $scope; 

    it('should be transformed to <img>', inject(function ($rootScope, $compile) { 
    $scope = $rootScope.$new(); 
    element = angular.element('<div><custom-directive></custom-directive></div>'); 
    element = $compile(element)($scope); 

    expect(element.children('img').length).toBe(1); 
    })); 
}); 

Answer 2

実際のHTMLElementオブジェクトを取得し、そのタグ名を確認することができます。 elm[0]と実際のHTMLElementでゲット：

expect(elm[0].tagName).toEqual('A');