CODEWITHSUNDEEP
javascriptpolymerpolymer-2.x
Xavier Hendrickx
Xavier Hendrickx

Reputation: 550

Access element through local dom in unit test

Consider following code: 

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

Is there a way to rewrite so I can access the proto element via Polymer local DOM (this.$..).

Instead of 

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

I look for something like: 

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

(My example doesn't work..)

Upvotes: 0

Views: 661

Answers (2)

Mary Shaw
Mary Shaw

Reputation: 79

In a test, you need to hold onto the fixture object with a variable name. You can then use it as your web component. 

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

Check its id; el.id should equal 'testEl'.

Remember that 'this' is used in context and you can't use it outside of the element itself. In a test, rather than this.$, you should use el.$. Also, keep in mind that the test fixture itself isn't returned when you call fixture(); the element inside the template is returned.

Upvotes: 2

veith
veith

Reputation: 56

With var proto = fixture('fixture-one'); proto will be display-enter-button.

Upvotes: 0

Related Questions