1

この単体テストのセットアップがshadowDOMあり、<rating>要素の を調べたいと思います。しかし、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((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>
4

1 に答える 1

1

あなたの基本的なアプローチはうまくいくはずです。

AngularDart テストでは、シャドウ DOM へのピークを処理するtest/_specs.dartJQueryにクラスがあります。たとえば、メソッドを参照してください。JQuery.textWithShadow()

投稿したコードを見ると、コンパイルが完了するのを待っていないという競合状態があると思われます。レーティング コンポーネントによっては、コンパイルが非同期になる場合があります。おそらく、MockHttpBackend をフラッシュする必要があります。

async()AngularDart テストでは、Futures をハングさせたままにしておくとテストに失敗するコンセプトを使用してこれに対処します。AngularDart Github リポジトリのlib/mock/zoneを参照してください。

于 2014-01-11T20:08:37.250 に答える