Aurelia StageComponent -如何将子组件呈现到DOM树中？
Aurelia StageComponent -如何将子组件呈现到DOM树中？
提问于 2016-09-03 20:36:21
如果我有一个如下的app.html模板：
<template>
<require from="./MyComponent"></require>
<h1>${message}</h1>
<my-component>test</my-component>
</template>使用MyComponent.ts：
export class MyComponent {
myName : string;
}和MyComponent.html：
<template>
MyComponent
</template>下面的单元测试总是会失败：
import {App} from '../../src/app';
import {StageComponent} from 'aurelia-testing';
import {bootstrap} from 'aurelia-bootstrapper';
describe('the app', () => {
var app ;
beforeEach(() => {
app = StageComponent
.withResources('app')
.inView(' <require from="./MyComponent"></require>' +
'<h1>${message}</h1>' +
'<my-component>test</my-component>')
.boundTo(new App());
} );
it('says hello', (done) => {
app.create(bootstrap).then( () => {
var myComponent = document.querySelector('my-component');
expect(myComponent.innerHTML).toContain('MyComponent');
done();
});
});
});请注意，StageComponent正确地将模板中的${message}替换为app.html，但不会创建新的MyComponent实例。在浏览器中运行时，生成的DOM为：
<h1>Hello World!</h1>
<my-component class="au-target" au-target-id="2">
MyComponent
</my-component>但是当在测试中通过StageComponent运行相同的代码时，生成的DOM是：
<h1>Hello World!</h1>
<my-component>test</my-component>我错过了什么？
回答 1
Stack Overflow用户
发布于 2016-09-05 16:56:05
不确定，但我认为您需要这样做(或者添加customElement是可选的吗？)
import {customElement, bindable} from 'aurelia-framework';
@customElement('my-component')
export class MyComponent {
@bindable myName : string;
}然后
it("test case", done =>
StageComponent
.withResources("./full/path/to/MyComponent")
.inView("<my-component></my-component>"))
.create(bootstrap)
.then(() => {...})
.then(done);我不太清楚为什么你要在app.html中添加相同的html，这是为了证明它是有效的，但不是为了一个组件？
或者你想测试的是什么？
- 是否要测试应用程序视图是否使用其组件正确呈现？
- 或自定义MyComponent是否正确呈现？
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39306960
复制相关文章
相似问题
腾讯云开发者
