2013-08-01 7 views
10

私はクラスのsmallcontainer 'の上にあるdiv要素が存在しないとしてこれは、ユニットテストでは動作しないツールチップを配置するディレクティブでAngularJSユニットテストでDOMにdivを追加するには?

var bodyoffset = document.querySelector(".smallcontainer-content").getBoundingClientRect(); 
var width = elm.width(); 
if(bodyoffset != undefined){ 
    var tooltipDiv = document.querySelector(".tooltip"); 
    angular.element(tooltipDiv).css("top", offset.top-bodyoffset.top+"px"); 
    angular.element(tooltipDiv).css("left", offset.left-bodyoffset.left+width+5+"px"); 
} 

を次のコードを使用しています。私がすべての機能をテストできるように、ユニットテストでdivが作成されていることを確認するにはどうすればいいですか?

答えて

14

これは、私はそれを行うために管理方法です:。

beforeEach(inject(
    ['$compile','$rootScope', function(_$compile_) { 
     var html = '<div class="smallcontainer-content"></div>'; 
     angular.element(document.body).append(html); 
     elm = angular.element('<form name="form"><input name="password" id="passwordInput" data-ng-model="password" size="25" type="password" maxlength="20" tabindex="1" autofocus data-my-password-check></form>'); 
     $compile(elm)($rootScope); 
     form = $rootScope.form; 

    }] 
)); 

文書にHTMLを追加し、ここで重要な部分は、(angular.elementです)(追記)。

中途テストコードの例では、http://www.yearofmoo.com/2013/01/full-spectrum-testing-with-angularjs-and-karma.html#testing-filters

関連する問題