test(ivy): add canonical lifecycle example (#21793)

PR Close #21793

packages/core/test/render3/compiler_canonical_spec.ts

@@ -98,6 +98,8 @@ describe('compiler specification', () => {
               r3.e();
               r3.T(3, '!');
             }
+            ChildComponent.ngComponentDef.h(1, 0);
+            SomeDirective.ngDirectiveDef.h(2, 0);
             r3.r(1, 0);
             r3.r(2, 0);
           }
@@ -266,6 +268,78 @@ describe('compiler specification', () => {
     });
   });
 
+  describe('lifecycle hooks', () => {
+    let events: string[] = [];
+
+    beforeEach(() => { events = []; });
+
+    @Component({selector: 'lifecycle-comp', template: ``})
+    class LifecycleComp {
+      @Input() nameMin: string;
+
+      ngOnInit() { events.push('init' + this.nameMin); }
+      ngDoCheck() { events.push('check' + this.nameMin); }
+
+      ngAfterContentInit() { events.push('content init' + this.nameMin); }
+      ngAfterContentChecked() { events.push('content check' + this.nameMin); }
+
+      ngAfterViewInit() { events.push('view init' + this.nameMin); }
+      ngAfterViewChecked() { events.push('view check' + this.nameMin); }
+
+      ngOnDestroy() { events.push(this.nameMin); }
+
+      static ngComponentDef = r3.defineComponent({
+        type: LifecycleComp,
+        tag: 'lifecycle-comp',
+        factory: () => new LifecycleComp(),
+        template: function(ctx: any, cm: boolean) {},
+        inputs: {nameMin: 'name'}
+      });
+    }
+
+    @Component({
+      selector: 'simple-layout',
+      template: `
+        <lifecycle-comp [name]="name1"></lifecycle-comp>
+        <lifecycle-comp [name]="name2"></lifecycle-comp>
+      `
+    })
+    class SimpleLayout {
+      name1 = '1';
+      name2 = '2';
+
+      static ngComponentDef = r3.defineComponent({
+        type: SimpleLayout,
+        tag: 'simple-layout',
+        factory: () => new SimpleLayout(),
+        template: function(ctx: any, cm: boolean) {
+          if (cm) {
+            r3.E(0, LifecycleComp);
+            r3.e();
+            r3.E(2, LifecycleComp);
+            r3.e();
+          }
+          r3.p(0, 'name', r3.b(ctx.name1));
+          r3.p(2, 'name', r3.b(ctx.name2));
+          LifecycleComp.ngComponentDef.h(1, 0);
+          LifecycleComp.ngComponentDef.h(3, 2);
+          r3.r(1, 0);
+          r3.r(3, 2);
+        }
+      });
+    }
+
+    it('should gen hooks with a few simple components', () => {
+      expect(renderComp(SimpleLayout))
+          .toEqual(`<lifecycle-comp></lifecycle-comp><lifecycle-comp></lifecycle-comp>`);
+      expect(events).toEqual([
+        'init1', 'check1', 'init2', 'check2', 'content init1', 'content check1', 'content init2',
+        'content check2', 'view init1', 'view check1', 'view init2', 'view check2'
+      ]);
+    });
+
+  });
+
   describe('template variables', () => {
 
     interface ForOfContext {

packages/core/test/render3/lifecycle_spec.ts

@@ -175,8 +175,8 @@ describe('lifecycles', () => {
         }
         Comp.ngComponentDef.h(1, 0);
         ProjectedComp.ngComponentDef.h(3, 2);
-        r(3, 2);
         r(1, 0);
+        r(3, 2);
       }
 
       renderToHtml(Template, {});
@@ -209,10 +209,10 @@ describe('lifecycles', () => {
         ProjectedComp.ngComponentDef.h(3, 2);
         Comp.ngComponentDef.h(5, 4);
         ProjectedComp.ngComponentDef.h(7, 6);
-        r(3, 2);
         r(1, 0);
-        r(7, 6);
+        r(3, 2);
         r(5, 4);
+        r(7, 6);
       }
 
       renderToHtml(Template, {});
@@ -628,8 +628,8 @@ describe('lifecycles', () => {
         }
         Parent.ngComponentDef.h(1, 0);
         ProjectedComp.ngComponentDef.h(3, 2);
-        r(3, 2);
         r(1, 0);
+        r(3, 2);
       }
 
       renderToHtml(Template, {});
@@ -675,10 +675,10 @@ describe('lifecycles', () => {
         ProjectedComp.ngComponentDef.h(3, 2);
         Parent.ngComponentDef.h(6, 5);
         ProjectedComp.ngComponentDef.h(8, 7);
-        r(3, 2);
         r(1, 0);
-        r(8, 7);
+        r(3, 2);
         r(6, 5);
+        r(8, 7);
       }
 
       renderToHtml(Template, {});
@@ -963,8 +963,8 @@ describe('lifecycles', () => {
         }
         Comp.ngComponentDef.h(1, 0);
         ProjectedComp.ngComponentDef.h(3, 2);
-        r(3, 2);
         r(1, 0);
+        r(3, 2);
       }
 
       renderToHtml(Template, {});
@@ -1003,10 +1003,10 @@ describe('lifecycles', () => {
         ProjectedComp.ngComponentDef.h(3, 2);
         Comp.ngComponentDef.h(5, 4);
         ProjectedComp.ngComponentDef.h(7, 6);
-        r(3, 2);
         r(1, 0);
-        r(7, 6);
+        r(3, 2);
         r(5, 4);
+        r(7, 6);
       }
 
       renderToHtml(Template, {});
@@ -1032,8 +1032,8 @@ describe('lifecycles', () => {
         p(2, 'val', b(ctx.val));
         Comp.ngComponentDef.h(1, 0);
         ProjectedComp.ngComponentDef.h(3, 2);
-        r(3, 2);
         r(1, 0);
+        r(3, 2);
       });
 
       /**
@@ -1452,10 +1452,10 @@ describe('lifecycles', () => {
             ProjectedComp.ngComponentDef.h(3, 2);
             Comp.ngComponentDef.h(5, 4);
             ProjectedComp.ngComponentDef.h(7, 6);
-            r(3, 2);
             r(1, 0);
-            r(7, 6);
+            r(3, 2);
             r(5, 4);
+            r(7, 6);
             v();
           }
         }