0

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.

geddevrel
  • 31
  • 3

2 Answers2

1

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.

Dogs
  • 2,883
  • 1
  • 19
  • 15
  • Hi Dogs, I tried this but it still didn't produce the non-empty array in Firefox. In Chrome the tests still succeed. Thanks, tho. – geddevrel Dec 09 '15 at 16:38
  • @gedestech, could you provide a larger example of your code? e.g. what is setting the data property on the element, what the test looks like, etc. – Dogs Dec 09 '15 at 17:12
  • the issue was fixed by rearranging actions in the script and hinging the execution of test suites explicitly on the "WebComponentsReady" event, even though web-component-tester is supposed to take care of that hinging. I will answer the question with more detail on the code pattern. – geddevrel Dec 09 '15 at 19:27
0

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.

geddevrel
  • 31
  • 3