Question

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

在下面的代码中，我尝试检查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));
  });
}

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

Answer 1

你的基本方法应该有效。

对于AngularDart测试，我们在test/_specs.dart中有一个JQuery类，用于处理窥视DOM。例如，请参阅JQuery.textWithShadow()方法。

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

在AngularDart测试中，我们使用async()概念处理此问题，如果您将Futures挂起，这将导致测试失败。请参阅AngularDart Github回购中的lib/mock/zone。

如何在Angular组件测试中查询shadowDOM

1 个答案: