feat(core): add renderer factory in render3 (#20855)

PR Close #20855
2017-12-11 16:30:46 +01:00
parent 147aec43bd
commit d1de587ce0
15 changed files with 342 additions and 76 deletions
--- a/packages/core/test/render3/component_spec.ts
+++ b/packages/core/test/render3/component_spec.ts
@ -6,8 +6,11 @@
 * found in the LICENSE file at https://angular.io/license
 */

-import {T, b, defineComponent, markDirty, t} from '../../src/render3/index';
+import {ViewEncapsulation} from '../../src/core';
+import {D, E, T, b, defineComponent, e, markDirty, t} from '../../src/render3/index';
+import {createRendererType2} from '../../src/view';

+import {getRendererFactory2} from './imported_renderer2';
 import {containerEl, renderComponent, requestAnimationFrame} from './render_util';

 describe('component', () => {
@ -60,3 +63,113 @@ describe('component', () => {
  });

 });
+
+// TODO: add tests with Native once tests are run in real browser (domino doesn't support shadow
+// root)
+describe('encapsulation', () => {
+  class WrapperComponent {
+    static ngComponentDef = defineComponent({
+      type: WrapperComponent,
+      tag: 'wrapper',
+      template: function(ctx: WrapperComponent, cm: boolean) {
+        if (cm) {
+          E(0, EncapsulatedComponent.ngComponentDef);
+          { D(1, EncapsulatedComponent.ngComponentDef.n(), EncapsulatedComponent.ngComponentDef); }
+          e();
+        }
+        EncapsulatedComponent.ngComponentDef.r(1, 0);
+      },
+      factory: () => new WrapperComponent,
+    });
+  }
+
+  class EncapsulatedComponent {
+    static ngComponentDef = defineComponent({
+      type: EncapsulatedComponent,
+      tag: 'encapsulated',
+      template: function(ctx: EncapsulatedComponent, cm: boolean) {
+        if (cm) {
+          T(0, 'foo');
+          E(1, LeafComponent.ngComponentDef);
+          { D(2, LeafComponent.ngComponentDef.n(), LeafComponent.ngComponentDef); }
+          e();
+        }
+        LeafComponent.ngComponentDef.r(2, 1);
+      },
+      factory: () => new EncapsulatedComponent,
+      rendererType:
+          createRendererType2({encapsulation: ViewEncapsulation.Emulated, styles: [], data: {}}),
+    });
+  }
+
+  class LeafComponent {
+    static ngComponentDef = defineComponent({
+      type: LeafComponent,
+      tag: 'leaf',
+      template: function(ctx: LeafComponent, cm: boolean) {
+        if (cm) {
+          E(0, 'span');
+          { T(1, 'bar'); }
+          e();
+        }
+      },
+      factory: () => new LeafComponent,
+    });
+  }
+
+  it('should encapsulate children, but not host nor grand children', () => {
+    renderComponent(WrapperComponent, getRendererFactory2(document));
+    expect(containerEl.outerHTML)
+        .toEqual(
+            '<div host=""><encapsulated _nghost-c0="">foo<leaf _ngcontent-c0=""><span>bar</span></leaf></encapsulated></div>');
+  });
+
+  it('should encapsulate host', () => {
+    renderComponent(EncapsulatedComponent, getRendererFactory2(document));
+    expect(containerEl.outerHTML)
+        .toEqual(
+            '<div host="" _nghost-c0="">foo<leaf _ngcontent-c0=""><span>bar</span></leaf></div>');
+  });
+
+  it('should encapsulate host and children with different attributes', () => {
+    class WrapperComponentWith {
+      static ngComponentDef = defineComponent({
+        type: WrapperComponent,
+        tag: 'wrapper',
+        template: function(ctx: WrapperComponentWith, cm: boolean) {
+          if (cm) {
+            E(0, LeafComponentwith.ngComponentDef);
+            { D(1, LeafComponentwith.ngComponentDef.n(), LeafComponentwith.ngComponentDef); }
+            e();
+          }
+          LeafComponentwith.ngComponentDef.r(1, 0);
+        },
+        factory: () => new WrapperComponentWith,
+        rendererType:
+            createRendererType2({encapsulation: ViewEncapsulation.Emulated, styles: [], data: {}}),
+      });
+    }
+
+    class LeafComponentwith {
+      static ngComponentDef = defineComponent({
+        type: LeafComponentwith,
+        tag: 'leaf',
+        template: function(ctx: LeafComponentwith, cm: boolean) {
+          if (cm) {
+            E(0, 'span');
+            { T(1, 'bar'); }
+            e();
+          }
+        },
+        factory: () => new LeafComponentwith,
+        rendererType:
+            createRendererType2({encapsulation: ViewEncapsulation.Emulated, styles: [], data: {}}),
+      });
+    }
+
+    renderComponent(WrapperComponentWith, getRendererFactory2(document));
+    expect(containerEl.outerHTML)
+        .toEqual(
+            '<div host="" _nghost-c1=""><leaf _ngcontent-c1="" _nghost-c2=""><span _ngcontent-c2="">bar</span></leaf></div>');
+  });
+});