Tuesday, March 17, 2015

Testing Polymer.dart 0.16


The latest edition of Patterns in Polymer is done save for copy edits. So of course, there is a major new release of Polymer.dart.

While I await the remaining edits from my copy editor, I am poking around the edges of the book's source code. Kicking the tires on Polymer.dart 0.16 seems a good place to start. Polymer.dart 0.16 is so new that it only works with Dart 1.9, which is only in development release. So I start by downloading it and content_shell for testing (using the chromium/download_contentshell.sh script that comes with the Dart SDK).

In the book, I have been using unconstrained dependencies so that I can always test with the latest versions:
name: polymer_intro
dependencies:
  polymer: any
dev_dependencies:
  unittest: any
transformers:
- polymer:
    entry_points:
      - web/index.html
      - test/index.html
Now that I have Dart 1.9 installed, I can pub upgrade to get the Polymer 0.16 that requires it:
➜  polymer git:(master) ✗ pub upgrade
Resolving dependencies... (4.2s)
...
> polymer 0.16.0+3 (was 0.15.5+3)
  polymer_expressions 0.13.1
...
> web_components 0.10.5+3 (was 0.10.1)
...
Changed 11 dependencies! 
A quick pub serve to fire up the web server built into the Dart Pub package manager and I find...

My Polymer elements still work just fine:



Well, at least this very simple one from the first chapter of the book still works. No doubt there will be some adventure, but this is encouraging.

All is not well, however, as my tests are failing. Adding insult to injury is that I am not really testing this element. I have a very basic test that asserts nothing more than the element has a shadow root:
  group("<hello-you>", (){
    test('has a shadowRoot', (){
      expect(
        query('hello-you').shadowRoot,
        isNotNull
      );
    });
  });
Unfortunately, I no longer see that shadow root:
CONSOLE MESSAGE: FAIL: <hello-you> has a shadowRoot
  Expected: not null
    Actual: <null>
Happily, the fix is relatively easy. I find that I can get the tests to pass if I wrap them in a Polymer.onReady() block:
library hello_you_test;

import 'package:unittest/unittest.dart';
import 'package:unittest/html_config.dart';
import 'dart:html';
import 'package:polymer/polymer.dart';

main() {
  useHtmlConfiguration();

  initPolymer();
  Polymer.onReady.then((_) {
    var _el;
    setUp((){
      _el = createElement('<hello-you></hello-you>');
      document.body.append(_el);
    });
    group("<hello-you>", (){ /* ... */ });
  });
}
With that, I have my test passing in Polymer.dart 0.16:



It seems that this test is not passing in content_shell, but I will worry about that tomorrow. For now, the upgrade to 0.16 seems to be relatively smooth.

Day #1

2 comments:

  1. You haven't even gotten to the good parts yet. No need for <link rel="import" href="..."&rt; in 99% of occasions. It's just a regular code library import in the backing code.

    ReplyDelete
    Replies
    1. Something to look forward to! I'm just hoping that this content_shell thing will be relatively easy to sort out. Initial tries at the obvious solutions did not yield good results. Fingers crossed tonight :)

      Delete