单元测试中通过本地dom访问元素

Question

考虑以下代码：

<test-fixture id="fixture-one">
    <template>
        <display-enter-button id="testEl"></display-enter-button>
    </template>
</test-fixture>

<script>
    suite('Query Selector Tests', function() {
        test('On click function called', function() {
            var circle = fixture('fixture-one').shadowRoot.querySelector('.btn');
            var proto = Document.getElementById('testEl').constructor.prototype;
            var func = sinon.spy(proto, '_btnClick');
            circle.click();
            sinon.assert.called(func);
    });
});
</script>

有没有办法重写，以便我可以通过 Polymer local DOM (this.$..) 访问原型元素。

而不是

var proto = Document.getElementById('testEl').constructor.prototype;

我在寻找类似的东西：

var proto = this.$.testEl.constructor.prototype;

（我的例子不起作用..）

Answer 1

使用 var proto = fixture('fixture-one'); proto 将显示输入按钮。

Answer 2

在测试中，您需要使用一个变量名来保存 fixture 对象。然后您可以将其用作您的 Web 组件。

var el = fixture('fixture-one');
var circle = el.shadowRoot.querySelector('.btn');
var proto = el.constructor.prototype;

检查它的id； el.id 应该等于 'testEl'.

请记住，'this' 是在上下文中使用的，您不能在元素本身之外使用它。在测试中，您应该使用 el.$ 而不是 this.$。另外，请记住，当您调用 fixture() 时，不会返回测试夹具本身；返回模板中的元素。

单元测试中通过本地dom访问元素

Access element through local dom in unit test

javascript

polymer

polymer-2.x