Testing Polymer Interaction in Dart

As I continue to get back into the groove of daily blogging, I have been pleasantly surprised at how nice testing some of this Polymer stuff is. I have come to expect that any kind testing in JavaScript will be an exercise in pain, so I am quite happy that Karma, Jasmine and Polymer play so nicely. So nicely, in fact, that I begin to wonder if they are better than my beloved Dart.

Certainly that is not possible, but there is one way to find out.

Unfortunately, text events still continue to elude me:

  group("typing", (){
    test('says a friendly hello', () {
      var input = el.shadowRoot.query('input');
      var e = new TextEvent('textInput', data: 'Bob');
      input.dispatchEvent(e);

      var h2 = el.$['hello'];
      expect(h2.text, 'Hello Bob');
    });
  });

Ought to work, but I end up seeing only:

CONSOLE MESSAGE: FAIL: typing says a friendly hello
  Expected: 'Hello Bob'
    Actual: 'Hello '
     Which: is different. Both strings start the same, but the given value is missing the following trailing characters: Bob

And I still cannot get the new-ish custom event stream stuff to work either:

      KeyEvent.keyUpEvent.forTarget(input)
        ..add(new KeyEvent('keyup', charCode: 66))
        ..add(new KeyEvent('keyup', charCode: 111))
        ..add(new KeyEvent('keyup', charCode: 98));

No matter what I throw at that input field, it remains stubbornly unchanged.

Bother.

Happily, click events are a little easier:

  group("clicking", (){
    test('randomly changes the title\'s color', (){
      var button = el.shadowRoot.query('button');
      button.click();

      expect(el.$['hello'].style.color, 'red');
    });
  });

Actually, that test requires a little finagling due to the random number nature of the test. To make it less than random, I supply a seed value for the random number generator:

  group("clicking", (){
    test('randomly changes the title\'s color', (){
      el.seed = 0;

      var button = el.shadowRoot.query('button');
      button.click();

      expect(el.$['hello'].style.color, 'red');
    });
  });

The Polymer element class then needs to support this property:

@CustomTag('hello-you')
class HelloYou extends PolymerElement {
  @published String your_name;
  @published String color;
  int seed;

  HelloYou.created(): super.created();

  feelingLucky() {
    var num = new Random(seed).nextInt(colors.length);
    color = colors[num];
    $['hello'].style.color = color;
  }
}

With that, I have a consistently passing, user interaction test.

I am bummed that I still do not seem to have a good way to generate text events in Dart, but hopefully I am simply doing something wrong.



Day #4

‹prev | My Chain | next›