cargdev/angular
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ivy): match directives on bindings and element outputs (#25614)

Browse Source 
Closes #23560

PR Close #25614
This commit is contained in:
Pawel Kozlowski
2018-08-20 15:20:12 +02:00
committed by Matias Niemelä
parent 3634575d89
commit 6a0f78fabf
15 changed files with 487 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
packages/compiler-cli/test/compliance/r3_compiler_compliance_spec.ts
View File

@ -6,7 +6,7 @@
* found in the LICENSE file at https://angular.io/license
*/
import {InitialStylingFlags} from '@angular/compiler/src/core';
import {AttributeMarker, InitialStylingFlags} from '@angular/compiler/src/core';
import {setup} from '@angular/compiler/test/aot/test_util';
import {compile, expectEmit} from './mock_compile';
@ -200,7 +200,7 @@ describe('compiler compliance', () => {
// The template should look like this (where IDENT is a wild card for an identifier):
const template = `
const $c1$ = ["class", "my-app", 0, "http://someuri/foo", "foo:bar", "baz", "title", "Hello", 0, "http://someuri/foo", "foo:qux", "quacks"];
const $e0_attrs$ = ["class", "my-app", 0, "http://someuri/foo", "foo:bar", "baz", "title", "Hello", 0, "http://someuri/foo", "foo:qux", "quacks"];
…
template: function MyComponent_Template(rf, ctx) {
if (rf & 1) {
@ -315,9 +315,11 @@ describe('compiler compliance', () => {
const factory =
'factory: function MyComponent_Factory(t) { return new (t || MyComponent)(); }';
const template = `
const $e0_attrs$ = [${AttributeMarker.SelectOnly}, "id"];
…
template: function MyComponent_Template(rf, ctx) {
if (rf & 1) {
$r3$.ɵelement(0, "div");
$r3$.ɵelement(0, "div", $e0_attrs$);
}
if (rf & 2) {
$r3$.ɵelementProperty(0, "id", $r3$.ɵbind(ctx.id));
@ -357,19 +359,20 @@ describe('compiler compliance', () => {
}
};
const $e0_attrs$ = [];
const factory =
'factory: function MyComponent_Factory(t) { return new (t || MyComponent)(); }';
const template = `
template: function MyComponent_Template(rf, ctx) {
if (rf & 1) {
$r3$.ɵelement(0, "div");
$r3$.ɵelement(0, "div", $e0_attrs$);
$r3$.ɵpipe(1,"pipe");
}
if (rf & 2) {
$r3$.ɵelementProperty(0, "ternary", $r3$.ɵbind((ctx.cond ? $r3$.ɵpureFunction1(8, _c0, ctx.a): _c1)));
$r3$.ɵelementProperty(0, "ternary", $r3$.ɵbind((ctx.cond ? $r3$.ɵpureFunction1(8, $c0$, ctx.a): $c1$)));
$r3$.ɵelementProperty(0, "pipe", $r3$.ɵbind($r3$.ɵpipeBind3(1, 4, ctx.value, 1, 2)));
$r3$.ɵelementProperty(0, "and", $r3$.ɵbind((ctx.cond && $r3$.ɵpureFunction1(10, _c0, ctx.b))));
$r3$.ɵelementProperty(0, "or", $r3$.ɵbind((ctx.cond || $r3$.ɵpureFunction1(12, _c0, ctx.c))));
$r3$.ɵelementProperty(0, "and", $r3$.ɵbind((ctx.cond && $r3$.ɵpureFunction1(10, $c0$, ctx.b))));
$r3$.ɵelementProperty(0, "or", $r3$.ɵbind((ctx.cond || $r3$.ɵpureFunction1(12, $c0$, ctx.c))));
}
}
`;
@ -705,6 +708,7 @@ describe('compiler compliance', () => {
};
const MyAppDeclaration = `
const $e0_attrs$ = [${AttributeMarker.SelectOnly}, "names"];
const $e0_ff$ = function ($v$) { return ["Nancy", $v$]; };
…
MyApp.ngComponentDef = $r3$.ɵdefineComponent({
@ -716,7 +720,7 @@ describe('compiler compliance', () => {
vars: 3,
template: function MyApp_Template(rf, ctx) {
if (rf & 1) {
$r3$.ɵelement(0, "my-comp");
$r3$.ɵelement(0, "my-comp", $e0_attrs$);
}
if (rf & 2) {
$r3$.ɵelementProperty(0, "names", $r3$.ɵbind($r3$.ɵpureFunction1(1, $e0_ff$, ctx.customName)));
@ -784,6 +788,7 @@ describe('compiler compliance', () => {
};
const MyAppDefinition = `
const $e0_attr$ = [${AttributeMarker.SelectOnly}, "names"];
const $e0_ff$ = function ($v0$, $v1$, $v2$, $v3$, $v4$, $v5$, $v6$, $v7$, $v8$) {
return ["start-", $v0$, $v1$, $v2$, $v3$, $v4$, "-middle-", $v5$, $v6$, $v7$, $v8$, "-end"];
}
@ -797,7 +802,7 @@ describe('compiler compliance', () => {
vars: 11,
template: function MyApp_Template(rf, ctx) {
if (rf & 1) {
$r3$.ɵelement(0, "my-comp");
$r3$.ɵelement(0, "my-comp", $e0_attr$);
}
if (rf & 2) {
$r3$.ɵelementProperty(
@ -849,6 +854,7 @@ describe('compiler compliance', () => {
};
const MyAppDefinition = `
const $e0_attrs$ = [${AttributeMarker.SelectOnly}, "config"];
const $e0_ff$ = function ($v$) { return {"duration": 500, animation: $v$}; };
…
MyApp.ngComponentDef = $r3$.ɵdefineComponent({
@ -860,7 +866,7 @@ describe('compiler compliance', () => {
vars: 3,
template: function MyApp_Template(rf, ctx) {
if (rf & 1) {
$r3$.ɵelement(0, "object-comp");
$r3$.ɵelement(0, "object-comp", $e0_attrs$);
}
if (rf & 2) {
$r3$.ɵelementProperty(0, "config", $r3$.ɵbind($r3$.ɵpureFunction1(1, $e0_ff$, ctx.name)));
@ -913,6 +919,7 @@ describe('compiler compliance', () => {
};
const MyAppDefinition = `
const $e0_attrs$ = [${AttributeMarker.SelectOnly}, "config"];
const $c0$ = {opacity: 0, duration: 0};
const $e0_ff$ = function ($v$) { return {opacity: 1, duration: $v$}; };
const $e0_ff_1$ = function ($v$) { return [$c0$, $v$]; };
@ -927,7 +934,7 @@ describe('compiler compliance', () => {
vars: 8,
template: function MyApp_Template(rf, ctx) {
if (rf & 1) {
$r3$.ɵelement(0, "nested-comp");
$r3$.ɵelement(0, "nested-comp", $e0_attrs$);
}
if (rf & 2) {
$r3$.ɵelementProperty(
@ -1433,9 +1440,9 @@ describe('compiler compliance', () => {
};
const template = `
const $c0$ = ["ngFor","","ngForOf",""];
const $c0$ = ["ngFor", "" , ${AttributeMarker.SelectOnly}, "ngForOf"];
const $c1$ = ["foo", ""];
const $c2$ = ["ngIf",""];
const $c2$ = [${AttributeMarker.SelectOnly}, "ngIf"];
function MyComponent_div_span_Template_3(rf, ctx) {
if (rf & 1) {
@ -1545,8 +1552,8 @@ describe('compiler compliance', () => {
vars: 2,
template: function SimpleLayout_Template(rf, ctx) {
if (rf & 1) {
$r3$.ɵelement(0, "lifecycle-comp");
$r3$.ɵelement(1, "lifecycle-comp");
$r3$.ɵelement(0, "lifecycle-comp", $e0_attrs$);
$r3$.ɵelement(1, "lifecycle-comp", $e1_attrs$);
}
if (rf & 2) {
$r3$.ɵelementProperty(0, "name", $r3$.ɵbind(ctx.name1));
@ -1656,7 +1663,7 @@ describe('compiler compliance', () => {
`;
const MyComponentDefinition = `
const $_c0$ = ["for","","forOf",""];
const $t1_attrs$ = ["for", "", ${AttributeMarker.SelectOnly}, "forOf"];
function MyComponent__svg_g_Template_1(rf, ctx) {
if (rf & 1) {
$r3$.ɵnamespaceSVG();
@ -1677,7 +1684,7 @@ describe('compiler compliance', () => {
if (rf & 1) {
$r3$.ɵnamespaceSVG();
$r3$.ɵelementStart(0,"svg");
$r3$.ɵtemplate(1, MyComponent__svg_g_Template_1, 2, 0, null, $_c0$);
$r3$.ɵtemplate(1, MyComponent__svg_g_Template_1, 2, 0, null, $t1_attrs$);
$r3$.ɵelementEnd();
}
if (rf & 2) { $r3$.ɵelementProperty(1,"forOf",$r3$.ɵbind(ctx.items)); }
@ -1732,7 +1739,7 @@ describe('compiler compliance', () => {
`;
const MyComponentDefinition = `
const $_c0$ = ["for","","forOf",""];
const $t1_attrs$ = ["for", "", ${AttributeMarker.SelectOnly}, "forOf"];
function MyComponent_li_Template_1(rf, ctx) {
if (rf & 1) {
$r3$.ɵelementStart(0, "li");
@ -1755,7 +1762,7 @@ describe('compiler compliance', () => {
template: function MyComponent_Template(rf, ctx) {
if (rf & 1) {
$r3$.ɵelementStart(0, "ul");
$r3$.ɵtemplate(1, MyComponent_li_Template_1, 2, 1, null, $_c0$);
$r3$.ɵtemplate(1, MyComponent_li_Template_1, 2, 1, null, $t1_attrs$);
$r3$.ɵelementEnd();
}
if (rf & 2) {
@ -1812,7 +1819,7 @@ describe('compiler compliance', () => {
};
const MyComponentDefinition = `
const $c1$ = ["for", "", "forOf", ""];
const $t4_attrs$ = ["for", "", ${AttributeMarker.SelectOnly}, "forOf"];
function MyComponent_li_li_Template_4(rf, ctx) {
if (rf & 1) {
$r3$.ɵelementStart(0, "li");
@ -1833,7 +1840,7 @@ describe('compiler compliance', () => {
$r3$.ɵtext(2);
$r3$.ɵelementEnd();
$r3$.ɵelementStart(3, "ul");
$r3$.ɵtemplate(4, MyComponent_li_li_Template_4, 2, 2, null, $c1$);
$r3$.ɵtemplate(4, MyComponent_li_li_Template_4, 2, 2, null, $t4_attrs$);
$r3$.ɵelementEnd();
$r3$.ɵelementEnd();
}

10
packages/compiler-cli/test/compliance/r3_view_compiler_binding_spec.ts
View File

@ -5,7 +5,7 @@
* 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
*/
import {AttributeMarker} from '@angular/compiler/src/core';
import {MockDirectory, setup} from '@angular/compiler/test/aot/test_util';
import {compile, expectEmit} from './mock_compile';
@ -73,9 +73,11 @@ describe('compiler compliance: bindings', () => {
};
const template = `
const $e0_attrs$ = [${AttributeMarker.SelectOnly}, "title"];
…
template:function MyComponent_Template(rf, $ctx$){
if (rf & 1) {
$i0$.ɵelement(0, "a");
$i0$.ɵelement(0, "a", $e0_attrs$);
}
if (rf & 2) {
$i0$.ɵelementProperty(0, "title", $i0$.ɵbind($ctx$.title));
@ -105,9 +107,11 @@ describe('compiler compliance: bindings', () => {
};
const template = `
const $e0_attrs$ = [${AttributeMarker.SelectOnly}, "title"];
…
template:function MyComponent_Template(rf, $ctx$){
if (rf & 1) {
$i0$.ɵelement(0, "a");
$i0$.ɵelement(0, "a", $e0_attrs$);
}
if (rf & 2) {
$i0$.ɵelementProperty(0, "title", $i0$.ɵinterpolation1("Hello ", $ctx$.name, ""));

299
packages/compiler-cli/test/compliance/r3_view_compiler_directives_spec.ts Normal file
View File

@ -0,0 +1,299 @@
/**
* @license
* Copyright Google Inc. All Rights Reserved.
*
* 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
*/
import {AttributeMarker} from '@angular/compiler/src/core';
import {setup} from '@angular/compiler/test/aot/test_util';
import {compile, expectEmit} from './mock_compile';
describe('compiler compliance: directives', () => {
const angularFiles = setup({
compileAngular: false,
compileAnimations: false,
compileFakeCore: true,
});
describe('matching', () => {
it('should not match directives on i18n attribute', () => {
const files = {
app: {
'spec.ts': `
import {Component, Directive, Input, NgModule} from '@angular/core';
@Directive({selector: '[i18n]'})
export class I18nDirective {}
@Component({selector: 'my-component', template: '<div i18n></div>'})
export class MyComponent {}
@NgModule({declarations: [I18nDirective, MyComponent]})
export class MyModule{}`
}
};
// MyComponent definition should be:
const MyComponentDefinition = `
MyComponent.ngComponentDef = $r3$.ɵdefineComponent({
type: MyComponent,
selectors: [["my-component"]],
factory: function MyComponent_Factory(t) { return new (t || MyComponent)(); },
features: [$r3$.ɵPublicFeature],
consts: 1,
vars: 0,
template: function MyComponent_Template(rf, ctx) {
if (rf & 1) {
$r3$.ɵelement(0, "div");
}
}
});
`;
const result = compile(files, angularFiles);
const source = result.source;
expectEmit(source, MyComponentDefinition, 'Incorrect ChildComponent.ngComponentDef');
});
it('should not match directives on i18n-prefixed attributes', () => {
const files = {
app: {
'spec.ts': `
import {Component, Directive, Input, NgModule} from '@angular/core';
@Directive({selector: '[i18n]'})
export class I18nDirective {}
@Directive({selector: '[i18n-foo]'})
export class I18nFooDirective {}
@Directive({selector: '[foo]'})
export class FooDirective {}
@Component({selector: 'my-component', template: '<div i18n-foo></div>'})
export class MyComponent {}
@NgModule({declarations: [I18nDirective, I18nFooDirective, FooDirective, MyComponent]})
export class MyModule{}`
}
};
// MyComponent definition should be:
const MyComponentDefinition = `
MyComponent.ngComponentDef = $r3$.ɵdefineComponent({
type: MyComponent,
selectors: [["my-component"]],
factory: function MyComponent_Factory(t) { return new (t || MyComponent)(); },
features: [$r3$.ɵPublicFeature],
consts: 1,
vars: 0,
template: function MyComponent_Template(rf, ctx) {
if (rf & 1) {
$r3$.ɵelement(0, "div");
}
}
});
`;
const result = compile(files, angularFiles);
const source = result.source;
expectEmit(source, MyComponentDefinition, 'Incorrect ChildComponent.ngComponentDef');
});
it('should match directives on element bindings', () => {
const files = {
app: {
'spec.ts': `
import {Component, Directive, Input, NgModule} from '@angular/core';
@Directive({selector: '[someDirective]'})
export class SomeDirective {
@Input() someDirective;
}
@Component({selector: 'my-component', template: '<div [someDirective]="true"></div>'})
export class MyComponent {}
@NgModule({declarations: [SomeDirective, MyComponent]})
export class MyModule{}
`
}
};
// MyComponent definition should be:
const MyComponentDefinition = `
…
const _c0 = [${AttributeMarker.SelectOnly}, "someDirective"];
…
MyComponent.ngComponentDef = $r3$.ɵdefineComponent({
…
template: function MyComponent_Template(rf, ctx) {
if (rf & 1) {
$r3$.ɵelement(0, "div", _c0);
}
if (rf & 2) {
$r3$.ɵelementProperty(0, "someDirective", $r3$.ɵbind(true));
}
},
…
directives: [SomeDirective]
});
`;
const result = compile(files, angularFiles);
const source = result.source;
expectEmit(source, MyComponentDefinition, 'Incorrect ChildComponent.ngComponentDef');
});
it('should match directives on ng-template bindings', () => {
const files = {
app: {
'spec.ts': `
import {Component, Directive, Input, NgModule} from '@angular/core';
@Directive({selector: '[someDirective]'})
export class SomeDirective {
@Input() someDirective;
}
@Component({selector: 'my-component', template: '<ng-template [someDirective]="true"></ng-template>'})
export class MyComponent {}
@NgModule({declarations: [SomeDirective, MyComponent]})
export class MyModule{}
`
}
};
// MyComponent definition should be:
const MyComponentDefinition = `
…
const $c0_a0$ = [${AttributeMarker.SelectOnly}, "someDirective"];
…
MyComponent.ngComponentDef = $r3$.ɵdefineComponent({
…
template: function MyComponent_Template(rf, ctx) {
if (rf & 1) {
$r3$.ɵtemplate(0, Template_0, 0, 0, null, $c0_a0$);
}
if (rf & 2) {
$r3$.ɵelementProperty(0, "someDirective", $r3$.ɵbind(true));
}
},
…
directives: [SomeDirective]
});
`;
const result = compile(files, angularFiles);
const source = result.source;
expectEmit(source, MyComponentDefinition, 'Incorrect ChildComponent.ngComponentDef');
});
it('should match structural directives', () => {
const files = {
app: {
'spec.ts': `
import {Component, Directive, Input, NgModule} from '@angular/core';
@Directive({selector: '[someDirective]'})
export class SomeDirective {
@Input() someDirective;
}
@Component({selector: 'my-component', template: '<div *someDirective></div>'})
export class MyComponent {}
@NgModule({declarations: [SomeDirective, MyComponent]})
export class MyModule{}
`
}
};
// MyComponent definition should be:
const MyComponentDefinition = `
…
const $c0_a0$ = ["someDirective", ""];
…
MyComponent.ngComponentDef = $r3$.ɵdefineComponent({
…
template: function MyComponent_Template(rf, ctx) {
if (rf & 1) {
$r3$.ɵtemplate(0, MyComponent_div_Template_0, 1, 0, null, $c0_a0$);
}
},
…
directives: [SomeDirective]
});
`;
const result = compile(files, angularFiles);
const source = result.source;
expectEmit(source, MyComponentDefinition, 'Incorrect ChildComponent.ngComponentDef');
});
it('should match directives on element outputs', () => {
const files = {
app: {
'spec.ts': `
import {Component, Directive, Output, EventEmitter, NgModule} from '@angular/core';
@Directive({selector: '[someDirective]'})
export class SomeDirective {
@Output() someDirective = new EventEmitter();
}
@Component({selector: 'my-component', template: '<div (someDirective)="noop()"></div>'})
export class MyComponent {
noop() {}
}
@NgModule({declarations: [SomeDirective, MyComponent]})
export class MyModule{}
`
}
};
// MyComponent definition should be:
const MyComponentDefinition = `
…
const $c0_a0$ = [${AttributeMarker.SelectOnly}, "someDirective"];
…
MyComponent.ngComponentDef = $r3$.ɵdefineComponent({
…
template: function MyComponent_Template(rf, ctx) {
if (rf & 1) {
$r3$.ɵelementStart(0, "div", $c0_a0$);
$r3$.ɵlistener("someDirective", function MyComponent_Template_div_someDirective_listener($event) { return ctx.noop(); });
$r3$.ɵelementEnd();
}
},
…
directives: [SomeDirective]
});
`;
const result = compile(files, angularFiles);
const source = result.source;
expectEmit(source, MyComponentDefinition, 'Incorrect ChildComponent.ngComponentDef');
});
});
});

22
packages/compiler-cli/test/compliance/r3_view_compiler_listener_spec.ts
View File

@ -5,8 +5,8 @@
* 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
*/
import {MockDirectory, setup} from '@angular/compiler/test/aot/test_util';
import {AttributeMarker} from '@angular/compiler/src/core';
import {setup} from '@angular/compiler/test/aot/test_util';
import {compile, expectEmit} from './mock_compile';
/* These tests are codified version of the tests in compiler_canonical_spec.ts. Every
@ -41,9 +41,11 @@ describe('compiler compliance: listen()', () => {
// The template should look like this (where IDENT is a wild card for an identifier):
const template = `
const $e0_attrs$ = [${AttributeMarker.SelectOnly}, "click"];
…
template: function MyComponent_Template(rf, ctx) {
if (rf & 1) {
$r3$.ɵelementStart(0, "div");
$r3$.ɵelementStart(0, "div", $e0_attrs$);
$r3$.ɵlistener("click", function MyComponent_Template_div_click_listener($event) {
ctx.onClick($event);
return (1 == 2);
@ -86,20 +88,21 @@ describe('compiler compliance: listen()', () => {
};
const template = `
const $c0$ = ["ngIf",""];
const $t0_attrs$ = [${AttributeMarker.SelectOnly}, "ngIf"];
const $e_attrs$ = [${AttributeMarker.SelectOnly}, "click"];
function MyComponent_div_Template_0(rf, ctx) {
if (rf & 1) {
const $s$ = $r3$.ɵgetCurrentView();
$r3$.ɵelementStart(0, "div");
$r3$.ɵelementStart(1, "div");
$r3$.ɵelementStart(1, "div", $e_attrs$);
$r3$.ɵlistener("click", function MyComponent_div_Template_0_div_click_listener($event) {
$r3$.ɵrestoreView($s$);
const $comp$ = $r3$.ɵnextContext();
return $comp$.onClick($comp$.foo);
});
$r3$.ɵelementEnd();
$r3$.ɵelementStart(2, "button");
$r3$.ɵelementStart(2, "button", $e_attrs$);
$r3$.ɵlistener("click", function MyComponent_div_Template_0_button_click_listener($event) {
$r3$.ɵrestoreView($s$);
const $comp2$ = $r3$.ɵnextContext();
@ -147,7 +150,8 @@ describe('compiler compliance: listen()', () => {
};
const MyComponentDefinition = `
const $c0$ = ["user", ""];
const $e0_attrs$ = [${AttributeMarker.SelectOnly}, "click"];
const $e2_refs$ = ["user", ""];
…
MyComponent.ngComponentDef = $r3$.ɵdefineComponent({
type: MyComponent,
@ -158,14 +162,14 @@ describe('compiler compliance: listen()', () => {
vars: 0,
template: function MyComponent_Template(rf, ctx) {
if (rf & 1) {
$r3$.ɵelementStart(0, "button");
$r3$.ɵelementStart(0, "button", $e0_attrs$);
$r3$.ɵlistener("click", function MyComponent_Template_button_click_listener($event) {
const $user$ = $r3$.ɵreference(3);
return ctx.onClick($user$.value);
});
$r3$.ɵtext(1, "Save");
$r3$.ɵelementEnd();
$r3$.ɵelement(2, "input", null, $c0$);
$r3$.ɵelement(2, "input", null, $e2_refs$);
}
}
});

28
packages/compiler-cli/test/compliance/r3_view_compiler_styling_spec.ts
View File

@ -6,9 +6,8 @@
* found in the LICENSE file at https://angular.io/license
*/
import {InitialStylingFlags, ViewEncapsulation} from '@angular/compiler/src/core';
import {MockDirectory, setup} from '@angular/compiler/test/aot/test_util';
import {AttributeMarker, InitialStylingFlags, ViewEncapsulation} from '@angular/compiler/src/core';
import {setup} from '@angular/compiler/test/aot/test_util';
import {compile, expectEmit} from './mock_compile';
describe('compiler compliance: styling', () => {
@ -168,7 +167,8 @@ describe('compiler compliance: styling', () => {
};
const template = `
const _c0 = ["opacity","width","height",${InitialStylingFlags.VALUES_MODE},"opacity","1"];
const $e0_attrs$ = [${AttributeMarker.SelectOnly}, "style"];
const $e0_styling$ = ["opacity","width","height",${InitialStylingFlags.VALUES_MODE},"opacity","1"];
…
MyComponent.ngComponentDef = $r3$.ɵdefineComponent({
type: MyComponent,
@ -181,8 +181,8 @@ describe('compiler compliance: styling', () => {
vars: 1,
template: function MyComponent_Template(rf, $ctx$) {
if (rf & 1) {
$r3$.ɵelementStart(0, "div");
$r3$.ɵelementStyling(null, _c0, $r3$.ɵzss);
$r3$.ɵelementStart(0, "div", $e0_attrs$);
$r3$.ɵelementStyling(null, $e0_styling$, $r3$.ɵzss);
$r3$.ɵelementEnd();
}
if (rf & 2) {
@ -324,7 +324,8 @@ describe('compiler compliance: styling', () => {
};
const template = `
const _c0 = ["grape","apple","orange",${InitialStylingFlags.VALUES_MODE},"grape",true];
const $e0_attrs$ = [${AttributeMarker.SelectOnly}, "class"];
const $e0_cd$ = ["grape","apple","orange",${InitialStylingFlags.VALUES_MODE},"grape",true];
…
MyComponent.ngComponentDef = $r3$.ɵdefineComponent({
type: MyComponent,
@ -337,8 +338,8 @@ describe('compiler compliance: styling', () => {
vars: 1,
template: function MyComponent_Template(rf, $ctx$) {
if (rf & 1) {
$r3$.ɵelementStart(0, "div");
$r3$.ɵelementStyling(_c0);
$r3$.ɵelementStart(0, "div", $e0_attrs$);
$r3$.ɵelementStyling($e0_cd$);
$r3$.ɵelementEnd();
}
if (rf & 2) {
@ -379,8 +380,9 @@ describe('compiler compliance: styling', () => {
};
const template = `
const _c0 = ["foo",${InitialStylingFlags.VALUES_MODE},"foo",true];
const _c1 = ["width",${InitialStylingFlags.VALUES_MODE},"width","100px"];
const $e0_attrs$ = [${AttributeMarker.SelectOnly}, "class", "style"];
const $e0_cd$ = ["foo",${InitialStylingFlags.VALUES_MODE},"foo",true];
const $e0_sd$ = ["width",${InitialStylingFlags.VALUES_MODE},"width","100px"];
…
MyComponent.ngComponentDef = $r3$.ɵdefineComponent({
type: MyComponent,
@ -393,8 +395,8 @@ describe('compiler compliance: styling', () => {
vars: 2,
template: function MyComponent_Template(rf, $ctx$) {
if (rf & 1) {
$r3$.ɵelementStart(0, "div");
$r3$.ɵelementStyling(_c0, _c1);
$r3$.ɵelementStart(0, "div", $e0_attrs$);
$r3$.ɵelementStyling($e0_cd$, $e0_sd$);
$r3$.ɵelementEnd();
}
if (rf & 2) {

21
packages/compiler-cli/test/compliance/r3_view_compiler_template_spec.ts
View File

@ -5,7 +5,7 @@
* 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
*/
import {AttributeMarker} from '@angular/compiler/src/core';
import {setup} from '@angular/compiler/test/aot/test_util';
import {compile, expectEmit} from './mock_compile';
@ -50,12 +50,13 @@ describe('compiler compliance: template', () => {
// The template should look like this (where IDENT is a wild card for an identifier):
const template = `
const $c0$ = ["ngFor","","ngForOf",""];
const $c0$ = ["ngFor", "", ${AttributeMarker.SelectOnly}, "ngForOf"];
const $e0_attrs$ = [${AttributeMarker.SelectOnly}, "title", "click"];
function MyComponent_ul_li_div_Template_1(rf, ctx) {
if (rf & 1) {
const $s$ = $i0$.ɵgetCurrentView();
$i0$.ɵelementStart(0, "div");
$i0$.ɵelementStart(0, "div", $e0_attrs$);
$i0$.ɵlistener("click", function MyComponent_ul_li_div_Template_1_div_click_listener($event){
$i0$.ɵrestoreView($s$);
const $inner$ = ctx.$implicit;
@ -138,7 +139,7 @@ describe('compiler compliance: template', () => {
};
const template = `
const $c0$ = ["ngFor", "", "ngForOf", ""];
const $c0$ = ["ngFor", "", ${AttributeMarker.SelectOnly}, "ngForOf"];
function MyComponent_span_Template_0(rf, ctx) {
if (rf & 1) {
@ -191,8 +192,8 @@ describe('compiler compliance: template', () => {
};
const template = `
const $c0$ = ["ngFor", "", "ngForOf", ""];
const $c1$ = ["ngIf", ""];
const $c0$ = ["ngFor", "", ${AttributeMarker.SelectOnly}, "ngForOf"];
const $c1$ = [${AttributeMarker.SelectOnly}, "ngIf"];
function MyComponent_div_span_Template_1(rf, ctx) {
if (rf & 1) {
@ -262,7 +263,7 @@ describe('compiler compliance: template', () => {
// The template should look like this (where IDENT is a wild card for an identifier):
const template = `
const $c0$ = ["ngFor", "", "ngForOf", ""];
const $c0$ = ["ngFor", "", ${AttributeMarker.SelectOnly}, "ngForOf"];
function MyComponent_div_div_div_Template_1(rf, ctx) {
if (rf & 1) {
$i0$.ɵelementStart(0, "div");
@ -336,7 +337,7 @@ describe('compiler compliance: template', () => {
};
const template = `
const $c0$ = ["attr", "", "boundAttr", ""];
const $c0$ = ["attr", "l", ${AttributeMarker.SelectOnly}, "boundAttr"];
function Template_0(rf, ctx) {
if (rf & 1) {
@ -380,7 +381,7 @@ describe('compiler compliance: template', () => {
};
const template = `
const _c0 = ["foo", ""];
const $t0_refs$ = ["foo", ""];
function Template_0(rf, ctx) {
if (rf & 1) {
@ -392,7 +393,7 @@ describe('compiler compliance: template', () => {
template: function MyComponent_Template(rf, ctx) {
if (rf & 1) {
$i0$.ɵtemplate(0, Template_0, 1, 0, null, null, _c0, i0.ɵtemplateRefExtractor);
$i0$.ɵtemplate(0, Template_0, 1, 0, null, null, $t0_refs$, $i0$.ɵtemplateRefExtractor);
}
}`;