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

Question

我尝试按照 https://pub.dartlang.org/packages/test 上的说明使用 "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() 引起）。

我怀疑我的配置有问题，但我无法弄清楚问题出在哪里。组件本身工作正常。

Answer 1

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

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

void main() async {
  MyComponent componentUnderTest;

  await return initPolymer();

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

相关问题https://github.com/dart-lang/polymer-dart/issues/649

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

Polymer Dart Testing with 1.0

dart

dart-polymer