typescript - Aurelia StageComponent - 如何将子组件渲染到 DOM 树中？

Question

如果我有一个 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>

我错过了什么？

Answer 1

不确定，但我认为您需要这样做(或者添加 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，这是为了证明它有效，但不适用于组件吗？

或者您要测试的是什么？

• 您要测试应用 View 是否可以使用其组件正确呈现吗？
• 或者自定义 MyComponent 是否正确呈现？