问题描述
限时送ChatGPT账号..我有这个单元测试设置,想检查
元素的 shadowDOM
.但是 shadowDOM
没有 childNodes.
I have this unit-test setup and want to examine the shadowDOM
of the <rating>
element.
But the shadowDOM
has no childNodes.
在下面的代码中,我尝试检查 getStars()
方法中的元素 shadowDOM.
In the code below I try to examine the elements shadowDOM in the getStars()
method.
我的方法有缺陷吗?这应该有效吗?
Is there a flaw in my approach? Should this work?
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 = _tbpile('<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));
});
}
从 HTTP 请求返回的元素模板 HTML
<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>
推荐答案
您的基本方法应该可行.
Your basic approach should work.
对于 AngularDart 测试,我们在 JQuery 类L223" rel="nofollow">test/_specs.dart 处理窥视 shadow DOM.例如,参见 JQuery.textWithShadow()
方法.
For the AngularDart tests, we have a JQuery
class in test/_specs.dart which handles peeking into the shadow DOM. For example see the JQuery.textWithShadow()
method.
查看您发布的代码,我怀疑您存在竞争条件,因为您没有等待编译完成.根据评级组件,编译可能是异步的:您可能需要刷新 MockHttpBackend.
Looking at the code you posted, I suspect you have a race condition in that you aren't waiting for the compile to complete. Depending on the rating component, the compile may be asynchronous: possibly you need to flush the MockHttpBackend.
在 AngularDart 测试中,我们使用 async()
概念来处理这个问题,如果你让 Futures 挂起,你的测试就会失败.见 lib/mock/zone 在 AngularDart Github 存储库中.
In the AngularDart tests, we deal with this using the async()
concept, which will fail your test if you leave Futures hanging. See lib/mock/zone in the AngularDart Github repo.
这篇关于如何在 Angular 组件测试中查询 shadowDOM的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
更多推荐
[db:关键词]
发布评论