[x ] Bug report I will briefly describe what my example does. This breaks in testing environment, but runs fine in normal environment. That is the bug report.
- We define a template in the
ng-templatetag as done inAComponentbelow
@Component({
selector: 'app-a',
template: `
<ng-template #my-template let-context>
I am loaded dynamically
{{context}}
{{"me "+(1+1)+"!!"}}
Bye bye
</ng-template>
`
})
class AComponent extends TemplateExtractor {}- TemplateExtractor exposes the
TemplateRef, the one referenced asmy-template, via a methodgetTemplateRef()on the component. - Elsewhere we have a different component that contains
<ng-container appAnchor></ng-container>in its template. InAnchorDirectivewe get a hold of theViewContainerRefof the ng-container. - In
AnchorDirectivewe also create (and immediately destroy) an instance ofAComponentand we extract the templateRefmy-templatefrom it. - We do
this.vc.createEmbeddedView(templateRef, { $implicit: 'blabla' })(where vc is theng-containerand template ismy-template.
Result:
In normal application mode (ng serve), it produces the following HTML (as expected)
produces the following HTML
<div>
<p>outer div test</p>
<!---->
I am loaded dynamically I am interpolated me 2!! Bye bye
</div>However, when testing (ng test), the interpolation ({{ .. }}) breaks the rendering.
<div>
<p>outer div test</p>
<!---->
I am loaded dynamically
</div>We would expect for (ng test) and (ng serve) the same HTML
<div>
<p>outer div test</p>
<!---->
I am loaded dynamically I am interpolated me 2!! Bye bye
</div>The spec.ts file is
describe('Directive: TableEditorCellDirective', () => {
let fixture: ComponentFixture<AppComponent>;
beforeAll(() => {
TestBed.resetTestEnvironment();
TestBed.initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
});
beforeEach(() => {
TestBed.configureTestingModule({
imports: [AppModule]
});
fixture = TestBed.createComponent(AppComponent);
fixture.detectChanges();
});
describe('dummy test', () => {
it('dummy test ', fakeAsync(() => {
fixture.detectChanges();
tick();
}));
});
});I couldn't get the test environment example to work in plunkr :( Here is a standalone repo, I hope it is sufficient: https://github.com/maurei/angular-bug-report
I was writing test for a library that I'm writing (I'm porting angular-table-editor to angular 6)
Angular version: 6.1.0 Chrome (desktop) version 68.0.3440.106