使用 1.0 进行聚合物飞镖测试答案

【问题标题】：Polymer Dart Testing with 1.0使用 1.0 进行聚合物飞镖测试
【发布时间】：2015-11-23 06:32:27
【问题描述】：

我尝试按照https://pub.dartlang.org/packages/test 上的说明使用“测试”包测试用 dart 编写的聚合物组件。

在pubspec.yaml 中，我将我的转换器设置为：

transformers:
- web_components:
    entry_points:
      - web/foo.html
      - test/my_component_test.html
- reflectable:
    entry_points:
      - web/foo.dart
- test/pub_serve:
    $include:
      - test/**_test{.*,}.dart

my_component_test.html 看起来像这样：

<!doctype html>
<html>
  <head>
    <title>Custom HTML Test</title>
    <link rel="x-dart-test" href="my_component_test.dart">
    <script src="packages/test/dart.js"></script>
  </head>
  <body><my-component id="abc"></my-component></body>
</html>

my_component_test.dart 像这样：

@TestOn("browser")
import "dart:html";
import "package:test/test.dart";
import 'package:polymer/polymer.dart';

import '../web/my_component.dart';

void main() {
  MyComponent componentUnderTest;

  setUpAll(() {
    return initPolymer();
  });

  setUp(() {
    componentUnderTest = document.body.querySelector("#abc");
  });

  test("my-component should be initialized correctly", () {
    Element heading = componentUnderTest.shadowRoot.querySelector('h1');
    expect(heading.text, equals('This is my component'));
  });
}

如果我尝试在两个单独的终端中使用 pub serve 和 pub run test:test --pub-serve=8081 -p firefox 运行测试，则会出现两个不同的错误：

[Error from WebComponents on polymer_dart_example|test/my_component_test.html]:
Unable to import `polymer_dart_example/web/my_component.dart` from polymer_dart_example|test/my_component_test.bootstrap.initialize.dart.
[Error from WebComponents on polymer_dart_example|test/my_component_test.html]:
Can't import `polymer_dart_example|web/my_component.dart` from `polymer_dart_example|test/my_component_test.bootstrap.initialize.dart`
Build error:
Transform WebComponents on polymer_dart_example|test/my_component_test.html threw error: Could not format because the source could not be parsed:

line 16, column 1 of <unknown>: Directives must appear before any declarations
import 'package:polymer/src/common/polymer_register.dart' as i13;

编译时

  NullError: receiver is undefined
  package:web_components/src/init.dart 31:1           J.$asx
  package:polymer/init.dart 28:22                     <fn>
  package:stack_trace                                 init.<fn>.<fn>
  package:polymer/init.dart 31:3                      dart<._setUpPropertyChanged
  package:path/src/style/windows.dart 95:71           dart<.initPolymer.<fn>
  ===== asynchronous gap ===========================

测试时（由initPolymer()引起）。

我怀疑我的配置有问题，但我不知道是什么问题。组件本身工作正常。

【问题讨论】：

标签： dart dart-polymer

【解决方案1】：

test/my_component_test.dart 需要添加到reflectable 转换器中。

我也很确定await initPolymer(); 需要在setUpAll() 方法之外，至少没有理由用setUpAll() 包装它。

void main() async {
  MyComponent componentUnderTest;

  await return initPolymer();

  ...
  test(...);
  group(...);
}

【讨论】：

感谢您的回答。还有一些问题 - 运行测试产生 Failed to load "test/my_component_test.dart": Unsupported operation: Couldn't find document._registerDartTypeUpgrader。在调用此函数之前，请确保 packages/web_components/interop_support.html 已加载且可用。
经过测试，在 chrome 中工作，这是一个 firefoxdart 问题
Polymer 1.0 在 Firefox 中存在一些问题。我自己最近遇到了一些。 Dart 团队正在努力。