How to test Polymer Dart

Question

I started testing my web components and noticed that Dart has a good library for that and it does work well with Dart. But now I also want to test my Polymer component, but I'm having a hard time doing that. It seems that my Unit Test does not recognize my Element as a Polymer Element. That how my "test" looks like at the moment

test.dart

import "../../../components/medium/bar-chart.dart";
import "package:unittest/unittest.dart";
import 'package:polymer/polymer.dart';
import 'dart:html';

main() {
    // initPolymer();

    print("--- Bar Chart Test ---");

    group('Bar Chart Test', () {
        test(("queryForBarChart"),() {
            expect(querySelector('bar-chart'), isNotNull); // PASS
        });

        test(("testtest"),() {
            // This should pass
            expect(querySelector('bar-chart').test(), equals(5));
            // Test failed: Caught type 'HtmlElement' is not a subtype of type 'BarChartElement' in type cast.
            // without Cast: Test failed: Caught Class 'HtmlElement' has no instance method 'test'.
        });

    });
}

test.html

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Unit Test Results</title>
    <script src="../packages/web_components/platform.js"></script>
    <link rel="import" href="packages/polymer/polymer.html"/>
    <link rel="import" href="../../../components/medium/bar-chart.html"/>
    <script src="../packages/browser/dart.js"></script>

  <script type="application/dart" src="test.dart"></script>
  </head>

<body
  <bar-chart></bar-chart>
</body>
</html>

also I get the Exception:

Uncaught HierarchyRequestError: Failed to execute 'appendChild' on 'Node': Nodes of type 'HTML' may not be inserted inside nodes of type '#document'.

from: polymer.concat.js:6313

As i dont have any experience testing dart polymer, I take any advice whats the best what to do that.

This import import "../../../components/medium/bar-chart.dart"; looks very weird. Can you provide some details about your directory structure. Which directory contains your test, where is the directory that contains bar-chart.dart. Btw. bar-chart.dart violates the Dart style guide regarding file names (should be bar_chart.dart) — Günter Zöchbauer
Also ensure that the test is included in the Polymer transformer configurations entry_points list. — Günter Zöchbauer
The component is in web/components/medium/ and the test is in web/test/components/medium/ — Azael
If you want to test the components I strongly suggest to move them to the lib folder. Importing into one top level folder like test from another top level folder like web is IMHO bad practice and probably causes problems at some point. — Günter Zöchbauer

Günter Zöchbauer Günter Zöchbauer · Accepted Answer · 2014-12-10T15:09:06

You need proper Polymer initialization code. See how to implement a main function in polymer apps for details.

This package contains a lot of Polymer.dart unit tests you can use as example https://github.com/dart-lang/core-elements/tree/master/test

  import "../../../components/medium/bar-chart.dart";
  import "package:unittest/unittest.dart";
  import 'package:polymer/polymer.dart';
  import 'dart:html';

  main() {
    // old initPolymer().run(() {
    initPolymer().then((zone) => zone.run(() {
      print("--- Bar Chart Test ---");

      group('Bar Chart Test', () {
        test(("queryForBarChart"),() {
            expect(querySelector('bar-chart'), isNotNull); // PASS
        });

        test(("testtest"),() {
          // This should pass
          expect(querySelector('bar-chart').test(), equals(5));
          // Test failed: Caught type 'HtmlElement' is not a subtype of type 'BarChartElement' in type cast.
          // without Cast: Test failed: Caught Class 'HtmlElement' has no instance method 'test'.
        });
      });
    });
  }

Hint: don't forget to add the entry pages for the test to the polymer transformer configuation.

How to test Polymer Dart

1 Answers