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

问题描述

我有这个单元测试设置，想检查 元素的 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 = _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));
  });
}

从 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 测试，我们在 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屋！