From 181f8e4b6c5303254b575e9c468d91b9c3fcb2ad Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@abv.bg>
Date: Wed, 8 Nov 2023 12:28:23 +0100
Subject: [PATCH] test(core): add tests for control flow content projection
 with ng-container (#52726)

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 #52726
---
 .../test/acceptance/control_flow_for_spec.ts  | 31 +++++++++++++++++++
 .../test/acceptance/control_flow_if_spec.ts   | 30 ++++++++++++++++++
 2 files changed, 61 insertions(+)

diff --git a/packages/core/test/acceptance/control_flow_for_spec.ts b/packages/core/test/acceptance/control_flow_for_spec.ts
index c993d2f4366ed..cc03b21c24894 100644
--- a/packages/core/test/acceptance/control_flow_for_spec.ts
+++ b/packages/core/test/acceptance/control_flow_for_spec.ts
@@ -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', () => {
diff --git a/packages/core/test/acceptance/control_flow_if_spec.ts b/packages/core/test/acceptance/control_flow_if_spec.ts
index 3f63f6d9472ee..969a03807ffb6 100644
--- a/packages/core/test/acceptance/control_flow_if_spec.ts
+++ b/packages/core/test/acceptance/control_flow_if_spec.ts
@@ -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', () => {