honeymoose
/
angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor(ivy): use long instruction format in tests (#22055) 

PR Close #22055
This commit is contained in:
Victor Berchet 2018-02-06 16:11:20 -08:00 committed by Miško Hevery
parent 16dada28f5
commit 8feb8e5408
19 changed files with 1924 additions and 1874 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/core/src/render3/interfaces/query.ts
View File

@ -10,7 +10,6 @@ import {QueryList} from '../../linker';
import {Type} from '../../type'; import {Type} from '../../type';
import {LNode} from './node'; import {LNode} from './node';
/** Used for tracking queries (e.g. ViewChild, ContentChild). */ /** Used for tracking queries (e.g. ViewChild, ContentChild). */
export interface LQueries { export interface LQueries {
/** /**

19
packages/core/test/render3/basic_perf.ts
View File

@ -6,7 +6,8 @@
* found in the LICENSE file at https://angular.io/license * found in the LICENSE file at https://angular.io/license
*/ */
import {C, E, T, V, cR, cr, defineComponent, e, v} from '../../src/render3/index'; import {defineComponent} from '../../src/render3/index';
import {container, containerRefreshEnd, containerRefreshStart, elementEnd, elementStart, text, viewEnd, viewStart} from '../../src/render3/instructions';
import {document, renderComponent} from './render_util'; import {document, renderComponent} from './render_util';
@ -36,23 +37,23 @@ describe('iv perf test', () => {
tag: 'div', tag: 'div',
template: function Template(ctx: any, cm: any) { template: function Template(ctx: any, cm: any) {
if (cm) { if (cm) {
C(0); container(0);
} }
cR(0); containerRefreshStart(0);
{ {
for (let i = 0; i < count; i++) { for (let i = 0; i < count; i++) {
let cm0 = V(0); let cm0 = viewStart(0);
{ {
if (cm0) { if (cm0) {
E(0, 'div'); elementStart(0, 'div');
T(1, '-'); text(1, '-');
e(); elementEnd();
} }
} }
v(); viewEnd();
} }
} }
cr(); containerRefreshEnd();
}, },
factory: () => new Component factory: () => new Component
}); });

25
packages/core/test/render3/common_integration_spec.ts
View File

@ -8,7 +8,8 @@
import {NgForOfContext} from '@angular/common'; import {NgForOfContext} from '@angular/common';
import {C, E, T, b, cR, cr, defineComponent, e, p, r, t} from '../../src/render3/index'; import {defineComponent} from '../../src/render3/index';
import {bind, componentRefresh, container, containerRefreshEnd, containerRefreshStart, elementEnd, elementProperty, elementStart, text, textBinding} from '../../src/render3/instructions';
import {NgForOf} from './common_with_def'; import {NgForOf} from './common_with_def';
import {renderComponent, toHtml} from './render_util'; import {renderComponent, toHtml} from './render_util';
@ -28,22 +29,22 @@ describe('@angular/common integration', () => {
// </ul> // </ul>
template: (myApp: MyApp, cm: boolean) => { template: (myApp: MyApp, cm: boolean) => {
if (cm) { if (cm) {
E(0, 'ul'); elementStart(0, 'ul');
{ C(1, [NgForOf], liTemplate); } { container(1, [NgForOf], liTemplate); }
e(); elementEnd();
} }
p(1, 'ngForOf', b(myApp.items)); elementProperty(1, 'ngForOf', bind(myApp.items));
cR(1); containerRefreshStart(1);
r(2, 0); componentRefresh(2, 0);
cr(); containerRefreshEnd();
function liTemplate(row: NgForOfContext<string>, cm: boolean) { function liTemplate(row: NgForOfContext<string>, cm: boolean) {
if (cm) { if (cm) {
E(0, 'li'); elementStart(0, 'li');
{ T(1); } { text(1); }
e(); elementEnd();
} }
t(1, b(row.$implicit)); textBinding(1, bind(row.$implicit));
} }
} }
}); });

3
packages/core/test/render3/common_with_def.ts
View File

@ -10,7 +10,8 @@ import {NgForOf as NgForOfDef} from '@angular/common';
import {IterableDiffers} from '@angular/core'; import {IterableDiffers} from '@angular/core';
import {defaultIterableDiffers} from '../../src/change_detection/change_detection'; import {defaultIterableDiffers} from '../../src/change_detection/change_detection';
import {DirectiveType, InjectFlags, NgOnChangesFeature, defineDirective, inject, injectTemplateRef, injectViewContainerRef, m} from '../../src/render3/index'; import {DirectiveType, InjectFlags, NgOnChangesFeature, defineDirective, inject, injectTemplateRef, injectViewContainerRef} from '../../src/render3/index';
import {memory} from '../../src/render3/instructions';
export const NgForOf: DirectiveType<NgForOfDef<any>> = NgForOfDef as any; export const NgForOf: DirectiveType<NgForOfDef<any>> = NgForOfDef as any;

71
packages/core/test/render3/component_spec.ts
View File

@ -7,7 +7,8 @@
*/ */
import {ViewEncapsulation} from '../../src/core'; import {ViewEncapsulation} from '../../src/core';
import {C, E, T, V, b, cR, cr, defineComponent, e, markDirty, p, r, t, v} from '../../src/render3/index'; import {defineComponent, markDirty} from '../../src/render3/index';
import {bind, componentRefresh, container, containerRefreshEnd, containerRefreshStart, elementEnd, elementProperty, elementStart, text, textBinding, viewEnd, viewStart} from '../../src/render3/instructions';
import {createRendererType2} from '../../src/view/index'; import {createRendererType2} from '../../src/view/index';
import {getRendererFactory2} from './imported_renderer2'; import {getRendererFactory2} from './imported_renderer2';
@ -24,9 +25,9 @@ describe('component', () => {
tag: 'counter', tag: 'counter',
template: function(ctx: CounterComponent, cm: boolean) { template: function(ctx: CounterComponent, cm: boolean) {
if (cm) { if (cm) {
T(0); text(0);
} }
t(0, b(ctx.count)); textBinding(0, bind(ctx.count));
}, },
factory: () => new CounterComponent, factory: () => new CounterComponent,
inputs: {count: 'count'}, inputs: {count: 'count'},
@ -63,22 +64,22 @@ describe('component with a container', () => {
function showItems(ctx: {items: string[]}, cm: boolean) { function showItems(ctx: {items: string[]}, cm: boolean) {
if (cm) { if (cm) {
C(0); container(0);
} }
cR(0); containerRefreshStart(0);
{ {
for (const item of ctx.items) { for (const item of ctx.items) {
const cm0 = V(0); const cm0 = viewStart(0);
{ {
if (cm0) { if (cm0) {
T(0); text(0);
} }
t(0, b(item)); textBinding(0, bind(item));
} }
v(); viewEnd();
} }
} }
cr(); containerRefreshEnd();
} }
class WrapperComponent { class WrapperComponent {
@ -88,15 +89,15 @@ describe('component with a container', () => {
tag: 'wrapper', tag: 'wrapper',
template: function ChildComponentTemplate(ctx: {items: string[]}, cm: boolean) { template: function ChildComponentTemplate(ctx: {items: string[]}, cm: boolean) {
if (cm) { if (cm) {
C(0); container(0);
} }
cR(0); containerRefreshStart(0);
{ {
const cm0 = V(0); const cm0 = viewStart(0);
{ showItems({items: ctx.items}, cm0); } { showItems({items: ctx.items}, cm0); }
v(); viewEnd();
} }
cr(); containerRefreshEnd();
}, },
factory: () => new WrapperComponent, factory: () => new WrapperComponent,
inputs: {items: 'items'} inputs: {items: 'items'}
@ -105,12 +106,12 @@ describe('component with a container', () => {
function template(ctx: {items: string[]}, cm: boolean) { function template(ctx: {items: string[]}, cm: boolean) {
if (cm) { if (cm) {
E(0, WrapperComponent); elementStart(0, WrapperComponent);
e(); elementEnd();
} }
p(0, 'items', b(ctx.items)); elementProperty(0, 'items', bind(ctx.items));
WrapperComponent.ngComponentDef.h(1, 0); WrapperComponent.ngComponentDef.h(1, 0);
r(1, 0); componentRefresh(1, 0);
} }
it('should re-render on input change', () => { it('should re-render on input change', () => {
@ -132,11 +133,11 @@ describe('encapsulation', () => {
tag: 'wrapper', tag: 'wrapper',
template: function(ctx: WrapperComponent, cm: boolean) { template: function(ctx: WrapperComponent, cm: boolean) {
if (cm) { if (cm) {
E(0, EncapsulatedComponent); elementStart(0, EncapsulatedComponent);
e(); elementEnd();
} }
EncapsulatedComponent.ngComponentDef.h(1, 0); EncapsulatedComponent.ngComponentDef.h(1, 0);
r(1, 0); componentRefresh(1, 0);
}, },
factory: () => new WrapperComponent, factory: () => new WrapperComponent,
}); });
@ -148,12 +149,12 @@ describe('encapsulation', () => {
tag: 'encapsulated', tag: 'encapsulated',
template: function(ctx: EncapsulatedComponent, cm: boolean) { template: function(ctx: EncapsulatedComponent, cm: boolean) {
if (cm) { if (cm) {
T(0, 'foo'); text(0, 'foo');
E(1, LeafComponent); elementStart(1, LeafComponent);
e(); elementEnd();
} }
LeafComponent.ngComponentDef.h(2, 1); LeafComponent.ngComponentDef.h(2, 1);
r(2, 1); componentRefresh(2, 1);
}, },
factory: () => new EncapsulatedComponent, factory: () => new EncapsulatedComponent,
rendererType: rendererType:
@ -167,9 +168,9 @@ describe('encapsulation', () => {
tag: 'leaf', tag: 'leaf',
template: function(ctx: LeafComponent, cm: boolean) { template: function(ctx: LeafComponent, cm: boolean) {
if (cm) { if (cm) {
E(0, 'span'); elementStart(0, 'span');
{ T(1, 'bar'); } { text(1, 'bar'); }
e(); elementEnd();
} }
}, },
factory: () => new LeafComponent, factory: () => new LeafComponent,
@ -197,11 +198,11 @@ describe('encapsulation', () => {
tag: 'wrapper', tag: 'wrapper',
template: function(ctx: WrapperComponentWith, cm: boolean) { template: function(ctx: WrapperComponentWith, cm: boolean) {
if (cm) { if (cm) {
E(0, LeafComponentwith); elementStart(0, LeafComponentwith);
e(); elementEnd();
} }
LeafComponentwith.ngComponentDef.h(1, 0); LeafComponentwith.ngComponentDef.h(1, 0);
r(1, 0); componentRefresh(1, 0);
}, },
factory: () => new WrapperComponentWith, factory: () => new WrapperComponentWith,
rendererType: rendererType:
@ -215,9 +216,9 @@ describe('encapsulation', () => {
tag: 'leaf', tag: 'leaf',
template: function(ctx: LeafComponentwith, cm: boolean) { template: function(ctx: LeafComponentwith, cm: boolean) {
if (cm) { if (cm) {
E(0, 'span'); elementStart(0, 'span');
{ T(1, 'bar'); } { text(1, 'bar'); }
e(); elementEnd();
} }
}, },
factory: () => new LeafComponentwith, factory: () => new LeafComponentwith,

618
packages/core/test/render3/content_spec.ts
View File

File diff suppressed because it is too large Load Diff

330
packages/core/test/render3/control_flow_spec.ts
View File

@ -6,7 +6,7 @@
* found in the LICENSE file at https://angular.io/license * found in the LICENSE file at https://angular.io/license
*/ */
import {C, E, T, V, b, cR, cr, e, t, v} from '../../src/render3/index'; import {bind, container, containerRefreshEnd, containerRefreshStart, elementEnd, elementStart, text, textBinding, viewEnd, viewStart} from '../../src/render3/instructions';
import {renderToHtml} from './render_util'; import {renderToHtml} from './render_util';
@ -16,26 +16,26 @@ describe('JS control flow', () => {
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, 'div'); elementStart(0, 'div');
{ C(1); } { container(1); }
e(); elementEnd();
} }
cR(1); containerRefreshStart(1);
{ {
if (ctx.condition) { if (ctx.condition) {
let cm1 = V(1); let cm1 = viewStart(1);
{ {
if (cm1) { if (cm1) {
E(0, 'span'); elementStart(0, 'span');
{ T(1); } { text(1); }
e(); elementEnd();
} }
t(1, b(ctx.message)); textBinding(1, bind(ctx.message));
} }
v(); viewEnd();
} }
} }
cr(); containerRefreshEnd();
} }
expect(renderToHtml(Template, ctx)).toEqual('<div><span>Hello</span></div>'); expect(renderToHtml(Template, ctx)).toEqual('<div><span>Hello</span></div>');
@ -64,38 +64,38 @@ describe('JS control flow', () => {
*/ */
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, 'div'); elementStart(0, 'div');
{ C(1); } { container(1); }
e(); elementEnd();
} }
cR(1); containerRefreshStart(1);
{ {
if (ctx.condition) { if (ctx.condition) {
let cm1 = V(1); let cm1 = viewStart(1);
{ {
if (cm1) { if (cm1) {
E(0, 'span'); elementStart(0, 'span');
{ C(1); } { container(1); }
e(); elementEnd();
} }
cR(1); containerRefreshStart(1);
{ {
if (ctx.condition2) { if (ctx.condition2) {
let cm2 = V(2); let cm2 = viewStart(2);
{ {
if (cm2) { if (cm2) {
T(0, 'Hello'); text(0, 'Hello');
} }
} }
v(); viewEnd();
} }
} }
cr(); containerRefreshEnd();
} }
v(); viewEnd();
} }
} }
cr(); containerRefreshEnd();
} }
expect(renderToHtml(Template, ctx)).toEqual('<div><span>Hello</span></div>'); expect(renderToHtml(Template, ctx)).toEqual('<div><span>Hello</span></div>');
@ -128,37 +128,37 @@ describe('JS control flow', () => {
it('should work with containers with views as parents', () => { it('should work with containers with views as parents', () => {
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, 'div'); elementStart(0, 'div');
{ T(1, 'hello'); } { text(1, 'hello'); }
e(); elementEnd();
C(2); container(2);
} }
cR(2); containerRefreshStart(2);
{ {
if (ctx.condition1) { if (ctx.condition1) {
let cm0 = V(0); let cm0 = viewStart(0);
{ {
if (cm0) { if (cm0) {
C(0); container(0);
} }
cR(0); containerRefreshStart(0);
{ {
if (ctx.condition2) { if (ctx.condition2) {
let cm0 = V(0); let cm0 = viewStart(0);
{ {
if (cm0) { if (cm0) {
T(0, 'world'); text(0, 'world');
} }
} }
v(); viewEnd();
} }
} }
cr(); containerRefreshEnd();
} }
v(); viewEnd();
} }
} }
cr(); containerRefreshEnd();
} }
expect(renderToHtml(Template, {condition1: true, condition2: true})) expect(renderToHtml(Template, {condition1: true, condition2: true}))
@ -173,26 +173,26 @@ describe('JS control flow', () => {
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, 'ul'); elementStart(0, 'ul');
{ C(1); } { container(1); }
e(); elementEnd();
} }
cR(1); containerRefreshStart(1);
{ {
for (let i = 0; i < ctx.data.length; i++) { for (let i = 0; i < ctx.data.length; i++) {
let cm1 = V(1); let cm1 = viewStart(1);
{ {
if (cm1) { if (cm1) {
E(0, 'li'); elementStart(0, 'li');
{ T(1); } { text(1); }
e(); elementEnd();
} }
t(1, b(ctx.data[i])); textBinding(1, bind(ctx.data[i]));
} }
v(); viewEnd();
} }
} }
cr(); containerRefreshEnd();
} }
expect(renderToHtml(Template, ctx)).toEqual('<ul><li>a</li><li>b</li><li>c</li></ul>'); expect(renderToHtml(Template, ctx)).toEqual('<ul><li>a</li><li>b</li><li>c</li></ul>');
@ -219,36 +219,36 @@ describe('JS control flow', () => {
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, 'ul'); elementStart(0, 'ul');
{ C(1); } { container(1); }
e(); elementEnd();
} }
cR(1); containerRefreshStart(1);
{ {
for (let i = 0; i < ctx.data[0].length; i++) { for (let i = 0; i < ctx.data[0].length; i++) {
let cm1 = V(1); let cm1 = viewStart(1);
{ {
if (cm1) { if (cm1) {
E(0, 'li'); elementStart(0, 'li');
{ C(1); } { container(1); }
e(); elementEnd();
} }
cR(1); containerRefreshStart(1);
{ {
ctx.data[1].forEach((value: string, ind: number) => { ctx.data[1].forEach((value: string, ind: number) => {
if (V(2)) { if (viewStart(2)) {
T(0); text(0);
} }
t(0, b(ctx.data[0][i] + value)); textBinding(0, bind(ctx.data[0][i] + value));
v(); viewEnd();
}); });
} }
cr(); containerRefreshEnd();
} }
v(); viewEnd();
} }
} }
cr(); containerRefreshEnd();
} }
expect(renderToHtml(Template, ctx)).toEqual('<ul><li>aman</li><li>bmbn</li><li>cmcn</li></ul>'); expect(renderToHtml(Template, ctx)).toEqual('<ul><li>aman</li><li>bmbn</li><li>cmcn</li></ul>');
@ -274,43 +274,43 @@ describe('JS control flow', () => {
*/ */
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, 'div'); elementStart(0, 'div');
{ {
T(1, 'Before'); text(1, 'Before');
C(2); container(2);
T(3, 'After'); text(3, 'After');
} }
e(); elementEnd();
} }
cR(2); containerRefreshStart(2);
{ {
for (let i = 0; i < ctx.cafes.length; i++) { for (let i = 0; i < ctx.cafes.length; i++) {
let cm1 = V(1); let cm1 = viewStart(1);
{ {
if (cm1) { if (cm1) {
E(0, 'h2'); elementStart(0, 'h2');
{ T(1); } { text(1); }
e(); elementEnd();
C(2); container(2);
T(3, '-'); text(3, '-');
} }
t(1, b(ctx.cafes[i].name)); textBinding(1, bind(ctx.cafes[i].name));
cR(2); containerRefreshStart(2);
{ {
for (let j = 0; j < ctx.cafes[i].entrees.length; j++) { for (let j = 0; j < ctx.cafes[i].entrees.length; j++) {
if (V(1)) { if (viewStart(1)) {
T(0); text(0);
} }
t(0, b(ctx.cafes[i].entrees[j])); textBinding(0, bind(ctx.cafes[i].entrees[j]));
v(); viewEnd();
} }
} }
cr(); containerRefreshEnd();
} }
v(); viewEnd();
} }
} }
cr(); containerRefreshEnd();
} }
const ctx = { const ctx = {
@ -354,60 +354,60 @@ describe('JS control flow', () => {
*/ */
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, 'div'); elementStart(0, 'div');
{ {
T(1, 'Before'); text(1, 'Before');
C(2); container(2);
T(3, 'After'); text(3, 'After');
} }
e(); elementEnd();
} }
cR(2); containerRefreshStart(2);
{ {
for (let i = 0; i < ctx.cafes.length; i++) { for (let i = 0; i < ctx.cafes.length; i++) {
let cm1 = V(1); let cm1 = viewStart(1);
{ {
if (cm1) { if (cm1) {
E(0, 'h2'); elementStart(0, 'h2');
{ T(1); } { text(1); }
e(); elementEnd();
C(2); container(2);
T(3, '-'); text(3, '-');
} }
t(1, b(ctx.cafes[i].name)); textBinding(1, bind(ctx.cafes[i].name));
cR(2); containerRefreshStart(2);
{ {
for (let j = 0; j < ctx.cafes[i].entrees.length; j++) { for (let j = 0; j < ctx.cafes[i].entrees.length; j++) {
let cm1 = V(1); let cm1 = viewStart(1);
{ {
if (cm1) { if (cm1) {
E(0, 'h3'); elementStart(0, 'h3');
{ T(1); } { text(1); }
e(); elementEnd();
C(2); container(2);
} }
t(1, b(ctx.cafes[i].entrees[j].name)); textBinding(1, bind(ctx.cafes[i].entrees[j].name));
cR(2); containerRefreshStart(2);
{ {
for (let k = 0; k < ctx.cafes[i].entrees[j].foods.length; k++) { for (let k = 0; k < ctx.cafes[i].entrees[j].foods.length; k++) {
if (V(1)) { if (viewStart(1)) {
T(0); text(0);
} }
t(0, b(ctx.cafes[i].entrees[j].foods[k])); textBinding(0, bind(ctx.cafes[i].entrees[j].foods[k]));
v(); viewEnd();
} }
} }
cr(); containerRefreshEnd();
} }
v(); viewEnd();
} }
} }
cr(); containerRefreshEnd();
} }
v(); viewEnd();
} }
} }
cr(); containerRefreshEnd();
} }
const ctx = { const ctx = {
@ -444,35 +444,35 @@ describe('JS control flow', () => {
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, 'div'); elementStart(0, 'div');
{ C(1); } { container(1); }
e(); elementEnd();
} }
cR(1); containerRefreshStart(1);
{ {
if (ctx.condition) { if (ctx.condition) {
let cm1 = V(1); let cm1 = viewStart(1);
{ {
if (cm1) { if (cm1) {
E(0, 'span'); elementStart(0, 'span');
{ T(1, 'Hello'); } { text(1, 'Hello'); }
e(); elementEnd();
} }
} }
v(); viewEnd();
} else { } else {
let cm2 = V(2); let cm2 = viewStart(2);
{ {
if (cm2) { if (cm2) {
E(0, 'div'); elementStart(0, 'div');
{ T(1, 'Goodbye'); } { text(1, 'Goodbye'); }
e(); elementEnd();
} }
} }
v(); viewEnd();
} }
} }
cr(); containerRefreshEnd();
} }
expect(renderToHtml(Template, ctx)).toEqual('<div><span>Hello</span></div>'); expect(renderToHtml(Template, ctx)).toEqual('<div><span>Hello</span></div>');
@ -492,28 +492,28 @@ describe('JS for loop', () => {
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, 'div'); elementStart(0, 'div');
{ C(1); } { container(1); }
e(); elementEnd();
} }
cR(1); containerRefreshStart(1);
{ {
for (let i = 0; i < ctx.data1.length; i++) { for (let i = 0; i < ctx.data1.length; i++) {
if (V(1)) { if (viewStart(1)) {
T(0); text(0);
} }
t(0, b(ctx.data1[i])); textBinding(0, bind(ctx.data1[i]));
v(); viewEnd();
} }
for (let j = 0; j < ctx.data2.length; j++) { for (let j = 0; j < ctx.data2.length; j++) {
if (V(2)) { if (viewStart(2)) {
T(0); text(0);
} }
t(0, b(ctx.data2[j])); textBinding(0, bind(ctx.data2[j]));
v(); viewEnd();
} }
} }
cr(); containerRefreshEnd();
} }
expect(renderToHtml(Template, ctx)).toEqual('<div>abc12</div>'); expect(renderToHtml(Template, ctx)).toEqual('<div>abc12</div>');
@ -536,38 +536,38 @@ describe('function calls', () => {
function spanify(ctx: {message: string | null}, cm: boolean) { function spanify(ctx: {message: string | null}, cm: boolean) {
const message = ctx.message; const message = ctx.message;
if (cm) { if (cm) {
E(0, 'span'); elementStart(0, 'span');
{ T(1); } { text(1); }
e(); elementEnd();
} }
t(1, b(message)); textBinding(1, bind(message));
} }
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, 'div'); elementStart(0, 'div');
{ {
T(1, 'Before'); text(1, 'Before');
C(2); container(2);
C(3); container(3);
T(4, 'After'); text(4, 'After');
} }
e(); elementEnd();
} }
cR(2); containerRefreshStart(2);
{ {
let cm0 = V(0); let cm0 = viewStart(0);
{ spanify({message: ctx.data[0]}, cm0); } { spanify({message: ctx.data[0]}, cm0); }
v(); viewEnd();
} }
cr(); containerRefreshEnd();
cR(3); containerRefreshStart(3);
{ {
let cm0 = V(0); let cm0 = viewStart(0);
{ spanify({message: ctx.data[1]}, cm0); } { spanify({message: ctx.data[1]}, cm0); }
v(); viewEnd();
} }
cr(); containerRefreshEnd();
} }
expect(renderToHtml(Template, ctx)) expect(renderToHtml(Template, ctx))

77
packages/core/test/render3/di_spec.ts
View File

@ -10,8 +10,8 @@ import {ElementRef, TemplateRef, ViewContainerRef} from '@angular/core';
import {defineComponent} from '../../src/render3/definition'; import {defineComponent} from '../../src/render3/definition';
import {InjectFlags, bloomAdd, bloomFindPossibleInjector, getOrCreateNodeInjector} from '../../src/render3/di'; import {InjectFlags, bloomAdd, bloomFindPossibleInjector, getOrCreateNodeInjector} from '../../src/render3/di';
import {C, E, PublicFeature, T, V, b, b2, cR, cr, defineDirective, e, inject, injectElementRef, injectTemplateRef, injectViewContainerRef, m, t, v} from '../../src/render3/index'; import {PublicFeature, defineDirective, inject, injectElementRef, injectTemplateRef, injectViewContainerRef} from '../../src/render3/index';
import {createLNode, createLView, createTView, enterView, leaveView} from '../../src/render3/instructions'; import {bind, bind2, container, containerRefreshEnd, containerRefreshStart, createLNode, createLView, createTView, elementEnd, elementStart, enterView, leaveView, memory, text, textBinding, viewEnd, viewStart} from '../../src/render3/instructions';
import {LInjector} from '../../src/render3/interfaces/injector'; import {LInjector} from '../../src/render3/interfaces/injector';
import {LNodeFlags} from '../../src/render3/interfaces/node'; import {LNodeFlags} from '../../src/render3/interfaces/node';
@ -27,11 +27,11 @@ describe('di', () => {
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, 'div', null, [Directive]); elementStart(0, 'div', null, [Directive]);
{ T(2); } { text(2); }
e(); elementEnd();
} }
t(2, b(m<Directive>(1).value)); textBinding(2, bind(memory<Directive>(1).value));
} }
expect(renderToHtml(Template, {})).toEqual('<div>Created</div>'); expect(renderToHtml(Template, {})).toEqual('<div>Created</div>');
@ -63,15 +63,15 @@ describe('di', () => {
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, 'div', null, [DirectiveA]); elementStart(0, 'div', null, [DirectiveA]);
{ {
E(2, 'span', null, [DirectiveB, DirectiveC]); elementStart(2, 'span', null, [DirectiveB, DirectiveC]);
{ T(5); } { text(5); }
e(); elementEnd();
} }
e(); elementEnd();
} }
t(5, b(m<DirectiveC>(4).value)); textBinding(5, bind(memory<DirectiveC>(4).value));
} }
expect(renderToHtml(Template, {})).toEqual('<div><span>AB</span></div>'); expect(renderToHtml(Template, {})).toEqual('<div><span>AB</span></div>');
@ -105,11 +105,13 @@ describe('di', () => {
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, 'div', null, [Directive, DirectiveSameInstance]); elementStart(0, 'div', null, [Directive, DirectiveSameInstance]);
{ T(3); } { text(3); }
e(); elementEnd();
} }
t(3, b2('', m<Directive>(1).value, '-', m<DirectiveSameInstance>(2).value, '')); textBinding(
3,
bind2('', memory<Directive>(1).value, '-', memory<DirectiveSameInstance>(2).value, ''));
} }
expect(renderToHtml(Template, {})).toEqual('<div>ElementRef-true</div>'); expect(renderToHtml(Template, {})).toEqual('<div>ElementRef-true</div>');
@ -144,10 +146,12 @@ describe('di', () => {
function Template(ctx: any, cm: any) { function Template(ctx: any, cm: any) {
if (cm) { if (cm) {
C(0, [Directive, DirectiveSameInstance], function() {}); container(0, [Directive, DirectiveSameInstance], function() {});
T(3); text(3);
} }
t(3, b2('', m<Directive>(1).value, '-', m<DirectiveSameInstance>(2).value, '')); textBinding(
3,
bind2('', memory<Directive>(1).value, '-', memory<DirectiveSameInstance>(2).value, ''));
} }
expect(renderToHtml(Template, {})).toEqual('TemplateRef-true'); expect(renderToHtml(Template, {})).toEqual('TemplateRef-true');
@ -181,11 +185,13 @@ describe('di', () => {
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, 'div', null, [Directive, DirectiveSameInstance]); elementStart(0, 'div', null, [Directive, DirectiveSameInstance]);
{ T(3); } { text(3); }
e(); elementEnd();
} }
t(3, b2('', m<Directive>(1).value, '-', m<DirectiveSameInstance>(2).value, '')); textBinding(
3,
bind2('', memory<Directive>(1).value, '-', memory<DirectiveSameInstance>(2).value, ''));
} }
expect(renderToHtml(Template, {})).toEqual('<div>ViewContainerRef-true</div>'); expect(renderToHtml(Template, {})).toEqual('<div>ViewContainerRef-true</div>');
@ -285,21 +291,24 @@ describe('di', () => {
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, 'div', null, [ParentDirective]); elementStart(0, 'div', null, [ParentDirective]);
{ C(2); } { container(2); }
e(); elementEnd();
} }
cR(2); containerRefreshStart(2);
{ {
if (V(0)) { if (viewStart(0)) {
E(0, 'span', null, [ChildDirective, Child2Directive]); elementStart(0, 'span', null, [ChildDirective, Child2Directive]);
{ T(3); } { text(3); }
e(); elementEnd();
} }
t(3, b2('', m<ChildDirective>(1).value, '-', m<Child2Directive>(2).value, '')); textBinding(
v(); 3,
bind2(
'', memory<ChildDirective>(1).value, '-', memory<Child2Directive>(2).value, ''));
viewEnd();
} }
cr(); containerRefreshEnd();
} }
expect(renderToHtml(Template, {})).toEqual('<div><span>ParentDirective-true</span></div>'); expect(renderToHtml(Template, {})).toEqual('<div><span>ParentDirective-true</span></div>');

12
packages/core/test/render3/directive_spec.ts
View File

@ -6,7 +6,8 @@
* found in the LICENSE file at https://angular.io/license * found in the LICENSE file at https://angular.io/license
*/ */
import {E, b, defineDirective, e, m, p, r} from '../../src/render3/index'; import {defineDirective} from '../../src/render3/index';
import {bind, componentRefresh, elementEnd, elementProperty, elementStart, memory} from '../../src/render3/instructions';
import {renderToHtml} from './render_util'; import {renderToHtml} from './render_util';
@ -23,18 +24,19 @@ describe('directive', () => {
type: Directive, type: Directive,
factory: () => directiveInstance = new Directive, factory: () => directiveInstance = new Directive,
hostBindings: (directiveIndex: number, elementIndex: number) => { hostBindings: (directiveIndex: number, elementIndex: number) => {
p(elementIndex, 'className', b(m<Directive>(directiveIndex).klass)); elementProperty(
elementIndex, 'className', bind(memory<Directive>(directiveIndex).klass));
} }
}); });
} }
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, 'span', null, [Directive]); elementStart(0, 'span', null, [Directive]);
e(); elementEnd();
} }
Directive.ngDirectiveDef.h(1, 0); Directive.ngDirectiveDef.h(1, 0);
r(1, 0); componentRefresh(1, 0);
} }
expect(renderToHtml(Template, {})).toEqual('<span class="foo"></span>'); expect(renderToHtml(Template, {})).toEqual('<span class="foo"></span>');

139
packages/core/test/render3/exports_spec.ts
View File

@ -6,7 +6,8 @@
* found in the LICENSE file at https://angular.io/license * found in the LICENSE file at https://angular.io/license
*/ */
import {C, E, T, V, a, b, cR, cr, defineComponent, defineDirective, e, k, m, p, t, v} from '../../src/render3/index'; import {defineComponent, defineDirective} from '../../src/render3/index';
import {bind, container, containerRefreshEnd, containerRefreshStart, elementAttribute, elementClass, elementEnd, elementProperty, elementStart, memory, text, textBinding, viewEnd, viewStart} from '../../src/render3/instructions';
import {renderToHtml} from './render_util'; import {renderToHtml} from './render_util';
@ -16,12 +17,12 @@ describe('exports', () => {
/** <input value="one" #myInput> {{ myInput.value }} */ /** <input value="one" #myInput> {{ myInput.value }} */
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, 'input', ['value', 'one']); elementStart(0, 'input', ['value', 'one']);
e(); elementEnd();
T(1); text(1);
} }
let myInput = E(0); let myInput = elementStart(0);
t(1, (myInput as any).value); textBinding(1, (myInput as any).value);
} }
expect(renderToHtml(Template, {})).toEqual('<input value="one">one'); expect(renderToHtml(Template, {})).toEqual('<input value="one">one');
@ -32,11 +33,11 @@ describe('exports', () => {
/** <comp #myComp></comp> {{ myComp.name }} */ /** <comp #myComp></comp> {{ myComp.name }} */
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, MyComponent); elementStart(0, MyComponent);
e(); elementEnd();
T(2); text(2);
} }
t(2, m<MyComponent>(1).name); textBinding(2, memory<MyComponent>(1).name);
} }
class MyComponent { class MyComponent {
@ -77,12 +78,12 @@ describe('exports', () => {
/** <comp #myComp></comp> <div [myDir]="myComp"></div> */ /** <comp #myComp></comp> <div [myDir]="myComp"></div> */
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, MyComponent); elementStart(0, MyComponent);
e(); elementEnd();
E(2, 'div', null, [MyDir]); elementStart(2, 'div', null, [MyDir]);
e(); elementEnd();
} }
p(2, 'myDir', b(m<MyComponent>(1))); elementProperty(2, 'myDir', bind(memory<MyComponent>(1)));
} }
renderToHtml(Template, {}); renderToHtml(Template, {});
@ -94,11 +95,11 @@ describe('exports', () => {
/** <div someDir #myDir="someDir"></div> {{ myDir.name }} */ /** <div someDir #myDir="someDir"></div> {{ myDir.name }} */
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, 'div', null, [SomeDir]); elementStart(0, 'div', null, [SomeDir]);
e(); elementEnd();
T(2); text(2);
} }
t(2, m<SomeDir>(1).name); textBinding(2, memory<SomeDir>(1).name);
} }
class SomeDir { class SomeDir {
@ -114,12 +115,12 @@ describe('exports', () => {
/** {{ myInput.value}} <input value="one" #myInput> */ /** {{ myInput.value}} <input value="one" #myInput> */
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
T(0); text(0);
E(1, 'input', ['value', 'one']); elementStart(1, 'input', ['value', 'one']);
e(); elementEnd();
} }
let myInput = E(1); let myInput = elementStart(1);
t(0, b((myInput as any).value)); textBinding(0, bind((myInput as any).value));
} }
expect(renderToHtml(Template, {})).toEqual('one<input value="one">'); expect(renderToHtml(Template, {})).toEqual('one<input value="one">');
@ -130,13 +131,13 @@ describe('exports', () => {
/** <div [title]="myInput.value"</div> <input value="one" #myInput> */ /** <div [title]="myInput.value"</div> <input value="one" #myInput> */
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, 'div'); elementStart(0, 'div');
e(); elementEnd();
E(1, 'input', ['value', 'one']); elementStart(1, 'input', ['value', 'one']);
e(); elementEnd();
} }
let myInput = E(1); let myInput = elementStart(1);
p(0, 'title', b(myInput && (myInput as any).value)); elementProperty(0, 'title', bind(myInput && (myInput as any).value));
} }
expect(renderToHtml(Template, {})).toEqual('<div title="one"></div><input value="one">'); expect(renderToHtml(Template, {})).toEqual('<div title="one"></div><input value="one">');
@ -146,13 +147,13 @@ describe('exports', () => {
/** <div [attr.aria-label]="myInput.value"</div> <input value="one" #myInput> */ /** <div [attr.aria-label]="myInput.value"</div> <input value="one" #myInput> */
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, 'div'); elementStart(0, 'div');
e(); elementEnd();
E(1, 'input', ['value', 'one']); elementStart(1, 'input', ['value', 'one']);
e(); elementEnd();
} }
let myInput = E(1); let myInput = elementStart(1);
a(0, 'aria-label', b(myInput && (myInput as any).value)); elementAttribute(0, 'aria-label', bind(myInput && (myInput as any).value));
} }
expect(renderToHtml(Template, {})).toEqual('<div aria-label="one"></div><input value="one">'); expect(renderToHtml(Template, {})).toEqual('<div aria-label="one"></div><input value="one">');
@ -162,13 +163,13 @@ describe('exports', () => {
/** <div [class.red]="myInput.checked"</div> <input type="checkbox" checked #myInput> */ /** <div [class.red]="myInput.checked"</div> <input type="checkbox" checked #myInput> */
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, 'div'); elementStart(0, 'div');
e(); elementEnd();
E(1, 'input', ['type', 'checkbox', 'checked', 'true']); elementStart(1, 'input', ['type', 'checkbox', 'checked', 'true']);
e(); elementEnd();
} }
let myInput = E(1); let myInput = elementStart(1);
k(0, 'red', b(myInput && (myInput as any).checked)); elementClass(0, 'red', bind(myInput && (myInput as any).checked));
} }
expect(renderToHtml(Template, {})) expect(renderToHtml(Template, {}))
@ -203,12 +204,12 @@ describe('exports', () => {
/** <div [myDir]="myComp"></div><comp #myComp></comp> */ /** <div [myDir]="myComp"></div><comp #myComp></comp> */
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, 'div', null, [MyDir]); elementStart(0, 'div', null, [MyDir]);
e(); elementEnd();
E(2, MyComponent); elementStart(2, MyComponent);
e(); elementEnd();
} }
p(0, 'myDir', b(m<MyComponent>(3))); elementProperty(0, 'myDir', bind(memory<MyComponent>(3)));
} }
renderToHtml(Template, {}); renderToHtml(Template, {});
@ -220,17 +221,17 @@ describe('exports', () => {
*/ */
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
T(0); text(0);
T(1); text(1);
E(2, MyComponent); elementStart(2, MyComponent);
e(); elementEnd();
E(4, 'input', ['value', 'one']); elementStart(4, 'input', ['value', 'one']);
e(); elementEnd();
} }
let myInput = E(4); let myInput = elementStart(4);
let myComp = m(3) as MyComponent; let myComp = memory(3) as MyComponent;
t(0, b(myInput && (myInput as any).value)); textBinding(0, bind(myInput && (myInput as any).value));
t(1, b(myComp && myComp.name)); textBinding(1, bind(myComp && myComp.name));
} }
let myComponent: MyComponent; let myComponent: MyComponent;
@ -253,27 +254,27 @@ describe('exports', () => {
it('should work inside a view container', () => { it('should work inside a view container', () => {
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, 'div'); elementStart(0, 'div');
{ C(1); } { container(1); }
e(); elementEnd();
} }
cR(1); containerRefreshStart(1);
{ {
if (ctx.condition) { if (ctx.condition) {
let cm1 = V(1); let cm1 = viewStart(1);
{ {
if (cm1) { if (cm1) {
T(0); text(0);
E(1, 'input', ['value', 'one']); elementStart(1, 'input', ['value', 'one']);
e(); elementEnd();
} }
let myInput = E(1); let myInput = elementStart(1);
t(0, b(myInput && (myInput as any).value)); textBinding(0, bind(myInput && (myInput as any).value));
} }
v(); viewEnd();
} }
} }
cr(); containerRefreshEnd();
} }
expect(renderToHtml(Template, { expect(renderToHtml(Template, {

422
packages/core/test/render3/integration_spec.ts
View File

@ -6,8 +6,8 @@
* found in the LICENSE file at https://angular.io/license * found in the LICENSE file at https://angular.io/license
*/ */
import {C, E, NC, P, T, V, a, b, b1, b2, b3, b4, b5, b6, b7, b8, bV, cR, cr, defineComponent, e, k, m, p, pD, r, s, t, v} from '../../src/render3/index'; import {defineComponent} from '../../src/render3/index';
import {NO_CHANGE} from '../../src/render3/instructions'; import {NO_CHANGE, bind, bind1, bind2, bind3, bind4, bind5, bind6, bind7, bind8, bindV, componentRefresh, container, containerRefreshEnd, containerRefreshStart, elementAttribute, elementClass, elementEnd, elementProperty, elementStart, elementStyle, memory, projection, projectionDef, text, textBinding, viewEnd, viewStart} from '../../src/render3/instructions';
import {containerEl, renderToHtml} from './render_util'; import {containerEl, renderToHtml} from './render_util';
@ -20,9 +20,9 @@ describe('render3 integration test', () => {
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, 'span', ['title', 'Hello']); elementStart(0, 'span', ['title', 'Hello']);
{ T(1, 'Greetings'); } { text(1, 'Greetings'); }
e(); elementEnd();
} }
} }
}); });
@ -33,11 +33,11 @@ describe('render3 integration test', () => {
function Template(name: string, cm: boolean) { function Template(name: string, cm: boolean) {
if (cm) { if (cm) {
E(0, 'h1'); elementStart(0, 'h1');
{ T(1); } { text(1); }
e(); elementEnd();
} }
t(1, b1('Hello, ', name, '!')); textBinding(1, bind1('Hello, ', name, '!'));
} }
}); });
}); });
@ -46,9 +46,9 @@ describe('render3 integration test', () => {
it('should render "undefined" as "" when used with `bind()`', () => { it('should render "undefined" as "" when used with `bind()`', () => {
function Template(name: string, cm: boolean) { function Template(name: string, cm: boolean) {
if (cm) { if (cm) {
T(0); text(0);
} }
t(0, b(name)); textBinding(0, bind(name));
} }
expect(renderToHtml(Template, 'benoit')).toEqual('benoit'); expect(renderToHtml(Template, 'benoit')).toEqual('benoit');
@ -58,9 +58,9 @@ describe('render3 integration test', () => {
it('should render "null" as "" when used with `bind()`', () => { it('should render "null" as "" when used with `bind()`', () => {
function Template(name: string, cm: boolean) { function Template(name: string, cm: boolean) {
if (cm) { if (cm) {
T(0); text(0);
} }
t(0, b(name)); textBinding(0, bind(name));
} }
expect(renderToHtml(Template, 'benoit')).toEqual('benoit'); expect(renderToHtml(Template, 'benoit')).toEqual('benoit');
@ -70,9 +70,9 @@ describe('render3 integration test', () => {
it('should support creation-time values in text nodes', () => { it('should support creation-time values in text nodes', () => {
function Template(value: string, cm: boolean) { function Template(value: string, cm: boolean) {
if (cm) { if (cm) {
T(0); text(0);
} }
t(0, cm ? value : NO_CHANGE); textBinding(0, cm ? value : NO_CHANGE);
} }
expect(renderToHtml(Template, 'once')).toEqual('once'); expect(renderToHtml(Template, 'once')).toEqual('once');
expect(renderToHtml(Template, 'twice')).toEqual('once'); expect(renderToHtml(Template, 'twice')).toEqual('once');
@ -81,27 +81,32 @@ describe('render3 integration test', () => {
it('should support creation-time bindings in interpolations', () => { it('should support creation-time bindings in interpolations', () => {
function Template(v: string, cm: boolean) { function Template(v: string, cm: boolean) {
if (cm) { if (cm) {
T(0); text(0);
T(1); text(1);
T(2); text(2);
T(3); text(3);
T(4); text(4);
T(5); text(5);
T(6); text(6);
T(7); text(7);
T(8); text(8);
} }
t(0, b1('', cm ? v : NC, '|')); textBinding(0, bind1('', cm ? v : NO_CHANGE, '|'));
t(1, b2('', v, '_', cm ? v : NC, '|')); textBinding(1, bind2('', v, '_', cm ? v : NO_CHANGE, '|'));
t(2, b3('', v, '_', v, '_', cm ? v : NC, '|')); textBinding(2, bind3('', v, '_', v, '_', cm ? v : NO_CHANGE, '|'));
t(3, b4('', v, '_', v, '_', v, '_', cm ? v : NC, '|')); textBinding(3, bind4('', v, '_', v, '_', v, '_', cm ? v : NO_CHANGE, '|'));
t(4, b5('', v, '_', v, '_', v, '_', v, '_', cm ? v : NC, '|')); textBinding(4, bind5('', v, '_', v, '_', v, '_', v, '_', cm ? v : NO_CHANGE, '|'));
t(5, b6('', v, '_', v, '_', v, '_', v, '_', v, '_', cm ? v : NC, '|')); textBinding(5, bind6('', v, '_', v, '_', v, '_', v, '_', v, '_', cm ? v : NO_CHANGE, '|'));
t(6, b7('', v, '_', v, '_', v, '_', v, '_', v, '_', v, '_', cm ? v : NC, '|')); textBinding(
t(7, b8('', v, '_', v, '_', v, '_', v, '_', v, '_', v, '_', v, '_', cm ? v : NC, '|')); 6, bind7('', v, '_', v, '_', v, '_', v, '_', v, '_', v, '_', cm ? v : NO_CHANGE, '|'));
t(8, bV([ textBinding(
'', v, '_', v, '_', v, '_', v, '_', v, '_', v, '_', v, '_', v, '_', cm ? v : NC, '' 7, bind8(
])); '', v, '_', v, '_', v, '_', v, '_', v, '_', v, '_', v, '_', cm ? v : NO_CHANGE,
'|'));
textBinding(8, bindV([
'', v, '_', v, '_', v, '_', v, '_', v, '_', v, '_', v, '_', v, '_',
cm ? v : NO_CHANGE, ''
]));
} }
expect(renderToHtml(Template, 'a')) expect(renderToHtml(Template, 'a'))
.toEqual( .toEqual(
@ -117,11 +122,11 @@ describe('render3 integration test', () => {
it('should handle a flat list of static/bound text nodes', () => { it('should handle a flat list of static/bound text nodes', () => {
function Template(name: string, cm: boolean) { function Template(name: string, cm: boolean) {
if (cm) { if (cm) {
T(0, 'Hello '); text(0, 'Hello ');
T(1); text(1);
T(2, '!'); text(2, '!');
} }
t(1, b(name)); textBinding(1, bind(name));
} }
expect(renderToHtml(Template, 'world')).toEqual('Hello world!'); expect(renderToHtml(Template, 'world')).toEqual('Hello world!');
expect(renderToHtml(Template, 'monde')).toEqual('Hello monde!'); expect(renderToHtml(Template, 'monde')).toEqual('Hello monde!');
@ -130,15 +135,15 @@ describe('render3 integration test', () => {
it('should handle a list of static/bound text nodes as element children', () => { it('should handle a list of static/bound text nodes as element children', () => {
function Template(name: string, cm: boolean) { function Template(name: string, cm: boolean) {
if (cm) { if (cm) {
E(0, 'b'); elementStart(0, 'b');
{ {
T(1, 'Hello '); text(1, 'Hello ');
T(2); text(2);
T(3, '!'); text(3, '!');
} }
e(); elementEnd();
} }
t(2, b(name)); textBinding(2, bind(name));
} }
expect(renderToHtml(Template, 'world')).toEqual('<b>Hello world!</b>'); expect(renderToHtml(Template, 'world')).toEqual('<b>Hello world!</b>');
expect(renderToHtml(Template, 'mundo')).toEqual('<b>Hello mundo!</b>'); expect(renderToHtml(Template, 'mundo')).toEqual('<b>Hello mundo!</b>');
@ -147,23 +152,23 @@ describe('render3 integration test', () => {
it('should render/update text node as a child of a deep list of elements', () => { it('should render/update text node as a child of a deep list of elements', () => {
function Template(name: string, cm: boolean) { function Template(name: string, cm: boolean) {
if (cm) { if (cm) {
E(0, 'b'); elementStart(0, 'b');
{ {
E(1, 'b'); elementStart(1, 'b');
{ {
E(2, 'b'); elementStart(2, 'b');
{ {
E(3, 'b'); elementStart(3, 'b');
{ T(4); } { text(4); }
e(); elementEnd();
} }
e(); elementEnd();
} }
e(); elementEnd();
} }
e(); elementEnd();
} }
t(4, b1('Hello ', name, '!')); textBinding(4, bind1('Hello ', name, '!'));
} }
expect(renderToHtml(Template, 'world')).toEqual('<b><b><b><b>Hello world!</b></b></b></b>'); expect(renderToHtml(Template, 'world')).toEqual('<b><b><b><b>Hello world!</b></b></b></b>');
expect(renderToHtml(Template, 'mundo')).toEqual('<b><b><b><b>Hello mundo!</b></b></b></b>'); expect(renderToHtml(Template, 'mundo')).toEqual('<b><b><b><b>Hello mundo!</b></b></b></b>');
@ -172,17 +177,17 @@ describe('render3 integration test', () => {
it('should update 2 sibling elements', () => { it('should update 2 sibling elements', () => {
function Template(id: any, cm: boolean) { function Template(id: any, cm: boolean) {
if (cm) { if (cm) {
E(0, 'b'); elementStart(0, 'b');
{ {
E(1, 'span'); elementStart(1, 'span');
e(); elementEnd();
E(2, 'span', ['class', 'foo']); elementStart(2, 'span', ['class', 'foo']);
{} {}
e(); elementEnd();
} }
e(); elementEnd();
} }
a(2, 'id', b(id)); elementAttribute(2, 'id', bind(id));
} }
expect(renderToHtml(Template, 'foo')) expect(renderToHtml(Template, 'foo'))
.toEqual('<b><span></span><span class="foo" id="foo"></span></b>'); .toEqual('<b><span></span><span class="foo" id="foo"></span></b>');
@ -193,10 +198,10 @@ describe('render3 integration test', () => {
it('should handle sibling text node after element with child text node', () => { it('should handle sibling text node after element with child text node', () => {
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, 'p'); elementStart(0, 'p');
{ T(1, 'hello'); } { text(1, 'hello'); }
e(); elementEnd();
T(2, 'world'); text(2, 'world');
} }
} }
@ -214,14 +219,14 @@ describe('render3 integration test', () => {
tag: 'todo', tag: 'todo',
template: function TodoTemplate(ctx: any, cm: boolean) { template: function TodoTemplate(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, 'p'); elementStart(0, 'p');
{ {
T(1, 'Todo'); text(1, 'Todo');
T(2); text(2);
} }
e(); elementEnd();
} }
t(2, b(ctx.value)); textBinding(2, bind(ctx.value));
}, },
factory: () => new TodoComponent factory: () => new TodoComponent
}); });
@ -230,11 +235,11 @@ describe('render3 integration test', () => {
it('should support a basic component template', () => { it('should support a basic component template', () => {
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, TodoComponent); elementStart(0, TodoComponent);
e(); elementEnd();
} }
TodoComponent.ngComponentDef.h(1, 0); TodoComponent.ngComponentDef.h(1, 0);
r(1, 0); componentRefresh(1, 0);
} }
expect(renderToHtml(Template, null)).toEqual('<todo><p>Todo one</p></todo>'); expect(renderToHtml(Template, null)).toEqual('<todo><p>Todo one</p></todo>');
@ -243,12 +248,12 @@ describe('render3 integration test', () => {
it('should support a component template with sibling', () => { it('should support a component template with sibling', () => {
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, TodoComponent); elementStart(0, TodoComponent);
e(); elementEnd();
T(2, 'two'); text(2, 'two');
} }
TodoComponent.ngComponentDef.h(1, 0); TodoComponent.ngComponentDef.h(1, 0);
r(1, 0); componentRefresh(1, 0);
} }
expect(renderToHtml(Template, null)).toEqual('<todo><p>Todo one</p></todo>two'); expect(renderToHtml(Template, null)).toEqual('<todo><p>Todo one</p></todo>two');
}); });
@ -260,15 +265,15 @@ describe('render3 integration test', () => {
*/ */
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, TodoComponent); elementStart(0, TodoComponent);
e(); elementEnd();
E(2, TodoComponent); elementStart(2, TodoComponent);
e(); elementEnd();
} }
TodoComponent.ngComponentDef.h(1, 0); TodoComponent.ngComponentDef.h(1, 0);
TodoComponent.ngComponentDef.h(3, 2); TodoComponent.ngComponentDef.h(3, 2);
r(1, 0); componentRefresh(1, 0);
r(3, 2); componentRefresh(3, 2);
} }
expect(renderToHtml(Template, null)) expect(renderToHtml(Template, null))
.toEqual('<todo><p>Todo one</p></todo><todo><p>Todo one</p></todo>'); .toEqual('<todo><p>Todo one</p></todo><todo><p>Todo one</p></todo>');
@ -285,25 +290,27 @@ describe('render3 integration test', () => {
template: function TodoComponentHostBindingTemplate( template: function TodoComponentHostBindingTemplate(
ctx: TodoComponentHostBinding, cm: boolean) { ctx: TodoComponentHostBinding, cm: boolean) {
if (cm) { if (cm) {
T(0); text(0);
} }
t(0, b(ctx.title)); textBinding(0, bind(ctx.title));
}, },
factory: () => cmptInstance = new TodoComponentHostBinding, factory: () => cmptInstance = new TodoComponentHostBinding,
hostBindings: function(directiveIndex: number, elementIndex: number): void { hostBindings: function(directiveIndex: number, elementIndex: number): void {
// host bindings // host bindings
p(elementIndex, 'title', b(m<TodoComponentHostBinding>(directiveIndex).title)); elementProperty(
elementIndex, 'title',
bind(memory<TodoComponentHostBinding>(directiveIndex).title));
} }
}); });
} }
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, TodoComponentHostBinding); elementStart(0, TodoComponentHostBinding);
e(); elementEnd();
} }
TodoComponentHostBinding.ngComponentDef.h(1, 0); TodoComponentHostBinding.ngComponentDef.h(1, 0);
r(1, 0); componentRefresh(1, 0);
} }
expect(renderToHtml(Template, {})).toEqual('<todo title="one">one</todo>'); expect(renderToHtml(Template, {})).toEqual('<todo title="one">one</todo>');
@ -320,11 +327,11 @@ describe('render3 integration test', () => {
tag: 'comp', tag: 'comp',
template: function MyCompTemplate(ctx: any, cm: boolean) { template: function MyCompTemplate(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, 'p'); elementStart(0, 'p');
{ T(1); } { text(1); }
e(); elementEnd();
} }
t(1, b(ctx.name)); textBinding(1, bind(ctx.name));
}, },
factory: () => new MyComp factory: () => new MyComp
}); });
@ -332,11 +339,11 @@ describe('render3 integration test', () => {
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, MyComp); elementStart(0, MyComp);
e(); elementEnd();
} }
MyComp.ngComponentDef.h(1, 0); MyComp.ngComponentDef.h(1, 0);
r(1, 0); componentRefresh(1, 0);
} }
expect(renderToHtml(Template, null)).toEqual('<comp><p>Bess</p></comp>'); expect(renderToHtml(Template, null)).toEqual('<comp><p>Bess</p></comp>');
@ -355,20 +362,20 @@ describe('render3 integration test', () => {
tag: 'comp', tag: 'comp',
template: function MyCompTemplate(ctx: any, cm: boolean) { template: function MyCompTemplate(ctx: any, cm: boolean) {
if (cm) { if (cm) {
C(0); container(0);
} }
cR(0); containerRefreshStart(0);
{ {
if (ctx.condition) { if (ctx.condition) {
if (V(0)) { if (viewStart(0)) {
E(0, 'div'); elementStart(0, 'div');
{ T(1, 'text'); } { text(1, 'text'); }
e(); elementEnd();
} }
v(); viewEnd();
} }
} }
cr(); containerRefreshEnd();
}, },
factory: () => new MyComp, factory: () => new MyComp,
inputs: {condition: 'condition'} inputs: {condition: 'condition'}
@ -378,12 +385,12 @@ describe('render3 integration test', () => {
/** <comp [condition]="condition"></comp> */ /** <comp [condition]="condition"></comp> */
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, MyComp); elementStart(0, MyComp);
e(); elementEnd();
} }
p(0, 'condition', b(ctx.condition)); elementProperty(0, 'condition', bind(ctx.condition));
MyComp.ngComponentDef.h(1, 0); MyComp.ngComponentDef.h(1, 0);
r(1, 0); componentRefresh(1, 0);
} }
expect(renderToHtml(Template, {condition: true})).toEqual('<comp><div>text</div></comp>'); expect(renderToHtml(Template, {condition: true})).toEqual('<comp><div>text</div></comp>');
@ -408,50 +415,50 @@ describe('render3 integration test', () => {
function showLabel(ctx: {label: string | undefined}, cm: boolean) { function showLabel(ctx: {label: string | undefined}, cm: boolean) {
if (cm) { if (cm) {
C(0); container(0);
} }
cR(0); containerRefreshStart(0);
{ {
if (ctx.label != null) { if (ctx.label != null) {
if (V(0)) { if (viewStart(0)) {
T(0); text(0);
} }
t(0, b(ctx.label)); textBinding(0, bind(ctx.label));
v(); viewEnd();
} }
} }
cr(); containerRefreshEnd();
} }
function showTree(ctx: {tree: Tree}, cm: boolean) { function showTree(ctx: {tree: Tree}, cm: boolean) {
if (cm) { if (cm) {
C(0); container(0);
C(1); container(1);
C(2); container(2);
} }
cR(0); containerRefreshStart(0);
{ {
const cm0 = V(0); const cm0 = viewStart(0);
{ showLabel({label: ctx.tree.beforeLabel}, cm0); } { showLabel({label: ctx.tree.beforeLabel}, cm0); }
v(); viewEnd();
} }
cr(); containerRefreshEnd();
cR(1); containerRefreshStart(1);
{ {
for (let subTree of ctx.tree.subTrees || []) { for (let subTree of ctx.tree.subTrees || []) {
const cm0 = V(0); const cm0 = viewStart(0);
{ showTree({tree: subTree}, cm0); } { showTree({tree: subTree}, cm0); }
v(); viewEnd();
} }
} }
cr(); containerRefreshEnd();
cR(2); containerRefreshStart(2);
{ {
const cm0 = V(0); const cm0 = viewStart(0);
{ showLabel({label: ctx.tree.afterLabel}, cm0); } { showLabel({label: ctx.tree.afterLabel}, cm0); }
v(); viewEnd();
} }
cr(); containerRefreshEnd();
} }
class ChildComponent { class ChildComponent {
@ -463,25 +470,25 @@ describe('render3 integration test', () => {
template: function ChildComponentTemplate( template: function ChildComponentTemplate(
ctx: {beforeTree: Tree, afterTree: Tree}, cm: boolean) { ctx: {beforeTree: Tree, afterTree: Tree}, cm: boolean) {
if (cm) { if (cm) {
pD(0); projectionDef(0);
C(1); container(1);
P(2, 0); projection(2, 0);
C(3); container(3);
} }
cR(1); containerRefreshStart(1);
{ {
const cm0 = V(0); const cm0 = viewStart(0);
{ showTree({tree: ctx.beforeTree}, cm0); } { showTree({tree: ctx.beforeTree}, cm0); }
v(); viewEnd();
} }
cr(); containerRefreshEnd();
cR(3); containerRefreshStart(3);
{ {
const cm0 = V(0); const cm0 = viewStart(0);
{ showTree({tree: ctx.afterTree}, cm0); } { showTree({tree: ctx.afterTree}, cm0); }
v(); viewEnd();
} }
cr(); containerRefreshEnd();
}, },
factory: () => new ChildComponent, factory: () => new ChildComponent,
inputs: {beforeTree: 'beforeTree', afterTree: 'afterTree'} inputs: {beforeTree: 'beforeTree', afterTree: 'afterTree'}
@ -490,21 +497,21 @@ describe('render3 integration test', () => {
function parentTemplate(ctx: ParentCtx, cm: boolean) { function parentTemplate(ctx: ParentCtx, cm: boolean) {
if (cm) { if (cm) {
E(0, ChildComponent); elementStart(0, ChildComponent);
{ C(2); } { container(2); }
e(); elementEnd();
} }
p(0, 'beforeTree', b(ctx.beforeTree)); elementProperty(0, 'beforeTree', bind(ctx.beforeTree));
p(0, 'afterTree', b(ctx.afterTree)); elementProperty(0, 'afterTree', bind(ctx.afterTree));
cR(2); containerRefreshStart(2);
{ {
const cm0 = V(0); const cm0 = viewStart(0);
{ showTree({tree: ctx.projectedTree}, cm0); } { showTree({tree: ctx.projectedTree}, cm0); }
v(); viewEnd();
} }
cr(); containerRefreshEnd();
ChildComponent.ngComponentDef.h(1, 0); ChildComponent.ngComponentDef.h(1, 0);
r(1, 0); componentRefresh(1, 0);
} }
it('should work with a tree', () => { it('should work with a tree', () => {
@ -537,10 +544,10 @@ describe('render3 integration test', () => {
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, 'span'); elementStart(0, 'span');
e(); elementEnd();
} }
a(0, 'title', b(ctx.title)); elementAttribute(0, 'title', bind(ctx.title));
} }
// initial binding // initial binding
@ -560,10 +567,10 @@ describe('render3 integration test', () => {
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, 'span'); elementStart(0, 'span');
e(); elementEnd();
} }
a(0, 'title', b(ctx.title)); elementAttribute(0, 'title', bind(ctx.title));
} }
expect(renderToHtml(Template, ctx)).toEqual('<span title="NaN"></span>'); expect(renderToHtml(Template, ctx)).toEqual('<span title="NaN"></span>');
@ -575,22 +582,29 @@ describe('render3 integration test', () => {
it('should update bindings', () => { it('should update bindings', () => {
function Template(c: any, cm: boolean) { function Template(c: any, cm: boolean) {
if (cm) { if (cm) {
E(0, 'b'); elementStart(0, 'b');
e(); elementEnd();
} }
a(0, 'a', bV(c)); elementAttribute(0, 'a', bindV(c));
a(0, 'a0', b(c[1])); elementAttribute(0, 'a0', bind(c[1]));
a(0, 'a1', b1(c[0], c[1], c[16])); elementAttribute(0, 'a1', bind1(c[0], c[1], c[16]));
a(0, 'a2', b2(c[0], c[1], c[2], c[3], c[16])); elementAttribute(0, 'a2', bind2(c[0], c[1], c[2], c[3], c[16]));
a(0, 'a3', b3(c[0], c[1], c[2], c[3], c[4], c[5], c[16])); elementAttribute(0, 'a3', bind3(c[0], c[1], c[2], c[3], c[4], c[5], c[16]));
a(0, 'a4', b4(c[0], c[1], c[2], c[3], c[4], c[5], c[6], c[7], c[16])); elementAttribute(0, 'a4', bind4(c[0], c[1], c[2], c[3], c[4], c[5], c[6], c[7], c[16]));
a(0, 'a5', b5(c[0], c[1], c[2], c[3], c[4], c[5], c[6], c[7], c[8], c[9], c[16])); elementAttribute(
a(0, 'a6', 0, 'a5', bind5(c[0], c[1], c[2], c[3], c[4], c[5], c[6], c[7], c[8], c[9], c[16]));
b6(c[0], c[1], c[2], c[3], c[4], c[5], c[6], c[7], c[8], c[9], c[10], c[11], c[16])); elementAttribute(
a(0, 'a7', b7(c[0], c[1], c[2], c[3], c[4], c[5], c[6], c[7], c[8], c[9], c[10], c[11], 0, 'a6',
c[12], c[13], c[16])); bind6(
a(0, 'a8', b8(c[0], c[1], c[2], c[3], c[4], c[5], c[6], c[7], c[8], c[9], c[10], c[11], c[0], c[1], c[2], c[3], c[4], c[5], c[6], c[7], c[8], c[9], c[10], c[11], c[16]));
c[12], c[13], c[14], c[15], c[16])); elementAttribute(
0, 'a7', bind7(
c[0], c[1], c[2], c[3], c[4], c[5], c[6], c[7], c[8], c[9], c[10], c[11],
c[12], c[13], c[16]));
elementAttribute(
0, 'a8', bind8(
c[0], c[1], c[2], c[3], c[4], c[5], c[6], c[7], c[8], c[9], c[10], c[11],
c[12], c[13], c[14], c[15], c[16]));
} }
let args = ['(', 0, 'a', 1, 'b', 2, 'c', 3, 'd', 4, 'e', 5, 'f', 6, 'g', 7, ')']; let args = ['(', 0, 'a', 1, 'b', 2, 'c', 3, 'd', 4, 'e', 5, 'f', 6, 'g', 7, ')'];
expect(renderToHtml(Template, args)) expect(renderToHtml(Template, args))
@ -611,27 +625,27 @@ describe('render3 integration test', () => {
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, 'span'); elementStart(0, 'span');
C(1); container(1);
e(); elementEnd();
} }
a(0, 'title', b(ctx.title)); elementAttribute(0, 'title', bind(ctx.title));
cR(1); containerRefreshStart(1);
{ {
if (true) { if (true) {
let cm1 = V(1); let cm1 = viewStart(1);
{ {
if (cm1) { if (cm1) {
E(0, 'b'); elementStart(0, 'b');
{} {}
e(); elementEnd();
} }
a(0, 'title', b(ctx.title)); elementAttribute(0, 'title', bind(ctx.title));
} }
v(); viewEnd();
} }
} }
cr(); containerRefreshEnd();
} }
// initial binding // initial binding
@ -653,10 +667,10 @@ describe('render3 integration test', () => {
it('should support binding to styles', () => { it('should support binding to styles', () => {
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, 'span'); elementStart(0, 'span');
e(); elementEnd();
} }
s(0, 'border-color', b(ctx)); elementStyle(0, 'border-color', bind(ctx));
} }
expect(renderToHtml(Template, 'red')).toEqual('<span style="border-color: red;"></span>'); expect(renderToHtml(Template, 'red')).toEqual('<span style="border-color: red;"></span>');
@ -668,10 +682,10 @@ describe('render3 integration test', () => {
it('should support binding to styles with suffix', () => { it('should support binding to styles with suffix', () => {
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, 'span'); elementStart(0, 'span');
e(); elementEnd();
} }
s(0, 'font-size', b(ctx), 'px'); elementStyle(0, 'font-size', bind(ctx), 'px');
} }
expect(renderToHtml(Template, '100')).toEqual('<span style="font-size: 100px;"></span>'); expect(renderToHtml(Template, '100')).toEqual('<span style="font-size: 100px;"></span>');
@ -685,10 +699,10 @@ describe('render3 integration test', () => {
it('should support CSS class toggle', () => { it('should support CSS class toggle', () => {
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, 'span'); elementStart(0, 'span');
e(); elementEnd();
} }
k(0, 'active', b(ctx)); elementClass(0, 'active', bind(ctx));
} }
expect(renderToHtml(Template, true)).toEqual('<span class="active"></span>'); expect(renderToHtml(Template, true)).toEqual('<span class="active"></span>');
@ -706,10 +720,10 @@ describe('render3 integration test', () => {
it('should work correctly with existing static classes', () => { it('should work correctly with existing static classes', () => {
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, 'span', ['class', 'existing']); elementStart(0, 'span', ['class', 'existing']);
e(); elementEnd();
} }
k(0, 'active', b(ctx)); elementClass(0, 'active', bind(ctx));
} }
expect(renderToHtml(Template, true)).toEqual('<span class="existing active"></span>'); expect(renderToHtml(Template, true)).toEqual('<span class="existing active"></span>');
@ -728,20 +742,20 @@ describe('render3 integration test', () => {
*/ */
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
C(0); container(0);
} }
cR(0); containerRefreshStart(0);
{ {
if (ctx.condition) { if (ctx.condition) {
if (V(0)) { if (viewStart(0)) {
E(0, 'div'); elementStart(0, 'div');
{} {}
e(); elementEnd();
} }
v(); viewEnd();
} }
} }
cr(); containerRefreshEnd();
} }
expect((Template as any).ngPrivateData).toBeUndefined(); expect((Template as any).ngPrivateData).toBeUndefined();

947
packages/core/test/render3/lifecycle_spec.ts
View File

File diff suppressed because it is too large Load Diff

139
packages/core/test/render3/listeners_spec.ts
View File

@ -6,7 +6,8 @@
* found in the LICENSE file at https://angular.io/license * found in the LICENSE file at https://angular.io/license
*/ */
import {C, E, L, T, V, cR, cr, defineComponent, e, r, v} from '../../src/render3/index'; import {defineComponent} from '../../src/render3/index';
import {componentRefresh, container, containerRefreshEnd, containerRefreshStart, elementEnd, elementStart, listener, text, viewEnd, viewStart} from '../../src/render3/instructions';
import {containerEl, renderComponent, renderToHtml} from './render_util'; import {containerEl, renderComponent, renderToHtml} from './render_util';
@ -26,12 +27,12 @@ describe('event listeners', () => {
/** <button (click)="onClick()"> Click me </button> */ /** <button (click)="onClick()"> Click me </button> */
template: function CompTemplate(ctx: any, cm: boolean) { template: function CompTemplate(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, 'button'); elementStart(0, 'button');
{ {
L('click', ctx.onClick.bind(ctx)); listener('click', ctx.onClick.bind(ctx));
T(1, 'Click me'); text(1, 'Click me');
} }
e(); elementEnd();
} }
}, },
factory: () => { factory: () => {
@ -59,12 +60,12 @@ describe('event listeners', () => {
/** <button (click)="showing=!showing"> Click me </button> */ /** <button (click)="showing=!showing"> Click me </button> */
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, 'button'); elementStart(0, 'button');
{ {
L('click', () => ctx.showing = !ctx.showing); listener('click', () => ctx.showing = !ctx.showing);
T(1, 'Click me'); text(1, 'Click me');
} }
e(); elementEnd();
} }
} }
@ -88,23 +89,23 @@ describe('event listeners', () => {
*/ */
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
C(0); container(0);
} }
cR(0); containerRefreshStart(0);
{ {
if (ctx.showing) { if (ctx.showing) {
if (V(1)) { if (viewStart(1)) {
E(0, 'button'); elementStart(0, 'button');
{ {
L('click', ctx.onClick.bind(ctx)); listener('click', ctx.onClick.bind(ctx));
T(1, 'Click me'); text(1, 'Click me');
} }
e(); elementEnd();
} }
v(); viewEnd();
} }
} }
cr(); containerRefreshEnd();
} }
let comp = new MyComp(); let comp = new MyComp();
@ -136,34 +137,34 @@ describe('event listeners', () => {
*/ */
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
C(0); container(0);
} }
cR(0); containerRefreshStart(0);
{ {
if (ctx.showing) { if (ctx.showing) {
if (V(0)) { if (viewStart(0)) {
T(0, 'Hello'); text(0, 'Hello');
C(1); container(1);
} }
cR(1); containerRefreshStart(1);
{ {
if (ctx.button) { if (ctx.button) {
if (V(0)) { if (viewStart(0)) {
E(0, 'button'); elementStart(0, 'button');
{ {
L('click', ctx.onClick.bind(ctx)); listener('click', ctx.onClick.bind(ctx));
T(1, 'Click'); text(1, 'Click');
} }
e(); elementEnd();
} }
v(); viewEnd();
} }
} }
cr(); containerRefreshEnd();
v(); viewEnd();
} }
} }
cr(); containerRefreshEnd();
} }
const comp = {showing: true, counter: 0, button: true, onClick: function() { this.counter++; }}; const comp = {showing: true, counter: 0, button: true, onClick: function() { this.counter++; }};
@ -194,26 +195,26 @@ describe('event listeners', () => {
*/ */
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
C(0); container(0);
} }
cR(0); containerRefreshStart(0);
{ {
if (ctx.showing) { if (ctx.showing) {
if (V(0)) { if (viewStart(0)) {
T(0, 'Hello'); text(0, 'Hello');
E(1, MyComp); elementStart(1, MyComp);
e(); elementEnd();
E(3, MyComp); elementStart(3, MyComp);
e(); elementEnd();
} }
MyComp.ngComponentDef.h(2, 1); MyComp.ngComponentDef.h(2, 1);
MyComp.ngComponentDef.h(4, 3); MyComp.ngComponentDef.h(4, 3);
r(2, 1); componentRefresh(2, 1);
r(4, 3); componentRefresh(4, 3);
v(); viewEnd();
} }
} }
cr(); containerRefreshEnd();
} }
const ctx = {showing: true}; const ctx = {showing: true};
@ -250,50 +251,50 @@ describe('event listeners', () => {
*/ */
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
C(0); container(0);
} }
cR(0); containerRefreshStart(0);
{ {
if (ctx.condition) { if (ctx.condition) {
if (V(0)) { if (viewStart(0)) {
T(0, 'Hello'); text(0, 'Hello');
C(1); container(1);
C(2); container(2);
} }
cR(1); containerRefreshStart(1);
{ {
if (ctx.sub1) { if (ctx.sub1) {
if (V(0)) { if (viewStart(0)) {
E(0, 'button'); elementStart(0, 'button');
{ {
L('click', () => ctx.counter1++); listener('click', () => ctx.counter1++);
T(1, 'Click'); text(1, 'Click');
} }
e(); elementEnd();
} }
v(); viewEnd();
} }
} }
cr(); containerRefreshEnd();
cR(2); containerRefreshStart(2);
{ {
if (ctx.sub2) { if (ctx.sub2) {
if (V(0)) { if (viewStart(0)) {
E(0, 'button'); elementStart(0, 'button');
{ {
L('click', () => ctx.counter2++); listener('click', () => ctx.counter2++);
T(1, 'Click'); text(1, 'Click');
} }
e(); elementEnd();
} }
v(); viewEnd();
} }
} }
cr(); containerRefreshEnd();
v(); viewEnd();
} }
} }
cr(); containerRefreshEnd();
} }
const ctx = {condition: true, counter1: 0, counter2: 0, sub1: true, sub2: true}; const ctx = {condition: true, counter1: 0, counter2: 0, sub1: true, sub2: true};

111
packages/core/test/render3/object_literal_spec.ts
View File

@ -5,7 +5,9 @@
* Use of this source code is governed by an MIT-style license that can be * Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license * found in the LICENSE file at https://angular.io/license
*/ */
import {E, defineComponent, e, m, o1, o2, o3, o4, o5, o6, o7, o8, p, r} from '../../src/render3/index'; import {defineComponent} from '../../src/render3/index';
import {componentRefresh, elementEnd, elementProperty, elementStart, memory} from '../../src/render3/instructions';
import {objectLiteral1, objectLiteral2, objectLiteral3, objectLiteral4, objectLiteral5, objectLiteral6, objectLiteral7, objectLiteral8} from '../../src/render3/object_literal';
import {renderToHtml} from '../../test/render3/render_util'; import {renderToHtml} from '../../test/render3/render_util';
describe('array literals', () => { describe('array literals', () => {
@ -27,12 +29,12 @@ describe('array literals', () => {
/** <my-comp [names]="['Nancy', customName, 'Bess']"></my-comp> */ /** <my-comp [names]="['Nancy', customName, 'Bess']"></my-comp> */
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, MyComp); elementStart(0, MyComp);
e(); elementEnd();
} }
p(0, 'names', o1(0, e0_literal, 1, ctx.customName)); elementProperty(0, 'names', objectLiteral1(0, e0_literal, 1, ctx.customName));
MyComp.ngComponentDef.h(1, 0); MyComp.ngComponentDef.h(1, 0);
r(1, 0); componentRefresh(1, 0);
} }
const e0_literal = ['Nancy', null, 'Bess']; const e0_literal = ['Nancy', null, 'Bess'];
@ -74,13 +76,13 @@ describe('array literals', () => {
*/ */
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, ManyPropComp); elementStart(0, ManyPropComp);
e(); elementEnd();
} }
p(0, 'names1', o1(0, e0_literal, 1, ctx.customName)); elementProperty(0, 'names1', objectLiteral1(0, e0_literal, 1, ctx.customName));
p(0, 'names2', o1(1, e0_literal_1, 0, ctx.customName2)); elementProperty(0, 'names2', objectLiteral1(1, e0_literal_1, 0, ctx.customName2));
ManyPropComp.ngComponentDef.h(1, 0); ManyPropComp.ngComponentDef.h(1, 0);
r(1, 0); componentRefresh(1, 0);
} }
const e0_literal = ['Nancy', null]; const e0_literal = ['Nancy', null];
@ -104,12 +106,13 @@ describe('array literals', () => {
/** <my-comp [names]="['Nancy', customName, 'Bess', customName2]"></my-comp> */ /** <my-comp [names]="['Nancy', customName, 'Bess', customName2]"></my-comp> */
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, MyComp); elementStart(0, MyComp);
e(); elementEnd();
} }
p(0, 'names', o2(0, e0_literal, 1, ctx.customName, 3, ctx.customName2)); elementProperty(
0, 'names', objectLiteral2(0, e0_literal, 1, ctx.customName, 3, ctx.customName2));
MyComp.ngComponentDef.h(1, 0); MyComp.ngComponentDef.h(1, 0);
r(1, 0); componentRefresh(1, 0);
} }
const e0_literal = ['Nancy', null, 'Bess', null]; const e0_literal = ['Nancy', null, 'Bess', null];
@ -140,45 +143,53 @@ describe('array literals', () => {
function Template(c: any, cm: boolean) { function Template(c: any, cm: boolean) {
if (cm) { if (cm) {
E(0, MyComp); elementStart(0, MyComp);
o3Comp = m(1); o3Comp = memory(1);
e(); elementEnd();
E(2, MyComp); elementStart(2, MyComp);
o4Comp = m(3); o4Comp = memory(3);
e(); elementEnd();
E(4, MyComp); elementStart(4, MyComp);
o5Comp = m(5); o5Comp = memory(5);
e(); elementEnd();
E(6, MyComp); elementStart(6, MyComp);
o6Comp = m(7); o6Comp = memory(7);
e(); elementEnd();
E(8, MyComp); elementStart(8, MyComp);
o7Comp = m(9); o7Comp = memory(9);
e(); elementEnd();
E(10, MyComp); elementStart(10, MyComp);
o8Comp = m(11); o8Comp = memory(11);
e(); elementEnd();
} }
p(0, 'names', o3(0, e0_literal, 5, c[5], 6, c[6], 7, c[7])); elementProperty(0, 'names', objectLiteral3(0, e0_literal, 5, c[5], 6, c[6], 7, c[7]));
p(2, 'names', o4(1, e2_literal, 4, c[4], 5, c[5], 6, c[6], 7, c[7])); elementProperty(
p(4, 'names', o5(2, e4_literal, 3, c[3], 4, c[4], 5, c[5], 6, c[6], 7, c[7])); 2, 'names', objectLiteral4(1, e2_literal, 4, c[4], 5, c[5], 6, c[6], 7, c[7]));
p(6, 'names', o6(3, e6_literal, 2, c[2], 3, c[3], 4, c[4], 5, c[5], 6, c[6], 7, c[7])); elementProperty(
p(8, 'names', 4, 'names', objectLiteral5(2, e4_literal, 3, c[3], 4, c[4], 5, c[5], 6, c[6], 7, c[7]));
o7(4, e8_literal, 1, c[1], 2, c[2], 3, c[3], 4, c[4], 5, c[5], 6, c[6], 7, c[7])); elementProperty(
p(10, 'names', 6, 'names',
o8(5, e10_literal, 0, c[0], 1, c[1], 2, c[2], 3, c[3], 4, c[4], 5, c[5], 6, c[6], 7, c[7])); objectLiteral6(3, e6_literal, 2, c[2], 3, c[3], 4, c[4], 5, c[5], 6, c[6], 7, c[7]));
elementProperty(
8, 'names',
objectLiteral7(
4, e8_literal, 1, c[1], 2, c[2], 3, c[3], 4, c[4], 5, c[5], 6, c[6], 7, c[7]));
elementProperty(
10, 'names', objectLiteral8(
5, e10_literal, 0, c[0], 1, c[1], 2, c[2], 3, c[3], 4, c[4], 5, c[5], 6,
c[6], 7, c[7]));
MyComp.ngComponentDef.h(1, 0); MyComp.ngComponentDef.h(1, 0);
r(1, 0); componentRefresh(1, 0);
MyComp.ngComponentDef.h(3, 2); MyComp.ngComponentDef.h(3, 2);
r(3, 2); componentRefresh(3, 2);
MyComp.ngComponentDef.h(5, 4); MyComp.ngComponentDef.h(5, 4);
r(5, 4); componentRefresh(5, 4);
MyComp.ngComponentDef.h(7, 6); MyComp.ngComponentDef.h(7, 6);
r(7, 6); componentRefresh(7, 6);
MyComp.ngComponentDef.h(9, 8); MyComp.ngComponentDef.h(9, 8);
r(9, 8); componentRefresh(9, 8);
MyComp.ngComponentDef.h(11, 10); MyComp.ngComponentDef.h(11, 10);
r(11, 10); componentRefresh(11, 10);
} }
const e0_literal = ['a', 'b', 'c', 'd', 'e', null, null, null]; const e0_literal = ['a', 'b', 'c', 'd', 'e', null, null, null];
@ -223,12 +234,12 @@ describe('array literals', () => {
/** <object-comp [config]="{duration: 500, animation: ctx.name}"></object-comp> */ /** <object-comp [config]="{duration: 500, animation: ctx.name}"></object-comp> */
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, ObjectComp); elementStart(0, ObjectComp);
e(); elementEnd();
} }
p(0, 'config', o1(0, e0_literal, 'animation', ctx.name)); elementProperty(0, 'config', objectLiteral1(0, e0_literal, 'animation', ctx.name));
ObjectComp.ngComponentDef.h(1, 0); ObjectComp.ngComponentDef.h(1, 0);
r(1, 0); componentRefresh(1, 0);
} }
const e0_literal = {duration: 500, animation: null}; const e0_literal = {duration: 500, animation: null};

167
packages/core/test/render3/outputs_spec.ts
View File

@ -8,7 +8,8 @@
import {EventEmitter} from '@angular/core'; import {EventEmitter} from '@angular/core';
import {C, E, L, T, V, b, cR, cr, defineComponent, defineDirective, e, p, r, v} from '../../src/render3/index'; import {defineComponent, defineDirective} from '../../src/render3/index';
import {bind, componentRefresh, container, containerRefreshEnd, containerRefreshStart, elementEnd, elementProperty, elementStart, listener, text, viewEnd, viewStart} from '../../src/render3/instructions';
import {containerEl, renderToHtml} from './render_util'; import {containerEl, renderToHtml} from './render_util';
@ -44,12 +45,12 @@ describe('outputs', () => {
/** <button-toggle (change)="onChange()"></button-toggle> */ /** <button-toggle (change)="onChange()"></button-toggle> */
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, ButtonToggle); elementStart(0, ButtonToggle);
{ L('change', ctx.onChange.bind(ctx)); } { listener('change', ctx.onChange.bind(ctx)); }
e(); elementEnd();
} }
ButtonToggle.ngComponentDef.h(1, 0); ButtonToggle.ngComponentDef.h(1, 0);
r(1, 0); componentRefresh(1, 0);
} }
let counter = 0; let counter = 0;
@ -67,15 +68,15 @@ describe('outputs', () => {
/** <button-toggle (change)="onChange()" (reset)="onReset()"></button-toggle> */ /** <button-toggle (change)="onChange()" (reset)="onReset()"></button-toggle> */
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, ButtonToggle); elementStart(0, ButtonToggle);
{ {
L('change', ctx.onChange.bind(ctx)); listener('change', ctx.onChange.bind(ctx));
L('reset', ctx.onReset.bind(ctx)); listener('reset', ctx.onReset.bind(ctx));
} }
e(); elementEnd();
} }
ButtonToggle.ngComponentDef.h(1, 0); ButtonToggle.ngComponentDef.h(1, 0);
r(1, 0); componentRefresh(1, 0);
} }
let counter = 0; let counter = 0;
@ -94,12 +95,12 @@ describe('outputs', () => {
/** <button-toggle (change)="counter++"></button-toggle> */ /** <button-toggle (change)="counter++"></button-toggle> */
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, ButtonToggle); elementStart(0, ButtonToggle);
{ L('change', () => ctx.counter++); } { listener('change', () => ctx.counter++); }
e(); elementEnd();
} }
ButtonToggle.ngComponentDef.h(1, 0); ButtonToggle.ngComponentDef.h(1, 0);
r(1, 0); componentRefresh(1, 0);
} }
const ctx = {counter: 0}; const ctx = {counter: 0};
@ -122,22 +123,22 @@ describe('outputs', () => {
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
C(0); container(0);
} }
cR(0); containerRefreshStart(0);
{ {
if (ctx.condition) { if (ctx.condition) {
if (V(0)) { if (viewStart(0)) {
E(0, ButtonToggle); elementStart(0, ButtonToggle);
{ L('change', ctx.onChange.bind(ctx)); } { listener('change', ctx.onChange.bind(ctx)); }
e(); elementEnd();
} }
ButtonToggle.ngComponentDef.h(1, 0); ButtonToggle.ngComponentDef.h(1, 0);
r(1, 0); componentRefresh(1, 0);
v(); viewEnd();
} }
} }
cr(); containerRefreshEnd();
} }
let counter = 0; let counter = 0;
@ -166,32 +167,32 @@ describe('outputs', () => {
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
C(0); container(0);
} }
cR(0); containerRefreshStart(0);
{ {
if (ctx.condition) { if (ctx.condition) {
if (V(0)) { if (viewStart(0)) {
C(0); container(0);
} }
cR(0); containerRefreshStart(0);
{ {
if (ctx.condition2) { if (ctx.condition2) {
if (V(0)) { if (viewStart(0)) {
E(0, ButtonToggle); elementStart(0, ButtonToggle);
{ L('change', ctx.onChange.bind(ctx)); } { listener('change', ctx.onChange.bind(ctx)); }
e(); elementEnd();
} }
ButtonToggle.ngComponentDef.h(1, 0); ButtonToggle.ngComponentDef.h(1, 0);
r(1, 0); componentRefresh(1, 0);
v(); viewEnd();
} }
} }
cr(); containerRefreshEnd();
v(); viewEnd();
} }
} }
cr(); containerRefreshEnd();
} }
let counter = 0; let counter = 0;
@ -232,32 +233,32 @@ describe('outputs', () => {
*/ */
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
C(0); container(0);
} }
cR(0); containerRefreshStart(0);
{ {
if (ctx.condition) { if (ctx.condition) {
if (V(0)) { if (viewStart(0)) {
E(0, 'button'); elementStart(0, 'button');
{ {
L('click', ctx.onClick.bind(ctx)); listener('click', ctx.onClick.bind(ctx));
T(1, 'Click me'); text(1, 'Click me');
} }
e(); elementEnd();
E(2, ButtonToggle); elementStart(2, ButtonToggle);
{ L('change', ctx.onChange.bind(ctx)); } { listener('change', ctx.onChange.bind(ctx)); }
e(); elementEnd();
E(4, DestroyComp); elementStart(4, DestroyComp);
e(); elementEnd();
} }
ButtonToggle.ngComponentDef.h(3, 2); ButtonToggle.ngComponentDef.h(3, 2);
DestroyComp.ngComponentDef.h(5, 4); DestroyComp.ngComponentDef.h(5, 4);
r(3, 2); componentRefresh(3, 2);
r(5, 4); componentRefresh(5, 4);
v(); viewEnd();
} }
} }
cr(); containerRefreshEnd();
} }
let clickCounter = 0; let clickCounter = 0;
@ -298,9 +299,9 @@ describe('outputs', () => {
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, 'button', null, [MyButton]); elementStart(0, 'button', null, [MyButton]);
{ L('click', ctx.onClick.bind(ctx)); } { listener('click', ctx.onClick.bind(ctx)); }
e(); elementEnd();
} }
} }
@ -321,12 +322,12 @@ describe('outputs', () => {
/** <button-toggle (change)="onChange()" otherDir></button-toggle> */ /** <button-toggle (change)="onChange()" otherDir></button-toggle> */
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, ButtonToggle, null, [OtherDir]); elementStart(0, ButtonToggle, null, [OtherDir]);
{ L('change', ctx.onChange.bind(ctx)); } { listener('change', ctx.onChange.bind(ctx)); }
e(); elementEnd();
} }
ButtonToggle.ngComponentDef.h(1, 0); ButtonToggle.ngComponentDef.h(1, 0);
r(1, 0); componentRefresh(1, 0);
} }
let counter = 0; let counter = 0;
@ -352,13 +353,13 @@ describe('outputs', () => {
/** <button-toggle (change)="onChange()" otherDir [change]="change"></button-toggle> */ /** <button-toggle (change)="onChange()" otherDir [change]="change"></button-toggle> */
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, ButtonToggle, null, [OtherDir]); elementStart(0, ButtonToggle, null, [OtherDir]);
{ L('change', ctx.onChange.bind(ctx)); } { listener('change', ctx.onChange.bind(ctx)); }
e(); elementEnd();
} }
p(0, 'change', b(ctx.change)); elementProperty(0, 'change', bind(ctx.change));
ButtonToggle.ngComponentDef.h(1, 0); ButtonToggle.ngComponentDef.h(1, 0);
r(1, 0); componentRefresh(1, 0);
} }
let counter = 0; let counter = 0;
@ -384,35 +385,35 @@ describe('outputs', () => {
*/ */
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, 'button'); elementStart(0, 'button');
{ {
L('click', ctx.onClick.bind(ctx)); listener('click', ctx.onClick.bind(ctx));
T(1, 'Click me'); text(1, 'Click me');
} }
e(); elementEnd();
C(2); container(2);
} }
cR(2); containerRefreshStart(2);
{ {
if (ctx.condition) { if (ctx.condition) {
if (V(0)) { if (viewStart(0)) {
E(0, ButtonToggle); elementStart(0, ButtonToggle);
{ L('change', ctx.onChange.bind(ctx)); } { listener('change', ctx.onChange.bind(ctx)); }
e(); elementEnd();
} }
ButtonToggle.ngComponentDef.h(1, 0); ButtonToggle.ngComponentDef.h(1, 0);
r(1, 0); componentRefresh(1, 0);
v(); viewEnd();
} else { } else {
if (V(1)) { if (viewStart(1)) {
E(0, 'div', null, [OtherDir]); elementStart(0, 'div', null, [OtherDir]);
{ L('change', ctx.onChange.bind(ctx)); } { listener('change', ctx.onChange.bind(ctx)); }
e(); elementEnd();
} }
v(); viewEnd();
} }
} }
cr(); containerRefreshEnd();
} }
let counter = 0; let counter = 0;

188
packages/core/test/render3/properties_spec.ts
View File

@ -8,8 +8,8 @@
import {EventEmitter} from '@angular/core'; import {EventEmitter} from '@angular/core';
import {C, E, L, T, V, b, b1, cR, cr, defineComponent, defineDirective, e, m, p, r, t, v} from '../../src/render3/index'; import {defineComponent, defineDirective} from '../../src/render3/index';
import {NO_CHANGE} from '../../src/render3/instructions'; import {NO_CHANGE, bind, bind1, componentRefresh, container, containerRefreshEnd, containerRefreshStart, elementEnd, elementProperty, elementStart, listener, memory, text, textBinding, viewEnd, viewStart} from '../../src/render3/instructions';
import {renderToHtml} from './render_util'; import {renderToHtml} from './render_util';
@ -18,10 +18,10 @@ describe('elementProperty', () => {
it('should support bindings to properties', () => { it('should support bindings to properties', () => {
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, 'span'); elementStart(0, 'span');
e(); elementEnd();
} }
p(0, 'id', b(ctx)); elementProperty(0, 'id', bind(ctx));
} }
expect(renderToHtml(Template, 'testId')).toEqual('<span id="testId"></span>'); expect(renderToHtml(Template, 'testId')).toEqual('<span id="testId"></span>');
@ -39,10 +39,10 @@ describe('elementProperty', () => {
function Template(ctx: string, cm: boolean) { function Template(ctx: string, cm: boolean) {
if (cm) { if (cm) {
E(0, 'span'); elementStart(0, 'span');
e(); elementEnd();
} }
p(0, 'id', cm ? expensive(ctx) : NO_CHANGE); elementProperty(0, 'id', cm ? expensive(ctx) : NO_CHANGE);
} }
expect(renderToHtml(Template, 'cheapId')).toEqual('<span id="cheapId"></span>'); expect(renderToHtml(Template, 'cheapId')).toEqual('<span id="cheapId"></span>');
@ -52,10 +52,10 @@ describe('elementProperty', () => {
it('should support interpolation for properties', () => { it('should support interpolation for properties', () => {
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, 'span'); elementStart(0, 'span');
e(); elementEnd();
} }
p(0, 'id', b1('_', ctx, '_')); elementProperty(0, 'id', bind1('_', ctx, '_'));
} }
expect(renderToHtml(Template, 'testId')).toEqual('<span id="_testId_"></span>'); expect(renderToHtml(Template, 'testId')).toEqual('<span id="_testId_"></span>');
@ -90,13 +90,13 @@ describe('elementProperty', () => {
/** <button myButton [id]="id" [disabled]="isDisabled">Click me</button> */ /** <button myButton [id]="id" [disabled]="isDisabled">Click me</button> */
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, 'button', null, [MyButton, OtherDir]); elementStart(0, 'button', null, [MyButton, OtherDir]);
{ T(3, 'Click me'); } { text(3, 'Click me'); }
e(); elementEnd();
} }
p(0, 'disabled', b(ctx.isDisabled)); elementProperty(0, 'disabled', bind(ctx.isDisabled));
p(0, 'id', b(ctx.id)); elementProperty(0, 'id', bind(ctx.id));
} }
const ctx: any = {isDisabled: true, id: 0}; const ctx: any = {isDisabled: true, id: 0};
@ -116,13 +116,13 @@ describe('elementProperty', () => {
/** <button myButton [id]="id" [disabled]="isDisabled">Click me</button> */ /** <button myButton [id]="id" [disabled]="isDisabled">Click me</button> */
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, 'button', null, [MyButton]); elementStart(0, 'button', null, [MyButton]);
{ T(2, 'Click me'); } { text(2, 'Click me'); }
e(); elementEnd();
} }
p(0, 'disabled', b(ctx.isDisabled)); elementProperty(0, 'disabled', bind(ctx.isDisabled));
p(0, 'id', b(ctx.id)); elementProperty(0, 'id', bind(ctx.id));
} }
const ctx: any = {isDisabled: true, id: 0}; const ctx: any = {isDisabled: true, id: 0};
@ -152,12 +152,12 @@ describe('elementProperty', () => {
/** <comp [id]="id"></comp> */ /** <comp [id]="id"></comp> */
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, Comp); elementStart(0, Comp);
e(); elementEnd();
} }
p(0, 'id', b(ctx.id)); elementProperty(0, 'id', bind(ctx.id));
Comp.ngComponentDef.h(1, 0); Comp.ngComponentDef.h(1, 0);
r(1, 0); componentRefresh(1, 0);
} }
expect(renderToHtml(Template, {id: 1})).toEqual(`<comp></comp>`); expect(renderToHtml(Template, {id: 1})).toEqual(`<comp></comp>`);
@ -183,11 +183,11 @@ describe('elementProperty', () => {
/** <button myButton otherDisabledDir [disabled]="isDisabled">Click me</button> */ /** <button myButton otherDisabledDir [disabled]="isDisabled">Click me</button> */
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, 'button', null, [MyButton, OtherDisabledDir]); elementStart(0, 'button', null, [MyButton, OtherDisabledDir]);
{ T(3, 'Click me'); } { text(3, 'Click me'); }
e(); elementEnd();
} }
p(0, 'disabled', b(ctx.isDisabled)); elementProperty(0, 'disabled', bind(ctx.isDisabled));
} }
const ctx: any = {isDisabled: true}; const ctx: any = {isDisabled: true};
@ -205,14 +205,14 @@ describe('elementProperty', () => {
/** <button otherDir [id]="id" (click)="onClick()">Click me</button> */ /** <button otherDir [id]="id" (click)="onClick()">Click me</button> */
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, 'button', null, [OtherDir]); elementStart(0, 'button', null, [OtherDir]);
{ {
L('click', ctx.onClick.bind(ctx)); listener('click', ctx.onClick.bind(ctx));
T(2, 'Click me'); text(2, 'Click me');
} }
e(); elementEnd();
} }
p(0, 'id', b(ctx.id)); elementProperty(0, 'id', bind(ctx.id));
} }
let counter = 0; let counter = 0;
@ -248,33 +248,33 @@ describe('elementProperty', () => {
*/ */
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, 'button', null, [IdDir]); elementStart(0, 'button', null, [IdDir]);
{ T(2, 'Click me'); } { text(2, 'Click me'); }
e(); elementEnd();
C(3); container(3);
} }
p(0, 'id', b(ctx.id1)); elementProperty(0, 'id', bind(ctx.id1));
cR(3); containerRefreshStart(3);
{ {
if (ctx.condition) { if (ctx.condition) {
if (V(0)) { if (viewStart(0)) {
E(0, 'button'); elementStart(0, 'button');
{ T(1, 'Click me too'); } { text(1, 'Click me too'); }
e(); elementEnd();
} }
p(0, 'id', b(ctx.id2)); elementProperty(0, 'id', bind(ctx.id2));
v(); viewEnd();
} else { } else {
if (V(1)) { if (viewStart(1)) {
E(0, 'button', null, [OtherDir]); elementStart(0, 'button', null, [OtherDir]);
{ T(2, 'Click me too'); } { text(2, 'Click me too'); }
e(); elementEnd();
} }
p(0, 'id', b(ctx.id3)); elementProperty(0, 'id', bind(ctx.id3));
v(); viewEnd();
} }
} }
cr(); containerRefreshEnd();
} }
expect(renderToHtml(Template, {condition: true, id1: 'one', id2: 'two', id3: 'three'})) expect(renderToHtml(Template, {condition: true, id1: 'one', id2: 'two', id3: 'three'}))
@ -317,8 +317,8 @@ describe('elementProperty', () => {
/** <div role="button" myDir></div> */ /** <div role="button" myDir></div> */
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, 'div', ['role', 'button'], [MyDir]); elementStart(0, 'div', ['role', 'button'], [MyDir]);
e(); elementEnd();
} }
} }
@ -331,10 +331,10 @@ describe('elementProperty', () => {
/** <div role="button" [role]="role" myDir></div> */ /** <div role="button" [role]="role" myDir></div> */
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, 'div', ['role', 'button'], [MyDir]); elementStart(0, 'div', ['role', 'button'], [MyDir]);
e(); elementEnd();
} }
p(0, 'role', b(ctx.role)); elementProperty(0, 'role', bind(ctx.role));
} }
expect(renderToHtml(Template, {role: 'listbox'})).toEqual(`<div role="button"></div>`); expect(renderToHtml(Template, {role: 'listbox'})).toEqual(`<div role="button"></div>`);
@ -349,8 +349,8 @@ describe('elementProperty', () => {
/** <div role="button" myDir myDirB></div> */ /** <div role="button" myDir myDirB></div> */
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, 'div', ['role', 'button'], [MyDir, MyDirB]); elementStart(0, 'div', ['role', 'button'], [MyDir, MyDirB]);
e(); elementEnd();
} }
} }
@ -364,8 +364,8 @@ describe('elementProperty', () => {
/** <div role="button" dir="rtl" myDir></div> */ /** <div role="button" dir="rtl" myDir></div> */
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, 'div', ['role', 'button', 'dir', 'rtl'], [MyDir]); elementStart(0, 'div', ['role', 'button', 'dir', 'rtl'], [MyDir]);
e(); elementEnd();
} }
} }
@ -379,9 +379,9 @@ describe('elementProperty', () => {
/** <div role="button" (change)="onChange()" myDir></div> */ /** <div role="button" (change)="onChange()" myDir></div> */
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, 'div', ['role', 'button'], [MyDir]); elementStart(0, 'div', ['role', 'button'], [MyDir]);
{ L('change', ctx.onChange.bind(ctx)); } { listener('change', ctx.onChange.bind(ctx)); }
e(); elementEnd();
} }
} }
@ -404,10 +404,10 @@ describe('elementProperty', () => {
*/ */
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, 'div', ['role', 'button', 'dir', 'rtl'], [MyDir]); elementStart(0, 'div', ['role', 'button', 'dir', 'rtl'], [MyDir]);
e(); elementEnd();
E(2, 'div', ['role', 'listbox'], [MyDirB]); elementStart(2, 'div', ['role', 'listbox'], [MyDirB]);
e(); elementEnd();
} }
} }
@ -430,28 +430,28 @@ describe('elementProperty', () => {
*/ */
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, 'div', ['role', 'listbox'], [MyDir]); elementStart(0, 'div', ['role', 'listbox'], [MyDir]);
e(); elementEnd();
C(2); container(2);
} }
cR(2); containerRefreshStart(2);
{ {
if (ctx.condition) { if (ctx.condition) {
if (V(0)) { if (viewStart(0)) {
E(0, 'div', ['role', 'button'], [MyDirB]); elementStart(0, 'div', ['role', 'button'], [MyDirB]);
e(); elementEnd();
} }
v(); viewEnd();
} else { } else {
if (V(1)) { if (viewStart(1)) {
E(0, 'div', ['role', 'menu']); elementStart(0, 'div', ['role', 'menu']);
{} {}
e(); elementEnd();
} }
v(); viewEnd();
} }
} }
cr(); containerRefreshEnd();
} }
expect(renderToHtml(Template, { expect(renderToHtml(Template, {
@ -475,11 +475,11 @@ describe('elementProperty', () => {
tag: 'comp', tag: 'comp',
template: function(ctx: any, cm: boolean) { template: function(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, 'div', ['role', 'button'], [MyDir]); elementStart(0, 'div', ['role', 'button'], [MyDir]);
e(); elementEnd();
T(2); text(2);
} }
t(2, b(m<MyDir>(1).role)); textBinding(2, bind(memory<MyDir>(1).role));
}, },
factory: () => new Comp() factory: () => new Comp()
}); });
@ -492,21 +492,21 @@ describe('elementProperty', () => {
*/ */
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
C(0); container(0);
} }
cR(0); containerRefreshStart(0);
{ {
for (let i = 0; i < 2; i++) { for (let i = 0; i < 2; i++) {
if (V(0)) { if (viewStart(0)) {
E(0, Comp); elementStart(0, Comp);
e(); elementEnd();
} }
Comp.ngComponentDef.h(1, 0); Comp.ngComponentDef.h(1, 0);
r(1, 0); componentRefresh(1, 0);
v(); viewEnd();
} }
} }
cr(); containerRefreshEnd();
} }
expect(renderToHtml(Template, {})) expect(renderToHtml(Template, {}))

483
packages/core/test/render3/query_spec.ts
View File

@ -6,12 +6,13 @@
* found in the LICENSE file at https://angular.io/license * found in the LICENSE file at https://angular.io/license
*/ */
import {QUERY_READ_CONTAINER_REF, QUERY_READ_ELEMENT_REF, QUERY_READ_FROM_NODE, QUERY_READ_TEMPLATE_REF} from '../../src/render3/di'; import {QUERY_READ_CONTAINER_REF, QUERY_READ_ELEMENT_REF, QUERY_READ_FROM_NODE, QUERY_READ_TEMPLATE_REF} from '../../src/render3/di';
import {C, E, Q, QueryList, V, cR, cr, detectChanges, e, m, qR, v} from '../../src/render3/index'; import {QueryList, detectChanges} from '../../src/render3/index';
import {container, containerRefreshEnd, containerRefreshStart, elementEnd, elementStart, memory, viewEnd, viewStart} from '../../src/render3/instructions';
import {query, queryRefresh} from '../../src/render3/query';
import {createComponent, createDirective, renderComponent} from './render_util'; import {createComponent, createDirective, renderComponent} from './render_util';
/** /**
* Helper function to check if a given candidate object resembles ElementRef * Helper function to check if a given candidate object resembles ElementRef
* @param candidate * @param candidate
@ -58,19 +59,19 @@ describe('query', () => {
*/ */
let tmp: any; let tmp: any;
if (cm) { if (cm) {
Q(0, Child, false); query(0, Child, false);
Q(1, Child, true); query(1, Child, true);
E(2, Child); elementStart(2, Child);
{ {
child1 = m(3); child1 = memory(3);
E(4, Child); elementStart(4, Child);
{ child2 = m(5); } { child2 = memory(5); }
e(); elementEnd();
} }
e(); elementEnd();
} }
qR(tmp = m<QueryList<any>>(0)) && (ctx.query0 = tmp as QueryList<any>); queryRefresh(tmp = memory<QueryList<any>>(0)) && (ctx.query0 = tmp as QueryList<any>);
qR(tmp = m<QueryList<any>>(1)) && (ctx.query1 = tmp as QueryList<any>); queryRefresh(tmp = memory<QueryList<any>>(1)) && (ctx.query1 = tmp as QueryList<any>);
}); });
const parent = renderComponent(Cmp); const parent = renderComponent(Cmp);
@ -92,18 +93,18 @@ describe('query', () => {
const Cmpt = createComponent('cmpt', function(ctx: any, cm: boolean) { const Cmpt = createComponent('cmpt', function(ctx: any, cm: boolean) {
let tmp: any; let tmp: any;
if (cm) { if (cm) {
Q(0, Child, false, QUERY_READ_ELEMENT_REF); query(0, Child, false, QUERY_READ_ELEMENT_REF);
elToQuery = E(1, 'div', null, [Child]); elToQuery = elementStart(1, 'div', null, [Child]);
e(); elementEnd();
} }
qR(tmp = m<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>); queryRefresh(tmp = memory<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>);
}); });
const cmptInstance = renderComponent(Cmpt); const cmptInstance = renderComponent(Cmpt);
const query = (cmptInstance.query as QueryList<any>); const qList = (cmptInstance.query as QueryList<any>);
expect(query.length).toBe(1); expect(qList.length).toBe(1);
expect(isElementRef(query.first)).toBeTruthy(); expect(isElementRef(qList.first)).toBeTruthy();
expect(query.first.nativeElement).toEqual(elToQuery); expect(qList.first.nativeElement).toEqual(elToQuery);
}); });
@ -120,18 +121,18 @@ describe('query', () => {
const Cmpt = createComponent('cmpt', function(ctx: any, cm: boolean) { const Cmpt = createComponent('cmpt', function(ctx: any, cm: boolean) {
let tmp: any; let tmp: any;
if (cm) { if (cm) {
Q(0, Child, false, OtherChild); query(0, Child, false, OtherChild);
E(1, 'div', null, [Child, OtherChild]); elementStart(1, 'div', null, [Child, OtherChild]);
{ otherChildInstance = m(3); } { otherChildInstance = memory(3); }
e(); elementEnd();
} }
qR(tmp = m<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>); queryRefresh(tmp = memory<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>);
}); });
const cmptInstance = renderComponent(Cmpt); const cmptInstance = renderComponent(Cmpt);
const query = (cmptInstance.query as QueryList<any>); const qList = (cmptInstance.query as QueryList<any>);
expect(query.length).toBe(1); expect(qList.length).toBe(1);
expect(query.first).toBe(otherChildInstance); expect(qList.first).toBe(otherChildInstance);
}); });
it('should not add results to query if a requested token cant be read', () => { it('should not add results to query if a requested token cant be read', () => {
@ -146,16 +147,16 @@ describe('query', () => {
const Cmpt = createComponent('cmpt', function(ctx: any, cm: boolean) { const Cmpt = createComponent('cmpt', function(ctx: any, cm: boolean) {
let tmp: any; let tmp: any;
if (cm) { if (cm) {
Q(0, Child, false, OtherChild); query(0, Child, false, OtherChild);
E(1, 'div', null, [Child]); elementStart(1, 'div', null, [Child]);
e(); elementEnd();
} }
qR(tmp = m<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>); queryRefresh(tmp = memory<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>);
}); });
const cmptInstance = renderComponent(Cmpt); const cmptInstance = renderComponent(Cmpt);
const query = (cmptInstance.query as QueryList<any>); const qList = (cmptInstance.query as QueryList<any>);
expect(query.length).toBe(0); expect(qList.length).toBe(0);
}); });
}); });
@ -174,19 +175,19 @@ describe('query', () => {
const Cmpt = createComponent('cmpt', function(ctx: any, cm: boolean) { const Cmpt = createComponent('cmpt', function(ctx: any, cm: boolean) {
let tmp: any; let tmp: any;
if (cm) { if (cm) {
Q(0, ['foo'], false, QUERY_READ_FROM_NODE); query(0, ['foo'], false, QUERY_READ_FROM_NODE);
elToQuery = E(1, 'div', null, null, ['foo', '']); elToQuery = elementStart(1, 'div', null, null, ['foo', '']);
e(); elementEnd();
E(2, 'div'); elementStart(2, 'div');
e(); elementEnd();
} }
qR(tmp = m<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>); queryRefresh(tmp = memory<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>);
}); });
const cmptInstance = renderComponent(Cmpt); const cmptInstance = renderComponent(Cmpt);
const query = (cmptInstance.query as QueryList<any>); const qList = (cmptInstance.query as QueryList<any>);
expect(query.length).toBe(1); expect(qList.length).toBe(1);
expect(query.first.nativeElement).toEqual(elToQuery); expect(qList.first.nativeElement).toEqual(elToQuery);
}); });
it('should query for multiple elements and read ElementRef by default', () => { it('should query for multiple elements and read ElementRef by default', () => {
@ -204,22 +205,22 @@ describe('query', () => {
const Cmpt = createComponent('cmpt', function(ctx: any, cm: boolean) { const Cmpt = createComponent('cmpt', function(ctx: any, cm: boolean) {
let tmp: any; let tmp: any;
if (cm) { if (cm) {
Q(0, ['foo', 'bar'], undefined, QUERY_READ_FROM_NODE); query(0, ['foo', 'bar'], undefined, QUERY_READ_FROM_NODE);
el1ToQuery = E(1, 'div', null, null, ['foo', '']); el1ToQuery = elementStart(1, 'div', null, null, ['foo', '']);
e(); elementEnd();
E(2, 'div'); elementStart(2, 'div');
e(); elementEnd();
el2ToQuery = E(3, 'div', null, null, ['bar', '']); el2ToQuery = elementStart(3, 'div', null, null, ['bar', '']);
e(); elementEnd();
} }
qR(tmp = m<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>); queryRefresh(tmp = memory<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>);
}); });
const cmptInstance = renderComponent(Cmpt); const cmptInstance = renderComponent(Cmpt);
const query = (cmptInstance.query as QueryList<any>); const qList = (cmptInstance.query as QueryList<any>);
expect(query.length).toBe(2); expect(qList.length).toBe(2);
expect(query.first.nativeElement).toEqual(el1ToQuery); expect(qList.first.nativeElement).toEqual(el1ToQuery);
expect(query.last.nativeElement).toEqual(el2ToQuery); expect(qList.last.nativeElement).toEqual(el2ToQuery);
}); });
it('should read ElementRef from an element when explicitly asked for', () => { it('should read ElementRef from an element when explicitly asked for', () => {
@ -235,20 +236,20 @@ describe('query', () => {
const Cmpt = createComponent('cmpt', function(ctx: any, cm: boolean) { const Cmpt = createComponent('cmpt', function(ctx: any, cm: boolean) {
let tmp: any; let tmp: any;
if (cm) { if (cm) {
Q(0, ['foo'], false, QUERY_READ_ELEMENT_REF); query(0, ['foo'], false, QUERY_READ_ELEMENT_REF);
elToQuery = E(1, 'div', null, null, ['foo', '']); elToQuery = elementStart(1, 'div', null, null, ['foo', '']);
e(); elementEnd();
E(2, 'div'); elementStart(2, 'div');
e(); elementEnd();
} }
qR(tmp = m<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>); queryRefresh(tmp = memory<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>);
}); });
const cmptInstance = renderComponent(Cmpt); const cmptInstance = renderComponent(Cmpt);
const query = (cmptInstance.query as QueryList<any>); const qList = (cmptInstance.query as QueryList<any>);
expect(query.length).toBe(1); expect(qList.length).toBe(1);
expect(isElementRef(query.first)).toBeTruthy(); expect(isElementRef(qList.first)).toBeTruthy();
expect(query.first.nativeElement).toEqual(elToQuery); expect(qList.first.nativeElement).toEqual(elToQuery);
}); });
it('should read ViewContainerRef from element nodes when explicitly asked for', () => { it('should read ViewContainerRef from element nodes when explicitly asked for', () => {
@ -261,17 +262,17 @@ describe('query', () => {
const Cmpt = createComponent('cmpt', function(ctx: any, cm: boolean) { const Cmpt = createComponent('cmpt', function(ctx: any, cm: boolean) {
let tmp: any; let tmp: any;
if (cm) { if (cm) {
Q(0, ['foo'], false, QUERY_READ_CONTAINER_REF); query(0, ['foo'], false, QUERY_READ_CONTAINER_REF);
E(1, 'div', null, null, ['foo', '']); elementStart(1, 'div', null, null, ['foo', '']);
e(); elementEnd();
} }
qR(tmp = m<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>); queryRefresh(tmp = memory<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>);
}); });
const cmptInstance = renderComponent(Cmpt); const cmptInstance = renderComponent(Cmpt);
const query = (cmptInstance.query as QueryList<any>); const qList = (cmptInstance.query as QueryList<any>);
expect(query.length).toBe(1); expect(qList.length).toBe(1);
expect(isViewContainerRef(query.first)).toBeTruthy(); expect(isViewContainerRef(qList.first)).toBeTruthy();
}); });
it('should read ViewContainerRef from container nodes when explicitly asked for', () => { it('should read ViewContainerRef from container nodes when explicitly asked for', () => {
@ -284,16 +285,16 @@ describe('query', () => {
const Cmpt = createComponent('cmpt', function(ctx: any, cm: boolean) { const Cmpt = createComponent('cmpt', function(ctx: any, cm: boolean) {
let tmp: any; let tmp: any;
if (cm) { if (cm) {
Q(0, ['foo'], false, QUERY_READ_CONTAINER_REF); query(0, ['foo'], false, QUERY_READ_CONTAINER_REF);
C(1, undefined, undefined, undefined, undefined, ['foo', '']); container(1, undefined, undefined, undefined, undefined, ['foo', '']);
} }
qR(tmp = m<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>); queryRefresh(tmp = memory<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>);
}); });
const cmptInstance = renderComponent(Cmpt); const cmptInstance = renderComponent(Cmpt);
const query = (cmptInstance.query as QueryList<any>); const qList = (cmptInstance.query as QueryList<any>);
expect(query.length).toBe(1); expect(qList.length).toBe(1);
expect(isViewContainerRef(query.first)).toBeTruthy(); expect(isViewContainerRef(qList.first)).toBeTruthy();
}); });
it('should no longer read ElementRef with a native element pointing to comment DOM node from containers', it('should no longer read ElementRef with a native element pointing to comment DOM node from containers',
@ -307,16 +308,16 @@ describe('query', () => {
const Cmpt = createComponent('cmpt', function(ctx: any, cm: boolean) { const Cmpt = createComponent('cmpt', function(ctx: any, cm: boolean) {
let tmp: any; let tmp: any;
if (cm) { if (cm) {
Q(0, ['foo'], false, QUERY_READ_ELEMENT_REF); query(0, ['foo'], false, QUERY_READ_ELEMENT_REF);
C(1, undefined, undefined, undefined, undefined, ['foo', '']); container(1, undefined, undefined, undefined, undefined, ['foo', '']);
} }
qR(tmp = m<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>); queryRefresh(tmp = memory<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>);
}); });
const cmptInstance = renderComponent(Cmpt); const cmptInstance = renderComponent(Cmpt);
const query = (cmptInstance.query as QueryList<any>); const qList = (cmptInstance.query as QueryList<any>);
expect(query.length).toBe(1); expect(qList.length).toBe(1);
expect(query.first.nativeElement).toBe(null); expect(qList.first.nativeElement).toBe(null);
}); });
it('should read TemplateRef from container nodes by default', () => { it('should read TemplateRef from container nodes by default', () => {
@ -330,16 +331,16 @@ describe('query', () => {
const Cmpt = createComponent('cmpt', function(ctx: any, cm: boolean) { const Cmpt = createComponent('cmpt', function(ctx: any, cm: boolean) {
let tmp: any; let tmp: any;
if (cm) { if (cm) {
Q(0, ['foo'], undefined, QUERY_READ_FROM_NODE); query(0, ['foo'], undefined, QUERY_READ_FROM_NODE);
C(1, undefined, undefined, undefined, undefined, ['foo', '']); container(1, undefined, undefined, undefined, undefined, ['foo', '']);
} }
qR(tmp = m<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>); queryRefresh(tmp = memory<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>);
}); });
const cmptInstance = renderComponent(Cmpt); const cmptInstance = renderComponent(Cmpt);
const query = (cmptInstance.query as QueryList<any>); const qList = (cmptInstance.query as QueryList<any>);
expect(query.length).toBe(1); expect(qList.length).toBe(1);
expect(isTemplateRef(query.first)).toBeTruthy(); expect(isTemplateRef(qList.first)).toBeTruthy();
}); });
@ -353,16 +354,16 @@ describe('query', () => {
const Cmpt = createComponent('cmpt', function(ctx: any, cm: boolean) { const Cmpt = createComponent('cmpt', function(ctx: any, cm: boolean) {
let tmp: any; let tmp: any;
if (cm) { if (cm) {
Q(0, ['foo'], false, QUERY_READ_TEMPLATE_REF); query(0, ['foo'], false, QUERY_READ_TEMPLATE_REF);
C(1, undefined, undefined, undefined, undefined, ['foo', '']); container(1, undefined, undefined, undefined, undefined, ['foo', '']);
} }
qR(tmp = m<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>); queryRefresh(tmp = memory<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>);
}); });
const cmptInstance = renderComponent(Cmpt); const cmptInstance = renderComponent(Cmpt);
const query = (cmptInstance.query as QueryList<any>); const qList = (cmptInstance.query as QueryList<any>);
expect(query.length).toBe(1); expect(qList.length).toBe(1);
expect(isTemplateRef(query.first)).toBeTruthy(); expect(isTemplateRef(qList.first)).toBeTruthy();
}); });
it('should read component instance if element queried for is a component host', () => { it('should read component instance if element queried for is a component host', () => {
@ -378,18 +379,18 @@ describe('query', () => {
const Cmpt = createComponent('cmpt', function(ctx: any, cm: boolean) { const Cmpt = createComponent('cmpt', function(ctx: any, cm: boolean) {
let tmp: any; let tmp: any;
if (cm) { if (cm) {
Q(0, ['foo'], true, QUERY_READ_FROM_NODE); query(0, ['foo'], true, QUERY_READ_FROM_NODE);
E(1, Child, null, null, ['foo', '']); elementStart(1, Child, null, null, ['foo', '']);
{ childInstance = m(2); } { childInstance = memory(2); }
e(); elementEnd();
} }
qR(tmp = m<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>); queryRefresh(tmp = memory<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>);
}); });
const cmptInstance = renderComponent(Cmpt); const cmptInstance = renderComponent(Cmpt);
const query = (cmptInstance.query as QueryList<any>); const qList = (cmptInstance.query as QueryList<any>);
expect(query.length).toBe(1); expect(qList.length).toBe(1);
expect(query.first).toBe(childInstance); expect(qList.first).toBe(childInstance);
}); });
it('should read directive instance if element queried for has an exported directive with a matching name', it('should read directive instance if element queried for has an exported directive with a matching name',
@ -406,18 +407,18 @@ describe('query', () => {
const Cmpt = createComponent('cmpt', function(ctx: any, cm: boolean) { const Cmpt = createComponent('cmpt', function(ctx: any, cm: boolean) {
let tmp: any; let tmp: any;
if (cm) { if (cm) {
Q(0, ['foo'], true, QUERY_READ_FROM_NODE); query(0, ['foo'], true, QUERY_READ_FROM_NODE);
E(1, 'div', null, [Child], ['foo', 'child']); elementStart(1, 'div', null, [Child], ['foo', 'child']);
childInstance = m(2); childInstance = memory(2);
e(); elementEnd();
} }
qR(tmp = m<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>); queryRefresh(tmp = memory<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>);
}); });
const cmptInstance = renderComponent(Cmpt); const cmptInstance = renderComponent(Cmpt);
const query = (cmptInstance.query as QueryList<any>); const qList = (cmptInstance.query as QueryList<any>);
expect(query.length).toBe(1); expect(qList.length).toBe(1);
expect(query.first).toBe(childInstance); expect(qList.first).toBe(childInstance);
}); });
it('should read all matching directive instances from a given element', () => { it('should read all matching directive instances from a given element', () => {
@ -434,22 +435,22 @@ describe('query', () => {
const Cmpt = createComponent('cmpt', function(ctx: any, cm: boolean) { const Cmpt = createComponent('cmpt', function(ctx: any, cm: boolean) {
let tmp: any; let tmp: any;
if (cm) { if (cm) {
Q(0, ['foo', 'bar'], true, QUERY_READ_FROM_NODE); query(0, ['foo', 'bar'], true, QUERY_READ_FROM_NODE);
E(1, 'div', null, [Child1, Child2], ['foo', 'child1', 'bar', 'child2']); elementStart(1, 'div', null, [Child1, Child2], ['foo', 'child1', 'bar', 'child2']);
{ {
child1Instance = m(2); child1Instance = memory(2);
child2Instance = m(3); child2Instance = memory(3);
} }
e(); elementEnd();
} }
qR(tmp = m<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>); queryRefresh(tmp = memory<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>);
}); });
const cmptInstance = renderComponent(Cmpt); const cmptInstance = renderComponent(Cmpt);
const query = (cmptInstance.query as QueryList<any>); const qList = (cmptInstance.query as QueryList<any>);
expect(query.length).toBe(2); expect(qList.length).toBe(2);
expect(query.first).toBe(child1Instance); expect(qList.first).toBe(child1Instance);
expect(query.last).toBe(child2Instance); expect(qList.last).toBe(child2Instance);
}); });
it('should match match on exported directive name and read a requested token', () => { it('should match match on exported directive name and read a requested token', () => {
@ -465,17 +466,17 @@ describe('query', () => {
const Cmpt = createComponent('cmpt', function(ctx: any, cm: boolean) { const Cmpt = createComponent('cmpt', function(ctx: any, cm: boolean) {
let tmp: any; let tmp: any;
if (cm) { if (cm) {
Q(0, ['foo'], undefined, QUERY_READ_ELEMENT_REF); query(0, ['foo'], undefined, QUERY_READ_ELEMENT_REF);
div = E(1, 'div', null, [Child], ['foo', 'child']); div = elementStart(1, 'div', null, [Child], ['foo', 'child']);
e(); elementEnd();
} }
qR(tmp = m<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>); queryRefresh(tmp = memory<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>);
}); });
const cmptInstance = renderComponent(Cmpt); const cmptInstance = renderComponent(Cmpt);
const query = (cmptInstance.query as QueryList<any>); const qList = (cmptInstance.query as QueryList<any>);
expect(query.length).toBe(1); expect(qList.length).toBe(1);
expect(query.first.nativeElement).toBe(div); expect(qList.first.nativeElement).toBe(div);
}); });
it('should support reading a mix of ElementRef and directive instances', () => { it('should support reading a mix of ElementRef and directive instances', () => {
@ -491,19 +492,19 @@ describe('query', () => {
const Cmpt = createComponent('cmpt', function(ctx: any, cm: boolean) { const Cmpt = createComponent('cmpt', function(ctx: any, cm: boolean) {
let tmp: any; let tmp: any;
if (cm) { if (cm) {
Q(0, ['foo', 'bar'], undefined, QUERY_READ_FROM_NODE); query(0, ['foo', 'bar'], undefined, QUERY_READ_FROM_NODE);
div = E(1, 'div', null, [Child], ['foo', '', 'bar', 'child']); div = elementStart(1, 'div', null, [Child], ['foo', '', 'bar', 'child']);
{ childInstance = m(2); } { childInstance = memory(2); }
e(); elementEnd();
} }
qR(tmp = m<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>); queryRefresh(tmp = memory<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>);
}); });
const cmptInstance = renderComponent(Cmpt); const cmptInstance = renderComponent(Cmpt);
const query = (cmptInstance.query as QueryList<any>); const qList = (cmptInstance.query as QueryList<any>);
expect(query.length).toBe(2); expect(qList.length).toBe(2);
expect(query.first.nativeElement).toBe(div); expect(qList.first.nativeElement).toBe(div);
expect(query.last).toBe(childInstance); expect(qList.last).toBe(childInstance);
}); });
it('should not add results to query if a requested token cant be read', () => { it('should not add results to query if a requested token cant be read', () => {
@ -518,16 +519,16 @@ describe('query', () => {
const Cmpt = createComponent('cmpt', function(ctx: any, cm: boolean) { const Cmpt = createComponent('cmpt', function(ctx: any, cm: boolean) {
let tmp: any; let tmp: any;
if (cm) { if (cm) {
Q(0, ['foo'], false, Child); query(0, ['foo'], false, Child);
E(1, 'div', null, null, ['foo', '']); elementStart(1, 'div', null, null, ['foo', '']);
e(); elementEnd();
} }
qR(tmp = m<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>); queryRefresh(tmp = memory<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>);
}); });
const cmptInstance = renderComponent(Cmpt); const cmptInstance = renderComponent(Cmpt);
const query = (cmptInstance.query as QueryList<any>); const qList = (cmptInstance.query as QueryList<any>);
expect(query.length).toBe(0); expect(qList.length).toBe(0);
}); });
}); });
@ -547,38 +548,38 @@ describe('query', () => {
const Cmpt = createComponent('cmpt', function(ctx: any, cm: boolean) { const Cmpt = createComponent('cmpt', function(ctx: any, cm: boolean) {
let tmp: any; let tmp: any;
if (cm) { if (cm) {
Q(0, ['foo'], true, QUERY_READ_FROM_NODE); query(0, ['foo'], true, QUERY_READ_FROM_NODE);
C(1); container(1);
} }
cR(1); containerRefreshStart(1);
{ {
if (ctx.exp) { if (ctx.exp) {
let cm1 = V(1); let cm1 = viewStart(1);
{ {
if (cm1) { if (cm1) {
firstEl = E(0, 'div', null, null, ['foo', '']); firstEl = elementStart(0, 'div', null, null, ['foo', '']);
e(); elementEnd();
} }
} }
v(); viewEnd();
} }
} }
cr(); containerRefreshEnd();
qR(tmp = m<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>); queryRefresh(tmp = memory<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>);
}); });
const cmptInstance = renderComponent(Cmpt); const cmptInstance = renderComponent(Cmpt);
const query = (cmptInstance.query as any); const qList = (cmptInstance.query as any);
expect(query.length).toBe(0); expect(qList.length).toBe(0);
cmptInstance.exp = true; cmptInstance.exp = true;
detectChanges(cmptInstance); detectChanges(cmptInstance);
expect(query.length).toBe(1); expect(qList.length).toBe(1);
expect(query.first.nativeElement).toBe(firstEl); expect(qList.first.nativeElement).toBe(firstEl);
cmptInstance.exp = false; cmptInstance.exp = false;
detectChanges(cmptInstance); detectChanges(cmptInstance);
expect(query.length).toBe(0); expect(qList.length).toBe(0);
}); });
it('should add results from embedded views in the correct order - views and elements mix', it('should add results from embedded views in the correct order - views and elements mix',
@ -597,48 +598,48 @@ describe('query', () => {
const Cmpt = createComponent('cmpt', function(ctx: any, cm: boolean) { const Cmpt = createComponent('cmpt', function(ctx: any, cm: boolean) {
let tmp: any; let tmp: any;
if (cm) { if (cm) {
Q(0, ['foo'], true, QUERY_READ_FROM_NODE); query(0, ['foo'], true, QUERY_READ_FROM_NODE);
firstEl = E(1, 'b', null, null, ['foo', '']); firstEl = elementStart(1, 'b', null, null, ['foo', '']);
e(); elementEnd();
C(2); container(2);
lastEl = E(3, 'i', null, null, ['foo', '']); lastEl = elementStart(3, 'i', null, null, ['foo', '']);
e(); elementEnd();
} }
cR(2); containerRefreshStart(2);
{ {
if (ctx.exp) { if (ctx.exp) {
let cm1 = V(1); let cm1 = viewStart(1);
{ {
if (cm1) { if (cm1) {
viewEl = E(0, 'div', null, null, ['foo', '']); viewEl = elementStart(0, 'div', null, null, ['foo', '']);
e(); elementEnd();
} }
} }
v(); viewEnd();
} }
} }
cr(); containerRefreshEnd();
qR(tmp = m<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>); queryRefresh(tmp = memory<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>);
}); });
const cmptInstance = renderComponent(Cmpt); const cmptInstance = renderComponent(Cmpt);
const query = (cmptInstance.query as any); const qList = (cmptInstance.query as any);
expect(query.length).toBe(2); expect(qList.length).toBe(2);
expect(query.first.nativeElement).toBe(firstEl); expect(qList.first.nativeElement).toBe(firstEl);
expect(query.last.nativeElement).toBe(lastEl); expect(qList.last.nativeElement).toBe(lastEl);
cmptInstance.exp = true; cmptInstance.exp = true;
detectChanges(cmptInstance); detectChanges(cmptInstance);
expect(query.length).toBe(3); expect(qList.length).toBe(3);
expect(query.toArray()[0].nativeElement).toBe(firstEl); expect(qList.toArray()[0].nativeElement).toBe(firstEl);
expect(query.toArray()[1].nativeElement).toBe(viewEl); expect(qList.toArray()[1].nativeElement).toBe(viewEl);
expect(query.toArray()[2].nativeElement).toBe(lastEl); expect(qList.toArray()[2].nativeElement).toBe(lastEl);
cmptInstance.exp = false; cmptInstance.exp = false;
detectChanges(cmptInstance); detectChanges(cmptInstance);
expect(query.length).toBe(2); expect(qList.length).toBe(2);
expect(query.first.nativeElement).toBe(firstEl); expect(qList.first.nativeElement).toBe(firstEl);
expect(query.last.nativeElement).toBe(lastEl); expect(qList.last.nativeElement).toBe(lastEl);
}); });
it('should add results from embedded views in the correct order - views side by side', () => { it('should add results from embedded views in the correct order - views side by side', () => {
@ -657,50 +658,50 @@ describe('query', () => {
const Cmpt = createComponent('cmpt', function(ctx: any, cm: boolean) { const Cmpt = createComponent('cmpt', function(ctx: any, cm: boolean) {
let tmp: any; let tmp: any;
if (cm) { if (cm) {
Q(0, ['foo'], true, QUERY_READ_FROM_NODE); query(0, ['foo'], true, QUERY_READ_FROM_NODE);
C(1); container(1);
} }
cR(1); containerRefreshStart(1);
{ {
if (ctx.exp1) { if (ctx.exp1) {
let cm1 = V(0); let cm1 = viewStart(0);
{ {
if (cm1) { if (cm1) {
firstEl = E(0, 'div', null, null, ['foo', '']); firstEl = elementStart(0, 'div', null, null, ['foo', '']);
e(); elementEnd();
} }
} }
v(); viewEnd();
} }
if (ctx.exp2) { if (ctx.exp2) {
let cm1 = V(1); let cm1 = viewStart(1);
{ {
if (cm1) { if (cm1) {
lastEl = E(0, 'span', null, null, ['foo', '']); lastEl = elementStart(0, 'span', null, null, ['foo', '']);
e(); elementEnd();
} }
} }
v(); viewEnd();
} }
} }
cr(); containerRefreshEnd();
qR(tmp = m<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>); queryRefresh(tmp = memory<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>);
}); });
const cmptInstance = renderComponent(Cmpt); const cmptInstance = renderComponent(Cmpt);
const query = (cmptInstance.query as any); const qList = (cmptInstance.query as any);
expect(query.length).toBe(0); expect(qList.length).toBe(0);
cmptInstance.exp2 = true; cmptInstance.exp2 = true;
detectChanges(cmptInstance); detectChanges(cmptInstance);
expect(query.length).toBe(1); expect(qList.length).toBe(1);
expect(query.last.nativeElement).toBe(lastEl); expect(qList.last.nativeElement).toBe(lastEl);
cmptInstance.exp1 = true; cmptInstance.exp1 = true;
detectChanges(cmptInstance); detectChanges(cmptInstance);
expect(query.length).toBe(2); expect(qList.length).toBe(2);
expect(query.first.nativeElement).toBe(firstEl); expect(qList.first.nativeElement).toBe(firstEl);
expect(query.last.nativeElement).toBe(lastEl); expect(qList.last.nativeElement).toBe(lastEl);
}); });
it('should add results from embedded views in the correct order - nested views', () => { it('should add results from embedded views in the correct order - nested views', () => {
@ -719,55 +720,55 @@ describe('query', () => {
const Cmpt = createComponent('cmpt', function(ctx: any, cm: boolean) { const Cmpt = createComponent('cmpt', function(ctx: any, cm: boolean) {
let tmp: any; let tmp: any;
if (cm) { if (cm) {
Q(0, ['foo'], true, QUERY_READ_FROM_NODE); query(0, ['foo'], true, QUERY_READ_FROM_NODE);
C(1); container(1);
} }
cR(1); containerRefreshStart(1);
{ {
if (ctx.exp1) { if (ctx.exp1) {
let cm1 = V(0); let cm1 = viewStart(0);
{ {
if (cm1) { if (cm1) {
firstEl = E(0, 'div', null, null, ['foo', '']); firstEl = elementStart(0, 'div', null, null, ['foo', '']);
e(); elementEnd();
C(1); container(1);
} }
cR(1); containerRefreshStart(1);
{ {
if (ctx.exp2) { if (ctx.exp2) {
let cm2 = V(0); let cm2 = viewStart(0);
{ {
if (cm2) { if (cm2) {
lastEl = E(0, 'span', null, null, ['foo', '']); lastEl = elementStart(0, 'span', null, null, ['foo', '']);
e(); elementEnd();
} }
} }
v(); viewEnd();
} }
} }
cr(); containerRefreshEnd();
} }
v(); viewEnd();
} }
} }
cr(); containerRefreshEnd();
qR(tmp = m<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>); queryRefresh(tmp = memory<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>);
}); });
const cmptInstance = renderComponent(Cmpt); const cmptInstance = renderComponent(Cmpt);
const query = (cmptInstance.query as any); const qList = (cmptInstance.query as any);
expect(query.length).toBe(0); expect(qList.length).toBe(0);
cmptInstance.exp1 = true; cmptInstance.exp1 = true;
detectChanges(cmptInstance); detectChanges(cmptInstance);
expect(query.length).toBe(1); expect(qList.length).toBe(1);
expect(query.first.nativeElement).toBe(firstEl); expect(qList.first.nativeElement).toBe(firstEl);
cmptInstance.exp2 = true; cmptInstance.exp2 = true;
detectChanges(cmptInstance); detectChanges(cmptInstance);
expect(query.length).toBe(2); expect(qList.length).toBe(2);
expect(query.first.nativeElement).toBe(firstEl); expect(qList.first.nativeElement).toBe(firstEl);
expect(query.last.nativeElement).toBe(lastEl); expect(qList.last.nativeElement).toBe(lastEl);
}); });
it('should support combination of deep and shallow queries', () => { it('should support combination of deep and shallow queries', () => {
@ -783,28 +784,28 @@ describe('query', () => {
const Cmpt = createComponent('cmpt', function(ctx: any, cm: boolean) { const Cmpt = createComponent('cmpt', function(ctx: any, cm: boolean) {
let tmp: any; let tmp: any;
if (cm) { if (cm) {
Q(0, ['foo'], true, QUERY_READ_FROM_NODE); query(0, ['foo'], true, QUERY_READ_FROM_NODE);
Q(1, ['foo'], false, QUERY_READ_FROM_NODE); query(1, ['foo'], false, QUERY_READ_FROM_NODE);
C(2); container(2);
E(3, 'span', null, null, ['foo', '']); elementStart(3, 'span', null, null, ['foo', '']);
e(); elementEnd();
} }
cR(2); containerRefreshStart(2);
{ {
if (ctx.exp) { if (ctx.exp) {
let cm1 = V(0); let cm1 = viewStart(0);
{ {
if (cm1) { if (cm1) {
E(0, 'div', null, null, ['foo', '']); elementStart(0, 'div', null, null, ['foo', '']);
e(); elementEnd();
} }
} }
v(); viewEnd();
} }
} }
cr(); containerRefreshEnd();
qR(tmp = m<QueryList<any>>(0)) && (ctx.deep = tmp as QueryList<any>); queryRefresh(tmp = memory<QueryList<any>>(0)) && (ctx.deep = tmp as QueryList<any>);
qR(tmp = m<QueryList<any>>(1)) && (ctx.shallow = tmp as QueryList<any>); queryRefresh(tmp = memory<QueryList<any>>(1)) && (ctx.shallow = tmp as QueryList<any>);
}); });
const cmptInstance = renderComponent(Cmpt); const cmptInstance = renderComponent(Cmpt);
@ -841,17 +842,17 @@ describe('query', () => {
}); });
// initial refresh, the query should be dirty // initial refresh, the query should be dirty
qR(queryList); queryRefresh(queryList);
expect(changes).toBe(1); expect(changes).toBe(1);
// refresh without setting dirty - no emit // refresh without setting dirty - no emit
qR(queryList); queryRefresh(queryList);
expect(changes).toBe(1); expect(changes).toBe(1);
// refresh with setting dirty - emit // refresh with setting dirty - emit
queryList.setDirty(); queryList.setDirty();
qR(queryList); queryRefresh(queryList);
expect(changes).toBe(2); expect(changes).toBe(2);
}); });

29
packages/core/test/render3/renderer_factory_spec.ts
View File

@ -10,7 +10,8 @@ import {AnimationEvent} from '@angular/animations';
import {MockAnimationDriver, MockAnimationPlayer} from '@angular/animations/browser/testing'; import {MockAnimationDriver, MockAnimationPlayer} from '@angular/animations/browser/testing';
import {RendererType2, ViewEncapsulation} from '../../src/core'; import {RendererType2, ViewEncapsulation} from '../../src/core';
import {E, L, T, b, defineComponent, detectChanges, e, p, r} from '../../src/render3/index'; import {defineComponent, detectChanges} from '../../src/render3/index';
import {bind, componentRefresh, elementEnd, elementProperty, elementStart, listener, text} from '../../src/render3/instructions';
import {createRendererType2} from '../../src/view/index'; import {createRendererType2} from '../../src/view/index';
import {getAnimationRendererFactory2, getRendererFactory2} from './imported_renderer2'; import {getAnimationRendererFactory2, getRendererFactory2} from './imported_renderer2';
@ -34,7 +35,7 @@ describe('renderer factory lifecycle', () => {
template: function(ctx: SomeComponent, cm: boolean) { template: function(ctx: SomeComponent, cm: boolean) {
logs.push('component'); logs.push('component');
if (cm) { if (cm) {
T(0, 'foo'); text(0, 'foo');
} }
}, },
factory: () => new SomeComponent factory: () => new SomeComponent
@ -55,19 +56,19 @@ describe('renderer factory lifecycle', () => {
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
logs.push('function'); logs.push('function');
if (cm) { if (cm) {
T(0, 'bar'); text(0, 'bar');
} }
} }
function TemplateWithComponent(ctx: any, cm: boolean) { function TemplateWithComponent(ctx: any, cm: boolean) {
logs.push('function_with_component'); logs.push('function_with_component');
if (cm) { if (cm) {
T(0, 'bar'); text(0, 'bar');
E(1, SomeComponent); elementStart(1, SomeComponent);
e(); elementEnd();
} }
SomeComponent.ngComponentDef.h(2, 1); SomeComponent.ngComponentDef.h(2, 1);
r(2, 1); componentRefresh(2, 1);
} }
beforeEach(() => { logs = []; }); beforeEach(() => { logs = []; });
@ -126,7 +127,7 @@ describe('animation renderer factory', () => {
tag: 'some-component', tag: 'some-component',
template: function(ctx: SomeComponent, cm: boolean) { template: function(ctx: SomeComponent, cm: boolean) {
if (cm) { if (cm) {
T(0, 'foo'); text(0, 'foo');
} }
}, },
factory: () => new SomeComponent factory: () => new SomeComponent
@ -143,15 +144,15 @@ describe('animation renderer factory', () => {
tag: 'some-component', tag: 'some-component',
template: function(ctx: SomeComponentWithAnimation, cm: boolean) { template: function(ctx: SomeComponentWithAnimation, cm: boolean) {
if (cm) { if (cm) {
E(0, 'div'); elementStart(0, 'div');
{ {
L('@myAnimation.start', ctx.callback.bind(ctx)); listener('@myAnimation.start', ctx.callback.bind(ctx));
L('@myAnimation.done', ctx.callback.bind(ctx)); listener('@myAnimation.done', ctx.callback.bind(ctx));
T(1, 'foo'); text(1, 'foo');
} }
e(); elementEnd();
} }
p(0, '@myAnimation', b(ctx.exp)); elementProperty(0, '@myAnimation', bind(ctx.exp));
}, },
factory: () => new SomeComponentWithAnimation, factory: () => new SomeComponentWithAnimation,
rendererType: createRendererType2({ rendererType: createRendererType2({

17
packages/core/test/render3/view_container_ref_spec.ts
View File

@ -7,7 +7,8 @@
*/ */
import {TemplateRef, ViewContainerRef} from '../../src/core'; import {TemplateRef, ViewContainerRef} from '../../src/core';
import {C, T, b, cR, cr, defineComponent, defineDirective, injectTemplateRef, injectViewContainerRef, m, r, t} from '../../src/render3/index'; import {defineComponent, defineDirective, injectTemplateRef, injectViewContainerRef} from '../../src/render3/index';
import {bind, componentRefresh, container, containerRefreshEnd, containerRefreshStart, memory, text, textBinding} from '../../src/render3/instructions';
import {renderComponent, toHtml} from './render_util'; import {renderComponent, toHtml} from './render_util';
@ -32,17 +33,17 @@ describe('ViewContainerRef', () => {
if (cm) { if (cm) {
const subTemplate = (ctx: any, cm: boolean) => { const subTemplate = (ctx: any, cm: boolean) => {
if (cm) { if (cm) {
T(0); text(0);
} }
t(0, b(ctx.$implicit)); textBinding(0, bind(ctx.$implicit));
}; };
C(0, [TestDirective], subTemplate); container(0, [TestDirective], subTemplate);
} }
cR(0); containerRefreshStart(0);
cmp.testDir = m(1) as TestDirective; cmp.testDir = memory(1) as TestDirective;
TestDirective.ngDirectiveDef.h(1, 0); TestDirective.ngDirectiveDef.h(1, 0);
r(1, 0); componentRefresh(1, 0);
cr(); containerRefreshEnd();
}, },
}); });
} }