1

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.

Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
Azael
  • 614
  • 4
  • 16
  • 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 Dec 10 '14 at 15:13
  • Also ensure that the test is included in the Polymer transformer configurations `entry_points` list. – Günter Zöchbauer Dec 10 '14 at 15:15
  • The component is in `web/components/medium/` and the test is in `web/test/components/medium/` – Azael Dec 10 '14 at 15:48
  • 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 Dec 10 '14 at 15:51

1 Answers1

2

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.

Community
  • 1
  • 1
Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • So the testing of each web Component does work well, but its kinda annoying opening each html to look if the tests passed. So i though I could put multiple components into one html file and to see if all passed at once. So i'd have a smallComponentTest.html, which shows the result of smallCompTest1.html, smallCompTest2.html and so on. And the groups should be shown in a TestAll.html. So i'd have a complete overview. But since the test is not a polymer component and has a main function, i dont really know how to show my test result in my smallComponentTest.html. – Azael Dec 11 '14 at 09:44
  • 1
    If you add `` (position might be important - not sure anymore) to your HTML page and `useHtmlConfiguration();` in your `main()` (also needs an import - look at the linked core-elements tests for more details), then you should get what you want for free. Running more tests is still cumbersome. I tried to build a testrunner but gave up because it was too time consuming, there are other initiatives which will improve this situation hopefully soon. – Günter Zöchbauer Dec 11 '14 at 09:49
  • It works fine if I include the `test_controller.js` in my `smallComponentTest.html`. I tried then to Import my `smallComponentTest.html` into the polymer componenet view_testing.html (Im using your BWU Routing). That causes the index.html to stop working: `http://localhost:53342/index.html_bootstrap.dart:0: Exception: NoSuchMethodError: method not found: 'whenPolymerReady' Receiver: Instance of 'JsFunction' Arguments: [Closure: () => dynamic]` – Azael Dec 11 '14 at 10:57
  • Seems I didn't fully understand what you mean by `smallComponentTest.html`. I don't what you want can work. What I tried in my testrunner project was to run all tests found in the `/test/ subdirectory from a script using `content_shell` (the headless Dartium) and then parse and view the output. – Günter Zöchbauer Dec 11 '14 at 11:31
  • http://pastebin.com/szfZi0XF Thats how i want it to be. And i want to open the test-all-components.html via Routing, so i have a quick access to all test and a good overview over the tests – Azael Dec 11 '14 at 12:02
  • I would love to have that as well but didn't find a good way yet. You could try to open a new tag `...`. A bit cumbersome but should work. Btw. love to hear that you are using `bwu_polymer_routing` :-) – Günter Zöchbauer Dec 11 '14 at 12:13
  • 1
    Well i've got it working, not 100% as i wanted, but it works. I've got all my Test as PolymerElements, my Test Groups (testSmall, testMedium) as PolymerElement und my TestAll as PolymerElement. And im using TestAll in my View for the Routing. The TestGroups use a slightly modified version of `html_config.dart`, where the HTML will only be appended as a `
    ` instead of replacing the complete `document.body.innerHtml`. Sadly the html-config still group all test as 1 list. so cant show them as seperate Blocks
     – Azael Dec 12 '14 at 12:57