Question

在Dart的web-ui测试中没有太多文档。有两种方法可供选择：a）运行Chrome的DumpRenderTree或b）由loading the app as is and running the test code on top of it组成的技巧。对于琐碎的案例，第一种选择似乎有点单调乏味。所以后一个选项 - 在我的情况下，在加载组件时不起作用。

使用以下文件结构：

test/
  main_test.html
  main_test.dart
web/
  main.html
  app.html

（all the files are listed in this gist）

以下测试集在第二步中挂起。

main() {
  useShadowDom = true;

  test('Inline element is initially present.', () {
    var story = () => expect(query('#hdr'), isNotNull);
    Timer.run(expectAsync0(story));
  });

  test('Component is loaded.', () {
    var story = () => expect(query('#globe'), isNotNull);
    Timer.run(expectAsync0(story));
  });
}

如何加载应用组件？更广泛地说，还有另一种测试Web组件的方法吗？

Answer 1

对于web-ui测试，您必须查询您要测试的web组件的阴影dom或xtag（this），而不是“经典”dom。基于TodoMVC code sample

使用您的代码：
该测试的工作版本是：

main() {
  useShadowDom = true;

  test('Inline element is initially present.', () {
    var story = () => expect(query('#hdr'), isNotNull);
    Timer.run(expectAsync0(story));
  });

  test('Component is loaded.', () {
    var root = query("span[is=x-app]").shadowRoot;
    var story = () => expect(root.query('#globe'), isNotNull);
    Timer.run(expectAsync0(story));
  });
}

和没有expectAsync的测试版应该是：

main() {
  useShadowDom = true;

  Timer.run(() {
    test('Header element is initially present.', () {
      var hdr = query('#hdr');
      expect(hdr, isNotNull);
    });

    test('EchapApp component is loaded.', () {
      var root = query("span[is=x-app]").shadowRoot;
      var globe = root.query('#globe');
      expect(globe, isNotNull);
    });
  });
}

最终没有影子dom的版本：

main() {
  //useShadowDom = true;

  Timer.run(() {
    test('Header element is initially present.', () {
      var hdr = query('#hdr');
      expect(hdr, isNotNull);
    });

    test('EchapApp component is loaded.', () {
      var root = query("span[is=x-app]").xtag;
      var globe = root.query('#globe');
      expect(globe, isNotNull);
    });
  });

}

对我来说，这3个代码是100％传递给Dartium的 Dart编辑器版本0.5.20_r24275
Dart SDK版本0.5.20.4_r24275

Answer 2

您可以尝试使用karma-dart runner：https://github.com/karma-runner/karma-dart

它甚至还有一个Web组件示例。

library click_counter_test;

import 'package:unittest/unittest.dart';
import 'dart:html';
import '../web/out/xclickcounter.dart';

main() {
  test('CounterComponent.increment', () {
    var hello = new DivElement();
    var component = new CounterComponent.forElement(hello);
    expect(component.count, equals(0));
    component.increment();
    expect(component.count, equals(1));
  });
}

Answer 3

虽然它不是特定于Dart，但您可以使用Selenium来测试UI。我相信Dart团队的一些成员也使用Selenium进行UI测试。

如何在Dart中测试Web组件？

3 个答案: