Polymer Selenium Test Accessing Sub-Element Data

Question

In a firebase-login element I have

<paper-button id="btnLogin" data-dialog="login-modal" on-tap="toggleLogin">
    <iron-icon icon="account-box"></iron-icon>
    Login
</paper-button>

Where toggleLogin calls:

toggleLogin: function() {this.$.loginModal.toggle();},

In the Polymer test suite I am using:

Polymer.dom(element.root).querySelector('#btnLogin').click();

But Selenium is giving me the error of:

this.$.loginModal.toggle is not a function

Long story short, how can I click the button and check the modal pops up?

Note: Polymer team's test looks like:

Polymer.dom(myEl.root).querySelector('button').click()

Since they are naming their element myEl instead of element and looking for the button tag instead of the tag with id of btnLogin I felt that my solution was suitable. What am I doing wrong here?

UPDATE:

While looking at the bind event I still have not gotten things working.

CODE:

var btnLogin = Polymer.dom(myEl.root).querySelector('#btnLogin');
// This does the same thing as
// var btnLogin = element.$.btnLogin;
btnLogin.click.bind(btnLogin);

The above code allows me to move past the line but does not actually toggle the dialog. I am not sure why. When I add in click() instead of click it gives me the this.$.loginModal.toggle() is not defined error that I have been struggling with.

UPDATE:

Still have not found a good answer to this. Was looking into some code that may help and found the submenu element that wants to know information about it's content elements. I will include their testing below.

CODE:

  suite('<paper-submenu>', function() {
    var menu,
        sub1, sub2, sub3,
        collapse1, collapse2, collapse3,
        trigger1, trigger2, trigger3;
    setup(function() {
      menu = fixture('basic');
      sub1 = menu.querySelectorAll('paper-submenu')[0];
      sub2 = menu.querySelectorAll('paper-submenu')[1];
      sub3 = menu.querySelectorAll('paper-submenu')[2];
      collapse1 = Polymer.dom(sub1.root).querySelector('iron-collapse');
      collapse2 = Polymer.dom(sub2.root).querySelector('iron-collapse');
      collapse3 = Polymer.dom(sub3.root).querySelector('iron-collapse');
      trigger1 = sub1.querySelector('.menu-trigger');
      trigger2 = sub2.querySelector('.menu-trigger');
      trigger3 = sub3.querySelector('.menu-trigger');
    });
    test('selecting an item expands the submenu', function() {
      assert.isFalse(collapse1.opened);
      assert.isFalse(collapse2.opened);
      assert.isFalse(collapse3.opened);
      MockInteractions.tap(trigger1);
      assert.isTrue(collapse1.opened);
      assert.isFalse(collapse2.opened);
      assert.isFalse(collapse3.opened);
    });

Following the above example I tried the following:

test('Login Modal Opens', function(done) {
  expect(loginModal).to.exist;
  console.log(loginModal);
  console.dir(loginModal);
  expect(loginModal.opened).to.exist;

  assert.isFalse(loginModal.opened);

  btnLogin.click.bind(btnLogin);

  assert.isTrue(loginModal.opened);
});

Unfortunately I am getting loginModal.opened as undefined. loginModal.toggle() gives toggle is not a function error.

UPDATE:

I found that bind does not actually call the function. It only binds the this to a new location. So when I was doing btnLogin.click.bind(btnLogin) it was doing the binding so when I called btnLogin.click() it would have a binding to btnLogin rather than ... btnLogin . Therefore it would have been the same to just call btnLogin.click() without ever calling the bind function.

Now that this is figured out, I decided to mess with call instead of bind but again I only was binding the this to the same scope so that was no help. I then tried btnLogin.click.call(element) but it still gave me the error that this.$.loginModal.toggle is not a function.

Answer 1

Just a wild guess, I don't know JS well

var el = Polymer.dom(element.root).querySelector('#btnLogin');
el.click().bind(el)();