1

在我有一个 firebase-login 元素

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

toggleLogin 调用的地方：

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

在我正在使用的 Polymer 测试套件中：

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

但是 Selenium 给了我以下错误：

this.$.loginModal.toggle is not a function

长话短说，我如何单击按钮并检查模式弹出？

注意：Polymer 团队的测试如下：

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

由于他们将元素命名为 myEl 而不是 element 并寻找按钮标签而不是带有 btnLogin id 的标签，我觉得我的解决方案是合适的。我在这里做错了什么？

更新：

在查看绑定事件时，我仍然没有让事情正常进行。

代码：

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

上面的代码允许我越过这条线，但实际上并没有切换对话框。我不确定为什么。当我添加click()而不是click它时this.$.loginModal.toggle() is not defined，我会遇到我一直在努力解决的错误。

更新：

仍然没有找到一个好的答案。正在研究一些可能有帮助的代码，并找到了想要了解其内容元素信息的子菜单元素。我将在下面包括他们的测试。

代码：

  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);
    });

按照上面的示例，我尝试了以下操作：

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);
});

不幸的是，我越来越loginModal.opened不确定。loginModal.toggle()给出切换不是函数错误。

更新：

我发现 bind 实际上并没有调用该函数。它仅将 绑定this到新位置。因此，当我这样做时，btnLogin.click.bind(btnLogin)它正在进行绑定，因此当我调用btnLogin.click()它时，它将绑定到btnLogin而不是 ... btnLogin。因此，只调用btnLogin.click()而不调用bind函数是一样的。

既然已经解决了这个问题，我决定搞乱call而不是bind但我只是将其绑定this到相同的范围，所以这没有帮助。然后我尝试btnLogin.click.call(element)了，但它仍然给了我 this.$.loginModal.toggle 不是函数的错误。

4

1 回答 1

1

胡乱猜测，我对JS不太了解

var el = Polymer.dom(element.root).querySelector('#btnLogin');
el.click().bind(el)();
于 2016-03-01T21:24:28.853 回答