Tuesday, April 15, 2014

Still Can't Test Polymer.dart


I cannot believe that I can no longer test Polymer.dart elements.

This was the very first chapter that I wrote in Patterns in Polymer and now it is completely broken. Not only that, I no longer have any way to automatically determine if the code for the other chapters in the book work. Not cool.

Fortunately, this is a pre-release version of Polymer.dart (0.10), so I can hope for one of two things: (1) the library authors address this to make it easier or (2) I can figure out how to make this work as-is. There is little that I can do for (1) aside from contact that authors, though I would prefer to understand things better first—I hate to bother folks if I can figure it out on my own with a little effort. I do try a pub update, but the most recent version of Polymer.dart (that matches ">=0.10.0-pre.7") is still the same 0.10.0-pre.9 that did not work for me last night.

So it looks like I need to investigate some more. Tonight, I follow the examples laid out in the Polymer.dart test directory. There are many tests in the package, though they include templates directly in the test page and the backing classes directly in the test code. This approach is of limited value when testing custom elements, but still it is a start.

So instead of importing the <x-pizza> element that I would like to test:
<head>
  <!-- Load Polymer -->
  <link rel="import" href="packages/polymer/polymer.html">

  <!-- Load component(s) -->
  <link rel="import" href="packages/model_example/elements/x-pizza.html">

  <script src="packages/unittest/test_controller.js"></script>
</head>
<body>
  <!-- The actual tests -->
  <script type="application/dart;component=1" src="test.dart"></script>
</body>
I instead pull the <polymer-element> from that source HTML directly into the <body> of my test page:
<head>
  <link rel="import" href="packages/polymer/polymer.html">
  <script src="packages/unittest/test_controller.js"></script>
</head>
<body>
  <polymer-element name="x-pizza">
    <template>
      <!-- Template code here... -->
    </template>
  </polymer-element>
  <polymer-element name="x-pizza-toppings">
    <template>
      <!-- Template code here... -->
    </template>
  </polymer-element>

  <!-- The actual tests -->
  <script type="application/dart;component=1" src="test.dart"></script>
</body>
There are actually two elements that comprise the element being tested, so I include both.

Then, in the test.dart file, I follow the Polymer.dart convention of defining the backing class directly in the test:
library x_pizza_test;

import 'dart:html';
import 'package:scheduled_test/scheduled_test.dart';
import 'package:polymer/polymer.dart';

@CustomTag('x-pizza')
class XPizza extends PolymerElement {
  // ...
}

@CustomTag('x-pizza-toppings')
class XPizzaToppings extends PolymerElement {
  // ...
}

@initMethod
main() {
  setUp((){
    schedule(()=> Polymer.onReady);
    // Other setup...
  });
  // Tests here...
}
With that, it still does not work:
Exception: Unhandled exception:
Exception: The "smoke" library has not been configured. Make sure you import and configure one of the implementations (package:smoke/mirrors.dart or package:smoke/static.dart).
#0      throwNotConfiguredError (package:smoke/src/implementation.dart:34:3)
#1      typeInspector (package:smoke/src/implementation.dart:26:5)
#2      query (package:smoke/smoke.dart:85:20)
#3      _getPublishedProperties (package:polymer/src/declaration.dart:409:31)
#4      PolymerDeclaration.publishAttributes (package:polymer/src/declaration.dart:175:39)
#5      PolymerDeclaration.buildType (package:polymer/src/declaration.dart:95:22)
#6      PolymerDeclaration.register (package:polymer/src/declaration.dart:72:14)
#7      _hookJsPolymer.registerDart.<anonymous closure> (package:polymer/src/loader.dart:100:75)
#8      _rootRun (dart:async/zone.dart:719)
#9      _ZoneDelegate.run (dart:async/zone.dart:453)
#10     _CustomizedZone.run (dart:async/zone.dart:663)
#11     _hookJsPolymer.registerDart (package:polymer/src/loader.dart:99:22)
Bother.

I need to keep working on the chapters in Patterns in Polymer that do work, so I call it a night here. Tomorrow, I will try working with simpler Polymer elements—like those in the Polymer.dart test suite (I may even try those tests directly). If that still does not work, the Polymer.dart tests mention a test_suite.dart file that I have not yet found. Perhaps the answers I seek can be found in that file.


Day #35

5 comments:

  1. I had a bit of a quick muck around based upon what you've already done to try and get this to work. I seem to have stuck a working test, which I verified by making it fail. Here's a GIST link if you want to check it out.https://gist.github.com/terrasea/10814041

    I wouldn't have been able to get it working if you hadn't of written about it, thus giving me some clues.

    ReplyDelete
  2. I forgot to mention, the key seems lie in application/dart;component=1 in the polymer template declaration for the markdown-markup element.

    ReplyDelete
  3. I was running this in Dartium, but my version of content_shell was old, and it was hanging when using content_shell till I downloaded the latest development version. It now passes using content_shell for me

    ReplyDelete
    Replies
    1. Huge thanks for all of this. I did have the component=1 pretty much everywhere (maybe to a fault). And it should not have mattered when I inlined the polymer-element and class in the page and test. Still, I'm certainly doing something really stupid (not the first time, not the last), so I'll start with your stuff tonight and see if I can work my way back to a working implementation of my code.

      Again, *huge* thanks for the working implementation :)

      Delete
    2. You're welcome, and you've done nothing stupid from where I'm sitting. Anyway, in my haste to create the GIST I forgot to include the library declaration of the test and the part of in the markdown_markup_test code. I've corrected it,in the GIST, but if you've already downloaded it, I'm sure you'll figure it out.

      Delete