Question

在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.dom(element.root).querySelector('#btnLogin').click();

但是Selenium给了我错误：

this.$.loginModal.toggle is not a function

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

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

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

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

更新：

在查看绑定事件时，我仍然没有工作。

CODE：

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)但它仍然给了我这个错误。$。loginModal.toggle不是函数。

Answer 1

只是一个疯狂的猜测，我不太了解JS

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

聚合物硒测试访问子元素数据

1 个答案: