7

Trying to test-drive my first ember.js app. Using ember app kit.

Puzzled by how qunit works with selectors (I assumed that jquery selectors would work, and they do - for the most part...).

My handlebars has this code:

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

and I intend to test for existence of a link with an appropriate href and also click the link and verify the current url and route after click.

So, my tests are as follows:

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

note: I am using currentRouteName and currentURL helpers from this PR on EAK, and they do work as intended.

My test fails on the click(link) part, with Error: Element [object Object] not found..

If I try to pass the selector directly to click - like so - click("a[href='#/locations/new']") - I get an error Element a[href='#/locations/new'] not found.. Same result if I try to escape the special character # with a backslash or double backslash.

For the time being, I mitigated the issue by grabbing the div by class - like so:

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

And the tests pass.

Questions:

  1. how come I can't invoke "click()" on the same variable found by href?
  2. Am I testing with reasonable indifference to implementation? (well, the workaround of finding an element by the class doesn't fit that bill?)

Thanks in advance!

UPDATE

Per kingpin2k's comment, my test was passing due to the wrong assertion method I chose - ok(foo, 'bar') will pass if foo is an empty array (which find returns if there are no results. Ember API docs guided me to use findWithAssert, and it fails to find the link with such href.

Befuddlingly, using the [attribute='value'] jquery selector per jQuery docs in JS console works; and the implementation of find as well as findWithAssert in ember-testing seems to just pass down the selector to jQuery...

Why does it fail? I don't know. One would think as GLaDOS explained speedy thing goes in, speedy thing comes out - just passing the selector over to jQuery would give it back as jQuery would return it - but apparently not.

I'll stick to using the class selector then, although it does kind of dictate implementation.

4

1 回答 1

4

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

首先，我想获取所有链接 - 并按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'));
  }

令我惊讶的是，我看到没有前导的 href 警报#。

答：href在 ember.js帮助 器中使用带有属性的复杂 css 选择器时find()，请从 url 中删除哈希值。

于 2014-02-05T03:10:40.063 回答