聚合物2.0：在Chrome的测试中未呈现的子组件

Question

I've got a simple Polymer component using 2 different components. When used on page, everything works fine but when I run tests, they fail on Chrome only. Contents of sub-components moment-element and duration-view are not rendered.

<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../bower_components/moment-element/moment-element.html">
<link rel="import" href="../duration-view/duration-view.html">

<dom-module id="issue-row">
    <template>
        <li>
            [[issue]]
            <moment-element datetime="[[startDate]]" output-format="[[startDateFormat]]"></moment-element>
            -
            <moment-element datetime="[[endDate]]" output-format="[[endDateFormat]]"></moment-element>
            <duration-view date-from="[[startDate]]" date-to="[[endDate]]"></duration-view>
        </li>
    </template>

    <script>
        class IssueRow extends Polymer.Element {
            static get is() { return 'issue-row'; }
            static get properties() {
                return {
                    issue : String,
                    startDate : String,
                    endDate : String,
                    startDateFormat : {
                        type : String,
                        value : 'D.MM HH:mm'
                    },
                    endDateFormat : {
                        type : String,
                        value : 'HH:mm'
                    }
                };
            }
        }

        window.customElements.define(IssueRow.is, IssueRow);
    </script>
</dom-module>

<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../bower_components/moment-element/moment-import.html">
<link rel="import" href="moment-duration-format-import.html">

<dom-module id="duration-view">
    <template>
        some static content which is not rendered.
        [[formattedDuration]]
    </template>

    <script>
        class DurationView extends Polymer.Element {
            static get is() { return 'duration-view'; }
            static get properties() {
                return {
                    format : {
                        type : String,
                        value : "hh:mm"
                    },
                    duration : {
                        type : String,
                        value : '00:00:00'
                    },
                    dateFrom : String,
                    dateTo : String,
                    formattedDuration : {
                        type : String,
                        notify : true
                    }
                };
            }
            static get observers() {
                return ['_computeDuration(duration, dateFrom, dateTo, format)']
            }
            _computeDuration(duration, dateFrom, dateTo, format) {
                console.log(duration, dateFrom, dateTo, format);
                var output;
                if (dateFrom && dateTo) {
                    var from = moment(dateFrom);
                    var to = moment(dateTo);
                    if (!from.isValid() || !to.isValid()) {
                        this.set('formattedDuration', 'Invalid date');
                        return;
                    }
                    output = moment.duration(to.diff(from), 'ms');
                } else {
                    output = moment.duration(duration);
                }
                this.set('formattedDuration', output.format(format, {trim: false}));
            }
        }

        window.customElements.define(DurationView.is, DurationView);
    </script>
</dom-module>

  <test-fixture id="BasicTestFixture">
    <template>
      <issue-row issue="PR-493" start-date="2017-05-18 11:00" end-date="2017-05-18 14:30"></issue-row>
    </template>
  </test-fixture>

  <script>
      suite('issue-row', function () {

        test('displays issue number, dates and duration', function () {
          var element = fixture('BasicTestFixture');
          var elementShadowRoot = element.shadowRoot;
          var elementText = elementShadowRoot.textContent;
          expect(elementText).to.have.string("PR-493");
          expect(elementText).to.have.string("18.05");
          expect(elementText).to.have.string("11:00");
          expect(elementText).to.have.string("14:30");
          expect(elementText).to.have.string("3:30");
        });

      });
  </script>

I've got assertion error on second expect call:

Error: expected '\n        \n            PR-493\n            \n            -\n            \n            \n        \n    ' to contain '18.05'
  Context.<anonymous> at issue-row_test.html:32

console.log in _computeDuration outputs only default values (or empty) when testing on chrome.

This works fine on Firefox and fails on Chrome. Test results:

chrome 58 (5/0/1)                       firefox 53 (6/0/0)

Answer 1

The problem is a misunderstanding of shadow DOM concept. Elements are rendered but they are not showing in standard DOM traversal. In this particular case, textContent , innerHTML and outerHTML properties ignore shadow elements. It worked on Firefox because it lacks shadow DOM support and it renders everything in standard DOM tree.

I made a simple tool for testing contents of nested components:

window.deep = function (element) {
    return {
        textContent : (function () {
            if (element.nodeType === Node.TEXT_NODE) {
                return element.textContent;
            }
            var children;
            if (element.shadowRoot) {
                children = element.shadowRoot.childNodes;
            } else {
                children = element.childNodes;
            }
            var content = [];
            for (var i in children) {
                content.push(deep(children[i]).textContent);
            }
            return content.join('');
        })()
    }
}

Feel free to use this concept if you need to. Usage: deep(fixture('fixtureId')).textContent