Thursday, January 3, 2013

Testing UI Events in Dart

‹prev | My Chain | next›

I have finally moved on to updating the events chapter in Dart for Hipsters. I do not think too much has changed in Dart since I wrote that chapter, but I do need to figure out how to test it.

I think that this chapter will also require browser-based unit tests. For many, if not all, of the tests, I could probably get away with faking the various Element, Event, and EventListenerList classes. Such tests would allow me to verify that the code compiles and runs—I could even use dart_analyzer to ensure a certain amount of propriety. But it is important that I verify that the event API in Dart does not change out from under me, so "real" tests it is.

I already know how to do this to a certain extent. I start with an empty HTML document that will source my test suite:
  <title>Events Tests</title>
  <script type="application/dart" src="test.dart"></script>

  <script type="text/javascript">
    // start dart


That test.dart will then import the various test libraries that will describe the code in my chapter:
import 'package:unittest/html_enhanced_config.dart';

import 'simple.dart' as Simple;

main () {
I do not really need the "enhanced" test reporter, but I do love pretty reports.

The simple.dart library imports both the unittest and dart:html libraries. It also defines the run() method that will hold my tests:
library basics_snippet;

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

run() {
  group("[simple]", (){
    test('click event', (){
      // Tests here...
The first code sample that I need to test adds a click handler to an element on a page:
var el = document.query('#clicky-box'); { = "5px solid orange";
The question then becomes how do I simulate a click event in Dart and how do I verify the result? Verifying the result seems a simple matter of checking the element's style. It turns out that the Element class supports a click() method for doing just what I need. So I write my test as:
    test('click event', (){
        new Element.html('<div id="clicky-box">Click Me</div>')

      var el = document.query('#clicky-box'); { = "5px solid orange";

      expect(, contains('orange'));
With that, I have the first code snippet in my events chapter under test:

Nice. That was easier than I expected.

Day #619

No comments:

Post a Comment