typescript - Aurelia StageComponent - hur man renderar en barnkomponent i DOM-trädet?

Om jag har en app.html-mall som följer:

<template>
  <require from="./MyComponent"></require>
  <h1>${message}</h1>
  <my-component>test</my-component>
</template>

Med MyComponent.ts :

export class MyComponent {
    myName : string;
}

Och MyComponent.html:

<template>
    MyComponent
</template>

Följande enhetstest kommer alltid att misslyckas:

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();
    });

  });
});

Observera att StageComponent korrekt ersätter $ {message} i mallen för app.html, men skapar inte en ny MyComponent-instans. När detta körs i webbläsaren genereras följande DOM:

  <h1>Hello World!</h1>
  <my-component class="au-target" au-target-id="2">
    MyComponent
</my-component>

Men när samma kod körs genom StageComponent i ett test, blir den genererade DOM:

<h1>Hello World!</h1>
<my-component>test</my-component>

Vad missar jag?

Svar #1

Inte säker, men jag tror att du behöver göra det här (eller är det valfritt att lägga till customElement?)

import {customElement, bindable} from 'aurelia-framework';

@customElement('my-component')
export class MyComponent {
    @bindable myName : string;
}

då

it("test case", done => 
     StageComponent 
        .withResources("./full/path/to/MyComponent")
        .inView("<my-component></my-component>"))
        .create(bootstrap)
        .then(() => {...})
        .then(done);

Det är inte riktigt klart för mig varför du lägger till samma HTML som finns i app.html, är det för att visa att det fungerar, men inte för en komponent?

Eller vad är det som du vill testa?

• Vill du testa om appens vy renderas korrekt med dess komponenter?
• Eller om den anpassade MyComponent renderar korrekt?