作者：foresth
项目：angula
it('should keep local ref for host element', () => {
const files: MockDirectory = getAppFiles(`
<b ngNonBindable #myRef id="my-id">
<i>Hello {{ name }}!</i>
</b>
{{ myRef.id }}
`);
const template = `
const $_c0$ = ["id", "my-id"];
const $_c1$ = ["myRef", ""];
…
template:function MyComponent_Template(rf, $ctx$){
if (rf & 1) {
$i0$.ɵelementStart(0, "b", $_c0$, $_c1$);
$i0$.ɵdisableBindings();
$i0$.ɵelementStart(2, "i");
$i0$.ɵtext(3, "Hello {{ name }}!");
$i0$.ɵelementEnd();
$i0$.ɵenableBindings();
$i0$.ɵelementEnd();
$i0$.ɵtext(4);
}
if (rf & 2) {
const $_r0$ = $i0$.ɵreference(1);
$i0$.ɵtextBinding(4, $i0$.ɵinterpolation1(" ", $_r0$.id, " "));
}
}
`;
const result = compile(files, angularFiles);
expectEmit(result.source, template, 'Incorrect handling of local refs for host element');
});
作者：marclava
项目：angula
it('should generate the proper update instructions for interpolated properties', () => {
const files: MockDirectory = getAppFiles(`
<div title="a{{one}}b{{two}}c{{three}}d{{four}}e{{five}}f{{six}}g{{seven}}h{{eight}}i{{nine}}j"></div>
<div title="a{{one}}b{{two}}c{{three}}d{{four}}e{{five}}f{{six}}g{{seven}}h{{eight}}i"></div>
<div title="a{{one}}b{{two}}c{{three}}d{{four}}e{{five}}f{{six}}g{{seven}}h"></div>
<div title="a{{one}}b{{two}}c{{three}}d{{four}}e{{five}}f{{six}}g"></div>
<div title="a{{one}}b{{two}}c{{three}}d{{four}}e{{five}}f"></div>
<div title="a{{one}}b{{two}}c{{three}}d{{four}}e"></div>
<div title="a{{one}}b{{two}}c{{three}}d"></div>
<div title="a{{one}}b{{two}}c"></div>
<div title="a{{one}}b"></div>
<div title="{{one}}"></div>
`);
const template = `
…
if (rf & 2) {
i0.ɵɵselect(0);
i0.ɵɵpropertyInterpolateV("title", ["a", ctx.one, "b", ctx.two, "c", ctx.three, "d", ctx.four, "e", ctx.five, "f", ctx.six, "g", ctx.seven, "h", ctx.eight, "i", ctx.nine, "j"]);
i0.ɵɵselect(1);
i0.ɵɵpropertyInterpolate8("title", "a", ctx.one, "b", ctx.two, "c", ctx.three, "d", ctx.four, "e", ctx.five, "f", ctx.six, "g", ctx.seven, "h", ctx.eight, "i");
i0.ɵɵselect(2);
i0.ɵɵpropertyInterpolate7("title", "a", ctx.one, "b", ctx.two, "c", ctx.three, "d", ctx.four, "e", ctx.five, "f", ctx.six, "g", ctx.seven, "h");
i0.ɵɵselect(3);
i0.ɵɵpropertyInterpolate6("title", "a", ctx.one, "b", ctx.two, "c", ctx.three, "d", ctx.four, "e", ctx.five, "f", ctx.six, "g");
i0.ɵɵselect(4);
i0.ɵɵpropertyInterpolate5("title", "a", ctx.one, "b", ctx.two, "c", ctx.three, "d", ctx.four, "e", ctx.five, "f");
i0.ɵɵselect(5);
i0.ɵɵpropertyInterpolate4("title", "a", ctx.one, "b", ctx.two, "c", ctx.three, "d", ctx.four, "e");
i0.ɵɵselect(6);
i0.ɵɵpropertyInterpolate3("title", "a", ctx.one, "b", ctx.two, "c", ctx.three, "d");
i0.ɵɵselect(7);
i0.ɵɵpropertyInterpolate2("title", "a", ctx.one, "b", ctx.two, "c");
i0.ɵɵselect(8);
i0.ɵɵpropertyInterpolate1("title", "a", ctx.one, "b");
i0.ɵɵselect(9);
i0.ɵɵpropertyInterpolate("title", ctx.one);
}
…
`;
const result = compile(files, angularFiles);
expectEmit(result.source, template, 'Incorrect handling of interpolated properties');
});
作者：foresth
项目：angula
describe('non bindable behavior', () => {
const getAppFiles = (template: string = ''): MockDirectory => ({
app: {
'example.ts': `
import {Component, NgModule} from '@angular/core';
@Component({
selector: 'my-app',
template: \`${template}\`
})
export class MyComponent {
name = 'John Doe';
}
@NgModule({declarations: [MyComponent]})
export class MyModule {}`
}
});
it('should keep local ref for host element', () => {
const files: MockDirectory = getAppFiles(`
<b ngNonBindable #myRef id="my-id">
<i>Hello {{ name }}!</i>
</b>
{{ myRef.id }}
`);
const template = `
const $_c0$ = ["id", "my-id"];
const $_c1$ = ["myRef", ""];
…
template:function MyComponent_Template(rf, $ctx$){
if (rf & 1) {
$i0$.ɵelementStart(0, "b", $_c0$, $_c1$);
$i0$.ɵdisableBindings();
$i0$.ɵelementStart(2, "i");
$i0$.ɵtext(3, "Hello {{ name }}!");
$i0$.ɵelementEnd();
$i0$.ɵenableBindings();
$i0$.ɵelementEnd();
$i0$.ɵtext(4);
}
if (rf & 2) {
const $_r0$ = $i0$.ɵreference(1);
$i0$.ɵtextBinding(4, $i0$.ɵinterpolation1(" ", $_r0$.id, " "));
}
}
`;
const result = compile(files, angularFiles);
expectEmit(result.source, template, 'Incorrect handling of local refs for host element');
});
it('should not have local refs for nested elements', () => {
const files: MockDirectory = getAppFiles(`
<div ngNonBindable>
<input value="one" #myInput> {{ myInput.value }}
</div>
`);
const template = `
const $_c0$ = ["value", "one", "#myInput", ""];
…
template:function MyComponent_Template(rf, $ctx$){
if (rf & 1) {
$i0$.ɵelementStart(0, "div");
$i0$.ɵdisableBindings();
$i0$.ɵelement(1, "input", $_c0$);
$i0$.ɵtext(2, " {{ myInput.value }} ");
$i0$.ɵenableBindings();
$i0$.ɵelementEnd();
}
`;
const result = compile(files, angularFiles);
expectEmit(result.source, template, 'Incorrect handling of local refs for nested elements');
});
it('should not process property bindings and listeners', () => {
const files: MockDirectory = getAppFiles(`
<div ngNonBindable>
<div [id]="my-id" (click)="onclick"></div>
</div>
`);
const template = `
const $_c0$ = ["[id]", "my-id", "(click)", "onclick"];
…
template:function MyComponent_Template(rf, $ctx$){
if (rf & 1) {
$i0$.ɵelementStart(0, "div");
$i0$.ɵdisableBindings();
$i0$.ɵelement(1, "div", $_c0$);
$i0$.ɵenableBindings();
$i0$.ɵelementEnd();
}
`;
const result = compile(files, angularFiles);
expectEmit(result.source, template, 'Incorrect handling of property bindings and listeners');
});
it('should not generate extra instructions for elements with no children', () => {
//.........这里部分代码省略.........
作者：marclava
项目：angula
describe('non bindable behavior', () => {
const getAppFiles = (template: string = ''): MockDirectory => ({
app: {
'example.ts': `
import {Component, NgModule} from '@angular/core';
@Component({
selector: 'my-app',
template: \`${template}\`
})
export class MyComponent {
name = 'John Doe';
}
@NgModule({declarations: [MyComponent]})
export class MyModule {}`
}
});
it('should generate the proper update instructions for interpolated properties', () => {
const files: MockDirectory = getAppFiles(`
<div title="a{{one}}b{{two}}c{{three}}d{{four}}e{{five}}f{{six}}g{{seven}}h{{eight}}i{{nine}}j"></div>
<div title="a{{one}}b{{two}}c{{three}}d{{four}}e{{five}}f{{six}}g{{seven}}h{{eight}}i"></div>
<div title="a{{one}}b{{two}}c{{three}}d{{four}}e{{five}}f{{six}}g{{seven}}h"></div>
<div title="a{{one}}b{{two}}c{{three}}d{{four}}e{{five}}f{{six}}g"></div>
<div title="a{{one}}b{{two}}c{{three}}d{{four}}e{{five}}f"></div>
<div title="a{{one}}b{{two}}c{{three}}d{{four}}e"></div>
<div title="a{{one}}b{{two}}c{{three}}d"></div>
<div title="a{{one}}b{{two}}c"></div>
<div title="a{{one}}b"></div>
<div title="{{one}}"></div>
`);
const template = `
…
if (rf & 2) {
i0.ɵɵselect(0);
i0.ɵɵpropertyInterpolateV("title", ["a", ctx.one, "b", ctx.two, "c", ctx.three, "d", ctx.four, "e", ctx.five, "f", ctx.six, "g", ctx.seven, "h", ctx.eight, "i", ctx.nine, "j"]);
i0.ɵɵselect(1);
i0.ɵɵpropertyInterpolate8("title", "a", ctx.one, "b", ctx.two, "c", ctx.three, "d", ctx.four, "e", ctx.five, "f", ctx.six, "g", ctx.seven, "h", ctx.eight, "i");
i0.ɵɵselect(2);
i0.ɵɵpropertyInterpolate7("title", "a", ctx.one, "b", ctx.two, "c", ctx.three, "d", ctx.four, "e", ctx.five, "f", ctx.six, "g", ctx.seven, "h");
i0.ɵɵselect(3);
i0.ɵɵpropertyInterpolate6("title", "a", ctx.one, "b", ctx.two, "c", ctx.three, "d", ctx.four, "e", ctx.five, "f", ctx.six, "g");
i0.ɵɵselect(4);
i0.ɵɵpropertyInterpolate5("title", "a", ctx.one, "b", ctx.two, "c", ctx.three, "d", ctx.four, "e", ctx.five, "f");
i0.ɵɵselect(5);
i0.ɵɵpropertyInterpolate4("title", "a", ctx.one, "b", ctx.two, "c", ctx.three, "d", ctx.four, "e");
i0.ɵɵselect(6);
i0.ɵɵpropertyInterpolate3("title", "a", ctx.one, "b", ctx.two, "c", ctx.three, "d");
i0.ɵɵselect(7);
i0.ɵɵpropertyInterpolate2("title", "a", ctx.one, "b", ctx.two, "c");
i0.ɵɵselect(8);
i0.ɵɵpropertyInterpolate1("title", "a", ctx.one, "b");
i0.ɵɵselect(9);
i0.ɵɵpropertyInterpolate("title", ctx.one);
}
…
`;
const result = compile(files, angularFiles);
expectEmit(result.source, template, 'Incorrect handling of interpolated properties');
});
it('should keep local ref for host element', () => {
const files: MockDirectory = getAppFiles(`
<b ngNonBindable #myRef id="my-id">
<i>Hello {{ name }}!</i>
</b>
{{ myRef.id }}
`);
const template = `
const $_c0$ = ["id", "my-id"];
const $_c1$ = ["myRef", ""];
…
template:function MyComponent_Template(rf, $ctx$){
if (rf & 1) {
$i0$.ɵɵelementStart(0, "b", $_c0$, $_c1$);
$i0$.ɵɵdisableBindings();
$i0$.ɵɵelementStart(2, "i");
$i0$.ɵɵtext(3, "Hello {{ name }}!");
$i0$.ɵɵelementEnd();
$i0$.ɵɵenableBindings();
$i0$.ɵɵelementEnd();
$i0$.ɵɵtext(4);
}
if (rf & 2) {
const $_r0$ = $i0$.ɵɵreference(1);
$r3$.ɵɵselect(4);
$i0$.ɵɵtextBinding(4, $i0$.ɵɵinterpolation1(" ", $_r0$.id, " "));
}
}
`;
const result = compile(files, angularFiles);
expectEmit(result.source, template, 'Incorrect handling of local refs for host element');
});
it('should not have local refs for nested elements', () => {
const files: MockDirectory = getAppFiles(`
<div ngNonBindable>
//.........这里部分代码省略.........
