Time to get back to Patterns in Polymer. It has been two months since the last release of the book and the last real changes to the code. So no doubt everything is broken.
Not that I'm complaining. I signed on for this when I started a book on a technology that was quite up front about being in the the pre-alpha stages. Truth be told, that is part of the fun!. So let's see what broke. The quickest way to figure this out is tests, so I start with the testing with Page Objects chapter. To ease my way back in, I start with the Dart version of the code.
After clearing up a spurious curly brace (seriously, how did I manage to commit code with an extra curly brace in it?), I make sure that my tests pass against the old version of Polymer (and Dart):
$ ./test/run.sh CONSOLE WARNING: ShadowRoot.resetStyleInheritance and ShadowRoot.applyAuthorStyles now deprecated in dart:html. Please remove them from your code. CONSOLE MESSAGE: PASS: [defaults] it has no toppings CONSOLE MESSAGE: PASS: [adding toppings] updates the pizza state accordingly CONSOLE MESSAGE: CONSOLE MESSAGE: All 2 tests passed.I am none too surprised that
applyAuthorStyles is deprecated (though I'm a little sad that I left it in there). That aside, everything appears to be in order. So let's change that.I start a
pub upgrade:$ pub upgrade Resolving dependencies... (4.9s) ... > polymer 0.12.0 (was 0.10.0-pre.9) (1 newer version available) > polymer_expressions 0.12.0 (was 0.10.0-pre.1) ... > web_components 0.5.0 (was 0.3.3) ... Changed 30 dependencies!That is sure to break all kinds of things. And sure enough, my test suite fails to even start.
Fortunately, I have not been completely away from Polymer in the intervening time. James Hurford and I went through this pain when we updated the
<ice-code-editor> element (from ICE Code Editor). From that experience, I rework the test context page to load the Polymer platform JavaScript source (previously it was Dart):<head> <!-- Load Polymer --> <script src="packages/web_components/platform.js"></script> <!-- Load component(s) --> <link rel="import" href="packages/page_objects/elements/x-pizza.html"> <!-- The actual tests --> <script type="application/dart" src="test.dart"></script> <script src="packages/unittest/test_controller.js"></script> </head>This code was built on an experimental version of Polymer.dart, so I also have to remove some mime-type tomfoolery. I also have to reintroduce a
initPolymer() call to the test's main() entry point:// ...
main() {
initPolymer();
// Actual tests go here...
}Even with that, I was still getting a rather unhelpful error when I attempted to run the tests:CONSOLE WARNING: line 213: FAIL CONSOLE ERROR: Exception: NoSuchMethodError: method not found: 'whenPolymerReady' Receiver: Instance of 'JsFunction' Arguments: [Closure: () => dynamic]This turns out to also be caused by a jump from a pre-release version of Polymer.dart to 0.12. The fix for this was to simply import Polymer into the top-level Polymer element definition (I am testing
<x-pizza>):<link rel="import" href="../../../packages/polymer/polymer.html">
<link rel="import" href="x-pizza-toppings.html">
<polymer-element name="x-pizza">
<template>
<!-- ... -->
</template>
<script type="application/dart" src="x_pizza.dart"></script>
</polymer-element>With that, I have my tests passing again:$ ./test/run.sh ... CONSOLE WARNING: line 12: flushing %s elements CONSOLE MESSAGE: unittest-suite-wait-for-done CONSOLE MESSAGE: PASS: [defaults] it has no toppings CONSOLE MESSAGE: PASS: [adding toppings] updates the pizza state accordingly CONSOLE MESSAGE: CONSOLE MESSAGE: All 2 tests passed.I will worry about that “flushing %s elements” another time. For now, I am satisfied to have my tests passing.
I also find that I need to update the actual page that demonstrates this Polymer element. As in the test, I need to load the web components polyfill JavaScript code. I also have to
initPolymer(), which is done under normal circumstances with the built-in init.dart:<!DOCTYPE html>
<html lang="en">
<head>
<!-- Load platform polyfills -->
<script src="packages/web_components/platform.js"></script>
<!-- Load component(s) -->
<link rel="import"
href="packages/page_objects/elements/x-pizza.html">
<!-- Start Polymer -->
<script type="application/dart">
export 'package:polymer/init.dart';
</script>
</head>
<body>
<div class="container">
<h1>Ye Olde Dart Pizza Shoppe</h1>
<x-pizza></x-pizza>
</div>
</body>
</html>
With that, I have it working again in both Dart and JavaScript (the latter courtesy of Polymer.dart's built-in dart2js transformer:
I am back in business! No doubt I have other clean-up to do and some associated rewriting. And of course, screencasts for readers of the “Extras” version of Patterns in Polymer. For today, it is good to be back.
Day #139
No comments:
Post a Comment