Polymer Dart Testing with 1.0

Question

I try to test a polymer-component written in dart using the "test" package, following the instructions on https://pub.dartlang.org/packages/test.

In pubspec.yaml, I set my transformers like this:

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 looks like this:

<!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 like this:

@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'));
  });
}

If I try to run the tests using pub serve and pub run test:test --pub-serve=8081 -p firefox in two separate terminals, there are two different errors:

[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;

while compiling and

  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 ===========================

while testing (caused by initPolymer()).

I suspect there is something wrong with my configuration, but I can't figure out what the problem is. The component itself is working fine.

Günter Zöchbauer Günter Zöchbauer · Accepted Answer · 2015-11-23T07:48:11

test/my_component_test.dart needs to be added to the reflectable transformer.

I'm also pretty sure await initPolymer(); needs to be outside the setUpAll() method, at least there is no reason to wrap it with setUpAll().

void main() async {
  MyComponent componentUnderTest;

  await return initPolymer();

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

Related issue https://github.com/dart-lang/polymer-dart/issues/649

Polymer Dart Testing with 1.0

1 Answers