CODEWITHSUNDEEP
javascriptgoogle-chromefirefoxpolymerweb-component-tester
geddevrel
geddevrel

Reputation: 31

web-component-tester : tests succeed in Chrome but fail in Firefox

I am using web-component tester from the command line to run fixture-based tests on my Polymer component. The tests succeed Chrome (v.47) but fail in Firefox (v.42). The issue is that in some change observer function in my Polymer component, the expected data is being received in Chrome, but is empty in Firefox, causing the tests to fail in the latter. Here are the essential codes:

Polymer Component: Polymer({ is: 'component-name',

  properties: {
    data: {
    type: Array,
    observer: '_dataChanged'
  },
  _dataChanged: function() {
    process(this.data)  // this line
    ...
  },
  ...

In Chrome, the value of 'this.data' in "this line" above is non-empty, whatever was passed in the html fixture. This allows my test cases to succeed. But in Firefox, the value of 'this.data' received from the event is an empty array [], causing the said tests to fail. Any ideas why this is the case?

I've also tried wrapping my test suites inside an event listener for the 'WebComponentsReady' event, even though web-component-tester already ensures that the suites are started only after such an event fires. This approach still works in Chrome, and still fails in Firefox.

Upvotes: 0

Views: 414

Answers (2)

geddevrel
geddevrel

Reputation: 31

One fix I found (not without sheer luck) is to structure the fixture and test scripts in the following pattern:

Fixture (HTML):

<html>
  <head>
    ...
    <script src="../web-component-tester/browser.js"></script>
    ...
    <script src="test-script.js"></script>
    ...
  </head>
  <body>
    ...
    <my-component ...></my-component>
    ...
  </body>
</html>

test-script.js:

document.addEventListener("WebComponentsReady", function() {
  ...
  // some code that changes the data of my-component
  // (needed for correct state of the test cases)
  ...
  runTests();
}

function runTests() {
  suite('Test suite for my-component', function(){
    ...
  });
}

The above pattern works for both Chrome and Firefox. It is a bit redundant since web-component-tester already listens for "WebComponentsReady", but the added event listener above is what it took for the tests to work on Firefox.

I heard that Firefox is not yet as robust or stable as Chrome in the managing of "ready" events of component hierarchies. This may be related to the issue.

Upvotes: 0

Dogs
Dogs

Reputation: 3157

Change your _dataChanged method to take in the data value as an argument, like so:

properties: {
    data: {
    type: Array,
    observer: '_dataChanged'
},
_dataChanged: function(data) {
    process(data);
...
}

I don't think Polymer guarantees that the value of the property will be set on the this context yet when an observer is fired.

Upvotes: 1

Related Questions