ember-qunit如何在集成测试中呈现组件？ [英] How does ember-qunit render components in integration testing?

问题描述

这是Ember-qunit的基本组件/集成测试。

  import {moduleForComponent，test} from'ember-qunit'; 
从'htmlbars-inline-precompile'导入hbs; 
 
 moduleForComponent（'my-component'，'TODO：put something here'，{
 integration：true 
}）; 
 
 test（'it renders'，function（assert）{
 this.render（hbs` {{my-component}}`）; 
 
控制台。 log（'this is the rendered element'，this。$（）[0]）; 
 assert.ok（false）; 
}）; 
  

我有一个这样的目录结构的ember-addon：

  addon / 
 .. components / 
 .... my-component / 
 ......组件。 js 
 ...... style.less 
 ...... template.hbs 
 app / 
 .. components / 
 ....我的-component.js 
 ... component.js 
 tests / 
 ..集成/ 
 .... components / 
 ..... 。my-component-test.js 
  

ember如何确定哪里 {{ my-component}} 是？

这与以下相同：

Ember-CLI预编译模板如何？

编辑1

根据评论，我将常规的应用程序组件链接到 addon 组件只需导入/导出。

  app / components / my-component / component.js 
 export {default} from'my-application / components / my-component'
  

但是，控制台日志只显示：

 这是渲染元素< div id =ember234 class =ember-view> 
<！----> ; 
< / div> 
  

解决方案

Ember尝试在您的应用程序下找到一个名为 my-component 的文件，组件目录或 app / components / templates 目录或 app / helpers 目录。 p>

如果您在 addon / components下定义 my-component 目录下，您需要在 app / components 目录或 tests / dummy / app / components

  export {来自'my-addon / components / my-component'的默认值
  




Here is a basic component / integration test for ember-qunit.

import { moduleForComponent, test } from 'ember-qunit';
import hbs from 'htmlbars-inline-precompile';

moduleForComponent('my-component', 'TODO: put something here', {
  integration: true
});

test('it renders', function(assert) {
  this.render(hbs`{{my-component}}`);

  console.log('This is the rendered element', this.$()[0]);
  assert.ok(false);
});

I have an ember-addon with a directory structure like this:

addon/
.. components/
.... my-component/
...... component.js
...... style.less
...... template.hbs   
app/  
.. components/
.... my-component.js
...... component.js
tests/  
.. integration/  
.... components/  
...... my-component-test.js  

How does ember determine where {{my-component}} is?

This is kind of in the same vein as this:
How does Ember-CLI precompile templates?

Edit 1

As per the comments, I've linked the regular app component to the addon component by just importing / exporting it.

app/components/my-component/component.js
export { default } from 'my-application/components/my-component'  

However, the console log only shows this:

This is the rendered element <div id="ember234 class="ember-view">
                               <!---->
                             </div>

解决方案

By convention.

Ember try to find a file named my-component under your app/components directory or app/components/templates directory or app/helpers directory.

If you define my-component under your addon/components directory, you need to re-define it under your app/components directory or tests/dummy/app/components directory such as:

export { default } from 'my-addon/components/my-component';

这篇关于ember-qunit如何在集成测试中呈现组件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！