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:
parent
808898d015
commit
1a85de302d
|
@ -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: ''})
|
||||||
|
|
Loading…
Reference in New Issue