234 lines
		
	
	
		
			7.1 KiB
		
	
	
	
		
			TypeScript
		
	
	
	
	
	
			
		
		
	
	
			234 lines
		
	
	
		
			7.1 KiB
		
	
	
	
		
			TypeScript
		
	
	
	
	
	
| /**
 | |
|  * @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 {MockData} from './test_utils';
 | |
| 
 | |
| export const toh = {
 | |
|   'foo.ts': `export * from './app/app.component.ts';`,
 | |
|   app: {
 | |
|     'app.component.ts': `import { Component } from '@angular/core';
 | |
| 
 | |
| export class Hero {
 | |
|   id: number;
 | |
|   name: string;
 | |
| }
 | |
| 
 | |
| @Component({
 | |
|   selector: 'my-app',
 | |
|   template: \`~{empty}
 | |
|     <~{start-tag}h~{start-tag-after-h}1~{start-tag-h1} ~{h1-after-space}>~{h1-content} {{~{sub-start}title~{sub-end}}}</h1>
 | |
|     ~{after-h1}<h2>{{~{h2-hero}hero.~{h2-name}name}} details!</h2>
 | |
|     <div><label>id: </label>{{~{label-hero}hero.~{label-id}id}}</div>
 | |
|     <div ~{div-attributes}>
 | |
|       <label>name: </label>
 | |
|     </div>
 | |
|     &~{entity-amp}amp;
 | |
|     \`
 | |
| })
 | |
| export class AppComponent {
 | |
|   title = 'Tour of Heroes';
 | |
|   hero: Hero = {
 | |
|     id: 1,
 | |
|     name: 'Windstorm'
 | |
|   };
 | |
|   private internal: string;
 | |
| }`,
 | |
|     'main.ts': `
 | |
| import { NgModule } from '@angular/core';
 | |
| import { CommonModule } from '@angular/common';
 | |
| import { FormsModule } from '@angular/forms';
 | |
| import { AppComponent }   from './app.component';
 | |
| import { CaseIncompleteOpen, CaseMissingClosing, CaseUnknown, Pipes, TemplateReference, NoValueAttribute,
 | |
|          AttributeBinding, StringModel,PropertyBinding, EventBinding, TwoWayBinding, EmptyInterpolation,
 | |
|          ForOfEmpty, ForLetIEqual, ForOfLetEmpty, ForUsingComponent, References, TestComponent} from './parsing-cases';
 | |
| import { WrongFieldReference, WrongSubFieldReference, PrivateReference, ExpectNumericType, LowercasePipe } from './expression-cases';
 | |
| import { UnknownPeople, UnknownEven, UnknownTrackBy } from './ng-for-cases';
 | |
| import { ShowIf } from './ng-if-cases';
 | |
| 
 | |
| @NgModule({
 | |
|   imports: [CommonModule, FormsModule],
 | |
|   declarations: [AppComponent, CaseIncompleteOpen, CaseMissingClosing, CaseUnknown, Pipes, TemplateReference, NoValueAttribute,
 | |
|     AttributeBinding, StringModel, PropertyBinding, EventBinding, TwoWayBinding, EmptyInterpolation, ForOfEmpty, ForOfLetEmpty,
 | |
|     ForLetIEqual, ForUsingComponent, References, TestComponent, WrongFieldReference, WrongSubFieldReference, PrivateReference,
 | |
|     ExpectNumericType, UnknownPeople, UnknownEven, UnknownTrackBy, ShowIf, LowercasePipe]
 | |
| })
 | |
| export class AppModule {}
 | |
| 
 | |
| declare function bootstrap(v: any): void;
 | |
| 
 | |
| bootstrap(AppComponent);
 | |
| `,
 | |
|     'parsing-cases.ts': `
 | |
| import {Component, Directive, Input, Output, EventEmitter} from '@angular/core';
 | |
| import {Hero} from './app.component';
 | |
| 
 | |
| @Component({template: '<h1>Some <~{incomplete-open-lt}a~{incomplete-open-a} ~{incomplete-open-attr} text</h1>'})
 | |
| export class CaseIncompleteOpen {}
 | |
| 
 | |
| @Component({template: '<h1>Some <a> ~{missing-closing} text</h1>'})
 | |
| export class CaseMissingClosing {}
 | |
| 
 | |
| @Component({template: '<h1>Some <unknown ~{unknown-element}> text</h1>'})
 | |
| export class CaseUnknown {}
 | |
| 
 | |
| @Component({template: '<h1>{{data | ~{before-pipe}lowe~{in-pipe}rcase~{after-pipe} }}'})
 | |
| export class Pipes {
 | |
|   data = 'Some string';
 | |
| }
 | |
| 
 | |
| @Component({template: '<h1 h~{no-value-attribute}></h1>'})
 | |
| export class NoValueAttribute {}
 | |
| 
 | |
| 
 | |
| @Component({template: '<h1 model="~{attribute-binding-model}test"></h1>'})
 | |
| export class AttributeBinding {
 | |
|   test: string;
 | |
| }
 | |
| 
 | |
| @Component({template: '<h1 [model]="~{property-binding-model}test"></h1>'})
 | |
| export class PropertyBinding {
 | |
|   test: string;
 | |
| }
 | |
| 
 | |
| @Component({template: '<h1 (model)="~{event-binding-model}modelChanged()"></h1>'})
 | |
| export class EventBinding {
 | |
|   test: string;
 | |
| 
 | |
|   modelChanged() {}
 | |
| }
 | |
| 
 | |
| @Component({template: '<h1 [(model)]="~{two-way-binding-model}test"></h1>'})
 | |
| export class TwoWayBinding {
 | |
|   test: string;
 | |
| }
 | |
| 
 | |
| @Directive({selector: '[string-model]'})
 | |
| export class StringModel {
 | |
|   @Input() model: string;
 | |
|   @Output() modelChanged: EventEmitter<string>;
 | |
| }
 | |
| 
 | |
| interface Person {
 | |
|   name: string;
 | |
|   age: number
 | |
| }
 | |
| 
 | |
| @Component({template: '<div *ngFor="~{for-empty}"></div>'})
 | |
| export class ForOfEmpty {}
 | |
| 
 | |
| @Component({template: '<div *ngFor="let ~{for-let-empty}"></div>'})
 | |
| export class ForOfLetEmpty {}
 | |
| 
 | |
| @Component({template: '<div *ngFor="let i = ~{for-let-i-equal}"></div>'})
 | |
| export class ForLetIEqual {}
 | |
| 
 | |
| @Component({template: '<div *ngFor="~{for-let}let ~{for-person}person ~{for-of}of ~{for-people}people"> <span>Name: {{~{for-interp-person}person.~{for-interp-name}name}}</span><span>Age: {{person.~{for-interp-age}age}}</span></div>'})
 | |
| export class ForUsingComponent {
 | |
|   people: Person[];
 | |
| }
 | |
| 
 | |
| @Component({template: '<div #div> <test-comp #test1> {{~{test-comp-content}}} {{test1.~{test-comp-after-test}name}} {{div.~{test-comp-after-div}.innerText}} </test-comp> </div> <test-comp #test2></test-comp>'})
 | |
| export class References {}
 | |
| 
 | |
| @Component({selector: 'test-comp', template: '<div>Testing: {{name}}</div>'})
 | |
| export class TestComponent {
 | |
|   «@Input('∆tcName∆') name = 'test';»
 | |
|   «@Output('∆test∆') testEvent = new EventEmitter();»
 | |
| }
 | |
| 
 | |
| @Component({templateUrl: 'test.ng'})
 | |
| export class TemplateReference {
 | |
|   title = 'Some title';
 | |
|   hero: Hero = {
 | |
|     id: 1,
 | |
|     name: 'Windstorm'
 | |
|   };
 | |
|   anyValue: any;
 | |
|   myClick(event: any) {
 | |
| 
 | |
|   }
 | |
| }
 | |
| 
 | |
| @Component({template: '{{~{empty-interpolation}}}'})
 | |
| export class EmptyInterpolation {
 | |
|   title = 'Some title';
 | |
|   subTitle = 'Some sub title';
 | |
| }
 | |
| `,
 | |
|     'expression-cases.ts': `
 | |
| import {Component} from '@angular/core';
 | |
| 
 | |
| export interface Person {
 | |
|   name: string;
 | |
|   age: number;
 | |
| }
 | |
| 
 | |
| @Component({template: '{{~{foo}foo~{foo-end}}}'})
 | |
| export class WrongFieldReference {
 | |
|   bar = 'bar';
 | |
| }
 | |
| 
 | |
| @Component({template: '{{~{nam}person.nam~{nam-end}}}'})
 | |
| export class WrongSubFieldReference {
 | |
|   person: Person = { name: 'Bob', age: 23 };
 | |
| }
 | |
| 
 | |
| @Component({template: '{{~{myField}myField~{myField-end}}}'})
 | |
| export class PrivateReference {
 | |
|   private myField = 'My Field';
 | |
| }
 | |
| 
 | |
| @Component({template: '{{~{mod}"a" ~{mod-end}% 2}}'})
 | |
| export class ExpectNumericType {}
 | |
| 
 | |
| @Component({template: '{{ (name | lowercase).~{string-pipe}substring }}'})
 | |
| export class LowercasePipe {
 | |
|   name: string;
 | |
| }
 | |
| `,
 | |
|     'ng-for-cases.ts': `
 | |
| import {Component} from '@angular/core';
 | |
| 
 | |
| export interface Person {
 | |
|   name: string;
 | |
|   age: number;
 | |
| }
 | |
| 
 | |
| @Component({template: '<div *ngFor="let person of ~{people_1}people_1~{people_1-end}"> <span>{{person.name}}</span> </div>'})
 | |
| export class UnknownPeople {}
 | |
| 
 | |
| @Component({template: '<div ~{even_1}*ngFor="let person of people; let e = even_1"~{even_1-end}><span>{{person.name}}</span> </div>'})
 | |
| export class UnknownEven {
 | |
|   people: Person[];
 | |
| }
 | |
| 
 | |
| @Component({template: '<div *ngFor="let person of people; trackBy ~{trackBy_1}trackBy_1~{trackBy_1-end}"><span>{{person.name}}</span> </div>'})
 | |
| export class UnknownTrackBy {
 | |
|   people: Person[];
 | |
| }
 | |
| `,
 | |
|     'ng-if-cases.ts': `
 | |
| import {Component} from '@angular/core';
 | |
| 
 | |
| @Component({template: '<div ~{implicit}*ngIf="show; let l=unknown"~{implicit-end}>Showing now!</div>'})
 | |
| export class ShowIf {
 | |
|   show = false;
 | |
| }
 | |
| `,
 | |
|     'test.ng': `~{empty}
 | |
|     <~{start-tag}h~{start-tag-after-h}1~{start-tag-h1} ~{h1-after-space}>~{h1-content} {{~{sub-start}title~{sub-end}}}</h1>
 | |
|     ~{after-h1}<h2>{{~{h2-hero}hero.~{h2-name}name}} details!</h2>
 | |
|     <div><label>id: </label>{{~{label-hero}hero.~{label-id}id}}</div>
 | |
|     <div ~{div-attributes}>
 | |
|       <label>name: </label>
 | |
|     </div>
 | |
|     &~{entity-amp}amp;
 | |
|     `
 | |
|   }
 | |
| };
 |