Monday, September 23, 2013

Tracking Down Internal Dartium Errors


I have been having myself some fun over the past few days writing Dart unit tests for a Backbone.js application (that's right, Dart tests for a JavaScript application). I think the fun is over.

I upgraded to the latest Dart VM last night (0.7.3.1_r27487) and have been getting nothing but sad tabs ever since:



(if someone wants to reproduce, it is e0b18ea in the dart-testing branch of Funky-Backbone.js-Calendar)

Interestingly, the tests still seem to work if I close the JavaScript console, run the tests, then re-open the JavaScript console:



I am not too fussed by this. After all, this entire experiment has been fairly insane. Fun, to be sure, but I doubt that there are immediate practical applications. I still believe that Dart's built-in testing is superior to anything that exists in JavaScript-land, but there are too many volatile parts involved at the moment: Dart, js-interop, and Dart's unittest.

There is also the odd discrepancy in behavior between events in Dart and JavaScript. As I found last night, JavaScript does not see Dart click events. Given the oddness of the sad-tab tonight, I am going to let that one lie. Before moving onto fresh ground, there is one other strange behavior that has been bugging me: I cannot query for the calendar date elements.

In my tests, I have been forced to find elements with iterators:
      var cell = queryAll('td').
        where((el)=> el.id == fifteenth).
        first;
Instead, I ought to be able to simply query for an element with that ID:
      var cell = query('#${fifteenth}');
But this has been resulting in my most favoritest Dart error of all—the dreaded internal Dartium error:
ERROR: the initial view populates the calendar with appointments
  Test failed: Caught SyntaxError: Internal Dartium Exception
  ../../../../../../mnt/data/b/build/slave/dartium-lucid64-full-trunk/build/src/out/Release/gen/blink/bindings/dart/dart/html/Document.dart 123:128  Document.query
  dart:html 448:49                                                                                                                                   query
  ../test.dart 60:23
(I even got that before the crashy Dartium+unittest combo)

So what gives here? The element is clearly there—if I query all of the table cell elements on the page and iterate through them, I can find the element with the target ID. But I cannot query for said element.

To explore this particular issue, I break it down into a very small web test page and associated script. In the test page, I include a simple JavaScript script that creates an element. I also include a number of elements that are entered by hand:
<html>
<head>
  <title>Test JS Elements</title>
  <script src="packages/browser/dart.js"></script>
  <script src="packages/browser/interop.js"></script>
  <script type="application/dart" src="main.dart"></script>
</head>
<body>
  <div id="2013-09-22"></div>
  <div id="d2013-09-21"></div>
  <div id="test"></div>
</body>
<script type="text/javascript">
  var newDiv = document.createElement("div");
  newDiv.id = 'j2013-09-23';
  document.body.appendChild(newDiv);
</script>
</html>
Quick experimentation ends up proving that my problem is the ID attribute. If the ID on which I am querying does not contain a character (I had been using ISO 8601 dates in the Backbone application), then I get the error:
// main.dart
import 'dart:html';
import 'package:js/js.dart' as js;

main() {
  var el = query('#2013-09-22');
  print(el);
}
Regardless of what the spec say, browsers allow the use of IDs with just numbers and dashes and these make the most sense in a calendar application. Regardless, an internal Dartium crash is not a helpful error message, so it's off to the bug reporting machine with me! Still, I am happy to have that minor mystery solved.


Day #883

No comments:

Post a Comment