From 40b127c7a33a1c9af1eabf98c95aedb1a2418905 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Fri, 27 Nov 2020 21:04:45 +0100 Subject: [PATCH] test(compiler-cli): migrate listener compliance tests (#39867) Migrates the `r3_view_compiler_listener` compliance tests to the new format. PR Close #39867 --- .../GOLDEN_PARTIAL.js | 1 + .../GOLDEN_PARTIAL.js | 510 ++++++++++++++++++ .../r3_view_compiler_listener/TEST_CASES.json | 269 +++++++++ .../component_listener.ts | 14 + .../component_listener_template.js | 11 + .../cross_element_chained_listeners.ts | 15 + ...ross_element_chained_listeners_template.js | 12 + .../element_listener.ts | 10 + .../element_listener_template.js | 12 + ...vent_arg_host_listener_implicit_meaning.ts | 6 + ...listener_implicit_meaning_host_bindings.js | 2 + .../event_arg_listener_implicit_meaning.ts | 6 + ..._arg_listener_implicit_meaning_template.js | 2 + .../event_explicit_access.ts | 8 + .../event_explicit_access_template.js | 2 + .../event_host_explicit_access.ts | 11 + ...vent_host_explicit_access_host_bindings.js | 2 + .../event_in_property_binding.ts | 6 + .../event_in_property_binding_template.js | 2 + .../has_event_arg_host_listener.ts | 8 + ...s_event_arg_host_listener_host_bindings.js | 8 + .../local_ref_before_listener.ts | 15 + .../local_ref_before_listener_factory.js | 1 + .../local_ref_before_listener_template.js | 23 + .../no_event_arg_host_listener.ts | 15 + ...o_event_arg_host_listener_host_bindings.js | 10 + .../no_event_arg_listener.ts | 6 + .../no_event_arg_listener_template.js | 11 + .../same_element_chained_listeners.ts | 12 + ...same_element_chained_listeners_template.js | 13 + .../shared_snapshot_listeners.ts | 19 + .../shared_snapshot_listeners_template.js | 31 ++ .../template_chained_listeners.ts | 12 + .../template_chained_listeners_template.js | 8 + 34 files changed, 1093 insertions(+) create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/GOLDEN_PARTIAL.js create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/TEST_CASES.json create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/component_listener.ts create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/component_listener_template.js create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/cross_element_chained_listeners.ts create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/cross_element_chained_listeners_template.js create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/element_listener.ts create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/element_listener_template.js create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/event_arg_host_listener_implicit_meaning.ts create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/event_arg_host_listener_implicit_meaning_host_bindings.js create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/event_arg_listener_implicit_meaning.ts create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/event_arg_listener_implicit_meaning_template.js create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/event_explicit_access.ts create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/event_explicit_access_template.js create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/event_host_explicit_access.ts create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/event_host_explicit_access_host_bindings.js create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/event_in_property_binding.ts create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/event_in_property_binding_template.js create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/has_event_arg_host_listener.ts create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/has_event_arg_host_listener_host_bindings.js create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/local_ref_before_listener.ts create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/local_ref_before_listener_factory.js create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/local_ref_before_listener_template.js create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/no_event_arg_host_listener.ts create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/no_event_arg_host_listener_host_bindings.js create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/no_event_arg_listener.ts create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/no_event_arg_listener_template.js create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/same_element_chained_listeners.ts create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/same_element_chained_listeners_template.js create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/shared_snapshot_listeners.ts create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/shared_snapshot_listeners_template.js create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/template_chained_listeners.ts create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/template_chained_listeners_template.js diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_input_outputs/GOLDEN_PARTIAL.js b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_input_outputs/GOLDEN_PARTIAL.js index 630432f8a7..8d2618797c 100644 --- a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_input_outputs/GOLDEN_PARTIAL.js +++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_input_outputs/GOLDEN_PARTIAL.js @@ -97,3 +97,4 @@ export declare class MyModule { static ɵmod: i0.ɵɵNgModuleDefWithMeta; static ɵinj: i0.ɵɵInjectorDef; } + diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/GOLDEN_PARTIAL.js b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/GOLDEN_PARTIAL.js new file mode 100644 index 0000000000..2283a3d154 --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/GOLDEN_PARTIAL.js @@ -0,0 +1,510 @@ +/**************************************************************************************************** + * PARTIAL FILE: element_listener.js + ****************************************************************************************************/ +import { Component, NgModule } from '@angular/core'; +import * as i0 from "@angular/core"; +export class MyComponent { + onClick(event) { } +} +MyComponent.ɵfac = function MyComponent_Factory(t) { return new (t || MyComponent)(); }; +MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: MyComponent, selector: "my-component", ngImport: i0, template: { source: `
`, isInline: true } }); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyComponent, [{ + type: Component, + args: [{ selector: 'my-component', template: `
` }] + }], null, null); })(); +export class MyModule { +} +MyModule.ɵmod = i0.ɵɵdefineNgModule({ type: MyModule }); +MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) { return new (t || MyModule)(); } }); +(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [MyComponent] }); })(); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{ + type: NgModule, + args: [{ declarations: [MyComponent] }] + }], null, null); })(); + +/**************************************************************************************************** + * PARTIAL FILE: element_listener.d.ts + ****************************************************************************************************/ +import * as i0 from "@angular/core"; +export declare class MyComponent { + onClick(event: any): void; + static ɵfac: i0.ɵɵFactoryDef; + static ɵcmp: i0.ɵɵComponentDefWithMeta; +} +export declare class MyModule { + static ɵmod: i0.ɵɵNgModuleDefWithMeta; + static ɵinj: i0.ɵɵInjectorDef; +} + +/**************************************************************************************************** + * PARTIAL FILE: component_listener.js + ****************************************************************************************************/ +import { Component, NgModule } from '@angular/core'; +import * as i0 from "@angular/core"; +export class MyApp { +} +MyApp.ɵfac = function MyApp_Factory(t) { return new (t || MyApp)(); }; +MyApp.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: MyApp, selector: "my-app", ngImport: i0, template: { source: `
My App
`, isInline: true } }); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyApp, [{ + type: Component, + args: [{ selector: 'my-app', template: `
My App
` }] + }], null, null); })(); +export class MyComponent { + onClick(event) { } +} +MyComponent.ɵfac = function MyComponent_Factory(t) { return new (t || MyComponent)(); }; +MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: MyComponent, selector: "my-component", ngImport: i0, template: { source: ``, isInline: true } }); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyComponent, [{ + type: Component, + args: [{ selector: 'my-component', template: `` }] + }], null, null); })(); +export class MyModule { +} +MyModule.ɵmod = i0.ɵɵdefineNgModule({ type: MyModule }); +MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) { return new (t || MyModule)(); } }); +(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [MyComponent] }); })(); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{ + type: NgModule, + args: [{ declarations: [MyComponent] }] + }], null, null); })(); + +/**************************************************************************************************** + * PARTIAL FILE: component_listener.d.ts + ****************************************************************************************************/ +import * as i0 from "@angular/core"; +export declare class MyApp { + static ɵfac: i0.ɵɵFactoryDef; + static ɵcmp: i0.ɵɵComponentDefWithMeta; +} +export declare class MyComponent { + onClick(event: any): void; + static ɵfac: i0.ɵɵFactoryDef; + static ɵcmp: i0.ɵɵComponentDefWithMeta; +} +export declare class MyModule { + static ɵmod: i0.ɵɵNgModuleDefWithMeta; + static ɵinj: i0.ɵɵInjectorDef; +} + +/**************************************************************************************************** + * PARTIAL FILE: shared_snapshot_listeners.js + ****************************************************************************************************/ +import { Component, NgModule } from '@angular/core'; +import * as i0 from "@angular/core"; +export class MyComponent { + onClick(name) { } + onClick2(name) { } +} +MyComponent.ɵfac = function MyComponent_Factory(t) { return new (t || MyComponent)(); }; +MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: MyComponent, selector: "my-component", ngImport: i0, template: { source: ` +
+
+ +
+ `, isInline: true } }); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyComponent, [{ + type: Component, + args: [{ + selector: 'my-component', + template: ` +
+
+ +
+ ` + }] + }], null, null); })(); +export class MyModule { +} +MyModule.ɵmod = i0.ɵɵdefineNgModule({ type: MyModule }); +MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) { return new (t || MyModule)(); } }); +(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [MyComponent] }); })(); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{ + type: NgModule, + args: [{ declarations: [MyComponent] }] + }], null, null); })(); + +/**************************************************************************************************** + * PARTIAL FILE: shared_snapshot_listeners.d.ts + ****************************************************************************************************/ +import * as i0 from "@angular/core"; +export declare class MyComponent { + onClick(name: any): void; + onClick2(name: any): void; + static ɵfac: i0.ɵɵFactoryDef; + static ɵcmp: i0.ɵɵComponentDefWithMeta; +} +export declare class MyModule { + static ɵmod: i0.ɵɵNgModuleDefWithMeta; + static ɵinj: i0.ɵɵInjectorDef; +} + +/**************************************************************************************************** + * PARTIAL FILE: local_ref_before_listener.js + ****************************************************************************************************/ +import { Component, NgModule } from '@angular/core'; +import * as i0 from "@angular/core"; +export class MyComponent { +} +MyComponent.ɵfac = function MyComponent_Factory(t) { return new (t || MyComponent)(); }; +MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: MyComponent, selector: "my-component", ngImport: i0, template: { source: ` + + + `, isInline: true } }); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyComponent, [{ + type: Component, + args: [{ + selector: 'my-component', + template: ` + + + ` + }] + }], null, null); })(); +export class MyModule { +} +MyModule.ɵmod = i0.ɵɵdefineNgModule({ type: MyModule }); +MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) { return new (t || MyModule)(); } }); +(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [MyComponent] }); })(); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{ + type: NgModule, + args: [{ declarations: [MyComponent] }] + }], null, null); })(); + +/**************************************************************************************************** + * PARTIAL FILE: local_ref_before_listener.d.ts + ****************************************************************************************************/ +import * as i0 from "@angular/core"; +export declare class MyComponent { + static ɵfac: i0.ɵɵFactoryDef; + static ɵcmp: i0.ɵɵComponentDefWithMeta; +} +export declare class MyModule { + static ɵmod: i0.ɵɵNgModuleDefWithMeta; + static ɵinj: i0.ɵɵInjectorDef; +} + +/**************************************************************************************************** + * PARTIAL FILE: same_element_chained_listeners.js + ****************************************************************************************************/ +import { Component, NgModule } from '@angular/core'; +import * as i0 from "@angular/core"; +export class MyComponent { +} +MyComponent.ɵfac = function MyComponent_Factory(t) { return new (t || MyComponent)(); }; +MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: MyComponent, selector: "my-component", ngImport: i0, template: { source: `
`, isInline: true } }); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyComponent, [{ + type: Component, + args: [{ + selector: 'my-component', + template: `
`, + }] + }], null, null); })(); +export class MyModule { +} +MyModule.ɵmod = i0.ɵɵdefineNgModule({ type: MyModule }); +MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) { return new (t || MyModule)(); } }); +(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [MyComponent] }); })(); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{ + type: NgModule, + args: [{ declarations: [MyComponent] }] + }], null, null); })(); + +/**************************************************************************************************** + * PARTIAL FILE: same_element_chained_listeners.d.ts + ****************************************************************************************************/ +import * as i0 from "@angular/core"; +export declare class MyComponent { + static ɵfac: i0.ɵɵFactoryDef; + static ɵcmp: i0.ɵɵComponentDefWithMeta; +} +export declare class MyModule { + static ɵmod: i0.ɵɵNgModuleDefWithMeta; + static ɵinj: i0.ɵɵInjectorDef; +} + +/**************************************************************************************************** + * PARTIAL FILE: cross_element_chained_listeners.js + ****************************************************************************************************/ +import { Component, NgModule } from '@angular/core'; +import * as i0 from "@angular/core"; +export class MyComponent { +} +MyComponent.ɵfac = function MyComponent_Factory(t) { return new (t || MyComponent)(); }; +MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: MyComponent, selector: "my-component", ngImport: i0, template: { source: ` +
+ + `, isInline: true } }); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyComponent, [{ + type: Component, + args: [{ + selector: 'my-component', + template: ` +
+ + ` + }] + }], null, null); })(); +export class MyModule { +} +MyModule.ɵmod = i0.ɵɵdefineNgModule({ type: MyModule }); +MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) { return new (t || MyModule)(); } }); +(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [MyComponent] }); })(); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{ + type: NgModule, + args: [{ declarations: [MyComponent] }] + }], null, null); })(); + +/**************************************************************************************************** + * PARTIAL FILE: cross_element_chained_listeners.d.ts + ****************************************************************************************************/ +import * as i0 from "@angular/core"; +export declare class MyComponent { + static ɵfac: i0.ɵɵFactoryDef; + static ɵcmp: i0.ɵɵComponentDefWithMeta; +} +export declare class MyModule { + static ɵmod: i0.ɵɵNgModuleDefWithMeta; + static ɵinj: i0.ɵɵInjectorDef; +} + +/**************************************************************************************************** + * PARTIAL FILE: template_chained_listeners.js + ****************************************************************************************************/ +import { Component, NgModule } from '@angular/core'; +import * as i0 from "@angular/core"; +export class MyComponent { +} +MyComponent.ɵfac = function MyComponent_Factory(t) { return new (t || MyComponent)(); }; +MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: MyComponent, selector: "my-component", ngImport: i0, template: { source: ``, isInline: true } }); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyComponent, [{ + type: Component, + args: [{ + selector: 'my-component', + template: `` + }] + }], null, null); })(); +export class MyModule { +} +MyModule.ɵmod = i0.ɵɵdefineNgModule({ type: MyModule }); +MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) { return new (t || MyModule)(); } }); +(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [MyComponent] }); })(); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{ + type: NgModule, + args: [{ declarations: [MyComponent] }] + }], null, null); })(); + +/**************************************************************************************************** + * PARTIAL FILE: template_chained_listeners.d.ts + ****************************************************************************************************/ +import * as i0 from "@angular/core"; +export declare class MyComponent { + static ɵfac: i0.ɵɵFactoryDef; + static ɵcmp: i0.ɵɵComponentDefWithMeta; +} +export declare class MyModule { + static ɵmod: i0.ɵɵNgModuleDefWithMeta; + static ɵinj: i0.ɵɵInjectorDef; +} + +/**************************************************************************************************** + * PARTIAL FILE: no_event_arg_listener.js + ****************************************************************************************************/ +import { Component } from '@angular/core'; +import * as i0 from "@angular/core"; +export class MyComponent { + onClick() { } +} +MyComponent.ɵfac = function MyComponent_Factory(t) { return new (t || MyComponent)(); }; +MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: MyComponent, selector: "ng-component", ngImport: i0, template: { source: `
`, isInline: true } }); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyComponent, [{ + type: Component, + args: [{ template: `
` }] + }], null, null); })(); + +/**************************************************************************************************** + * PARTIAL FILE: no_event_arg_listener.d.ts + ****************************************************************************************************/ +import * as i0 from "@angular/core"; +export declare class MyComponent { + onClick(): void; + static ɵfac: i0.ɵɵFactoryDef; + static ɵcmp: i0.ɵɵComponentDefWithMeta; +} + +/**************************************************************************************************** + * PARTIAL FILE: no_event_arg_host_listener.js + ****************************************************************************************************/ +import { Component, HostListener } from '@angular/core'; +import * as i0 from "@angular/core"; +export class MyComponent { + mousedown() { } + click() { + } +} +MyComponent.ɵfac = function MyComponent_Factory(t) { return new (t || MyComponent)(); }; +MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: MyComponent, selector: "ng-component", host: { listeners: { "mousedown": "mousedown()", "click": "click()" } }, ngImport: i0, template: { source: '', isInline: true } }); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyComponent, [{ + type: Component, + args: [{ + template: '', + host: { + '(mousedown)': 'mousedown()', + } + }] + }], null, { click: [{ + type: HostListener, + args: ['click'] + }] }); })(); + +/**************************************************************************************************** + * PARTIAL FILE: no_event_arg_host_listener.d.ts + ****************************************************************************************************/ +import * as i0 from "@angular/core"; +export declare class MyComponent { + mousedown(): void; + click(): void; + static ɵfac: i0.ɵɵFactoryDef; + static ɵcmp: i0.ɵɵComponentDefWithMeta; +} + +/**************************************************************************************************** + * PARTIAL FILE: has_event_arg_host_listener.js + ****************************************************************************************************/ +import { Directive, HostListener } from '@angular/core'; +import * as i0 from "@angular/core"; +export class MyComponent { + click(target) { + } +} +MyComponent.ɵfac = function MyComponent_Factory(t) { return new (t || MyComponent)(); }; +MyComponent.ɵdir = i0.ɵɵngDeclareDirective({ version: 1, type: MyComponent, host: { listeners: { "click": "click($event.target)" } }, ngImport: i0 }); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyComponent, [{ + type: Directive + }], null, { click: [{ + type: HostListener, + args: ['click', ['$event.target']] + }] }); })(); + +/**************************************************************************************************** + * PARTIAL FILE: has_event_arg_host_listener.d.ts + ****************************************************************************************************/ +import * as i0 from "@angular/core"; +export declare class MyComponent { + click(target: any): void; + static ɵfac: i0.ɵɵFactoryDef; + static ɵdir: i0.ɵɵDirectiveDefWithMeta; +} + +/**************************************************************************************************** + * PARTIAL FILE: event_arg_listener_implicit_meaning.js + ****************************************************************************************************/ +import { Component } from '@angular/core'; +import * as i0 from "@angular/core"; +class Comp { + c(event) { } +} +Comp.ɵfac = function Comp_Factory(t) { return new (t || Comp)(); }; +Comp.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: Comp, selector: "ng-component", ngImport: i0, template: { source: '
', isInline: true } }); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(Comp, [{ + type: Component, + args: [{ template: '
' }] + }], null, null); })(); + +/**************************************************************************************************** + * PARTIAL FILE: event_arg_listener_implicit_meaning.d.ts + ****************************************************************************************************/ +export {}; + +/**************************************************************************************************** + * PARTIAL FILE: event_explicit_access.js + ****************************************************************************************************/ +import { Component } from '@angular/core'; +import * as i0 from "@angular/core"; +class Comp { + constructor() { + this.$event = {}; + } + c(value) { } +} +Comp.ɵfac = function Comp_Factory(t) { return new (t || Comp)(); }; +Comp.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: Comp, selector: "ng-component", ngImport: i0, template: { source: '
', isInline: true } }); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(Comp, [{ + type: Component, + args: [{ template: '
' }] + }], null, null); })(); + +/**************************************************************************************************** + * PARTIAL FILE: event_explicit_access.d.ts + ****************************************************************************************************/ +export {}; + +/**************************************************************************************************** + * PARTIAL FILE: event_in_property_binding.js + ****************************************************************************************************/ +import { Component } from '@angular/core'; +import * as i0 from "@angular/core"; +class Comp { + constructor() { + this.$event = 1; + } +} +Comp.ɵfac = function Comp_Factory(t) { return new (t || Comp)(); }; +Comp.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: Comp, selector: "ng-component", ngImport: i0, template: { source: '
', isInline: true } }); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(Comp, [{ + type: Component, + args: [{ template: '
' }] + }], null, null); })(); + +/**************************************************************************************************** + * PARTIAL FILE: event_in_property_binding.d.ts + ****************************************************************************************************/ +export {}; + +/**************************************************************************************************** + * PARTIAL FILE: event_arg_host_listener_implicit_meaning.js + ****************************************************************************************************/ +import { Directive } from '@angular/core'; +import * as i0 from "@angular/core"; +class Dir { + c(event) { } +} +Dir.ɵfac = function Dir_Factory(t) { return new (t || Dir)(); }; +Dir.ɵdir = i0.ɵɵngDeclareDirective({ version: 1, type: Dir, host: { listeners: { "click": "c($event)" } }, ngImport: i0 }); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(Dir, [{ + type: Directive, + args: [{ host: { '(click)': 'c($event)' } }] + }], null, null); })(); + +/**************************************************************************************************** + * PARTIAL FILE: event_arg_host_listener_implicit_meaning.d.ts + ****************************************************************************************************/ +export {}; + +/**************************************************************************************************** + * PARTIAL FILE: event_host_explicit_access.js + ****************************************************************************************************/ +import { Directive } from '@angular/core'; +import * as i0 from "@angular/core"; +class Dir { + constructor() { + this.$event = {}; + } + c(value) { } +} +Dir.ɵfac = function Dir_Factory(t) { return new (t || Dir)(); }; +Dir.ɵdir = i0.ɵɵngDeclareDirective({ version: 1, type: Dir, host: { listeners: { "click": "c(this.$event)" } }, ngImport: i0 }); +/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(Dir, [{ + type: Directive, + args: [{ + host: { + '(click)': 'c(this.$event)', + } + }] + }], null, null); })(); + +/**************************************************************************************************** + * PARTIAL FILE: event_host_explicit_access.d.ts + ****************************************************************************************************/ +export {}; + diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/TEST_CASES.json b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/TEST_CASES.json new file mode 100644 index 0000000000..7a46d6f143 --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/TEST_CASES.json @@ -0,0 +1,269 @@ +{ + "$schema": "../test_case_schema.json", + "cases": [ + { + "description": "should create listener instruction on element", + "inputFiles": [ + "element_listener.ts" + ], + "expectations": [ + { + "files": [ + { + "expected": "element_listener_template.js", + "generated": "element_listener.js" + } + ], + "failureMessage": "Incorrect template" + } + ] + }, + { + "description": "should create listener instruction on other components", + "inputFiles": [ + "component_listener.ts" + ], + "expectations": [ + { + "files": [ + { + "expected": "component_listener_template.js", + "generated": "component_listener.js" + } + ], + "failureMessage": "Incorrect template" + } + ] + }, + { + "description": "should create multiple listener instructions that share a view snapshot", + "inputFiles": [ + "shared_snapshot_listeners.ts" + ], + "expectations": [ + { + "files": [ + { + "expected": "shared_snapshot_listeners_template.js", + "generated": "shared_snapshot_listeners.js" + } + ], + "failureMessage": "Incorrect template" + } + ] + }, + { + "description": "local refs in listeners defined before the local refs", + "inputFiles": [ + "local_ref_before_listener.ts" + ], + "expectations": [ + { + "files": [ + { + "expected": "local_ref_before_listener_template.js", + "generated": "local_ref_before_listener.js" + } + ], + "failureMessage": "Incorrect template" + }, + { + "files": [ + { + "expected": "local_ref_before_listener_factory.js", + "generated": "local_ref_before_listener.js" + } + ], + "failureMessage": "Incorrect factory" + } + ] + }, + { + "description": "should chain multiple listeners on the same element", + "inputFiles": [ + "same_element_chained_listeners.ts" + ], + "expectations": [ + { + "files": [ + { + "expected": "same_element_chained_listeners_template.js", + "generated": "same_element_chained_listeners.js" + } + ], + "failureMessage": "Incorrect template" + } + ] + }, + { + "description": "should chain multiple listeners across elements", + "inputFiles": [ + "cross_element_chained_listeners.ts" + ], + "expectations": [ + { + "files": [ + { + "expected": "cross_element_chained_listeners_template.js", + "generated": "cross_element_chained_listeners.js" + } + ], + "failureMessage": "Incorrect template" + } + ] + }, + { + "description": "should chain multiple listeners on the same template", + "inputFiles": [ + "template_chained_listeners.ts" + ], + "expectations": [ + { + "files": [ + { + "expected": "template_chained_listeners_template.js", + "generated": "template_chained_listeners.js" + } + ], + "failureMessage": "Incorrect template" + } + ] + }, + { + "description": "should not generate the $event argument if it is not being used in a template", + "inputFiles": [ + "no_event_arg_listener.ts" + ], + "expectations": [ + { + "files": [ + { + "expected": "no_event_arg_listener_template.js", + "generated": "no_event_arg_listener.js" + } + ], + "failureMessage": "Incorrect event listener" + } + ] + }, + { + "description": "should not generate the $event argument if it is not being used in a host listener", + "inputFiles": [ + "no_event_arg_host_listener.ts" + ], + "expectations": [ + { + "files": [ + { + "expected": "no_event_arg_host_listener_host_bindings.js", + "generated": "no_event_arg_host_listener.js" + } + ], + "failureMessage": "Incorrect event listener" + } + ] + }, + { + "description": "should generate the $event argument if it is being used in a host listener", + "inputFiles": [ + "has_event_arg_host_listener.ts" + ], + "expectations": [ + { + "files": [ + { + "expected": "has_event_arg_host_listener_host_bindings.js", + "generated": "has_event_arg_host_listener.js" + } + ], + "failureMessage": "Incorrect event listener" + } + ] + }, + { + "description": "should assume $event is referring to the event variable in a listener by default", + "inputFiles": [ + "event_arg_listener_implicit_meaning.ts" + ], + "expectations": [ + { + "files": [ + { + "expected": "event_arg_listener_implicit_meaning_template.js", + "generated": "event_arg_listener_implicit_meaning.js" + } + ], + "failureMessage": "Incorrect event listener" + } + ] + }, + { + "description": "should preserve accesses to $event if it is done through `this` in a listener", + "inputFiles": [ + "event_explicit_access.ts" + ], + "expectations": [ + { + "files": [ + { + "expected": "event_explicit_access_template.js", + "generated": "event_explicit_access.js" + } + ], + "failureMessage": "Incorrect event listener" + } + ] + }, + { + "description": "should not assume that $event is referring to an event object inside a property", + "inputFiles": [ + "event_in_property_binding.ts" + ], + "expectations": [ + { + "files": [ + { + "expected": "event_in_property_binding_template.js", + "generated": "event_in_property_binding.js" + } + ], + "failureMessage": "Incorrect property binding" + } + ] + }, + { + "description": "should assume $event is referring to the event variable in a listener by default inside a host binding", + "inputFiles": [ + "event_arg_host_listener_implicit_meaning.ts" + ], + "expectations": [ + { + "files": [ + { + "expected": "event_arg_host_listener_implicit_meaning_host_bindings.js", + "generated": "event_arg_host_listener_implicit_meaning.js" + } + ], + "failureMessage": "Incorrect event listener" + } + ] + }, + { + "description": "should preserve accesses to $event if it is done through `this` in a listener inside a host binding", + "inputFiles": [ + "event_host_explicit_access.ts" + ], + "expectations": [ + { + "files": [ + { + "expected": "event_host_explicit_access_host_bindings.js", + "generated": "event_host_explicit_access.js" + } + ], + "failureMessage": "Incorrect event listener" + } + ] + } + ] +} diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/component_listener.ts b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/component_listener.ts new file mode 100644 index 0000000000..a52959bdaf --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/component_listener.ts @@ -0,0 +1,14 @@ +import {Component, NgModule} from '@angular/core'; + +@Component({selector: 'my-app', template: `
My App
`}) +export class MyApp { +} + +@Component({selector: 'my-component', template: ``}) +export class MyComponent { + onClick(event: any) {} +} + +@NgModule({declarations: [MyComponent]}) +export class MyModule { +} diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/component_listener_template.js b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/component_listener_template.js new file mode 100644 index 0000000000..c5798ccf87 --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/component_listener_template.js @@ -0,0 +1,11 @@ +… +consts: [[__AttributeMarker.Bindings__, "click"]], +template: function MyComponent_Template(rf, ctx) { + if (rf & 1) { + $r3$.ɵɵelementStart(0, "my-app", 0); + $r3$.ɵɵlistener("click", function MyComponent_Template_my_app_click_0_listener($event) { + return ctx.onClick($event); + }); + $r3$.ɵɵelementEnd(); + } +} diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/cross_element_chained_listeners.ts b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/cross_element_chained_listeners.ts new file mode 100644 index 0000000000..e08d4e463d --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/cross_element_chained_listeners.ts @@ -0,0 +1,15 @@ +import {Component, NgModule} from '@angular/core'; + +@Component({ + selector: 'my-component', + template: ` +
+ + ` +}) +export class MyComponent { +} + +@NgModule({declarations: [MyComponent]}) +export class MyModule { +} diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/cross_element_chained_listeners_template.js b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/cross_element_chained_listeners_template.js new file mode 100644 index 0000000000..ae1288840a --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/cross_element_chained_listeners_template.js @@ -0,0 +1,12 @@ +… +consts: [[__AttributeMarker.Bindings__, "click", "change"], [__AttributeMarker.Bindings__, "update", "delete"]], +template: function MyComponent_Template(rf, ctx) { + if (rf & 1) { + $r3$.ɵɵelementStart(0, "div", 0); + $r3$.ɵɵlistener("click", function MyComponent_Template_div_click_0_listener() { return ctx.click(); })("change", function MyComponent_Template_div_change_0_listener() { return ctx.change(); }); + $r3$.ɵɵelementEnd(); + $r3$.ɵɵelementStart(1, "some-comp", 1); + $r3$.ɵɵlistener("update", function MyComponent_Template_some_comp_update_1_listener() { return ctx.update(); })("delete", function MyComponent_Template_some_comp_delete_1_listener() { return ctx.delete(); }); + $r3$.ɵɵelementEnd(); + } +} diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/element_listener.ts b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/element_listener.ts new file mode 100644 index 0000000000..c08dae8677 --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/element_listener.ts @@ -0,0 +1,10 @@ +import {Component, NgModule} from '@angular/core'; + +@Component({selector: 'my-component', template: `
`}) +export class MyComponent { + onClick(event: any) {} +} + +@NgModule({declarations: [MyComponent]}) +export class MyModule { +} diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/element_listener_template.js b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/element_listener_template.js new file mode 100644 index 0000000000..f9ca44ea8d --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/element_listener_template.js @@ -0,0 +1,12 @@ +… +consts: [[__AttributeMarker.Bindings__, "click"]], +template: function MyComponent_Template(rf, ctx) { + if (rf & 1) { + $r3$.ɵɵelementStart(0, "div", 0); + $r3$.ɵɵlistener("click", function MyComponent_Template_div_click_0_listener($event) { + ctx.onClick($event); + return 1 == 2; + }); + $r3$.ɵɵelementEnd(); + } +} diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/event_arg_host_listener_implicit_meaning.ts b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/event_arg_host_listener_implicit_meaning.ts new file mode 100644 index 0000000000..5069c06fd4 --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/event_arg_host_listener_implicit_meaning.ts @@ -0,0 +1,6 @@ +import {Directive} from '@angular/core'; + +@Directive({host: {'(click)': 'c($event)'}}) +class Dir { + c(event: any) {} +} diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/event_arg_host_listener_implicit_meaning_host_bindings.js b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/event_arg_host_listener_implicit_meaning_host_bindings.js new file mode 100644 index 0000000000..762dad6d1c --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/event_arg_host_listener_implicit_meaning_host_bindings.js @@ -0,0 +1,2 @@ +… +i0.ɵɵlistener("click", function Dir_click_HostBindingHandler($event) { return ctx.c($event); }); diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/event_arg_listener_implicit_meaning.ts b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/event_arg_listener_implicit_meaning.ts new file mode 100644 index 0000000000..a9b958b87f --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/event_arg_listener_implicit_meaning.ts @@ -0,0 +1,6 @@ +import {Component} from '@angular/core'; + +@Component({template: '
'}) +class Comp { + c(event: any) {} +} diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/event_arg_listener_implicit_meaning_template.js b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/event_arg_listener_implicit_meaning_template.js new file mode 100644 index 0000000000..e8287c49bd --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/event_arg_listener_implicit_meaning_template.js @@ -0,0 +1,2 @@ +… +i0.ɵɵlistener("click", function Comp_Template_div_click_0_listener($event) { return ctx.c($event); }); diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/event_explicit_access.ts b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/event_explicit_access.ts new file mode 100644 index 0000000000..dcb43321bb --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/event_explicit_access.ts @@ -0,0 +1,8 @@ +import {Component} from '@angular/core'; + +@Component({template: '
'}) +class Comp { + $event = {}; + + c(value: {}) {} +} diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/event_explicit_access_template.js b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/event_explicit_access_template.js new file mode 100644 index 0000000000..fb473cc5c6 --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/event_explicit_access_template.js @@ -0,0 +1,2 @@ +… +i0.ɵɵlistener("click", function Comp_Template_div_click_0_listener() { return ctx.c(ctx.$event); }); diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/event_host_explicit_access.ts b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/event_host_explicit_access.ts new file mode 100644 index 0000000000..6c376a0d02 --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/event_host_explicit_access.ts @@ -0,0 +1,11 @@ +import {Directive} from '@angular/core'; + +@Directive({ + host: { + '(click)': 'c(this.$event)', + } +}) +class Dir { + $event = {}; + c(value: {}) {} +} diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/event_host_explicit_access_host_bindings.js b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/event_host_explicit_access_host_bindings.js new file mode 100644 index 0000000000..0fe7a768c4 --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/event_host_explicit_access_host_bindings.js @@ -0,0 +1,2 @@ +… +i0.ɵɵlistener("click", function Dir_click_HostBindingHandler() { return ctx.c(ctx.$event); }); diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/event_in_property_binding.ts b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/event_in_property_binding.ts new file mode 100644 index 0000000000..cce008a159 --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/event_in_property_binding.ts @@ -0,0 +1,6 @@ +import {Component} from '@angular/core'; + +@Component({template: '
'}) +class Comp { + $event = 1; +} diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/event_in_property_binding_template.js b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/event_in_property_binding_template.js new file mode 100644 index 0000000000..b69d04e1c9 --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/event_in_property_binding_template.js @@ -0,0 +1,2 @@ +… +i0.ɵɵproperty("event", ctx.$event); diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/has_event_arg_host_listener.ts b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/has_event_arg_host_listener.ts new file mode 100644 index 0000000000..c00ca4e736 --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/has_event_arg_host_listener.ts @@ -0,0 +1,8 @@ +import {Directive, HostListener} from '@angular/core'; + +@Directive() +export class MyComponent { + @HostListener('click', ['$event.target']) + click(target: any) { + } +} diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/has_event_arg_host_listener_host_bindings.js b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/has_event_arg_host_listener_host_bindings.js new file mode 100644 index 0000000000..600c50ebb9 --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/has_event_arg_host_listener_host_bindings.js @@ -0,0 +1,8 @@ +… +hostBindings: function MyComponent_HostBindings(rf, ctx) { + if (rf & 1) { + i0.ɵɵlistener("click", function MyComponent_click_HostBindingHandler($event) { + return ctx.click($event.target); + }); + } +} diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/local_ref_before_listener.ts b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/local_ref_before_listener.ts new file mode 100644 index 0000000000..145de618a1 --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/local_ref_before_listener.ts @@ -0,0 +1,15 @@ +import {Component, NgModule} from '@angular/core'; + +@Component({ + selector: 'my-component', + template: ` + + + ` +}) +export class MyComponent { +} + +@NgModule({declarations: [MyComponent]}) +export class MyModule { +} diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/local_ref_before_listener_factory.js b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/local_ref_before_listener_factory.js new file mode 100644 index 0000000000..65ff7f57f5 --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/local_ref_before_listener_factory.js @@ -0,0 +1 @@ +MyComponent.ɵfac = function MyComponent_Factory(t) { return new (t || MyComponent)(); }; diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/local_ref_before_listener_template.js b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/local_ref_before_listener_template.js new file mode 100644 index 0000000000..e0eadf6313 --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/local_ref_before_listener_template.js @@ -0,0 +1,23 @@ +… +MyComponent.ɵcmp = $r3$.ɵɵdefineComponent({ + type: MyComponent, + selectors: [["my-component"]], + decls: 4, + vars: 0, + consts: [[__AttributeMarker.Bindings__, "click"], ["user", ""]], + template: function MyComponent_Template(rf, ctx) { + if (rf & 1) { + const $s$ = $r3$.ɵɵgetCurrentView(); + $r3$.ɵɵelementStart(0, "button", 0); + $r3$.ɵɵlistener("click", function MyComponent_Template_button_click_0_listener() { + $r3$.ɵɵrestoreView($s$); + const $user$ = $r3$.ɵɵreference(3); + return ctx.onClick($user$.value); + }); + $r3$.ɵɵtext(1, "Save"); + $r3$.ɵɵelementEnd(); + $r3$.ɵɵelement(2, "input", null, 1); + } + }, + encapsulation: 2 +}); diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/no_event_arg_host_listener.ts b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/no_event_arg_host_listener.ts new file mode 100644 index 0000000000..b76130eb7e --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/no_event_arg_host_listener.ts @@ -0,0 +1,15 @@ +import {Component, HostListener} from '@angular/core'; + +@Component({ + template: '', + host: { + '(mousedown)': 'mousedown()', + } +}) +export class MyComponent { + mousedown() {} + + @HostListener('click') + click() { + } +} diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/no_event_arg_host_listener_host_bindings.js b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/no_event_arg_host_listener_host_bindings.js new file mode 100644 index 0000000000..fbfe416263 --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/no_event_arg_host_listener_host_bindings.js @@ -0,0 +1,10 @@ +… +hostBindings: function MyComponent_HostBindings(rf, ctx) { + if (rf & 1) { + i0.ɵɵlistener("mousedown", function MyComponent_mousedown_HostBindingHandler() { + return ctx.mousedown(); + })("click", function MyComponent_click_HostBindingHandler() { + return ctx.click(); + }); + } +} diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/no_event_arg_listener.ts b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/no_event_arg_listener.ts new file mode 100644 index 0000000000..62267f3ffc --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/no_event_arg_listener.ts @@ -0,0 +1,6 @@ +import {Component} from '@angular/core'; + +@Component({template: `
`}) +export class MyComponent { + onClick() {} +} diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/no_event_arg_listener_template.js b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/no_event_arg_listener_template.js new file mode 100644 index 0000000000..47d9a4dcf7 --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/no_event_arg_listener_template.js @@ -0,0 +1,11 @@ +… +consts: [[__AttributeMarker.Bindings__, "click"]], +template: function MyComponent_Template(rf, ctx) { + if (rf & 1) { + $r3$.ɵɵelementStart(0, "div", 0); + $r3$.ɵɵlistener("click", function MyComponent_Template_div_click_0_listener() { + return ctx.onClick(); + }); + $r3$.ɵɵelementEnd(); + } +} diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/same_element_chained_listeners.ts b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/same_element_chained_listeners.ts new file mode 100644 index 0000000000..26670776db --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/same_element_chained_listeners.ts @@ -0,0 +1,12 @@ +import {Component, NgModule} from '@angular/core'; + +@Component({ + selector: 'my-component', + template: `
`, +}) +export class MyComponent { +} + +@NgModule({declarations: [MyComponent]}) +export class MyModule { +} diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/same_element_chained_listeners_template.js b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/same_element_chained_listeners_template.js new file mode 100644 index 0000000000..ead0dd5518 --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/same_element_chained_listeners_template.js @@ -0,0 +1,13 @@ +… +consts: [[__AttributeMarker.Bindings__, "click", "change"]], +template: function MyComponent_Template(rf, ctx) { + if (rf & 1) { + $r3$.ɵɵelementStart(0, "div", 0); + $r3$.ɵɵlistener("click", function MyComponent_Template_div_click_0_listener() { + return ctx.click(); + })("change", function MyComponent_Template_div_change_0_listener() { + return ctx.change(); + }); + $r3$.ɵɵelementEnd(); + } +} diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/shared_snapshot_listeners.ts b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/shared_snapshot_listeners.ts new file mode 100644 index 0000000000..a7f60da992 --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/shared_snapshot_listeners.ts @@ -0,0 +1,19 @@ +import {Component, NgModule} from '@angular/core'; + +@Component({ + selector: 'my-component', + template: ` +
+
+ +
+ ` +}) +export class MyComponent { + onClick(name: any) {} + onClick2(name: any) {} +} + +@NgModule({declarations: [MyComponent]}) +export class MyModule { +} diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/shared_snapshot_listeners_template.js b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/shared_snapshot_listeners_template.js new file mode 100644 index 0000000000..dbb3615127 --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/shared_snapshot_listeners_template.js @@ -0,0 +1,31 @@ +function MyComponent_div_0_Template(rf, ctx) { + if (rf & 1) { + const $s$ = $r3$.ɵɵgetCurrentView(); + $r3$.ɵɵelementStart(0, "div"); + $r3$.ɵɵelementStart(1, "div", 1); + $r3$.ɵɵlistener("click", function MyComponent_div_0_Template_div_click_1_listener() { + $r3$.ɵɵrestoreView($s$); + const $comp$ = $r3$.ɵɵnextContext(); + return $comp$.onClick($comp$.foo); + }); + $r3$.ɵɵelementEnd(); + $r3$.ɵɵelementStart(2, "button", 1); + $r3$.ɵɵlistener("click", function MyComponent_div_0_Template_button_click_2_listener() { + $r3$.ɵɵrestoreView($s$); + const $comp2$ = $r3$.ɵɵnextContext(); + return $comp2$.onClick2($comp2$.bar); + }); + $r3$.ɵɵelementEnd(); + $r3$.ɵɵelementEnd(); + } +} +// ... +consts: [[__AttributeMarker.Template__, "ngIf"], [__AttributeMarker.Bindings__, "click"]], +template: function MyComponent_Template(rf, ctx) { + if (rf & 1) { + $r3$.ɵɵtemplate(0, MyComponent_div_0_Template, 3, 0, "div", 0); + } + if (rf & 2) { + $i0$.ɵɵproperty("ngIf", ctx.showing); + } +} diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/template_chained_listeners.ts b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/template_chained_listeners.ts new file mode 100644 index 0000000000..cbec49e4fb --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/template_chained_listeners.ts @@ -0,0 +1,12 @@ +import {Component, NgModule} from '@angular/core'; + +@Component({ + selector: 'my-component', + template: `` +}) +export class MyComponent { +} + +@NgModule({declarations: [MyComponent]}) +export class MyModule { +} diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/template_chained_listeners_template.js b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/template_chained_listeners_template.js new file mode 100644 index 0000000000..6bdbcb3b0c --- /dev/null +++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/template_chained_listeners_template.js @@ -0,0 +1,8 @@ +… +consts: [[__AttributeMarker.Bindings__, "click", "change"]], +template: function MyComponent_Template(rf, ctx) { + if (rf & 1) { + $r3$.ɵɵtemplate(0, MyComponent_ng_template_0_Template, 0, 0, "ng-template", 0); + $r3$.ɵɵlistener("click", function MyComponent_Template_ng_template_click_0_listener() { return ctx.click(); })("change", function MyComponent_Template_ng_template_change_0_listener() { return ctx.change(); }); + } +}