Saturday, October 4, 2014

Testing Computed Style in Dart


I was able to test CSS styling last night, making getComputedStyle() my new best friend. Seriously, I have wanted to do just this kind of testing before, but never knew it was possible. Which begs the question, is it possible in Dart?

Presumably, it is. Especially since getComputedStyle() is part of core dart:html. Even better, getComputedStyle() in Dart is available on any Element, so no need to run it through the top-level window version.

As yesterday, I am testing some Bootstrap styles applied to a custom Polymer element for a chapter in Patterns in Polymer. More precisely, I am using Polymer.dart for the Dart version of this chapter.

The setup for testing this creates the <pricing-plan> elements that should use Bootstrap styles:
  var _el;
  group("styles", (){
    setUp((){
      _el = createElement('''
        <pricing-plans>
          <pricing-plan type="primary">plan content</pricing-plan>
        </pricing-plans>
      ''');
      document.body.append(_el);
    });
    // Test goes here...
  });
The type="primary" attribute will generate a Bootstrap panel-primary class that results in a panel with a blue heading like the one on the right:



To test this, I need the same computed style as from last night's JavaScript test. I need grab the <pricing-plan> element, then query for the panel heading, and finally ask for the computed style:
    test("come from external sources", (){
      var primary_el = _el.query('pricing-plan'),
          heading_el = primary_el.shadowRoot.query('.panel-heading'),
          style = heading_el.getComputedStyle();

      expect(style.backgroundColor, 'rgb(66, 139, 202)');
    });
The expectation is then that the panel's background color will be default Bootstrap primary blue. But this turns out not to work:
CONSOLE MESSAGE: FAIL: styles come from external sources
  Expected: 'rgb(66, 139, 202)'
    Actual: 'rgba(0, 0, 0, 0)'
     Which: is different.
Interesting, I note that the smoke test web page is making XHR requests for Bootstrap:
XHR finished loading: GET "http://localhost:8080/packages/bootstrap_example/assets/bootstrap.min.css".
This occurs even though Bootstrap is being imported with @import in the Polymer definition:
<link rel="import" href="../../../packages/polymer/polymer.html">
<polymer-element name="pricing-plan">
  <template>
    <div class="col-md-{{size}}"><!-- ... --></div>
    <style>
      @import '/packages/bootstrap_example/assets/bootstrap.min.css';
    </style>
  </template>
  <script type="application/dart" src="pricing_plan.dart"></script>
</polymer-element>
I presume this is the Polymer transformer doing this. Since I cannot change it, I need a workaround. Like running pub serve:
$ pub serve
Loading source assets... 
Loading polymer transformers... 
Serving bootstrap_example web  on http://localhost:8080
Serving bootstrap_example test on http://localhost:8081
The tests are kindly served up from 8081, so I point content_shell there:
$ content_shell --dump-render-tree http://localhost:8081                         
CONSOLE MESSAGE: unittest-suite-wait-for-done
CONSOLE MESSAGE: PASS: styles come from external sources
CONSOLE MESSAGE: PASS: [defaults] name is "Plan"
CONSOLE MESSAGE: PASS: [defaults] can embed code
CONSOLE MESSAGE: 
CONSOLE MESSAGE: All 3 tests passed.
CONSOLE MESSAGE: unittest-suite-success
CONSOLE WARNING: line 213: PASS
So yay! Aside from the tiny XHR curveball with the @import CSS, it is just as easy to test styles in Polymer.dart as in the JavaScript version.


Day #203

No comments:

Post a Comment