CODEWITHSUNDEEP
polymerpolymer-1.0web-component-tester
dman
dman

Reputation: 11064

Stub Element Is Not Effective In The Ready Function

With Polymer 1.* and WCT, when testing my element <sp-veteran></sp-veteran> I am not able to stub out the methods ._getSpComboBox() and ._getItems() in the ready function. I get Error thrown outside of test function: this._getSpComboBox(...)._getItems is not a function.

Since it is in the ready function, I need to use the WCT api stub instead of sinon.stub since the later requires me to grab the element which I can not do before fixture().

Any suggestions?

original code:

  _getSpComboBox: function() {
    return Polymer.dom(this.$.veteran.root).querySelector('sp-combo-box');
  },

  ready: function() {
    if (this.editMode) {
      this._getSpComboBox()._getItems();
    }
    this.$.veteranNoAjax.read();
    this._setStyle();
  }

test:

<test-fixture id="sp-veteran">
  <template>
    <h2>edit veteran in edit mode</h2>
    <sp-app>
      <sp-toast></sp-toast>
      <sp-veteran edit-mode></sp-veteran>
    </sp-app>
  </template>
</test-fixture>

  before(() => {
      replace('sp-app').with('fake-sp-app');

      stub('sp-ajax', {read: ()=> entitiesMock});
      const _getItems = ()=> entitiesMock;
      stub('sp-veteran', {_getSpComboBox: ()=> _getItems});

Upvotes: 0

Views: 302

Answers (1)

Austin Murdock
Austin Murdock

Reputation: 21

Unfortunately testing ready in Polymer1 is kind of a pain, or at least I haven't found an easy way that doesn't have odd side-effects. Calling the ready method after you've attached your stubs/spies is always an option but as I mentioned it can cause some odd issues. This was alleviated in Polymer2 as ready is called by the first call of connectedCallback for your element, so you can create the element then bind your spies and manually add to trigger it, just don't forget to remove after.

In the case of DOM manipulation in a Polymer element, you should be using the attached lifecycle instead, this will solve your issue as I mentioned above for testing, but it also saves you a weird potential usage case in the future. Since ready only runs once for an instance of an element, any logic in your ready statement won't get re-run if that element is re-used later, instead if you put the logic in your attached lifecycle if that element is removed from the DOM then added again later in another location it will rerun it's logic to fetch it's new children.

Upvotes: 1

Related Questions