How do you test Polymer elements using the new test library?
Using the new test library to test a Dart Polymer element, I build my_element_test.html as prescribed. Please see my repo: polymer-dart-testing.
No Polymer Initiation Passes
my_element_test.html and my_element_test.dart (commenting out Polymer initiation) passes tests as expected:
my_element_test.html
<!doctype html>
<html>
<head>
<title>My Element Test</title>
<link rel="import" href="packages/polymer_dart_testing/my_element.html">
<link rel="x-dart-test" href="my_element_test.dart">
<script src="packages/test/dart.js"></script>
</head>
<body>
<div>Custom HTML Test is Custom.</div>
<my-element></my-element>
</body>
</html>
my_element_test.dart
import 'package:test/test.dart';
import 'package:polymer_dart_testing/my_element.dart';
import 'package:polymer/polymer.dart';
import 'dart:html';
main() {
setUp(() async {
// await initPolymer();
// return await Polymer.onReady;
});
test('custom_html_test', (){
expect(true, isTrue);
});
}
Loading in Dartium without pub run test... passes in the console and shows custom element, after adding test/my_element_test.html to the polymer entry point in pubspec.yaml.
pubspec.yaml
transformers:
- polymer:
entry_points:
- web/index.html
- test/my_element_test.html
my_element_test.html
<!doctype html>
<html>
<head>
<title>My Element Test</title>
<link rel="import" href="packages/polymer_dart_testing/my_element.html">
</head>
<body>
<div>Custom HTML Test is Custom.</div>
<my-element></my-element>
<script type="application/dart" src="my_element_test.dart"></script>
</body>
</html>
my_element_test.dart
import 'package:test/test.dart';
import 'package:polymer_dart_testing/my_element.dart';
import 'package:polymer/polymer.dart';
import 'dart:html';
main() {
setUp(() async {
await initPolymer();
return await Polymer.onReady;
});
test('custom_html_test', (){
expect(true, isTrue);
});
}
However, pub run test... fails when initiating Polymer and adding to the pubspec entry point.
$ pub serve
Loading source assets...
Loading polymer and test/pub_serve transformers...
Serving polymer_dart_testing web on http://localhost:8080
Serving polymer_dart_testing test on http://localhost:8081
Build completed successfully
...
...
/my_element_test.html.polymer.bootstrap.dart.browser_test.dart →
Could not find asset polymer_dart_testing|test/my_element_test.html.polymer.bootstrap.dart.browser_test.dart.
$ pub run test --pub-serve=8081 -p content-shell
"pub serve" is compiling test/my_element_test.dart...
00:00 +0: load error 00:00 +0 -1: load error
Failed to load "test/my_element_test.dart": Failed to load script at http://localhost:8081/my_element_test.html.polymer.bootstrap.dart.browser_test.dart.
00:00 +0 -1: Some tests failed.
The annotation
@whenPolymerReadyonmain()is missing. Also the test transformer (explained in the README.md of the test package) should be added to the transformer section in pubspec.yaml.