Dealing with element objects that fire on creation

Question

So I have a fixture:

<test-fixture id="my-element-fixture">
  <template>
    <my-element></my-element>
  </template>
</test-fixture>

I set up the fixture for testing:

<script>
  suite('my-element', () => {
    setup(() => {
      page = fixture('my-element-fixture');
    });

    test('testing', () => {
      assert.isTrue(true);
    });
  });
</script>

The element for the fixture has a ready() function in it:

constructor() {
        super();
      }
ready() {
        super.ready();
        this.otherElement.addEventListener('function_name', function(e) {
            //stuff
          }.bind(this)
        );
      }

and this ready() function has an object calling an element it:

this.otherElement

the object is defined in the parent of this fixture:

<my-element id="my-element" otherElement="[[$.otherElement]]"></my-element>

which is created there as:

<otherElement id="otherElement></otherElement>

and called from its file:

<link rel="import" href="../otherElement/otherElement.html">

what I want to do is not bother testing otherElement.

In the past when I've had an element in the fixture from another element I would simply make an object to take it's place and use the fake object and make fake functions:

setup(() => {
  page = fixture('my-element-fixture');
  anotherElement = page.$.anotherElement;
  anotherElement.functionname = function(t) {/*do nothing*/};
});

But in the past as you can see the element was also in the fixture's element I was testing, hence page.$.anotherElement. Not sure that really matters.

The issue now being I have no idea what I need to do to overwrite the otherElement object so that it won't be called in the ready() function.

I have tried doing what I did above in the setup.

I have tried including the element to the actual test file.

I have tried having the element in the fixture call itself, a fake element, the actual element.

Pretty much anything I could think of.

Every time the object is undefined and I get an error along the lines of "this.otherElement is undefined" or "Cannot read property of .functionname of undefined".

Any ideas?

Answer 1

This one was tough, but after all else failed the only solution was to litterally cut into the code outside of the unit test and change the structure so my ready function wouldn't handle things.

First I wrapped an if statement around the ready function's content checking to see if if otherElement was undefined:

constructor() {
        super();
      }
ready() {
        super.ready();
        if (this.otherElement != undefined) {
          this.otherElement.addEventListener('function_name', function(e) {
              //stuff
            }.bind(this)
          );
        }
      }

This bypassed the need to have it defined before anything really got done and allowed me to make a custom otherElement object like so.

page.otherElement = {};

And then put functions assigned to the object as I needed them:

page.otherElement = {
   functionName: function(parameters) {/*anything*/},
};

Hope this helps someone, but it's pretty specific so idk. GL fellow Polymer buddies!