test(compiler-cli): fix and re-enable compliance source-map tests (#40040)

These tests started failing because they had type-check
errors in their templates, and a recent commit turned on
full template type-checking by default.\

This commit fixes those templates and updates the expected
files as necessary.

PR Close #40040

packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/i18n_message_interpolation_whitespace.js

@@ -1,9 +1,9 @@
 $localize `  pre-title ${
-"\uFFFD0\uFFFD" // SOURCE: "/i18n_message_interpolation_whitespace.ts" {{title_value}}
+"\uFFFD0\uFFFD" // SOURCE: "/i18n_message_interpolation_whitespace.ts" {{titleValue}}
 }:INTERPOLATION:  post-title` // SOURCE: "/i18n_message_interpolation_whitespace.ts"   post-title
 …
 $localize ` pre-body ${
-"\uFFFD0\uFFFD" // SOURCE: "/i18n_message_interpolation_whitespace.ts" {{body_value}}
+"\uFFFD0\uFFFD" // SOURCE: "/i18n_message_interpolation_whitespace.ts" {{bodyValue}}
 }:INTERPOLATION: post-body` // SOURCE: "/i18n_message_interpolation_whitespace.ts"   post-body
 …
 i0.ɵɵelementStart(0, "div", 0) // SOURCE: "/i18n_message_interpolation_whitespace.ts" <div i18n title="

packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/i18n_message_interpolation_whitespace.ts

@@ -3,7 +3,9 @@ import {Component} from '@angular/core';
 @Component({
   selector: 'test-cmp',
   template:
-      '<div i18n title="  pre-title {{title_value}}  post-title" i18n-title>  pre-body {{body_value}}  post-body</div>',
+      '<div i18n title="  pre-title {{titleValue}}  post-title" i18n-title>  pre-body {{bodyValue}}  post-body</div>',
 })
 export class TestCmp {
+  titleValue: string = '';
+  bodyValue: string = '';
 }

packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/i18n_message_interpolation_whitespace_partial.js

@@ -1,9 +1,9 @@
 $localize `  pre-title ${
-"\uFFFD0\uFFFD" // SOURCE: "/i18n_message_interpolation_whitespace.ts" {{title_value}}
+"\uFFFD0\uFFFD" // SOURCE: "/i18n_message_interpolation_whitespace.ts" {{titleValue}}
 }:INTERPOLATION:  post-title` // SOURCE: "/i18n_message_interpolation_whitespace.ts"   post-title" i18n-title>
 …
 $localize ` pre-body ${
-"\uFFFD0\uFFFD" // SOURCE: "/i18n_message_interpolation_whitespace.ts" {{body_value}}
+"\uFFFD0\uFFFD" // SOURCE: "/i18n_message_interpolation_whitespace.ts" {{bodyValue}}
 }:INTERPOLATION: post-body` // SOURCE: "/i18n_message_interpolation_whitespace.ts"   post-body
 …
 .ɵɵelementStart(0, "div", 0) // SOURCE: "/i18n_message_interpolation_whitespace.ts" <div i18n title="

packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/i18n_message_placeholder.ts

@@ -5,4 +5,5 @@ import {Component} from '@angular/core';
   template: '<div i18n>Hello, {{name}}!</div>',
 })
 export class TestCmp {
+  name: string = '';
 }

packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/input_binding_class.ts

@@ -5,4 +5,5 @@ import {Component} from '@angular/core';
   template: '<div [class.initial]="isInitial">Message</div>',
 })
 export class TestCmp {
+  isInitial: boolean = true;
 }

packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/input_binding_complex.js

@@ -1,3 +1,3 @@
 i0.ɵɵelement(0, "div", 0) // SOURCE: "/input_binding_complex.ts" <div 
 …
-i0.ɵɵproperty("attr", ctx.greeting + ctx.name) // SOURCE: "/input_binding_complex.ts" [attr]="greeting + name"
+i0.ɵɵproperty("title", ctx.greeting + ctx.name) // SOURCE: "/input_binding_complex.ts" [title]="greeting + name"

packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/input_binding_complex.ts

@@ -2,7 +2,9 @@ import {Component} from '@angular/core';
 
 @Component({
   selector: 'test-cmp',
-  template: '<div [attr]="greeting + name"></div>',
+  template: '<div [title]="greeting + name"></div>',
 })
 export class TestCmp {
+  greeting: string = '';
+  name: string = '';
 }

packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/input_binding_complex_partial.js

@@ -1,4 +1,4 @@
 .ɵɵelement(0, "div", 0) // SOURCE: "/input_binding_complex.ts" <div 
 …
 // TODO: Work out how to fix the broken segment for the last item in a template
-.ɵɵproperty("attr", ctx.greeting // SOURCE: "/input_binding_complex.ts" [attr]="greeting + name"></div>'
+.ɵɵproperty("title", ctx.greeting // SOURCE: "/input_binding_complex.ts" [title]="greeting + name"></div>'

packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/input_binding_longhand.js

@@ -1,3 +1,3 @@
 i0.ɵɵelement(0, "div", 0) // SOURCE: "/input_binding_longhand.ts" <div 
 …
-i0.ɵɵproperty("attr", ctx.name) // SOURCE: "/input_binding_longhand.ts" bind-attr="name"
+i0.ɵɵproperty("title", ctx.name) // SOURCE: "/input_binding_longhand.ts" bind-title="name"

packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/input_binding_longhand.ts

@@ -2,7 +2,8 @@ import {Component} from '@angular/core';
 
 @Component({
   selector: 'test-cmp',
-  template: '<div bind-attr="name"></div>',
+  template: '<div bind-title="name"></div>',
 })
 export class TestCmp {
+  name: string = '';
 }

packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/input_binding_longhand_partial.js

@@ -1,4 +1,4 @@
 .ɵɵelement(0, "div", 0) // SOURCE: "/input_binding_longhand.ts" <div 
 …
 // TODO: Work out how to fix the broken segment for the last item in a template
-.ɵɵproperty("attr", ctx. // SOURCE: "/input_binding_longhand.ts" bind-attr="name"></div>'
+.ɵɵproperty("title", ctx. // SOURCE: "/input_binding_longhand.ts" bind-title="name"></div>'

packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/input_binding_simple.js

@@ -1,3 +1,3 @@
 i0.ɵɵelement(0, "div", 0) // SOURCE: "/input_binding_simple.ts" <div 
 …
-i0.ɵɵproperty("attr", ctx.name) // SOURCE: "/input_binding_simple.ts" [attr]="name"
+i0.ɵɵproperty("title", ctx.name) // SOURCE: "/input_binding_simple.ts" [title]="name"

packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/input_binding_simple.ts

@@ -2,7 +2,8 @@ import {Component} from '@angular/core';
 
 @Component({
   selector: 'test-cmp',
-  template: '<div [attr]="name"></div>',
+  template: '<div [title]="name"></div>',
 })
 export class TestCmp {
+  name: string = '';
 }

packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/input_binding_simple_partial.js

@@ -1,4 +1,4 @@
 .ɵɵelement(0, "div", 0) // SOURCE: "/input_binding_simple.ts" <div 
 …
 // TODO: Work out how to fix the broken segment for the last item in a template
-.ɵɵproperty("attr", c // SOURCE: "/input_binding_simple.ts" [attr]="name"></div>'
+.ɵɵproperty("title", c // SOURCE: "/input_binding_simple.ts" [title]="name"></div>'

packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/interpolation_basic.ts

@@ -5,4 +5,5 @@ import {Component} from '@angular/core';
   template: '<h3>Hello {{ name }}</h3>',
 })
 export class TestCmp {
+  name: string = '';
 }

packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/interpolation_complex.ts

@@ -5,4 +5,6 @@ import {Component} from '@angular/core';
   template: '<h2>{{ greeting + " " + name }}</h2>',
 })
 export class TestCmp {
+  greeting: string = '';
+  name: string = '';
 }

packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/interpolation_properties.ts

@@ -5,4 +5,5 @@ import {Component} from '@angular/core';
   template: '<div id="{{name}}"></div>',
 })
 export class TestCmp {
+  name: string = '';
 }

packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/interpolation_with_pipe.ts

@@ -1,4 +1,4 @@
-import {Component} from '@angular/core';
+import {Component, NgModule, Pipe, PipeTransform} from '@angular/core';
 
 @Component({
   selector: 'test-cmp',
@@ -6,3 +6,12 @@ import {Component} from '@angular/core';
 })
 export class TestCmp {
 }
+
+@Pipe({name: 'percent'})
+export class PercentPipe implements PipeTransform {
+  transform() {}
+}
+
+@NgModule({declarations: [TestCmp, PercentPipe]})
+export class AppModule {
+}

packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/output_binding_complex.ts

@@ -5,4 +5,5 @@ import {Component} from '@angular/core';
   template: `<button (click)="items.push('item' + items.length)">Add Item</button>`,
 })
 export class TestCmp {
+  items: string[] = [];
 }

packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/output_binding_longhand.ts

@@ -5,4 +5,5 @@ import {Component} from '@angular/core';
   template: '<button on-click="doSomething()">Do it</button>',
 })
 export class TestCmp {
+  doSomething() {}
 }

packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/output_binding_simple.ts

@@ -5,4 +5,5 @@ import {Component} from '@angular/core';
   template: '<button (click)="doSomething()">Do it</button>',
 })
 export class TestCmp {
+  doSomething() {}
 }

packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/two_way_binding_longhand.ts

@@ -1,8 +1,19 @@
-import {Component} from '@angular/core';
+import {Component, Directive, EventEmitter, Input, NgModule, Output} from '@angular/core';
 
 @Component({
   selector: 'test-cmp',
   template: 'Name: <input bindon-ngModel="name">',
 })
 export class TestCmp {
+  name: string = '';
+}
+
+@Directive({selector: '[ngModel]'})
+export class NgModelDirective {
+  @Input() ngModel: string = '';
+  @Output() ngModelChanges: EventEmitter<string> = new EventEmitter();
+}
+
+@NgModule({declarations: [TestCmp, NgModelDirective]})
+export class AppModule {
 }

packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/two_way_binding_simple.ts

@@ -1,8 +1,19 @@
-import {Component} from '@angular/core';
+import {Component, Directive, EventEmitter, Input, NgModule, Output} from '@angular/core';
 
 @Component({
   selector: 'test-cmp',
   template: 'Name: <input [(ngModel)]="name">',
 })
 export class TestCmp {
+  name: string = '';
+}
+
+@Directive({selector: '[ngModel]'})
+export class NgModelDirective {
+  @Input() ngModel: string = '';
+  @Output() ngModelChanges: EventEmitter<string> = new EventEmitter();
+}
+
+@NgModule({declarations: [TestCmp, NgModelDirective]})
+export class AppModule {
 }