test(ivy): non-regression test for ViewContainerRef queried on ng-container (#33939)

Closes #31971

PR Close #33939

packages/core/test/acceptance/view_insertion_spec.ts

@@ -543,12 +543,62 @@ describe('view insertion', () => {
 
   describe('non-regression', () => {
 
-    // https://github.com/angular/angular/issues/33679
+    // https://github.com/angular/angular/issues/31971
-    it('should insert views into ViewContainerRef injected by querying <ng-container>', () => {
+    it('should insert component views into ViewContainerRef injected by querying <ng-container>',
+       () => {
 
-      @Component({
+         @Component({selector: 'dynamic-cmpt', template: 'dynamic'})
-        selector: 'app-root',
+         class DynamicComponent {
-        template: `
+         }
+
+         @Component({
+           selector: 'app-root',
+           template: `
+            <div>start|</div>
+            <ng-container #container></ng-container>
+            <div>|end</div>
+
+            <div (click)="click()" >|click</div>
+        `
+         })
+         class AppComponent {
+           @ViewChild('container', {read: ViewContainerRef, static: true})
+           vcr !: ViewContainerRef;
+
+           constructor(private _cfr: ComponentFactoryResolver) {}
+
+           click() {
+             this.vcr.createComponent(this._cfr.resolveComponentFactory(DynamicComponent));
+           }
+         }
+
+         @NgModule({
+           declarations: [DynamicComponent],
+           entryComponents: [DynamicComponent],
+         })
+         class TestModule {
+         }
+
+         TestBed.configureTestingModule({
+           declarations: [AppComponent],
+           imports: [TestModule],
+         });
+         const fixture = TestBed.createComponent(AppComponent);
+         fixture.detectChanges();
+         expect(fixture.nativeElement.textContent).toBe('start||end|click');
+
+         fixture.componentInstance.click();
+         fixture.detectChanges();
+         expect(fixture.nativeElement.textContent).toBe('start|dynamic|end|click');
+       });
+
+    // https://github.com/angular/angular/issues/33679
+    it('should insert embedded views into ViewContainerRef injected by querying <ng-container>',
+       () => {
+
+         @Component({
+           selector: 'app-root',
+           template: `
         <div>container start|</div>
         <ng-container #container></ng-container>
         <div>|container end</div>
@@ -556,27 +606,27 @@ describe('view insertion', () => {
         <ng-template #template >test</ng-template>
         <div (click)="click()" >|click</div>
         `
-      })
+         })
-      class AppComponent {
+         class AppComponent {
-        @ViewChild('container', {read: ViewContainerRef, static: true})
+           @ViewChild('container', {read: ViewContainerRef, static: true})
-        vcr !: ViewContainerRef;
+           vcr !: ViewContainerRef;
 
-        @ViewChild('template', {read: TemplateRef, static: true}) template !: TemplateRef<any>;
+           @ViewChild('template', {read: TemplateRef, static: true}) template !: TemplateRef<any>;
 
-        click() { this.vcr.createEmbeddedView(this.template, undefined, 0); }
+           click() { this.vcr.createEmbeddedView(this.template, undefined, 0); }
-      }
+         }
 
-      TestBed.configureTestingModule({
+         TestBed.configureTestingModule({
-        declarations: [AppComponent],
+           declarations: [AppComponent],
-      });
+         });
-      const fixture = TestBed.createComponent(AppComponent);
+         const fixture = TestBed.createComponent(AppComponent);
-      fixture.detectChanges();
+         fixture.detectChanges();
-      expect(fixture.nativeElement.textContent).toBe('container start||container end|click');
+         expect(fixture.nativeElement.textContent).toBe('container start||container end|click');
 
-      fixture.componentInstance.click();
+         fixture.componentInstance.click();
-      fixture.detectChanges();
+         fixture.detectChanges();
-      expect(fixture.nativeElement.textContent).toBe('container start|test|container end|click');
+         expect(fixture.nativeElement.textContent).toBe('container start|test|container end|click');
-    });
+       });
 
     it('should properly insert before views in a ViewContainerRef injected on ng-container', () => {
       @Component({