4

到目前为止，关于 Dart 中的 web-ui 测试的文档并不多。有两种方法可用：a) 通过 Chrome 的 DumpRenderTree 运行或 b) 按原样加载应用程序并在其上运行测试代码的技巧。对于琐碎的情况，第一个选项似乎有点乏味。所以后一种选择——在我的例子中，它在加载组件时不起作用。

具有以下文件结构：

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

（所有文件都列在这个要点中）

以下测试集挂在第二步。

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 组件的方法吗？

4

3 回答 3

3

对于 web-ui 测试，您必须查询要测试的 web 组件的 shadow dom 或 xtag (this)，而不是“经典”dom。
基于TodoMVC 代码示例

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

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 Editor 版本 0.5.20_r24275
Dart SDK 版本 0.5.20.4_r24275

于 2013-07-04T21:13:36.733 回答
1

您可以尝试使用 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));
  });
}
于 2013-07-02T16:34:54.910 回答
0

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

于 2013-06-24T18:10:59.117 回答