如何在Angular组件测试中查询shadowDOM [英] How to query the shadowDOM in an Angular component test

问题描述

我有这个单元测试设置，并想检查< rating> 元素的 shadowDOM
但是 shadowDOM 没有childNodes。

在下面的代码中，我尝试检查元素shadowDOM在 getStars（）方法中。

我的方法有缺陷吗？
这应该工作吗？

  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 .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 / 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）; 
}）; 
} 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.rangeng-mouseenter =ctrl.enter（$ index + 1）ng-click =ctrl.rate（$ index + 1）class = glyphiconng-class =ctrl.stateClass（$ index，r）>< / i> 
< / span> 
  

解决方案

b
$ b

对于AngularDart测试，我们在 JQuery 类.dart / blob / master / test / _specs.dart＃L223rel =nofollow> test / _specs.dart ，它处理对影子DOM的查看。例如参见 JQuery.textWithShadow（）方法。

看看你发布的代码，我怀疑你有一个竞争条件，因为你不等待编译完成。根据评分组件，编译可能是异步的：可能你需要刷新MockHttpBackend。

在AngularDart测试中，我们使用 async（）概念，如果你离开Futures挂，它将失败你的测试。请参阅 lib / mock / zone 在AngularDart Github仓库中。

I have this unit-test setup and want to examine the shadowDOM of the <rating> element. But the shadowDOM has no childNodes.

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 = _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));
  });
}

The elements template HTML returned from the HTTP request

    <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.

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.

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.

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屋！