如何在角度分量測試中查詢shadowDOM

我有這個單元測試設置，並且想要檢查<rating>元素的shadowDOM。但shadowDOM沒有childNodes。如何在角度分量測試中查詢shadowDOM

在下面的代碼中，我嘗試檢查getStars()方法中的元素shadowDOM。

我的方法有缺陷嗎？這項工作應該如何？

library bootstrap_angular.test.elements.rating; 

import 'dart:html' as dom; 
import 'dart:async'; 
import 'package:unittest/unittest.dart'; 
import 'package:unittest/html_enhanced_config.dart'; 
import 'package:angular/angular.dart' as ng; 
import 'package:angular/mock/module.dart' as ngMock; 

import 'package:bootstrap_angular/rating/rating.dart'; 

void main() { 
    useHtmlEnhancedConfiguration(); 

    ng.Scope _rootScope; 
    dom.Element _element; 
    ngMock.TestBed _tb; 
    ngMock.MockHttpBackend _backend; 

    setUp(() { 
    Future f; 
    try { 
    ngMock.setUpInjector(); 

     ngMock.module((ng.Module module) { 
     module.install(new RatingModule()); 
     }); 

     ngMock.inject((ng.Scope scope, ngMock.TestBed testBed) { 
     _rootScope = scope; 
     _rootScope['rate'] = 3; 
     _tb = testBed; 

     f = dom.HttpRequest.getString('/bootstrap_angular/packages/bootstrap_angular/rating/rating.html') 
     .then((ratingTemplate) { 
      _backend = new ngMock.MockHttpBackend(); 

      assert(ratingTemplate.contains('<i ')); 
      _backend.expect('GET').respond(ratingTemplate); 

      _element = _tb.compile('<rating value="rate"></rating>', scope: _rootScope); 
      var element =_element.shadowRoot.querySelector('i'); 
      _rootScope.$digest(); 
     }).catchError((e) => print(e)); 
     }); 
    } catch(e) { 
     print(e); 
    } 
    return f; 
    }); 

    List<dom.Element> getStars() { 
    print(_element.shadowRoot.querySelectorAll('i')); 
    return _element.shadowRoot.querySelectorAll('i'); 
    } 

    test("rating component", () { 
    expect(getStars().length, equals(3)); 
    }); 
}

元素模板HTML從HTTP請求

<span ng-mouseleave="ctrl.reset()"> 
     <i ng-repeat="r in ctrl.range" ng-mouseenter="ctrl.enter($index + 1)" ng-click="ctrl.rate($index + 1)" class="glyphicon" ng-class="ctrl.stateClass($index, r)"></i> 
    </span>

來源

2014-01-11 Günter Zöchbauer

忘了提及：插入到演示頁面時，元素的影子DOM有內容。 –

你的基本方法應該工作返回。

對於AngularDart測試，我們在test/_specs.dart中有一個JQuery類，它處理到影子DOM中的窺視。例如，請參閱JQuery.textWithShadow()方法。看看你發佈的代碼，我懷疑你有一個競爭條件，因爲你不等待編譯完成。根據評級組件，編譯可能是異步的：可能需要刷新MockHttpBackend。

在AngularDart測試中，我們使用async()這個概念來處理這個問題，如果您離開期貨，這個概念將會失敗。請參閱AngularDart Github回購中的lib/mock/zone。

來源

2014-01-11 20:08:37

非常感謝，工作！我不得不在'zone.run（（）{compile（element，directives）（injector，view）}）;內運行'compile'; –

如何在角度分量測試中查詢shadowDOM

回答

相關問題