[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-template
tag as done inAComponent
below
@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. InAnchorDirective
we get a hold of theViewContainerRef
of the ng-container. - In
AnchorDirective
we also create (and immediately destroy) an instance ofAComponent
and we extract the templateRefmy-template
from it. - We do
this.vc.createEmbeddedView(templateRef, { $implicit: 'blabla' })
(where vc is theng-container
and 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