test(ivy): add root cause analysis for the remaining projection test (#28152)

Initial thinking was that the bug is in the content projection logic but
it turned out to be a wrong assumption - hence adding a test to illustrate
that basic content projection of view containers works correctly.

What fails in the marked test is the logic quering debug nodes - content
peojection is fine but we never create the 'B' text node since we call
show() method on the "wrong" directive instance.

PR Close #28152
This commit is contained in:
Pawel Kozlowski 2019-01-15 15:21:41 +01:00 committed by Alex Rickabaugh
parent 808898d015
commit 1a85de302d
1 changed files with 57 additions and 31 deletions

View File

@ -543,48 +543,74 @@ describe('projection', () => {
expect(main.nativeElement).toHaveText('B(A)'); expect(main.nativeElement).toHaveText('B(A)');
}); });
fixmeIvy('unknown').it('should project filled view containers into a view container', () => { it('should project view containers', () => {
TestBed.configureTestingModule( TestBed.configureTestingModule(
{declarations: [ConditionalContentComponent, ManualViewportDirective]}); {declarations: [SingleContentTagComponent, ManualViewportDirective]});
TestBed.overrideComponent(MainComp, { TestBed.overrideComponent(MainComp, {
set: { set: {
template: '<conditional-content>' + template: '<single-content-tag>' +
'<div class="left">A</div>' + '<div class="target">A</div>' +
'<ng-template manual class="left">B</ng-template>' + '<ng-template manual class="target">B</ng-template>' +
'<div class="left">C</div>' + '<div class="target">C</div>' +
'<div>D</div>' + '</single-content-tag>'
'</conditional-content>'
} }
}); });
const main = TestBed.createComponent(MainComp); const main = TestBed.createComponent(MainComp);
const manualDirective =
const conditionalComp = main.debugElement.query(By.directive(ConditionalContentComponent)); main.debugElement.queryAllNodes(By.directive(ManualViewportDirective))[0].injector.get(
const viewViewportDir =
conditionalComp.queryAllNodes(By.directive(ManualViewportDirective))[0].injector.get(
ManualViewportDirective); ManualViewportDirective);
expect(main.nativeElement).toHaveText('(, D)'); expect(main.nativeElement).toHaveText('AC');
expect(main.nativeElement).toHaveText('(, D)');
viewViewportDir.show(); manualDirective.show();
main.detectChanges(); main.detectChanges();
expect(main.nativeElement).toHaveText('(AC, D)'); expect(main.nativeElement).toHaveText('ABC');
const contentViewportDir =
conditionalComp.queryAllNodes(By.directive(ManualViewportDirective))[1].injector.get(
ManualViewportDirective);
contentViewportDir.show();
main.detectChanges();
expect(main.nativeElement).toHaveText('(ABC, D)');
// hide view viewport, and test that it also hides
// the content viewport's views
viewViewportDir.hide();
main.detectChanges();
expect(main.nativeElement).toHaveText('(, D)');
}); });
fixmeIvy('FW-869: debugElement.queryAllNodes returns nodes in the wrong order')
.it('should project filled view containers into a view container', () => {
TestBed.configureTestingModule(
{declarations: [ConditionalContentComponent, ManualViewportDirective]});
TestBed.overrideComponent(MainComp, {
set: {
template: '<conditional-content>' +
'<div class="left">A</div>' +
'<ng-template manual class="left">B</ng-template>' +
'<div class="left">C</div>' +
'<div>D</div>' +
'</conditional-content>'
}
});
const main = TestBed.createComponent(MainComp);
const conditionalComp = main.debugElement.query(By.directive(ConditionalContentComponent));
const viewViewportDir =
conditionalComp.queryAllNodes(By.directive(ManualViewportDirective))[0].injector.get(
ManualViewportDirective);
expect(main.nativeElement).toHaveText('(, D)');
expect(main.nativeElement).toHaveText('(, D)');
viewViewportDir.show();
main.detectChanges();
expect(main.nativeElement).toHaveText('(AC, D)');
const contentViewportDir =
conditionalComp.queryAllNodes(By.directive(ManualViewportDirective))[1].injector.get(
ManualViewportDirective);
contentViewportDir.show();
main.detectChanges();
expect(main.nativeElement).toHaveText('(ABC, D)');
// hide view viewport, and test that it also hides
// the content viewport's views
viewViewportDir.hide();
main.detectChanges();
expect(main.nativeElement).toHaveText('(, D)');
});
}); });
@Component({selector: 'main', template: ''}) @Component({selector: 'main', template: ''})