Imagine having an app.html template structured like this:
<template>
<require from="./MyComponent"></require>
<h1>${message}</h1>
<my-component>test</my-component>
</template>
Accompanied by MyComponent.ts :
export class MyComponent {
myName : string;
}
And corresponding MyComponent.html:
<template>
MyComponent
</template>
Running the following unit test results in a failure:
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();
});
});
});
Note that while StageComponent successfully replaces ${message} in the app.html template, a new instance of MyComponent is not created. In a live browser environment, the generated DOM looks like this:
<h1>Hello World!</h1>
<my-component class="au-target" au-target-id="2">
MyComponent
</my-component>
However, executing the same code through StageComponent during testing, yields a different DOM output:
<h1>Hello World!</h1>
<my-component>test</my-component>
The question remains: What am I overlooking here?