jquery - 测试 ember 应用程序 - ember.js find() helper acceptable selectors

Question

尝试试驾我的第一个 ember.js 应用程序。使用 ember 应用套件。

对 qunit 如何与选择器一起工作感到困惑(我假设 jquery 选择器会工作，而且它们确实如此 - 大多数情况下......)。

我的 Handlebars 有这段代码:

{{#link-to 'locations.new' classNames='add-btn'}}
  Add new location
{{/link-to}}

并且我打算测试是否存在具有适当 href 的链接，并单击该链接并在单击后验证当前 url 和路由。

所以，我的测试如下:

// There is an element that links to locations/new
var link = find('a[href="#/locations/new"]');
ok(link, 'There is a link to add new location on the page');

click(link);
andThen(function() {
  equal(currentRouteName(), 'locations.new', 'Clicked "add" button - now locations.new route is active');
  equal(currentURL(), '/locations/new', 'Clicked "add" button - and current url is /locations/new');
});

注意:我正在使用来自 this PR on EAK 的 currentRouteName 和 currentURL 助手，它们确实按预期工作。

我的测试在 click(link) 部分失败，出现 Error: Element [object Object] not found.。

如果我尝试将选择器直接传递给点击 - 像这样 - click("a[href='#/locations/new']") - 我得到一个错误 Element a[href='#/locations/new'] 未找到。。如果我尝试使用反斜杠或双反斜杠转义特殊字符 #，结果相同。

目前，我通过按类获取 div 来缓解这个问题 - 就像这样:

var link-by-class = find('.add-btn');
click(link-by-class);
andThen( as above )

测试通过。

问题:

1. 为什么我不能对 href 找到的同一个变量调用“click()”？
2. 我的测试是否合理地对实现漠不关心？ (好吧，按类查找元素的解决方法不符合该要求？)

提前致谢!

更新

根据 kingpin2k的评论，由于我选择了错误的断言方法，我的测试通过了 - 如果 foo 是一个空数组(ok(foo, 'bar') 将通过(find 如果没有结果返回。Ember API 文档指导我使用 findWithAssert ，但它找不到这样的 href 的链接。

令人困惑的是，根据 jQuery docs 使用 [attribute='value'] jquery 选择器在 JS 控制台中工作；和执行 find以及findWithAssert在 ember-testing 中似乎只是将选择器传递给 jQuery...

为什么会失败？我不知道。人们会认为 GLaDOS 解释了 speedy thing goes in, speedy thing comes out - 只需将选择器传递给 jQuery 就会将其返回，因为 jQuery 会返回它 - 但显然不会。

然后我会坚持使用类选择器，尽管它确实有点指示实现。

Answer 1

拒绝放弃让测试实现不可知，我决定使用基本选择器，并发现了我失败的无证罪魁祸首。

首先，我想获取所有链接 - 并通过 href 属性过滤它们:

  var links = findWithAssert('a');
  var my-link = links.filter('[href="#/location/new"]');

这给了我正确的 links 长度，但是 my-link 仍然是空的。所以我提醒所有 hrefs，以确保我没有遗漏任何东西:

  for(var i=0; i<links.length; i++){
    alert(links[i].getAttribute('href'));
  }

令我惊讶的是，我看到 hrefs 在没有前导 # 的情况下发出警报。

答案:在 ember.js find() 帮助程序中使用带有 href 属性的复杂 css 选择器时，从 url 中删除散列。