Làm thế nào để thêm một div vào DOM trong các bài kiểm tra đơn vị AngularJS?

Question

Tôi đang sử dụng đoạn mã sau trong một chỉ thị để đặt một mẹo công cụ

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"); 
} 

này không hoạt động trong một thử nghiệm đơn vị như div class 'smallcontainer' là không tồn tại. Làm thế nào tôi có thể chắc chắn rằng div được tạo ra trong bài kiểm tra đơn vị để tôi có thể kiểm tra tất cả các chức năng của tôi?

Answer 1

Đây là cách tôi cố gắng làm điều đó:.

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; 

    }] 
)); 

Phần quan trọng đây mà thêm html vào tài liệu là angular.element() append().

Tôi tìm thấy điều này trong ví dụ về mã thử nghiệm ở giữa của http://www.yearofmoo.com/2013/01/full-spectrum-testing-with-angularjs-and-karma.html#testing-filters