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?

score 0 · Answer 1 · answered Aug 03 '18 at 05:40

0

You should be able to inject a stub element into the component that has the focus of your test.

setup(function() {
  replace('anotherElement').with('fakeAnotherElement');
});

Given your template of

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

it would be put on the dom like

<my-Element>
 <fakeAnotherElement/>
</my-Element>

Read more in the docs: https://www.polymer-project.org/3.0/docs/tools/tests#create-stub-elements

answered Aug 03 '18 at 05:40

jpjwolli

101
2

Gonna try this and get back to you. – Raults Aug 03 '18 at 16:07
So I tried this and it my object was still undefined. I'm going to see if I can play around, but so far I still can't overwrite the object it would seem. Would the nature of the object matter in this case maybe? It's an object selecting an element that just does AWS calls. – Raults Aug 03 '18 at 16:18

score 0 · Accepted Answer · answered Aug 08 '18 at 17:05

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!

Dealing with element objects that fire on creation

2 Answers2