Wednesday, June 12, 2013

Testing HTML5 in Dart

‹prev | My Chain | next›

Last night I found an HTML5 display issue in the Dart of the ICE Code Editor. All of the DOM elements in the ICE Code Editor are absolutely or relatively positioned. For some reason in HTML5 that means that the body element has a zero pixel height.

I fixed the issue by explicitly setting both the <html> and <body> heights:
     // Both of these height settings are required for ICE to play nicely
     // with HTML5 documents
     document.documentElement.style.height = '100%';
     document.body.style.height = '100%';
I don't always test display issues, but I appreciate having tests that catch regressions. Mostly I am just curious to see if it is possible to test display issues—HTML5 or otherwise in Dart.

Since this particular issue is an HTML5 one, I need an HTML5 test context. So I create html5.html with:
<!DOCTYPE html>
<html>
  <head>
  <script type="application/dart" src="html5_test.dart"></script>
  <script type='text/javascript'>
    // JS for posting messages to inform runner that tests are complete
  </script>
  <script src="packages/browser/dart.js"></script>
  </head>
</html>
The complete test is fairly straight-forward, mostly thanks to copying and pasting from the main ice_test.dart file. The html5_test.dart file contains only a single test that checks the height of the editor after load:
library ice_html5_test;

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

import 'helpers.dart' as helpers;
import 'package:ice_code_editor/ice.dart';

main() {
  group("HTML5", (){
    group("Full Screen ICE", (){
      // tearDown(()=> document.query('#ice').remove());

      test("the editor is full-screen", (){
        var it = new Full(enable_javascript_mode: false);

        _test(_) {
          var el = document.query('#ice');
          var editor_el = el.query('.ice-code-editor-editor');
          expect(editor_el.clientWidth, window.innerWidth);
          expect(editor_el.clientHeight, closeTo(window.innerHeight,1.0));
          expect(document.body.clientHeight, greaterThan(10));
        };
        it.editorReady.then(expectAsync1(_test));
      });
    });
  });
}
And that actually works. If I remove my new code, I get failures:
FAIL: HTML5 Full Screen ICE the editor is full-screen
  Expected: a numeric value within <1.0> of <288>
       But:  differed by <288>.
  Actual: <0>
But with my new code, the test passes. Nice

Since this requires separate browser context than my normal tests, I need to run it separately in my test_runner.sh, but that is not a big deal. That minor bother aside, it is quite nice that it is so easy to test rendering bugs in Dart.



Day #780

No comments:

Post a Comment