Aurelia StageComponent - 如何將子組件呈現到DOM樹中？

如果我有一個app.html模板如下：Aurelia StageComponent - 如何將子組件呈現到DOM樹中？

<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>

我缺少什麼？

來源

2016-09-03 blorkfish

不知道，但我認爲你需要做的（或將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呈現正確？

來源

2016-09-05 08:56:04

嗨，Eric，謝謝你的迴應。你上面描述的是獨立測試MyComponent元素。我試圖同時渲染應用程序組件和MyComponent，這是瀏覽器中上述代碼的行爲。因此，要回答您的問題，是的，我想測試應用程序視圖是否與其組件正確呈現。 – blorkfish

Aurelia StageComponent - 如何將子組件呈現到DOM樹中？

回答

相關問題