Search code examples
polymerweb-component-tester

Calling unit/functional test assertions after change events in Polymer


I've been writing some functional tests in Mocha, changing items and then checking if the changes propagated correctly. Currently, I'm using window timeouts to give Polymer time to update elements, but this feels like a hack. The developer guide outlines a few different observation hooks, but I'm not sure which one I should call.

The one that sounds the closest is a recommendation to attach an async call to a propertyChanged event. However, many items use propertyChanged, will attaching an async task to a propertyChanged event reliably call the async task after the element's methods attached to the original propertyChanged have been called?

Bonus points for information on whether the given solution is forward compatible with Polymer 1.0 (or .8/.9).


Solution

  • I was looking in the wrong place, the right place is the async portion of Polymer's testing how-to. The right function to use is flush(callback), which will "trigger a flush of any pending events and observations, ensuring that notification callbacks are dispatched after they have been processed."

    Their documentation globs tests together, I prefer individual elements for each test-suite and each test. This is especially helpful when debugging functional tests as the changes are preserved and it's easier to setup break points:

      before(function(done){
        nonMatchingEl.search = "";
        flush(done);
      });
    
      test('updates the "pre" property', function() {
        assert.equal(nonMatchingEl.pre, 'prematch-hello-postmatchhello');
      });
    
      //test two ...