Как проверить наличие элемента в полимере?

Я столкнулся с этой проблемой в своем полимерном компоненте и не могу понять, с чем столкнулся. Ниже приведен мой код:

<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>

Ниже приведен мой тест (я написал результаты по ожиданиям):

<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);
      });
    });

Результат First expect(...) понятен. Но как проходит Second expect(...)?
И самое главное здесь, возможно, первопричина, в Third expect(...) говорит expected 'history not present' to equal 'ABCD'. Это означает, что код переходит в блок else{} внутри метода _isHistoryPresent(). КАК?

Как проверить наличие динамически созданного элемента с помощью dom-if?


javascript web-component polymer web-component-tester
person mukund    schedule 10.07.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я далеко не эксперт по полимерам - я только сейчас изучаю это сам. Но похоже, что "setAttribute" не является правильным способом назначения invoiceListHistory.. Вы также можете указать несколько дополнительных сведений о invoiceListHistory. что-то вроде этого:

// 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;

Ааа, я только что заметил, что этот вопрос был от 10 июля, так что я уверен, что вы уже решили это к настоящему времени. Не берите в голову -_-

person Isochronous    schedule 11.10.2017