如何在 Dart 中测试 Web 组件？答案

【问题标题】：How to test web components in Dart?如何在 Dart 中测试 Web 组件？
【发布时间】：2013-06-09 19:37:34
【问题描述】：

目前还没有太多关于 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 组件的方法吗？

【问题讨论】：

标签： unit-testing dart dart-webui

【解决方案1】：

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

【讨论】：

【解决方案2】：

您可以尝试使用 karma-dart 跑步者：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));
  });
}

【讨论】：

【解决方案3】：

对于 web-ui 测试，您必须查询要测试的 web 组件的 shadow 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);
    });
  });
}

最后是一个没有 shadow 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

【讨论】：