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，是为了证明它有效，但不是对于组件？

或者你想测试什么？

您是否要测试应用视图是否正确呈现其组件？
或者自定义MyComponent是否正确呈现？

Aurelia StageComponent - 如何将子组件呈现到DOM树中？

1 个答案: