mirror of
https://github.com/angular/angular.git
synced 2026-09-14 13:54:52 +08:00
test(core): add tests for control flow content projection with ng-container (#53387)
The control flow projection diagnostic will mention `ng-container` as a workaround for projection multiple nodes. These changes add a couple of tests to ensure that the approach works. PR Close #53387
This commit is contained in:
committed by
Dylan Hunn
parent
ec9cc38015
commit
cfa80dc107
@@ -417,6 +417,37 @@ describe('control flow - for', () => {
|
||||
expect(fixture.nativeElement.textContent).toBe('Main: Before one1two1one2two2 After Slot: ');
|
||||
});
|
||||
|
||||
it('should project an @for with an ng-container root node', () => {
|
||||
@Component({
|
||||
standalone: true,
|
||||
selector: 'test',
|
||||
template: 'Main: <ng-content/> Slot: <ng-content select="[foo]"/>',
|
||||
})
|
||||
class TestComponent {
|
||||
}
|
||||
|
||||
@Component({
|
||||
standalone: true,
|
||||
imports: [TestComponent],
|
||||
template: `
|
||||
<test>Before @for (item of items; track $index) {
|
||||
<ng-container foo>
|
||||
<span>{{item}}</span>
|
||||
<span>|</span>
|
||||
</ng-container>
|
||||
} After</test>
|
||||
`
|
||||
})
|
||||
class App {
|
||||
items = [1, 2, 3];
|
||||
}
|
||||
|
||||
const fixture = TestBed.createComponent(App);
|
||||
fixture.detectChanges();
|
||||
|
||||
expect(fixture.nativeElement.textContent).toBe('Main: Before After Slot: 1|2|3|');
|
||||
});
|
||||
|
||||
// Right now the template compiler doesn't collect comment nodes.
|
||||
// This test is to ensure that we don't regress if it happens in the future.
|
||||
it('should project an @for with single root node and comments into the root node slot', () => {
|
||||
|
||||
@@ -317,6 +317,36 @@ describe('control flow - if', () => {
|
||||
expect(fixture.nativeElement.textContent).toBe('Main: Before onetwo After Slot: ');
|
||||
});
|
||||
|
||||
it('should project an @if with an ng-container root node', () => {
|
||||
@Component({
|
||||
standalone: true,
|
||||
selector: 'test',
|
||||
template: 'Main: <ng-content/> Slot: <ng-content select="[foo]"/>',
|
||||
})
|
||||
class TestComponent {
|
||||
}
|
||||
|
||||
@Component({
|
||||
standalone: true,
|
||||
imports: [TestComponent],
|
||||
template: `
|
||||
<test>Before @if (true) {
|
||||
<ng-container foo>
|
||||
<span>foo</span>
|
||||
<span>bar</span>
|
||||
</ng-container>
|
||||
} After</test>
|
||||
`
|
||||
})
|
||||
class App {
|
||||
}
|
||||
|
||||
const fixture = TestBed.createComponent(App);
|
||||
fixture.detectChanges();
|
||||
|
||||
expect(fixture.nativeElement.textContent).toBe('Main: Before After Slot: foobar');
|
||||
});
|
||||
|
||||
// Right now the template compiler doesn't collect comment nodes.
|
||||
// This test is to ensure that we don't regress if it happens in the future.
|
||||
it('should project an @if with a single root node and comments into the root node slot', () => {
|
||||
|
||||
Reference in New Issue
Block a user