From 89e8b6fc0ead51fe3a8c591b9fead7c184d00304 Mon Sep 17 00:00:00 2001 From: Victor Berchet Date: Fri, 27 Jul 2018 14:28:22 -0700 Subject: [PATCH] refactor(ivy): update specs to make use of the `element()` instruction (#25173) PR Close #25173 --- packages/core/src/render3/instructions.ts | 8 +- .../test/render3/change_detection_spec.ts | 42 +-- packages/core/test/render3/component_spec.ts | 20 +- packages/core/test/render3/content_spec.ts | 19 +- .../core/test/render3/control_flow_spec.ts | 21 +- packages/core/test/render3/directive_spec.ts | 13 +- packages/core/test/render3/exports_spec.ts | 53 ++-- .../core/test/render3/instructions_spec.ts | 8 +- .../core/test/render3/integration_spec.ts | 50 ++-- packages/core/test/render3/lifecycle_spec.ts | 270 ++++++------------ packages/core/test/render3/listeners_spec.ts | 9 +- packages/core/test/render3/outputs_spec.ts | 6 +- packages/core/test/render3/properties_spec.ts | 48 ++-- .../core/test/render3/pure_function_spec.ts | 26 +- packages/core/test/render3/query_spec.ts | 90 ++---- .../test/render3/renderer_factory_spec.ts | 28 +- .../test/render3/view_container_ref_spec.ts | 48 ++-- 17 files changed, 257 insertions(+), 502 deletions(-) diff --git a/packages/core/src/render3/instructions.ts b/packages/core/src/render3/instructions.ts index f99b34be06..e127854cb5 100644 --- a/packages/core/src/render3/instructions.ts +++ b/packages/core/src/render3/instructions.ts @@ -635,9 +635,11 @@ export function namespaceHTML() { * @param localRefs A set of local reference bindings on the element. */ export function element( - index: number, name: string, attrs?: TAttributes | null, localRefs?: string[] | null): void { - elementStart(index, name, attrs, localRefs); + index: number, name: string, attrs?: TAttributes | null, + localRefs?: string[] | null): RElement { + const rElement = elementStart(index, name, attrs, localRefs); elementEnd(); + return rElement; } /** @@ -1113,7 +1115,7 @@ export function storeCleanupFn(view: LViewData, cleanupFn: Function): void { } /** Mark the end of the element. */ -export function elementEnd() { +export function elementEnd(): void { if (isParent) { isParent = false; } else { diff --git a/packages/core/test/render3/change_detection_spec.ts b/packages/core/test/render3/change_detection_spec.ts index dd694d4430..b7dd85aba0 100644 --- a/packages/core/test/render3/change_detection_spec.ts +++ b/packages/core/test/render3/change_detection_spec.ts @@ -11,8 +11,9 @@ import {withBody} from '@angular/core/testing'; import {ChangeDetectionStrategy, ChangeDetectorRef, DoCheck} from '../../src/core'; import {getRenderedText, whenRendered} from '../../src/render3/component'; import {LifecycleHooksFeature, defineComponent, defineDirective, injectChangeDetectorRef} from '../../src/render3/index'; -import {bind, container, containerRefreshEnd, containerRefreshStart, detectChanges, elementEnd, elementProperty, elementStart, embeddedViewEnd, embeddedViewStart, interpolation1, interpolation2, listener, markDirty, text, textBinding, tick} from '../../src/render3/instructions'; +import {bind, container, containerRefreshEnd, containerRefreshStart, detectChanges, element, elementEnd, elementProperty, elementStart, embeddedViewEnd, embeddedViewStart, interpolation1, interpolation2, listener, markDirty, text, textBinding, tick} from '../../src/render3/instructions'; import {RenderFlags} from '../../src/render3/interfaces/definition'; + import {containerEl, createComponent, renderComponent, requestAnimationFrame} from './render_util'; describe('change detection', () => { @@ -130,8 +131,7 @@ describe('change detection', () => { /** */ template: (rf: RenderFlags, ctx: MyApp) => { if (rf & RenderFlags.Create) { - elementStart(0, 'my-comp'); - elementEnd(); + element(0, 'my-comp'); } if (rf & RenderFlags.Update) { elementProperty(0, 'name', bind(ctx.name)); @@ -201,8 +201,7 @@ describe('change detection', () => { const ButtonParent = createComponent('button-parent', function(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { - elementStart(0, 'my-comp'); - elementEnd(); + element(0, 'my-comp'); elementStart(1, 'button', ['id', 'parent']); { listener('click', () => noop()); } elementEnd(); @@ -233,8 +232,7 @@ describe('change detection', () => { template: (rf: RenderFlags, ctx: ButtonParent) => { if (rf & RenderFlags.Create) { text(0); - elementStart(1, 'my-comp'); - elementEnd(); + element(1, 'my-comp'); } if (rf & RenderFlags.Update) { textBinding(0, interpolation1('', ctx.doCheckCount, ' - ')); @@ -247,8 +245,7 @@ describe('change detection', () => { const MyButtonApp = createComponent('my-button-app', function(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { - elementStart(0, 'button-parent'); - elementEnd(); + element(0, 'button-parent'); } }, [ButtonParent]); @@ -321,8 +318,7 @@ describe('change detection', () => { template: (rf: RenderFlags, ctx: ParentComp) => { if (rf & RenderFlags.Create) { text(0); - elementStart(1, 'my-comp'); - elementEnd(); + element(1, 'my-comp'); } if (rf & RenderFlags.Update) { textBinding(0, interpolation1('', ctx.doCheckCount, ' - ')); @@ -400,8 +396,7 @@ describe('change detection', () => { /** */ const MyApp = createComponent('my-app', function(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { - elementStart(0, 'my-comp', ['dir', '']); - elementEnd(); + element(0, 'my-comp', ['dir', '']); } }, [MyComp, Dir]); @@ -421,8 +416,7 @@ describe('change detection', () => { const MyApp = createComponent('my-app', function(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { text(0); - elementStart(1, 'div', ['dir', '']); - elementEnd(); + element(1, 'div', ['dir', '']); } if (rf & RenderFlags.Update) { textBinding(1, bind(ctx.value)); @@ -468,8 +462,7 @@ describe('change detection', () => { if (ctx.showing) { let rf0 = embeddedViewStart(0); if (rf0 & RenderFlags.Create) { - elementStart(0, 'div', ['dir', '']); - elementEnd(); + element(0, 'div', ['dir', '']); } } embeddedViewEnd(); @@ -566,8 +559,7 @@ describe('change detection', () => { /** */ template: (rf: RenderFlags, ctx: MyApp) => { if (rf & RenderFlags.Create) { - elementStart(0, 'detached-comp'); - elementEnd(); + element(0, 'detached-comp'); } }, directives: () => [DetachedComp] @@ -702,8 +694,7 @@ describe('change detection', () => { /** */ const OnPushApp = createComponent('on-push-app', function(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { - elementStart(0, 'on-push-comp'); - elementEnd(); + element(0, 'on-push-comp'); } if (rf & RenderFlags.Update) { elementProperty(0, 'value', bind(ctx.value)); @@ -772,8 +763,7 @@ describe('change detection', () => { template: (rf: RenderFlags, ctx: OnPushParent) => { if (rf & RenderFlags.Create) { text(0); - elementStart(1, 'on-push-comp'); - elementEnd(); + element(1, 'on-push-comp'); } if (rf & RenderFlags.Update) { textBinding(0, interpolation1('', ctx.value, ' - ')); @@ -852,8 +842,7 @@ describe('change detection', () => { if (ctx.showing) { let rf0 = embeddedViewStart(0); if (rf0 & RenderFlags.Create) { - elementStart(0, 'on-push-comp'); - elementEnd(); + element(0, 'on-push-comp'); } embeddedViewEnd(); } @@ -937,8 +926,7 @@ describe('change detection', () => { template: (rf: RenderFlags, ctx: AppComp) => { if (rf & RenderFlags.Create) { text(0); - elementStart(1, 'no-changes-comp'); - elementEnd(); + element(1, 'no-changes-comp'); } if (rf & RenderFlags.Update) { textBinding(0, interpolation1('', ctx.value, ' - ')); diff --git a/packages/core/test/render3/component_spec.ts b/packages/core/test/render3/component_spec.ts index 49a1e13857..7ade15e91a 100644 --- a/packages/core/test/render3/component_spec.ts +++ b/packages/core/test/render3/component_spec.ts @@ -10,7 +10,7 @@ import {DoCheck, ViewEncapsulation, createInjector, defineInjectable, defineInjector} from '../../src/core'; import {getRenderedText} from '../../src/render3/component'; import {ComponentFactory, LifecycleHooksFeature, defineComponent, directiveInject, markDirty} from '../../src/render3/index'; -import {bind, container, containerRefreshEnd, containerRefreshStart, elementEnd, elementProperty, elementStart, embeddedViewEnd, embeddedViewStart, text, textBinding, tick} from '../../src/render3/instructions'; +import {bind, container, containerRefreshEnd, containerRefreshStart, element, elementEnd, elementProperty, elementStart, embeddedViewEnd, embeddedViewStart, text, textBinding, tick} from '../../src/render3/instructions'; import {ComponentDefInternal, DirectiveDefInternal, RenderFlags} from '../../src/render3/interfaces/definition'; import {createRendererType2} from '../../src/view/index'; @@ -156,8 +156,7 @@ describe('component with a container', () => { function template(rf: RenderFlags, ctx: {items: string[]}) { if (rf & RenderFlags.Create) { - elementStart(0, 'wrapper'); - elementEnd(); + element(0, 'wrapper'); } if (rf & RenderFlags.Update) { elementProperty(0, 'items', bind(ctx.items)); @@ -185,8 +184,7 @@ describe('encapsulation', () => { selectors: [['wrapper']], template: function(rf: RenderFlags, ctx: WrapperComponent) { if (rf & RenderFlags.Create) { - elementStart(0, 'encapsulated'); - elementEnd(); + element(0, 'encapsulated'); } }, factory: () => new WrapperComponent, @@ -201,8 +199,7 @@ describe('encapsulation', () => { template: function(rf: RenderFlags, ctx: EncapsulatedComponent) { if (rf & RenderFlags.Create) { text(0, 'foo'); - elementStart(1, 'leaf'); - elementEnd(); + element(1, 'leaf'); } }, factory: () => new EncapsulatedComponent, @@ -248,8 +245,7 @@ describe('encapsulation', () => { selectors: [['wrapper']], template: function(rf: RenderFlags, ctx: WrapperComponentWith) { if (rf & RenderFlags.Create) { - elementStart(0, 'leaf'); - elementEnd(); + element(0, 'leaf'); } }, factory: () => new WrapperComponentWith, @@ -316,8 +312,7 @@ describe('recursive components', () => { if (ctx.data.left != null) { let rf0 = embeddedViewStart(0); if (rf0 & RenderFlags.Create) { - elementStart(0, 'tree-comp'); - elementEnd(); + element(0, 'tree-comp'); } if (rf0 & RenderFlags.Update) { elementProperty(0, 'data', bind(ctx.data.left)); @@ -331,8 +326,7 @@ describe('recursive components', () => { if (ctx.data.right != null) { let rf0 = embeddedViewStart(0); if (rf0 & RenderFlags.Create) { - elementStart(0, 'tree-comp'); - elementEnd(); + element(0, 'tree-comp'); } if (rf0 & RenderFlags.Update) { elementProperty(0, 'data', bind(ctx.data.right)); diff --git a/packages/core/test/render3/content_spec.ts b/packages/core/test/render3/content_spec.ts index e1b58224b8..f3ee0e51a0 100644 --- a/packages/core/test/render3/content_spec.ts +++ b/packages/core/test/render3/content_spec.ts @@ -12,7 +12,7 @@ import {Input, TemplateRef, ViewContainerRef, ViewRef} from '../../src/core'; import {defineDirective} from '../../src/render3/definition'; import {injectTemplateRef, injectViewContainerRef} from '../../src/render3/di'; import {AttributeMarker, detectChanges} from '../../src/render3/index'; -import {bind, container, containerRefreshEnd, containerRefreshStart, elementEnd, elementProperty, elementStart, embeddedViewEnd, embeddedViewStart, loadDirective, projection, projectionDef, text} from '../../src/render3/instructions'; +import {bind, container, containerRefreshEnd, containerRefreshStart, element, elementEnd, elementProperty, elementStart, embeddedViewEnd, embeddedViewStart, loadDirective, projection, projectionDef, text} from '../../src/render3/instructions'; import {RenderFlags} from '../../src/render3/interfaces/definition'; import {ComponentFixture, createComponent, renderComponent, toHtml} from './render_util'; @@ -169,10 +169,7 @@ describe('content projection', () => { const Parent = createComponent('parent', (rf: RenderFlags, ctx: any) => { if (rf & RenderFlags.Create) { elementStart(0, 'child'); - { - elementStart(1, 'projected-comp'); - elementEnd(); - } + { element(1, 'projected-comp'); } elementEnd(); } }, [Child, ProjectedComp]); @@ -506,8 +503,7 @@ describe('content projection', () => { /** */ const Parent = createComponent('parent', function(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { - elementStart(0, 'child'); - elementEnd(); + element(0, 'child'); // testing childCmptInstance = loadDirective(0); @@ -1539,8 +1535,7 @@ describe('content projection', () => { if (rf & RenderFlags.Create) { projectionDef([[['span']]], ['span']); projection(0, 1); - elementStart(1, 'hr'); - elementEnd(); + element(1, 'hr'); projection(2); } }); @@ -1603,8 +1598,7 @@ describe('content projection', () => { [[['', 'card-title', '']], [['', 'card-content', '']]], ['[card-title]', '[card-content]']); projection(0, 1); - elementStart(1, 'hr'); - elementEnd(); + element(1, 'hr'); projection(2, 2); } }); @@ -1662,8 +1656,7 @@ describe('content projection', () => { [[['', 'card-title', '']], [['', 'card-content', '']]], ['[card-title]', '[card-content]']); projection(0, 1); - elementStart(1, 'hr'); - elementEnd(); + element(1, 'hr'); projection(2, 2); } }); diff --git a/packages/core/test/render3/control_flow_spec.ts b/packages/core/test/render3/control_flow_spec.ts index a96c23a8b2..09c8528ffd 100644 --- a/packages/core/test/render3/control_flow_spec.ts +++ b/packages/core/test/render3/control_flow_spec.ts @@ -7,8 +7,9 @@ */ import {defineComponent} from '../../src/render3/definition'; -import {bind, container, containerRefreshEnd, containerRefreshStart, elementEnd, elementStart, embeddedViewEnd, embeddedViewStart, text, textBinding} from '../../src/render3/instructions'; +import {bind, container, containerRefreshEnd, containerRefreshStart, element, elementEnd, elementStart, embeddedViewEnd, embeddedViewStart, text, textBinding} from '../../src/render3/instructions'; import {RenderFlags} from '../../src/render3/interfaces/definition'; + import {ComponentFixture, TemplateFixture, createComponent, renderToHtml} from './render_util'; describe('JS control flow', () => { @@ -673,8 +674,7 @@ describe('JS control flow', () => { factory: () => new App(), template: function(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { - elementStart(0, 'div'); - elementEnd(); + element(0, 'div'); container(1); container(2); } @@ -684,8 +684,7 @@ describe('JS control flow', () => { if (ctx.condition) { let rf1 = embeddedViewStart(0); if (rf1 & RenderFlags.Create) { - elementStart(0, 'comp'); - elementEnd(); + element(0, 'comp'); } embeddedViewEnd(); } @@ -696,8 +695,7 @@ describe('JS control flow', () => { if (ctx.condition2) { let rf1 = embeddedViewStart(0); if (rf1 & RenderFlags.Create) { - elementStart(0, 'comp'); - elementEnd(); + element(0, 'comp'); } embeddedViewEnd(); } @@ -740,8 +738,7 @@ describe('JS control flow', () => { factory: () => new App(), template: function(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { - elementStart(0, 'div'); - elementEnd(); + element(0, 'div'); container(1); container(2); } @@ -751,8 +748,7 @@ describe('JS control flow', () => { if (ctx.condition) { let rf1 = embeddedViewStart(0); if (rf1 & RenderFlags.Create) { - elementStart(0, 'comp'); - elementEnd(); + element(0, 'comp'); } embeddedViewEnd(); } @@ -763,8 +759,7 @@ describe('JS control flow', () => { if (ctx.condition2) { let rf1 = embeddedViewStart(0); if (rf1 & RenderFlags.Create) { - elementStart(0, 'comp'); - elementEnd(); + element(0, 'comp'); } embeddedViewEnd(); } diff --git a/packages/core/test/render3/directive_spec.ts b/packages/core/test/render3/directive_spec.ts index 344105e3d4..5880a5f587 100644 --- a/packages/core/test/render3/directive_spec.ts +++ b/packages/core/test/render3/directive_spec.ts @@ -9,7 +9,7 @@ import {EventEmitter} from '@angular/core'; import {AttributeMarker, defineDirective} from '../../src/render3/index'; -import {bind, elementEnd, elementProperty, elementStart, listener, loadDirective} from '../../src/render3/instructions'; +import {bind, element, elementEnd, elementProperty, elementStart, listener, loadDirective} from '../../src/render3/instructions'; import {TemplateFixture} from './render_util'; @@ -33,10 +33,7 @@ describe('directive', () => { }); } - function Template() { - elementStart(0, 'span', [AttributeMarker.SelectOnly, 'dir']); - elementEnd(); - } + function Template() { element(0, 'span', [AttributeMarker.SelectOnly, 'dir']); } const fixture = new TemplateFixture(Template, () => {}, [Directive]); expect(fixture.html).toEqual(''); @@ -84,8 +81,7 @@ describe('directive', () => { */ function createTemplate() { // using 2 bindings to show example shape of attributes array - elementStart(0, 'span', ['class', 'fade', AttributeMarker.SelectOnly, 'test', 'other']); - elementEnd(); + element(0, 'span', ['class', 'fade', AttributeMarker.SelectOnly, 'test', 'other']); } function updateTemplate() { elementProperty(0, 'test', bind(false)); } @@ -136,9 +132,8 @@ describe('directive', () => { */ function createTemplate() { // putting name (test) in the "usual" value position - elementStart( + element( 0, 'span', ['class', 'fade', AttributeMarker.SelectOnly, 'prop1', 'test', 'prop2']); - elementEnd(); } function updateTemplate() { diff --git a/packages/core/test/render3/exports_spec.ts b/packages/core/test/render3/exports_spec.ts index b357572fd5..3578a49e97 100644 --- a/packages/core/test/render3/exports_spec.ts +++ b/packages/core/test/render3/exports_spec.ts @@ -7,7 +7,7 @@ */ import {defineComponent, defineDirective} from '../../src/render3/index'; -import {bind, container, containerRefreshEnd, containerRefreshStart, elementAttribute, elementClassProp, elementEnd, elementProperty, elementStart, elementStyling, elementStylingApply, embeddedViewEnd, embeddedViewStart, load, text, textBinding} from '../../src/render3/instructions'; +import {bind, container, containerRefreshEnd, containerRefreshStart, element, elementAttribute, elementClassProp, elementEnd, elementProperty, elementStart, elementStyling, elementStylingApply, embeddedViewEnd, embeddedViewStart, load, text, textBinding} from '../../src/render3/instructions'; import {InitialStylingFlags, RenderFlags} from '../../src/render3/interfaces/definition'; import {ComponentFixture, createComponent, renderToHtml} from './render_util'; @@ -18,8 +18,7 @@ describe('exports', () => { /** {{ myInput.value }} */ function Template(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { - elementStart(0, 'input', ['value', 'one'], ['myInput', '']); - elementEnd(); + element(0, 'input', ['value', 'one'], ['myInput', '']); text(2); } let tmp: any; @@ -37,8 +36,7 @@ describe('exports', () => { /** {{ myComp.name }} */ function Template(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { - elementStart(0, 'comp', null, ['myComp', '']); - elementEnd(); + element(0, 'comp', null, ['myComp', '']); text(2); } let tmp: any; @@ -93,10 +91,8 @@ describe('exports', () => { /**
*/ function Template(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { - elementStart(0, 'comp', null, ['myComp', '']); - elementEnd(); - elementStart(2, 'div', ['myDir', '']); - elementEnd(); + element(0, 'comp', null, ['myComp', '']); + element(2, 'div', ['myDir', '']); } let tmp: any; if (rf & RenderFlags.Update) { @@ -114,8 +110,7 @@ describe('exports', () => { /**
{{ myDir.name }} */ function Template(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { - elementStart(0, 'div', ['someDir', ''], ['myDir', 'someDir']); - elementEnd(); + element(0, 'div', ['someDir', ''], ['myDir', 'someDir']); text(2); } let tmp: any; @@ -143,8 +138,7 @@ describe('exports', () => { /**
*/ const App = createComponent('app', function(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { - elementStart(0, 'div', null, ['myDir', 'someDir']); - elementEnd(); + element(0, 'div', null, ['myDir', 'someDir']); } }); @@ -159,8 +153,7 @@ describe('exports', () => { function Template(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { text(0); - elementStart(1, 'input', ['value', 'one'], ['myInput', '']); - elementEnd(); + element(1, 'input', ['value', 'one'], ['myInput', '']); } const tmp = load(2) as any; if (rf & RenderFlags.Update) { @@ -176,10 +169,8 @@ describe('exports', () => { /**
*/ function Template(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { - elementStart(0, 'div'); - elementEnd(); - elementStart(1, 'input', ['value', 'one'], ['myInput', '']); - elementEnd(); + element(0, 'div'); + element(1, 'input', ['value', 'one'], ['myInput', '']); } const tmp = load(2) as any; if (rf & RenderFlags.Update) { @@ -194,10 +185,8 @@ describe('exports', () => { /**
*/ function Template(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { - elementStart(0, 'div'); - elementEnd(); - elementStart(1, 'input', ['value', 'one'], ['myInput', '']); - elementEnd(); + element(0, 'div'); + element(1, 'input', ['value', 'one'], ['myInput', '']); } const tmp = load(2) as any; if (rf & RenderFlags.Update) { @@ -215,8 +204,7 @@ describe('exports', () => { elementStart(0, 'div'); elementStyling([InitialStylingFlags.VALUES_MODE, 'red', true]); elementEnd(); - elementStart(1, 'input', ['type', 'checkbox', 'checked', 'true'], ['myInput', '']); - elementEnd(); + element(1, 'input', ['type', 'checkbox', 'checked', 'true'], ['myInput', '']); } const tmp = load(2) as any; if (rf & RenderFlags.Update) { @@ -262,10 +250,8 @@ describe('exports', () => { /**
*/ function Template(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { - elementStart(0, 'div', ['myDir', '']); - elementEnd(); - elementStart(1, 'comp', null, ['myComp', '']); - elementEnd(); + element(0, 'div', ['myDir', '']); + element(1, 'comp', null, ['myComp', '']); } let tmp: any; if (rf & RenderFlags.Update) { @@ -285,10 +271,8 @@ describe('exports', () => { if (rf & RenderFlags.Create) { text(0); text(1); - elementStart(2, 'comp', null, ['myComp', '']); - elementEnd(); - elementStart(4, 'input', ['value', 'one'], ['myInput', '']); - elementEnd(); + element(2, 'comp', null, ['myComp', '']); + element(4, 'input', ['value', 'one'], ['myInput', '']); } let tmp1: any; let tmp2: any; @@ -334,8 +318,7 @@ describe('exports', () => { let tmp: any; if (rf1 & RenderFlags.Create) { text(0); - elementStart(1, 'input', ['value', 'one'], ['myInput', '']); - elementEnd(); + element(1, 'input', ['value', 'one'], ['myInput', '']); } if (rf1 & RenderFlags.Update) { tmp = load(2); diff --git a/packages/core/test/render3/instructions_spec.ts b/packages/core/test/render3/instructions_spec.ts index e95b47ba57..684f26cbfe 100644 --- a/packages/core/test/render3/instructions_spec.ts +++ b/packages/core/test/render3/instructions_spec.ts @@ -36,10 +36,7 @@ describe('instructions', () => { elementEnd(); } - function createScript() { - elementStart(0, 'script'); - elementEnd(); - } + function createScript() { element(0, 'script'); } describe('bind', () => { it('should update bindings when value changes', () => { @@ -95,7 +92,7 @@ describe('instructions', () => { it('should allow setting namespaced attributes', () => { const t = new TemplateFixture(() => { - elementStart(0, 'div', [ + element(0, 'div', [ // id="test" 'id', 'test', @@ -108,7 +105,6 @@ describe('instructions', () => { 'title', 'Hello', ]); - elementEnd(); }); const div = (t.hostNode.native as HTMLElement).querySelector('div') !; diff --git a/packages/core/test/render3/integration_spec.ts b/packages/core/test/render3/integration_spec.ts index c1e7440471..c49b1ae56a 100644 --- a/packages/core/test/render3/integration_spec.ts +++ b/packages/core/test/render3/integration_spec.ts @@ -9,7 +9,7 @@ import {RenderFlags} from '@angular/core/src/render3'; import {defineComponent, defineDirective} from '../../src/render3/index'; -import {NO_CHANGE, bind, container, containerRefreshEnd, containerRefreshStart, elementAttribute, elementClassProp, elementEnd, elementProperty, elementStart, elementStyleProp, elementStyling, elementStylingApply, embeddedViewEnd, embeddedViewStart, interpolation1, interpolation2, interpolation3, interpolation4, interpolation5, interpolation6, interpolation7, interpolation8, interpolationV, load, loadDirective, projection, projectionDef, text, textBinding} from '../../src/render3/instructions'; +import {NO_CHANGE, bind, container, containerRefreshEnd, containerRefreshStart, element, elementAttribute, elementClassProp, elementEnd, elementProperty, elementStart, elementStyleProp, elementStyling, elementStylingApply, embeddedViewEnd, embeddedViewStart, interpolation1, interpolation2, interpolation3, interpolation4, interpolation5, interpolation6, interpolation7, interpolation8, interpolationV, load, loadDirective, projection, projectionDef, text, textBinding} from '../../src/render3/instructions'; import {InitialStylingFlags} from '../../src/render3/interfaces/definition'; import {HEADER_OFFSET} from '../../src/render3/interfaces/view'; import {sanitizeUrl} from '../../src/sanitization/sanitization'; @@ -185,8 +185,7 @@ describe('render3 integration test', () => { if (rf & RenderFlags.Create) { elementStart(0, 'b'); { - elementStart(1, 'span'); - elementEnd(); + element(1, 'span'); elementStart(2, 'span', ['class', 'foo']); {} elementEnd(); @@ -247,8 +246,7 @@ describe('render3 integration test', () => { it('should support a basic component template', () => { function Template(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { - elementStart(0, 'todo'); - elementEnd(); + element(0, 'todo'); } } @@ -258,8 +256,7 @@ describe('render3 integration test', () => { it('should support a component template with sibling', () => { function Template(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { - elementStart(0, 'todo'); - elementEnd(); + element(0, 'todo'); text(1, 'two'); } } @@ -273,10 +270,8 @@ describe('render3 integration test', () => { */ function Template(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { - elementStart(0, 'todo'); - elementEnd(); - elementStart(1, 'todo'); - elementEnd(); + element(0, 'todo'); + element(1, 'todo'); } } expect(renderToHtml(Template, null, defs)) @@ -312,8 +307,7 @@ describe('render3 integration test', () => { function Template(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { - elementStart(0, 'todo'); - elementEnd(); + element(0, 'todo'); } } @@ -361,8 +355,7 @@ describe('render3 integration test', () => { function Template(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { - elementStart(0, 'comp'); - elementEnd(); + element(0, 'comp'); } } @@ -409,8 +402,7 @@ describe('render3 integration test', () => { /** */ function Template(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { - elementStart(0, 'comp'); - elementEnd(); + element(0, 'comp'); } if (rf & RenderFlags.Update) { elementProperty(0, 'condition', bind(ctx.condition)); @@ -578,8 +570,7 @@ describe('render3 integration test', () => { function Template(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { - elementStart(0, 'span'); - elementEnd(); + element(0, 'span'); } if (rf & RenderFlags.Update) { elementAttribute(0, 'title', bind(ctx.title)); @@ -603,8 +594,7 @@ describe('render3 integration test', () => { function Template(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { - elementStart(0, 'span'); - elementEnd(); + element(0, 'span'); } if (rf & RenderFlags.Update) { elementAttribute(0, 'title', bind(ctx.title)); @@ -620,8 +610,7 @@ describe('render3 integration test', () => { it('should update bindings', () => { function Template(rf: RenderFlags, c: any) { if (rf & RenderFlags.Create) { - elementStart(0, 'b'); - elementEnd(); + element(0, 'b'); } if (rf & RenderFlags.Update) { elementAttribute(0, 'a', interpolationV(c)); @@ -727,8 +716,7 @@ describe('render3 integration test', () => { function Template(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { - elementStart(0, 'div', ['hostBindingDir', '']); - elementEnd(); + element(0, 'div', ['hostBindingDir', '']); } } @@ -847,8 +835,7 @@ describe('render3 integration test', () => { if (ctx.condition) { let rf1 = embeddedViewStart(0); if (rf1 & RenderFlags.Create) { - elementStart(0, 'div'); - elementEnd(); + element(0, 'div'); } embeddedViewEnd(); } @@ -889,8 +876,7 @@ describe('render3 integration test', () => { factory: () => new SanitizationComp(), template: (rf: RenderFlags, ctx: SanitizationComp) => { if (rf & RenderFlags.Create) { - elementStart(0, 'a'); - elementEnd(); + element(0, 'a'); } if (rf & RenderFlags.Update) { elementProperty(0, 'href', bind(ctx.href), sanitizeUrl); @@ -909,13 +895,13 @@ describe('render3 integration test', () => { fixture.component.updateLink('http://foo'); fixture.update(); - const element = fixture.hostElement.querySelector('a') !; - expect(element.getAttribute('href')).toEqual('http://bar'); + const anchor = fixture.hostElement.querySelector('a') !; + expect(anchor.getAttribute('href')).toEqual('http://bar'); fixture.component.updateLink(sanitizer.bypassSecurityTrustUrl('http://foo')); fixture.update(); - expect(element.getAttribute('href')).toEqual('http://foo'); + expect(anchor.getAttribute('href')).toEqual('http://foo'); }); }); }); diff --git a/packages/core/test/render3/lifecycle_spec.ts b/packages/core/test/render3/lifecycle_spec.ts index 48c72a4d3f..c13ee41b3a 100644 --- a/packages/core/test/render3/lifecycle_spec.ts +++ b/packages/core/test/render3/lifecycle_spec.ts @@ -8,7 +8,7 @@ import {OnDestroy, SimpleChanges} from '../../src/core'; import {AttributeMarker, ComponentTemplate, LifecycleHooksFeature, NgOnChangesFeature, defineComponent, defineDirective} from '../../src/render3/index'; -import {bind, container, containerRefreshEnd, containerRefreshStart, elementEnd, elementProperty, elementStart, embeddedViewEnd, embeddedViewStart, listener, markDirty, projection, projectionDef, store, text} from '../../src/render3/instructions'; +import {bind, container, containerRefreshEnd, containerRefreshStart, element, elementEnd, elementProperty, elementStart, embeddedViewEnd, embeddedViewStart, listener, markDirty, projection, projectionDef, store, text} from '../../src/render3/instructions'; import {RenderFlags} from '../../src/render3/interfaces/definition'; import {NgIf} from './common_with_def'; @@ -19,8 +19,7 @@ describe('lifecycles', () => { function getParentTemplate(name: string) { return (rf: RenderFlags, ctx: any) => { if (rf & RenderFlags.Create) { - elementStart(0, name); - elementEnd(); + element(0, name); } if (rf & RenderFlags.Update) { elementProperty(0, 'val', bind(ctx.val)); @@ -78,8 +77,7 @@ describe('lifecycles', () => { /** */ function Template(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { - elementStart(0, 'comp'); - elementEnd(); + element(0, 'comp'); } if (rf & RenderFlags.Update) { elementProperty(0, 'val', bind(ctx.val)); @@ -110,8 +108,7 @@ describe('lifecycles', () => { function Template(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { - elementStart(0, 'parent'); - elementEnd(); + element(0, 'parent'); } } @@ -129,10 +126,8 @@ describe('lifecycles', () => { function Template(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { - elementStart(0, 'parent'); - elementEnd(); - elementStart(1, 'parent'); - elementEnd(); + element(0, 'parent'); + element(1, 'parent'); } if (rf & RenderFlags.Update) { elementProperty(0, 'val', 1); @@ -162,8 +157,7 @@ describe('lifecycles', () => { if (ctx.condition) { let rf1 = embeddedViewStart(0); if (rf1 & RenderFlags.Create) { - elementStart(0, 'comp'); - elementEnd(); + element(0, 'comp'); } embeddedViewEnd(); } @@ -234,8 +228,7 @@ describe('lifecycles', () => { /** */ function Template(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { - elementStart(0, 'comp', ['dir', '']); - elementEnd(); + element(0, 'comp', ['dir', '']); } } @@ -251,8 +244,7 @@ describe('lifecycles', () => { /**
*/ function Template(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { - elementStart(0, 'div', ['dir', '']); - elementEnd(); + element(0, 'div', ['dir', '']); } } @@ -274,11 +266,9 @@ describe('lifecycles', () => { function Template(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { - elementStart(0, 'comp'); - elementEnd(); + element(0, 'comp'); container(1); - elementStart(2, 'comp'); - elementEnd(); + element(2, 'comp'); } if (rf & RenderFlags.Update) { elementProperty(0, 'val', 1); @@ -288,8 +278,7 @@ describe('lifecycles', () => { for (let j = 2; j < 5; j++) { let rf1 = embeddedViewStart(0); if (rf1 & RenderFlags.Create) { - elementStart(0, 'comp'); - elementEnd(); + element(0, 'comp'); } if (rf1 & RenderFlags.Update) { elementProperty(0, 'val', j); @@ -319,11 +308,9 @@ describe('lifecycles', () => { function Template(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { - elementStart(0, 'parent'); - elementEnd(); + element(0, 'parent'); container(1); - elementStart(2, 'parent'); - elementEnd(); + element(2, 'parent'); } if (rf & RenderFlags.Update) { elementProperty(0, 'val', 1); @@ -333,8 +320,7 @@ describe('lifecycles', () => { for (let j = 2; j < 5; j++) { let rf1 = embeddedViewStart(0); if (rf1 & RenderFlags.Create) { - elementStart(0, 'parent'); - elementEnd(); + element(0, 'parent'); } if (rf1 & RenderFlags.Update) { elementProperty(0, 'val', j); @@ -402,8 +388,7 @@ describe('lifecycles', () => { /** */ function Template(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { - elementStart(0, 'comp'); - elementEnd(); + element(0, 'comp'); } } @@ -431,8 +416,7 @@ describe('lifecycles', () => { function Template(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { - elementStart(0, 'parent'); - elementEnd(); + element(0, 'parent'); } } @@ -444,8 +428,7 @@ describe('lifecycles', () => { /** */ function Template(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { - elementStart(0, 'comp'); - elementEnd(); + element(0, 'comp'); } } @@ -460,8 +443,7 @@ describe('lifecycles', () => { /** */ function Template(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { - elementStart(0, 'comp', ['dir', '']); - elementEnd(); + element(0, 'comp', ['dir', '']); } } @@ -477,8 +459,7 @@ describe('lifecycles', () => { /**
*/ function Template(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { - elementStart(0, 'div', ['dir', '']); - elementEnd(); + element(0, 'div', ['dir', '']); } } @@ -860,8 +841,7 @@ describe('lifecycles', () => { /** */ function Template(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { - elementStart(0, 'comp', ['dir', '']); - elementEnd(); + element(0, 'comp', ['dir', '']); } } @@ -873,8 +853,7 @@ describe('lifecycles', () => { /**
*/ function Template(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { - elementStart(0, 'div', ['dir', '']); - elementEnd(); + element(0, 'div', ['dir', '']); } } @@ -944,8 +923,7 @@ describe('lifecycles', () => { /** */ function Template(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { - elementStart(0, 'comp'); - elementEnd(); + element(0, 'comp'); } } @@ -981,8 +959,7 @@ describe('lifecycles', () => { if (ctx.condition) { let rf1 = embeddedViewStart(0); if (rf1 & RenderFlags.Create) { - elementStart(0, 'comp'); - elementEnd(); + element(0, 'comp'); } embeddedViewEnd(); } @@ -1010,8 +987,7 @@ describe('lifecycles', () => { */ function Template(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { - elementStart(0, 'parent'); - elementEnd(); + element(0, 'parent'); } } @@ -1029,10 +1005,8 @@ describe('lifecycles', () => { */ function Template(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { - elementStart(0, 'parent'); - elementEnd(); - elementStart(1, 'parent'); - elementEnd(); + element(0, 'parent'); + element(1, 'parent'); } if (rf & RenderFlags.Update) { elementProperty(0, 'val', 1); @@ -1053,10 +1027,7 @@ describe('lifecycles', () => { function Template(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { elementStart(0, 'comp'); - { - elementStart(1, 'projected'); - elementEnd(); - } + { element(1, 'projected'); } elementEnd(); } } @@ -1077,16 +1048,10 @@ describe('lifecycles', () => { function Template(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { elementStart(0, 'comp'); - { - elementStart(1, 'projected'); - elementEnd(); - } + { element(1, 'projected'); } elementEnd(); elementStart(2, 'comp'); - { - elementStart(3, 'projected'); - elementEnd(); - } + { element(3, 'projected'); } elementEnd(); } if (rf & RenderFlags.Update) { @@ -1110,10 +1075,7 @@ describe('lifecycles', () => { const ParentComp = createAfterViewInitComponent('parent', (rf: RenderFlags, ctx: any) => { if (rf & RenderFlags.Create) { elementStart(0, 'comp'); - { - elementStart(1, 'projected'); - elementEnd(); - } + { element(1, 'projected'); } elementEnd(); } if (rf & RenderFlags.Update) { @@ -1128,10 +1090,8 @@ describe('lifecycles', () => { */ function Template(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { - elementStart(0, 'parent'); - elementEnd(); - elementStart(1, 'parent'); - elementEnd(); + element(0, 'parent'); + element(1, 'parent'); } if (rf & RenderFlags.Update) { elementProperty(0, 'val', 1); @@ -1153,11 +1113,9 @@ describe('lifecycles', () => { */ function Template(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { - elementStart(0, 'comp'); - elementEnd(); + element(0, 'comp'); container(1); - elementStart(2, 'comp'); - elementEnd(); + element(2, 'comp'); } if (rf & RenderFlags.Update) { elementProperty(0, 'val', 1); @@ -1167,8 +1125,7 @@ describe('lifecycles', () => { for (let i = 2; i < 4; i++) { let rf1 = embeddedViewStart(0); if (rf1 & RenderFlags.Create) { - elementStart(0, 'comp'); - elementEnd(); + element(0, 'comp'); } if (rf1 & RenderFlags.Update) { elementProperty(0, 'val', i); @@ -1195,11 +1152,9 @@ describe('lifecycles', () => { */ function Template(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { - elementStart(0, 'parent'); - elementEnd(); + element(0, 'parent'); container(1); - elementStart(2, 'parent'); - elementEnd(); + element(2, 'parent'); } if (rf & RenderFlags.Update) { elementProperty(0, 'val', 1); @@ -1209,8 +1164,7 @@ describe('lifecycles', () => { for (let i = 2; i < 4; i++) { let rf1 = embeddedViewStart(0); if (rf1 & RenderFlags.Create) { - elementStart(0, 'parent'); - elementEnd(); + element(0, 'parent'); } if (rf1 & RenderFlags.Update) { elementProperty(0, 'val', i); @@ -1234,8 +1188,7 @@ describe('lifecycles', () => { /** */ function Template(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { - elementStart(0, 'comp'); - elementEnd(); + element(0, 'comp'); } } @@ -1259,8 +1212,7 @@ describe('lifecycles', () => { /** */ function Template(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { - elementStart(0, 'comp'); - elementEnd(); + element(0, 'comp'); } if (rf & RenderFlags.Update) { elementProperty(0, 'val', bind(ctx.myVal)); @@ -1284,11 +1236,9 @@ describe('lifecycles', () => { */ function Template(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { - elementStart(0, 'parent'); - elementEnd(); + element(0, 'parent'); container(1); - elementStart(2, 'parent'); - elementEnd(); + element(2, 'parent'); } if (rf & RenderFlags.Update) { elementProperty(0, 'val', 1); @@ -1298,8 +1248,7 @@ describe('lifecycles', () => { for (let i = 2; i < 4; i++) { let rf1 = embeddedViewStart(0); if (rf1 & RenderFlags.Create) { - elementStart(0, 'parent'); - elementEnd(); + element(0, 'parent'); } if (rf1 & RenderFlags.Update) { elementProperty(0, 'val', i); @@ -1327,8 +1276,7 @@ describe('lifecycles', () => { /** */ function Template(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { - elementStart(0, 'comp', ['dir', '']); - elementEnd(); + element(0, 'comp', ['dir', '']); } } @@ -1340,8 +1288,7 @@ describe('lifecycles', () => { /**
*/ function Template(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { - elementStart(0, 'div', ['dir', '']); - elementEnd(); + element(0, 'div', ['dir', '']); } } @@ -1383,8 +1330,7 @@ describe('lifecycles', () => { let Grandparent = createOnDestroyComponent('grandparent', function(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { - elementStart(0, 'parent'); - elementEnd(); + element(0, 'parent'); } }, [Parent]); @@ -1416,8 +1362,7 @@ describe('lifecycles', () => { if (ctx.condition) { let rf1 = embeddedViewStart(0); if (rf1 & RenderFlags.Create) { - elementStart(0, 'comp'); - elementEnd(); + element(0, 'comp'); } embeddedViewEnd(); } @@ -1449,10 +1394,8 @@ describe('lifecycles', () => { if (ctx.condition) { let rf1 = embeddedViewStart(0); if (rf1 & RenderFlags.Create) { - elementStart(0, 'comp'); - elementEnd(); - elementStart(1, 'comp'); - elementEnd(); + element(0, 'comp'); + element(1, 'comp'); } if (rf1 & RenderFlags.Update) { elementProperty(0, 'val', bind('1')); @@ -1489,8 +1432,7 @@ describe('lifecycles', () => { if (ctx.condition) { let rf1 = embeddedViewStart(0); if (rf1 & RenderFlags.Create) { - elementStart(0, 'parent'); - elementEnd(); + element(0, 'parent'); } embeddedViewEnd(); } @@ -1524,8 +1466,7 @@ describe('lifecycles', () => { if (ctx.condition) { let rf1 = embeddedViewStart(0); if (rf1 & RenderFlags.Create) { - elementStart(0, 'grandparent'); - elementEnd(); + element(0, 'grandparent'); } embeddedViewEnd(); } @@ -1561,16 +1502,10 @@ describe('lifecycles', () => { let rf1 = embeddedViewStart(0); if (rf1 & RenderFlags.Create) { elementStart(0, 'comp'); - { - elementStart(1, 'projected'); - elementEnd(); - } + { element(1, 'projected'); } elementEnd(); elementStart(2, 'comp'); - { - elementStart(3, 'projected'); - elementEnd(); - } + { element(3, 'projected'); } elementEnd(); } if (rf1 & RenderFlags.Update) { @@ -1614,11 +1549,9 @@ describe('lifecycles', () => { if (ctx.condition) { let rf1 = embeddedViewStart(0); if (rf1 & RenderFlags.Create) { - elementStart(0, 'comp'); - elementEnd(); + element(0, 'comp'); container(1); - elementStart(2, 'comp'); - elementEnd(); + element(2, 'comp'); } if (rf1 & RenderFlags.Update) { elementProperty(0, 'val', bind('1')); @@ -1628,8 +1561,7 @@ describe('lifecycles', () => { if (ctx.condition2) { let rf2 = embeddedViewStart(0); if (rf2 & RenderFlags.Create) { - elementStart(0, 'comp'); - elementEnd(); + element(0, 'comp'); } if (rf2 & RenderFlags.Update) { elementProperty(0, 'val', bind('2')); @@ -1692,11 +1624,9 @@ describe('lifecycles', () => { if (ctx.condition) { let rf1 = embeddedViewStart(0); if (rf1 & RenderFlags.Create) { - elementStart(0, 'comp'); - elementEnd(); + element(0, 'comp'); container(1); - elementStart(2, 'comp'); - elementEnd(); + element(2, 'comp'); } if (rf1 & RenderFlags.Update) { elementProperty(0, 'val', bind('1')); @@ -1706,8 +1636,7 @@ describe('lifecycles', () => { for (let j = 2; j < ctx.len; j++) { let rf2 = embeddedViewStart(0); if (rf2 & RenderFlags.Create) { - elementStart(0, 'comp'); - elementEnd(); + element(0, 'comp'); } if (rf2 & RenderFlags.Update) { elementProperty(0, 'val', bind(j)); @@ -1778,8 +1707,7 @@ describe('lifecycles', () => { text(1, 'Click me'); } elementEnd(); - elementStart(2, 'comp'); - elementEnd(); + element(2, 'comp'); elementStart(3, 'button'); { listener('click', ctx.onClick.bind(ctx)); @@ -1834,8 +1762,7 @@ describe('lifecycles', () => { if (ctx.condition) { let rf1 = embeddedViewStart(0); if (rf1 & RenderFlags.Create) { - elementStart(0, 'comp', ['dir', '']); - elementEnd(); + element(0, 'comp', ['dir', '']); } embeddedViewEnd(); } @@ -1869,8 +1796,7 @@ describe('lifecycles', () => { if (ctx.condition) { let rf1 = embeddedViewStart(0); if (rf1 & RenderFlags.Create) { - elementStart(0, 'div', ['dir', '']); - elementEnd(); + element(0, 'div', ['dir', '']); } embeddedViewEnd(); } @@ -1903,8 +1829,7 @@ describe('lifecycles', () => { }); const Parent = createOnChangesComponent('parent', (rf: RenderFlags, ctx: any) => { if (rf & RenderFlags.Create) { - elementStart(0, 'comp'); - elementEnd(); + element(0, 'comp'); } if (rf & RenderFlags.Update) { elementProperty(0, 'val1', bind(ctx.a)); @@ -1966,8 +1891,7 @@ describe('lifecycles', () => { /** */ function Template(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { - elementStart(0, 'comp'); - elementEnd(); + element(0, 'comp'); } if (rf & RenderFlags.Update) { elementProperty(0, 'val1', bind(ctx.val1)); @@ -1992,8 +1916,7 @@ describe('lifecycles', () => { function Template(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { - elementStart(0, 'parent'); - elementEnd(); + element(0, 'parent'); } if (rf & RenderFlags.Update) { elementProperty(0, 'val1', bind(ctx.val1)); @@ -2018,10 +1941,8 @@ describe('lifecycles', () => { function Template(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { - elementStart(0, 'parent'); - elementEnd(); - elementStart(1, 'parent'); - elementEnd(); + element(0, 'parent'); + element(1, 'parent'); } if (rf & RenderFlags.Update) { elementProperty(0, 'val1', bind(1)); @@ -2058,8 +1979,7 @@ describe('lifecycles', () => { if (ctx.condition) { let rf1 = embeddedViewStart(0); if (rf1 & RenderFlags.Create) { - elementStart(0, 'comp'); - elementEnd(); + element(0, 'comp'); } if (rf1 & RenderFlags.Update) { elementProperty(0, 'val1', bind(1)); @@ -2155,8 +2075,7 @@ describe('lifecycles', () => { /** */ function Template(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { - elementStart(0, 'comp', ['dir', '']); - elementEnd(); + element(0, 'comp', ['dir', '']); } if (rf & RenderFlags.Update) { elementProperty(0, 'val1', bind(1)); @@ -2180,8 +2099,7 @@ describe('lifecycles', () => { /**
*/ function Template(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { - elementStart(0, 'div', ['dir', '']); - elementEnd(); + element(0, 'div', ['dir', '']); } if (rf & RenderFlags.Update) { elementProperty(0, 'val1', bind(1)); @@ -2207,11 +2125,9 @@ describe('lifecycles', () => { function Template(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { - elementStart(0, 'comp'); - elementEnd(); + element(0, 'comp'); container(1); - elementStart(2, 'comp'); - elementEnd(); + element(2, 'comp'); } if (rf & RenderFlags.Update) { elementProperty(0, 'val1', bind(1)); @@ -2223,8 +2139,7 @@ describe('lifecycles', () => { for (let j = 2; j < 5; j++) { let rf1 = embeddedViewStart(0); if (rf1 & RenderFlags.Create) { - elementStart(0, 'comp'); - elementEnd(); + element(0, 'comp'); } if (rf1 & RenderFlags.Update) { elementProperty(0, 'val1', bind(j)); @@ -2261,11 +2176,9 @@ describe('lifecycles', () => { function Template(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { - elementStart(0, 'parent'); - elementEnd(); + element(0, 'parent'); container(1); - elementStart(2, 'parent'); - elementEnd(); + element(2, 'parent'); } if (rf & RenderFlags.Update) { elementProperty(0, 'val1', bind(1)); @@ -2277,8 +2190,7 @@ describe('lifecycles', () => { for (let j = 2; j < 5; j++) { let rf1 = embeddedViewStart(0); if (rf1 & RenderFlags.Create) { - elementStart(0, 'parent'); - elementEnd(); + element(0, 'parent'); } if (rf1 & RenderFlags.Update) { elementProperty(0, 'val1', bind(j)); @@ -2353,10 +2265,8 @@ describe('lifecycles', () => { */ function Template(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { - elementStart(0, 'comp'); - elementEnd(); - elementStart(1, 'comp'); - elementEnd(); + element(0, 'comp'); + element(1, 'comp'); } if (rf & RenderFlags.Update) { elementProperty(0, 'val', 1); @@ -2386,8 +2296,7 @@ describe('lifecycles', () => { /** */ const Parent = createAllHooksComponent('parent', (rf: RenderFlags, ctx: any) => { if (rf & RenderFlags.Create) { - elementStart(0, 'comp'); - elementEnd(); + element(0, 'comp'); } if (rf & RenderFlags.Update) { elementProperty(0, 'val', bind(ctx.val)); @@ -2400,10 +2309,8 @@ describe('lifecycles', () => { */ function Template(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { - elementStart(0, 'parent'); - elementEnd(); - elementStart(1, 'parent'); - elementEnd(); + element(0, 'parent'); + element(1, 'parent'); } if (rf & RenderFlags.Update) { elementProperty(0, 'val', 1); @@ -2448,8 +2355,7 @@ describe('lifecycles', () => { if (rf & RenderFlags.Create) { projectionDef(); projection(0); - elementStart(1, 'view'); - elementEnd(); + element(1, 'view'); } if (rf & RenderFlags.Update) { elementProperty(1, 'val', bind(ctx.val)); @@ -2467,16 +2373,10 @@ describe('lifecycles', () => { function Template(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { elementStart(0, 'parent'); - { - elementStart(1, 'content'); - elementEnd(); - } + { element(1, 'content'); } elementEnd(); elementStart(2, 'parent'); - { - elementStart(3, 'content'); - elementEnd(); - } + { element(3, 'content'); } elementEnd(); } if (rf & RenderFlags.Update) { diff --git a/packages/core/test/render3/listeners_spec.ts b/packages/core/test/render3/listeners_spec.ts index 867a859d8e..8ad92106ae 100644 --- a/packages/core/test/render3/listeners_spec.ts +++ b/packages/core/test/render3/listeners_spec.ts @@ -7,8 +7,9 @@ */ import {defineComponent, defineDirective} from '../../src/render3/index'; -import {container, containerRefreshEnd, containerRefreshStart, elementEnd, elementStart, embeddedViewEnd, embeddedViewStart, listener, text} from '../../src/render3/instructions'; +import {container, containerRefreshEnd, containerRefreshStart, element, elementEnd, elementStart, embeddedViewEnd, embeddedViewStart, listener, text} from '../../src/render3/instructions'; import {RenderFlags} from '../../src/render3/interfaces/definition'; + import {getRendererFactory2} from './imported_renderer2'; import {ComponentFixture, containerEl, renderComponent, renderToHtml} from './render_util'; @@ -530,10 +531,8 @@ describe('event listeners', () => { let rf1 = embeddedViewStart(0); if (rf1 & RenderFlags.Create) { text(0, 'Hello'); - elementStart(1, 'comp'); - elementEnd(); - elementStart(2, 'comp'); - elementEnd(); + element(1, 'comp'); + element(2, 'comp'); } embeddedViewEnd(); } diff --git a/packages/core/test/render3/outputs_spec.ts b/packages/core/test/render3/outputs_spec.ts index c983fac6d8..be55a67907 100644 --- a/packages/core/test/render3/outputs_spec.ts +++ b/packages/core/test/render3/outputs_spec.ts @@ -9,8 +9,9 @@ import {EventEmitter} from '@angular/core'; import {defineComponent, defineDirective} from '../../src/render3/index'; -import {bind, container, containerRefreshEnd, containerRefreshStart, elementEnd, elementProperty, elementStart, embeddedViewEnd, embeddedViewStart, listener, text} from '../../src/render3/instructions'; +import {bind, container, containerRefreshEnd, containerRefreshStart, element, elementEnd, elementProperty, elementStart, embeddedViewEnd, embeddedViewStart, listener, text} from '../../src/render3/instructions'; import {RenderFlags} from '../../src/render3/interfaces/definition'; + import {containerEl, renderToHtml} from './render_util'; describe('outputs', () => { @@ -273,8 +274,7 @@ describe('outputs', () => { listener('change', function() { return ctx.onChange(); }); } elementEnd(); - elementStart(3, 'destroy-comp'); - elementEnd(); + element(3, 'destroy-comp'); } embeddedViewEnd(); } diff --git a/packages/core/test/render3/properties_spec.ts b/packages/core/test/render3/properties_spec.ts index 36e9cc2ab3..97501f0116 100644 --- a/packages/core/test/render3/properties_spec.ts +++ b/packages/core/test/render3/properties_spec.ts @@ -9,8 +9,9 @@ import {EventEmitter} from '@angular/core'; import {defineComponent, defineDirective, tick} from '../../src/render3/index'; -import {NO_CHANGE, bind, container, containerRefreshEnd, containerRefreshStart, elementEnd, elementProperty, elementStart, embeddedViewEnd, embeddedViewStart, interpolation1, listener, load, loadDirective, text, textBinding} from '../../src/render3/instructions'; +import {NO_CHANGE, bind, container, containerRefreshEnd, containerRefreshStart, element, elementEnd, elementProperty, elementStart, embeddedViewEnd, embeddedViewStart, interpolation1, listener, load, loadDirective, text, textBinding} from '../../src/render3/instructions'; import {RenderFlags} from '../../src/render3/interfaces/definition'; + import {ComponentFixture, renderToHtml} from './render_util'; describe('elementProperty', () => { @@ -18,8 +19,7 @@ describe('elementProperty', () => { it('should support bindings to properties', () => { function Template(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { - elementStart(0, 'span'); - elementEnd(); + element(0, 'span'); } if (rf & RenderFlags.Update) { elementProperty(0, 'id', bind(ctx)); @@ -41,8 +41,7 @@ describe('elementProperty', () => { function Template(rf: RenderFlags, ctx: string) { if (rf & RenderFlags.Create) { - elementStart(0, 'span'); - elementEnd(); + element(0, 'span'); } if (rf & RenderFlags.Update) { elementProperty(0, 'id', rf & RenderFlags.Create ? expensive(ctx) : NO_CHANGE); @@ -56,8 +55,7 @@ describe('elementProperty', () => { it('should support interpolation for properties', () => { function Template(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { - elementStart(0, 'span'); - elementEnd(); + element(0, 'span'); } if (rf & RenderFlags.Update) { elementProperty(0, 'id', interpolation1('_', ctx, '_')); @@ -227,8 +225,7 @@ describe('elementProperty', () => { /** */ function Template(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { - elementStart(0, 'comp'); - elementEnd(); + element(0, 'comp'); } if (rf & RenderFlags.Update) { elementProperty(0, 'id', bind(ctx.id)); @@ -398,8 +395,7 @@ describe('elementProperty', () => { /**
*/ function Template(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { - elementStart(0, 'div', ['role', 'button', 'myDir', '']); - elementEnd(); + element(0, 'div', ['role', 'button', 'myDir', '']); } } @@ -412,8 +408,7 @@ describe('elementProperty', () => { /**
*/ function Template(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { - elementStart(0, 'div', ['role', 'button', 'myDir', '']); - elementEnd(); + element(0, 'div', ['role', 'button', 'myDir', '']); } if (rf & RenderFlags.Update) { elementProperty(0, 'role', bind(ctx.role)); @@ -433,8 +428,7 @@ describe('elementProperty', () => { /**
*/ function Template(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { - elementStart(0, 'div', ['role', 'button', 'myDir', '', 'myDirB', '']); - elementEnd(); + element(0, 'div', ['role', 'button', 'myDir', '', 'myDirB', '']); } } @@ -449,8 +443,7 @@ describe('elementProperty', () => { /**
*/ function Template(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { - elementStart(0, 'div', ['role', 'button', 'dir', 'rtl', 'myDir', '']); - elementEnd(); + element(0, 'div', ['role', 'button', 'dir', 'rtl', 'myDir', '']); } } @@ -488,10 +481,8 @@ describe('elementProperty', () => { */ function Template(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { - elementStart(0, 'div', ['role', 'button', 'dir', 'rtl', 'myDir', '']); - elementEnd(); - elementStart(1, 'div', ['role', 'listbox', 'myDirB', '']); - elementEnd(); + element(0, 'div', ['role', 'button', 'dir', 'rtl', 'myDir', '']); + element(1, 'div', ['role', 'listbox', 'myDirB', '']); } } @@ -515,8 +506,7 @@ describe('elementProperty', () => { */ function Template(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { - elementStart(0, 'div', ['role', 'listbox', 'myDir', '']); - elementEnd(); + element(0, 'div', ['role', 'listbox', 'myDir', '']); container(1); } if (rf & RenderFlags.Update) { @@ -525,15 +515,13 @@ describe('elementProperty', () => { if (ctx.condition) { let rf1 = embeddedViewStart(0); if (rf1 & RenderFlags.Create) { - elementStart(0, 'div', ['role', 'button', 'myDirB', '']); - elementEnd(); + element(0, 'div', ['role', 'button', 'myDirB', '']); } embeddedViewEnd(); } else { let rf2 = embeddedViewStart(1); if (rf2 & RenderFlags.Create) { - elementStart(0, 'div', ['role', 'menu']); - elementEnd(); + element(0, 'div', ['role', 'menu']); } embeddedViewEnd(); } @@ -562,8 +550,7 @@ describe('elementProperty', () => { /**
{{ dir.role }} */ template: function(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { - elementStart(0, 'div', ['role', 'button', 'myDir', ''], ['dir', 'myDir']); - elementEnd(); + element(0, 'div', ['role', 'button', 'myDir', ''], ['dir', 'myDir']); text(2); } if (rf & RenderFlags.Update) { @@ -591,8 +578,7 @@ describe('elementProperty', () => { for (let i = 0; i < 2; i++) { let rf1 = embeddedViewStart(0); if (rf1 & RenderFlags.Create) { - elementStart(0, 'comp'); - elementEnd(); + element(0, 'comp'); } embeddedViewEnd(); } diff --git a/packages/core/test/render3/pure_function_spec.ts b/packages/core/test/render3/pure_function_spec.ts index 6dfe18f79a..593c08cf33 100644 --- a/packages/core/test/render3/pure_function_spec.ts +++ b/packages/core/test/render3/pure_function_spec.ts @@ -6,7 +6,7 @@ * found in the LICENSE file at https://angular.io/license */ import {defineComponent} from '../../src/render3/index'; -import {bind, container, containerRefreshEnd, containerRefreshStart, elementEnd, elementProperty, elementStart, embeddedViewEnd, embeddedViewStart, load, loadDirective, reserveSlots} from '../../src/render3/instructions'; +import {bind, container, containerRefreshEnd, containerRefreshStart, element, elementEnd, elementProperty, elementStart, embeddedViewEnd, embeddedViewStart, load, loadDirective, reserveSlots} from '../../src/render3/instructions'; import {RenderFlags} from '../../src/render3/interfaces/definition'; import {pureFunction1, pureFunction2, pureFunction3, pureFunction4, pureFunction5, pureFunction6, pureFunction7, pureFunction8, pureFunctionV} from '../../src/render3/pure_function'; import {renderToHtml} from '../../test/render3/render_util'; @@ -35,8 +35,7 @@ describe('array literals', () => { /** */ function Template(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { - elementStart(0, 'my-comp'); - elementEnd(); + element(0, 'my-comp'); reserveSlots(2); } if (rf & RenderFlags.Update) { @@ -92,8 +91,7 @@ describe('array literals', () => { */ function Template(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { - elementStart(0, 'many-prop-comp'); - elementEnd(); + element(0, 'many-prop-comp'); reserveSlots(4); } if (rf & RenderFlags.Update) { @@ -147,10 +145,8 @@ describe('array literals', () => { function Template(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { - elementStart(0, 'parent-comp'); - elementEnd(); - elementStart(1, 'parent-comp'); - elementEnd(); + element(0, 'parent-comp'); + element(1, 'parent-comp'); } } @@ -174,8 +170,7 @@ describe('array literals', () => { /** */ function Template(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { - elementStart(0, 'my-comp'); - elementEnd(); + element(0, 'my-comp'); reserveSlots(3); } if (rf & RenderFlags.Update) { @@ -302,8 +297,7 @@ describe('array literals', () => { */ function Template(rf: RenderFlags, c: any) { if (rf & RenderFlags.Create) { - elementStart(0, 'my-comp'); - elementEnd(); + element(0, 'my-comp'); reserveSlots(12); } if (rf & RenderFlags.Update) { @@ -354,8 +348,7 @@ describe('object literals', () => { /** */ function Template(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { - elementStart(0, 'object-comp'); - elementEnd(); + element(0, 'object-comp'); reserveSlots(2); } if (rf & RenderFlags.Update) { @@ -390,8 +383,7 @@ describe('object literals', () => { */ function Template(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { - elementStart(0, 'object-comp'); - elementEnd(); + element(0, 'object-comp'); reserveSlots(7); } if (rf & RenderFlags.Update) { diff --git a/packages/core/test/render3/query_spec.ts b/packages/core/test/render3/query_spec.ts index e86ce71409..5cba510936 100644 --- a/packages/core/test/render3/query_spec.ts +++ b/packages/core/test/render3/query_spec.ts @@ -111,8 +111,7 @@ describe('query', () => { 'cmpt', function(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { - elToQuery = elementStart(1, 'div', ['child', '']); - elementEnd(); + elToQuery = element(1, 'div', ['child', '']); } }, [Child], [], @@ -182,8 +181,7 @@ describe('query', () => { 'cmpt', function(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { - elementStart(1, 'div', ['child', '']); - elementEnd(); + element(1, 'div', ['child', '']); } }, [Child, OtherChild], [], @@ -219,10 +217,8 @@ describe('query', () => { 'cmpt', function(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { - elToQuery = elementStart(1, 'div', null, ['foo', '']); - elementEnd(); - elementStart(3, 'div'); - elementEnd(); + elToQuery = element(1, 'div', null, ['foo', '']); + element(3, 'div'); } }, [], [], @@ -257,10 +253,8 @@ describe('query', () => { 'cmpt', function(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { - elToQuery = elementStart(2, 'div', null, ['foo', '', 'bar', '']); - elementEnd(); - elementStart(5, 'div'); - elementEnd(); + elToQuery = element(2, 'div', null, ['foo', '', 'bar', '']); + element(5, 'div'); } }, [], [], @@ -305,12 +299,9 @@ describe('query', () => { 'cmpt', function(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { - el1ToQuery = elementStart(1, 'div', null, ['foo', '']); - elementEnd(); - elementStart(3, 'div'); - elementEnd(); - el2ToQuery = elementStart(4, 'div', null, ['bar', '']); - elementEnd(); + el1ToQuery = element(1, 'div', null, ['foo', '']); + element(3, 'div'); + el2ToQuery = element(4, 'div', null, ['bar', '']); } }, [], [], @@ -345,8 +336,7 @@ describe('query', () => { 'cmpt', function(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { - elToQuery = elementStart(1, 'div', null, ['foo', '']); - elementEnd(); + elToQuery = element(1, 'div', null, ['foo', '']); element(3, 'div'); } }, @@ -749,8 +739,7 @@ describe('query', () => { 'cmpt', function(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { - div = elementStart(1, 'div', ['child', ''], ['foo', 'child']); - elementEnd(); + div = element(1, 'div', ['child', ''], ['foo', 'child']); } }, [Child], [], @@ -784,8 +773,7 @@ describe('query', () => { 'cmpt', function(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { - div = elementStart(1, 'div', ['child', ''], ['foo', '', 'bar', 'child']); - elementEnd(); + div = element(1, 'div', ['child', ''], ['foo', '', 'bar', 'child']); } if (rf & RenderFlags.Update) { childInstance = loadDirective(0); @@ -889,8 +877,7 @@ describe('query', () => { if (rf & RenderFlags.Create) { container(1, (rf1: RenderFlags, ctx1: any) => { if (rf1 & RenderFlags.Create) { - elementStart(0, 'div', null, ['foo', '']); - elementEnd(); + element(0, 'div', null, ['foo', '']); } }, null, ['ngIf', '']); } @@ -944,8 +931,7 @@ describe('query', () => { if (rf & RenderFlags.Create) { container(1, (rf1: RenderFlags, row: NgForOfContext) => { if (rf1 & RenderFlags.Create) { - elementStart(0, 'div', null, ['foo', '']); - elementEnd(); + element(0, 'div', null, ['foo', '']); } if (rf1 & RenderFlags.Update) { elementProperty(0, 'id', bind(row.$implicit)); @@ -1013,21 +999,18 @@ describe('query', () => { if (rf & RenderFlags.Create) { container(1, (rf: RenderFlags, ctx: {idx: number}) => { if (rf & RenderFlags.Create) { - elementStart(0, 'div', null, ['foo', '']); - elementEnd(); + element(0, 'div', null, ['foo', '']); } if (rf & RenderFlags.Update) { elementProperty(0, 'id', bind('foo1_' + ctx.idx)); } }, null, []); - elementStart(2, 'div', ['id', 'middle'], ['foo', '']); - elementEnd(); + element(2, 'div', ['id', 'middle'], ['foo', '']); container(4, (rf: RenderFlags, ctx: {idx: number}) => { if (rf & RenderFlags.Create) { - elementStart(0, 'div', null, ['foo', '']); - elementEnd(); + element(0, 'div', null, ['foo', '']); } if (rf & RenderFlags.Update) { elementProperty(0, 'id', bind('foo2_' + ctx.idx)); @@ -1119,8 +1102,7 @@ describe('query', () => { if (rf & RenderFlags.Create) { container(1, (rf: RenderFlags, ctx: {idx: number, container_idx: number}) => { if (rf & RenderFlags.Create) { - elementStart(0, 'div', null, ['foo', '']); - elementEnd(); + element(0, 'div', null, ['foo', '']); } if (rf & RenderFlags.Update) { elementProperty(0, 'id', bind('foo_' + ctx.container_idx + '_' + ctx.idx)); @@ -1257,8 +1239,7 @@ describe('query', () => { let rf1 = embeddedViewStart(1); { if (rf1 & RenderFlags.Create) { - firstEl = elementStart(0, 'div', null, ['foo', '']); - elementEnd(); + firstEl = element(0, 'div', null, ['foo', '']); } } embeddedViewEnd(); @@ -1309,11 +1290,9 @@ describe('query', () => { 'cmpt', function(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { - firstEl = elementStart(1, 'span', null, ['foo', '']); - elementEnd(); + firstEl = element(1, 'span', null, ['foo', '']); container(3); - lastEl = elementStart(4, 'span', null, ['foo', '']); - elementEnd(); + lastEl = element(4, 'span', null, ['foo', '']); } if (rf & RenderFlags.Update) { containerRefreshStart(3); @@ -1322,8 +1301,7 @@ describe('query', () => { let rf1 = embeddedViewStart(1); { if (rf1 & RenderFlags.Create) { - viewEl = elementStart(0, 'div', null, ['foo', '']); - elementEnd(); + viewEl = element(0, 'div', null, ['foo', '']); } } embeddedViewEnd(); @@ -1389,8 +1367,7 @@ describe('query', () => { let rf0 = embeddedViewStart(0); { if (rf0 & RenderFlags.Create) { - firstEl = elementStart(0, 'div', null, ['foo', '']); - elementEnd(); + firstEl = element(0, 'div', null, ['foo', '']); } } embeddedViewEnd(); @@ -1399,8 +1376,7 @@ describe('query', () => { let rf1 = embeddedViewStart(1); { if (rf1 & RenderFlags.Create) { - lastEl = elementStart(0, 'span', null, ['foo', '']); - elementEnd(); + lastEl = element(0, 'span', null, ['foo', '']); } } embeddedViewEnd(); @@ -1462,8 +1438,7 @@ describe('query', () => { let rf0 = embeddedViewStart(0); { if (rf0 & RenderFlags.Create) { - firstEl = elementStart(0, 'div', null, ['foo', '']); - elementEnd(); + firstEl = element(0, 'div', null, ['foo', '']); container(2); } if (rf0 & RenderFlags.Update) { @@ -1473,8 +1448,7 @@ describe('query', () => { let rf2 = embeddedViewStart(0); { if (rf2) { - lastEl = elementStart(0, 'span', null, ['foo', '']); - elementEnd(); + lastEl = element(0, 'span', null, ['foo', '']); } } embeddedViewEnd(); @@ -1536,8 +1510,7 @@ describe('query', () => { function(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { container(2); - elementStart(3, 'span', null, ['foo', '']); - elementEnd(); + element(3, 'span', null, ['foo', '']); } if (rf & RenderFlags.Update) { containerRefreshStart(2); @@ -1546,8 +1519,7 @@ describe('query', () => { let rf0 = embeddedViewStart(0); { if (rf0 & RenderFlags.Create) { - elementStart(0, 'div', null, ['foo', '']); - elementEnd(); + element(0, 'div', null, ['foo', '']); } } embeddedViewEnd(); @@ -1630,8 +1602,7 @@ describe('query', () => { 'some-component-with-query', function(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { - elementStart(1, 'div', null, ['foo', '']); - elementEnd(); + element(1, 'div', null, ['foo', '']); } }, [], [], @@ -1655,8 +1626,7 @@ describe('query', () => { let rf1 = embeddedViewStart(1); { if (rf1 & RenderFlags.Create) { - elementStart(0, 'some-component-with-query'); - elementEnd(); + element(0, 'some-component-with-query'); } } embeddedViewEnd(); diff --git a/packages/core/test/render3/renderer_factory_spec.ts b/packages/core/test/render3/renderer_factory_spec.ts index 8edec6b303..e7fc46acdc 100644 --- a/packages/core/test/render3/renderer_factory_spec.ts +++ b/packages/core/test/render3/renderer_factory_spec.ts @@ -10,8 +10,8 @@ import {AnimationEvent} from '@angular/animations'; import {MockAnimationDriver, MockAnimationPlayer} from '@angular/animations/browser/testing'; import {RendererType2, ViewEncapsulation} from '../../src/core'; -import {defineComponent, detectChanges} from '../../src/render3/index'; -import {bind, container, containerRefreshEnd, containerRefreshStart, elementEnd, elementProperty, elementStart, embeddedViewEnd, embeddedViewStart, listener, text, tick} from '../../src/render3/instructions'; +import {defineComponent} from '../../src/render3/index'; +import {bind, container, containerRefreshEnd, containerRefreshStart, element, elementEnd, elementProperty, elementStart, embeddedViewEnd, embeddedViewStart, listener, text, tick} from '../../src/render3/instructions'; import {RenderFlags} from '../../src/render3/interfaces/definition'; import {createRendererType2} from '../../src/view/index'; @@ -67,8 +67,7 @@ describe('renderer factory lifecycle', () => { logs.push('function_with_component'); if (rf & RenderFlags.Create) { text(0, 'bar'); - elementStart(1, 'some-component'); - elementEnd(); + element(1, 'some-component'); } } @@ -227,12 +226,9 @@ describe('Renderer2 destruction hooks', () => { let rf1 = embeddedViewStart(1); { if (rf1 & RenderFlags.Create) { - elementStart(0, 'span'); - elementEnd(); - elementStart(1, 'span'); - elementEnd(); - elementStart(2, 'span'); - elementEnd(); + element(0, 'span'); + element(1, 'span'); + element(2, 'span'); } } embeddedViewEnd(); @@ -259,8 +255,7 @@ describe('Renderer2 destruction hooks', () => { selectors: [['simple']], template: function(rf: RenderFlags, ctx: SimpleComponent) { if (rf & RenderFlags.Create) { - elementStart(0, 'span'); - elementEnd(); + element(0, 'span'); } }, factory: () => new SimpleComponent, @@ -282,12 +277,9 @@ describe('Renderer2 destruction hooks', () => { let rf1 = embeddedViewStart(1); { if (rf1 & RenderFlags.Create) { - elementStart(0, 'simple'); - elementEnd(); - elementStart(1, 'span'); - elementEnd(); - elementStart(2, 'simple'); - elementEnd(); + element(0, 'simple'); + element(1, 'span'); + element(2, 'simple'); } } embeddedViewEnd(); diff --git a/packages/core/test/render3/view_container_ref_spec.ts b/packages/core/test/render3/view_container_ref_spec.ts index 0be79218fd..9923a2d1b7 100644 --- a/packages/core/test/render3/view_container_ref_spec.ts +++ b/packages/core/test/render3/view_container_ref_spec.ts @@ -63,8 +63,7 @@ describe('ViewContainerRef', () => { */ function createTemplate() { container(0, embeddedTemplate); - elementStart(1, 'p', ['vcref', '']); - elementEnd(); + element(1, 'p', ['vcref', '']); } function updateTemplate() { @@ -76,10 +75,8 @@ describe('ViewContainerRef', () => { it('should work on elements', () => { function createTemplate() { container(0, embeddedTemplate); - elementStart(1, 'header', ['vcref', '']); - elementEnd(); - elementStart(2, 'footer'); - elementEnd(); + element(1, 'header', ['vcref', '']); + element(2, 'footer'); } const fixture = new TemplateFixture(createTemplate, updateTemplate, [DirectiveWithVCRef]); @@ -108,10 +105,8 @@ describe('ViewContainerRef', () => { function createTemplate() { container(0, embeddedTemplate); - elementStart(1, 'header-cmp', ['vcref', '']); - elementEnd(); - elementStart(2, 'footer'); - elementEnd(); + element(1, 'header-cmp', ['vcref', '']); + element(2, 'footer'); } const fixture = new TemplateFixture( @@ -141,10 +136,8 @@ describe('ViewContainerRef', () => { function createTemplate() { container(0, embeddedTemplate); - elementStart(1, 'div', ['vcref', '']); - elementEnd(); - elementStart(2, 'div', ['vcref', '']); - elementEnd(); + element(1, 'div', ['vcref', '']); + element(2, 'div', ['vcref', '']); // for testing only: firstDir = loadDirective(0); @@ -170,8 +163,7 @@ describe('ViewContainerRef', () => { it('should work on containers', () => { function createTemplate() { container(0, embeddedTemplate, undefined, ['vcref', '']); - elementStart(1, 'footer'); - elementEnd(); + element(1, 'footer'); } function updateTemplate() { @@ -419,8 +411,7 @@ describe('ViewContainerRef', () => { if (rf & RenderFlags.Create) { container(0, (rf: RenderFlags, ctx: any) => { if (rf & RenderFlags.Create) { - elementStart(0, 'child'); - elementEnd(); + element(0, 'child'); pipe(1, 'starPipe'); reserveSlots(2); } @@ -429,11 +420,9 @@ describe('ViewContainerRef', () => { } }); pipe(1, 'starPipe'); - elementStart(2, 'child', ['vcref', '']); - elementEnd(); + element(2, 'child', ['vcref', '']); pipe(3, 'starPipe'); - elementStart(4, 'child'); - elementEnd(); + element(4, 'child'); reserveSlots(4); } if (rf & RenderFlags.Update) { @@ -1173,17 +1162,14 @@ describe('ViewContainerRef', () => { if (rf & RenderFlags.Create) { container(0, (rf: RenderFlags, ctx: any) => { if (rf & RenderFlags.Create) { - elementStart(0, 'hooks'); - elementEnd(); + element(0, 'hooks'); } if (rf & RenderFlags.Update) { elementProperty(0, 'name', bind('C')); } }); - elementStart(1, 'hooks', ['vcref', '']); - elementEnd(); - elementStart(2, 'hooks'); - elementEnd(); + element(1, 'hooks', ['vcref', '']); + element(2, 'hooks'); } if (rf & RenderFlags.Update) { const tplRef = getOrCreateTemplateRef(getOrCreateNodeInjectorForNode(load(0))); @@ -1273,10 +1259,8 @@ describe('ViewContainerRef', () => { factory: () => new SomeComponent(), template: (rf: RenderFlags, cmp: SomeComponent) => { if (rf & RenderFlags.Create) { - elementStart(0, 'hooks', ['vcref', '']); - elementEnd(); - elementStart(1, 'hooks'); - elementEnd(); + element(0, 'hooks', ['vcref', '']); + element(1, 'hooks'); } if (rf & RenderFlags.Update) { elementProperty(0, 'name', bind('A'));