Ember: 测试 tagName 的正确方法

Question

给定以下组件集成测试：

test('it has the correct tagName of aside', function(assert){
  this.render(hbs`{{my-component}}`);
  assert.equal(this.$().prop('tagName'), 'ASIDE');
});

它没有说 tagName 是 div 尽管我更改了组件中的 tagName:

export default Ember.Component.extend({
  tagName: 'aside',
  ...
});

查看页面源码，实际上是一个aside，但是集成测试没有看到它。

如果我也尝试测试 class 属性，也会发生类似的失败。我将一个 class 名称附加到组件中的 classNames 集合，但是当我查询它时返回的所有内容都是 ember-view.

测试这个的正确方法是什么？

Answer 1

在集成测试中，this.$() 指的是整个内联渲染的 Handlebars 模板。它的根元素始终是 <div>.

要查找组件的元素，您需要 this.$('> .my-component') 之类的东西，选择器基于组件的 class 名称。那应该允许您断言标签名称属性.

Ember: 测试 tagName 的正确方法

Ember: Proper way to test tagName

integration-testing

ember.js

ember-cli