CODEWITHSUNDEEP
unit-testingtestingdartdart-polymer
Damon
Damon

Reputation: 841

How to test Dart Polymer elements using the new Test library?

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.

Upvotes: 4

Views: 251

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657476

The annotation @whenPolymerReady on main() 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.

Upvotes: 5

Related Questions