How to test existence of element in polymer?

Question

I am facing this issue in my polymer component and unable to find out where I am facing. The following are my code:

<dom-module id="invoice-history">
  <template>
      <template is="dom-if" if="{{!_isHistoryPresent(invoiceListHistory)}}" >
        <div class="no-message">{{noDataMessage}}</div>
      </template>
    <style include="invoice-history-styles"></style>
  </template>
  <script>
    Polymer({
      is: 'invoice-history',

      properties: {
        invoiceListHistory: Array
      },

      _isHistoryPresent: function (history) {
        var hp = true;
        if(history){
            hp = history.every(function (invoice) {
              return invoice.txnStatus == null;
            });
        }else {
            this.message = "history not present";
        }
        return !hp;
      }
    });
  </script>
</dom-module>

Following is my test (I have written the outputs along the expects):

<test-fixture id="invoice-history-fixture">
  <template>
    <invoice-history></invoice-history>
  </template>
</test-fixture>
var invoiceListHistory = [good values]
before(function () {
   iHistory = fixture('invoice-history-fixture');
});
context('dom manipulation tests', function () {
      it('Should display no data message if there is no data', function (done) {
        iHistory.setAttribute('invoice-list-history', invoiceListHistory);
        iHistory.setAttribute('no-data-message', "It doesn't have data");
        window.setTimeout(function () {
         expect(Polymer.dom(iHistory.root).querySelector('.no-message').textContent).to.be.equal("XYZ"); // expected 'It doesn't have data' to equal 'XYZ'
         expect(Polymer.dom(iHistory.root).querySelector('.no-message')).to.be.visible; // It passes
         expect(qHistoryEl.message).to.be.equal('ABCD'); // expected 'history not present' to equal 'ABCD'
         expect(window.getComputedStyle(Polymer.dom(iHistory.root).querySelector('.no-message'), null).getPropertyValue('visibility')).to.be.equal('jkl');
         // expected 'visible' to equal 'jkl'

         done();
         }, 0);
      });
    });

The result of First expect(...) is understandable. But how the Second expect(...) passes?
And the most important thing here, probably the root cause, is in Third expect(...) it is saying expected 'history not present' to equal 'ABCD'. That means the code goes to else{} block inside _isHistoryPresent() method. HOW?

How to test existence of dynamically created element using dom-if?

score 0 · Answer 1 · answered Oct 11 '17 at 19:16

I'm far from a Polymer expert - I'm just learning it now myself. But it seems like "setAttribute" is not the right way to go about assigning invoiceListHistory. You might specify a few more details about invoiceListHistory as well. something like this:

// properties for your element
properties: {
  "invoiceListHistory": {
    type: Array,
    // I'd do this if you want it to be exposed via attribute, 
    // but that seems weird to me with an array
    reflectToAttribute: true,
    value: []
  },
  "noDataMessage": {
    type: String,
    value: "No data available";
   }
}

// Then in your test
iHistory.invoiceListHistory = invoiceListHistory;

Aaaand I just noticed this question was from July 10, so I'm sure you've already solved this by now. Nevermind -_-

How to test existence of element in polymer?

1 Answers1