test(ivy): ngTemplateOutlet runtime integration test (#24587)

PR Close #24587

packages/core/test/render3/common_integration_spec.ts

@@ -8,11 +8,12 @@
 
 import {NgForOfContext} from '@angular/common';
 
-import {defineComponent} from '../../src/render3/index';
+import {getOrCreateNodeInjectorForNode, getOrCreateTemplateRef} from '../../src/render3/di';
-import {bind, container, elementEnd, elementProperty, elementStart, interpolation1, interpolation3, listener, text, textBinding, tick} from '../../src/render3/instructions';
+import {AttributeMarker, defineComponent} from '../../src/render3/index';
+import {bind, container, elementEnd, elementProperty, elementStart, interpolation1, interpolation3, listener, load, text, textBinding} from '../../src/render3/instructions';
 import {RenderFlags} from '../../src/render3/interfaces/definition';
 
-import {NgForOf, NgIf} from './common_with_def';
+import {NgForOf, NgIf, NgTemplateOutlet} from './common_with_def';
 import {ComponentFixture} from './render_util';
 
 describe('@angular/common integration', () => {
@@ -338,4 +339,50 @@ describe('@angular/common integration', () => {
     });
 
   });
+
+  describe('NgTemplateOutlet', () => {
+
+    it('should create and remove embedded views', () => {
+
+      class MyApp {
+        showing = false;
+        static ngComponentDef = defineComponent({
+          type: MyApp,
+          factory: () => new MyApp(),
+          selectors: [['my-app']],
+          /**
+           * <ng-template #tpl>from tpl</ng-template>
+           * <ng-template [ngTemplateOutlet]="showing ? tpl : null"></ng-template>
+           */
+          template: (rf: RenderFlags, myApp: MyApp) => {
+            if (rf & RenderFlags.Create) {
+              container(0, (rf1: RenderFlags) => {
+                if (rf1 & RenderFlags.Create) {
+                  text(0, 'from tpl');
+                }
+              }, undefined, undefined, ['tpl', '']);
+              container(2, undefined, null, [AttributeMarker.SelectOnly, 'ngTemplateOutlet']);
+            }
+            if (rf & RenderFlags.Update) {
+              const tplRef = getOrCreateTemplateRef(getOrCreateNodeInjectorForNode(load(0)));
+              elementProperty(2, 'ngTemplateOutlet', bind(myApp.showing ? tplRef : null));
+            }
+          },
+          directives: () => [NgTemplateOutlet]
+        });
+      }
+
+      const fixture = new ComponentFixture(MyApp);
+      expect(fixture.html).toEqual('');
+
+      fixture.component.showing = true;
+      fixture.update();
+      expect(fixture.html).toEqual('from tpl');
+
+      fixture.component.showing = false;
+      fixture.update();
+      expect(fixture.html).toEqual('');
+    });
+
+  });
 });

packages/core/test/render3/common_with_def.ts

@@ -6,14 +6,14 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {NgForOf as NgForOfDef, NgIf as NgIfDef} from '@angular/common';
+import {NgForOf as NgForOfDef, NgIf as NgIfDef, NgTemplateOutlet as NgTemplateOutletDef} from '@angular/common';
-import {InjectFlags, IterableDiffers} from '@angular/core';
+import {IterableDiffers} from '@angular/core';
 
-import {defaultIterableDiffers} from '../../src/change_detection/change_detection';
 import {DirectiveType, NgOnChangesFeature, defineDirective, directiveInject, injectTemplateRef, injectViewContainerRef} from '../../src/render3/index';
 
 export const NgForOf: DirectiveType<NgForOfDef<any>> = NgForOfDef as any;
 export const NgIf: DirectiveType<NgIfDef> = NgIfDef as any;
+export const NgTemplateOutlet: DirectiveType<NgTemplateOutletDef> = NgTemplateOutletDef as any;
 
 NgForOf.ngDirectiveDef = defineDirective({
   type: NgForOfDef,
@@ -33,3 +33,13 @@ NgForOf.ngDirectiveDef = defineDirective({
   factory: () => new NgIfDef(injectViewContainerRef(), injectTemplateRef()),
   inputs: {ngIf: 'ngIf', ngIfThen: 'ngIfThen', ngIfElse: 'ngIfElse'}
 });
+
+(NgTemplateOutlet as any).ngDirectiveDef = defineDirective({
+  type: NgTemplateOutletDef,
+  selectors: [['', 'ngTemplateOutlet', '']],
+  factory: () => new NgTemplateOutletDef(injectViewContainerRef()),
+  features: [NgOnChangesFeature(
+      {ngTemplateOutlet: 'ngTemplateOutlet', ngTemplateOutletContext: 'ngTemplateOutletContext'})],
+  inputs:
+      {ngTemplateOutlet: 'ngTemplateOutlet', ngTemplateOutletContext: 'ngTemplateOutletContext'}
+});