test(language-service): Inline test cases in parsing-cases.ts (angular#36495)

This commit removes individual components from parsing-cases.ts and
colocate them with the actual tests. This makes the tests more readable.

PR Close angular#36495

Author: Keen Yee Liau

packages/language-service/test/completions_spec.ts

@@ -168,9 +168,10 @@ describe('completions', () => {
   });
 
   it('should be able to get completions in an empty interpolation', () => {
-    const marker = mockHost.getLocationMarkerFor(PARSING_CASES, 'empty-interpolation');
-    const completions = ngLS.getCompletionsAtPosition(PARSING_CASES, marker.start);
-    expectContain(completions, CompletionKind.PROPERTY, ['title', 'subTitle']);
+    mockHost.override(TEST_TEMPLATE, `{{ ~{cursor} }}`);
+    const marker = mockHost.getLocationMarkerFor(TEST_TEMPLATE, 'cursor');
+    const completions = ngLS.getCompletionsAtPosition(TEST_TEMPLATE, marker.start);
+    expectContain(completions, CompletionKind.PROPERTY, ['title', 'hero']);
   });
 
   it('should suggest $any() type cast function in an interpolation', () => {
@@ -282,9 +283,14 @@ describe('completions', () => {
 
   describe('with a *ngIf', () => {
     it('should be able to get completions for exported *ngIf variable', () => {
-      const marker = mockHost.getLocationMarkerFor(PARSING_CASES, 'promised-person-name');
-      const completions = ngLS.getCompletionsAtPosition(PARSING_CASES, marker.start);
-      expectContain(completions, CompletionKind.PROPERTY, ['name', 'age', 'street']);
+      mockHost.override(TEST_TEMPLATE, `
+        <div *ngIf="heroP | async as h">
+          {{ h.~{cursor} }}
+        </div>
+      `);
+      const marker = mockHost.getLocationMarkerFor(TEST_TEMPLATE, 'cursor');
+      const completions = ngLS.getCompletionsAtPosition(TEST_TEMPLATE, marker.start);
+      expectContain(completions, CompletionKind.PROPERTY, ['id', 'name']);
     });
   });
 
@@ -368,9 +374,14 @@ describe('completions', () => {
     });
 
     it('should be able to infer the type of a ngForOf with an async pipe', () => {
-      const marker = mockHost.getLocationMarkerFor(PARSING_CASES, 'async-person-name');
-      const completions = ngLS.getCompletionsAtPosition(PARSING_CASES, marker.start);
-      expectContain(completions, CompletionKind.PROPERTY, ['name', 'age', 'street']);
+      mockHost.override(TEST_TEMPLATE, `
+        <div *ngFor="let h of heroesP | async">
+          {{ h.~{cursor} }}
+        </div>
+      `);
+      const marker = mockHost.getLocationMarkerFor(TEST_TEMPLATE, 'cursor');
+      const completions = ngLS.getCompletionsAtPosition(TEST_TEMPLATE, marker.start);
+      expectContain(completions, CompletionKind.PROPERTY, ['id', 'name']);
     });
 
     it('should be able to resolve variable in nested loop', () => {
@@ -498,14 +509,27 @@ describe('completions', () => {
 
   describe('with references', () => {
     it('should list references', () => {
-      const marker = mockHost.getLocationMarkerFor(PARSING_CASES, 'test-comp-content');
-      const completions = ngLS.getCompletionsAtPosition(PARSING_CASES, marker.start);
-      expectContain(completions, CompletionKind.REFERENCE, ['div', 'test1', 'test2']);
+      mockHost.override(TEST_TEMPLATE, `
+        <div #myDiv>
+          <test-comp #test1>
+            {{ ~{cursor} }}
+          </test-comp>
+        </div>
+        <test-comp #test2></test-comp>
+      `);
+      const marker = mockHost.getLocationMarkerFor(TEST_TEMPLATE, 'cursor');
+      const completions = ngLS.getCompletionsAtPosition(TEST_TEMPLATE, marker.start);
+      expectContain(completions, CompletionKind.REFERENCE, ['myDiv', 'test1', 'test2']);
     });
 
     it('should reference the component', () => {
-      const marker = mockHost.getLocationMarkerFor(PARSING_CASES, 'test-comp-after-test');
-      const completions = ngLS.getCompletionsAtPosition(PARSING_CASES, marker.start);
+      mockHost.override(TEST_TEMPLATE, `
+        <test-comp #test1>
+          {{ test1.~{cursor} }}
+        </test-comp>
+      `);
+      const marker = mockHost.getLocationMarkerFor(TEST_TEMPLATE, 'cursor');
+      const completions = ngLS.getCompletionsAtPosition(TEST_TEMPLATE, marker.start);
       expectContain(completions, CompletionKind.PROPERTY, ['name', 'testEvent']);
     });
 

packages/language-service/test/diagnostics_spec.ts

@@ -342,7 +342,7 @@ describe('diagnostics', () => {
       expect(category).toBe(ts.DiagnosticCategory.Error);
       expect(messageText)
           .toBe(
-              `Identifier 'missingField' is not defined. '{ implicitPerson: Person; }' does not contain such a member`,
+              `Identifier 'missingField' is not defined. '{ implicitPerson: Hero; }' does not contain such a member`,
           );
       const span = mockHost.getLocationMarkerFor(TEST_TEMPLATE, 'emb');
       expect(start).toBe(span.start);
@@ -361,7 +361,7 @@ describe('diagnostics', () => {
       expect(category).toBe(ts.DiagnosticCategory.Error);
       expect(messageText)
           .toBe(
-              `Identifier 'missingField' is not defined. 'Person' does not contain such a member`,
+              `Identifier 'missingField' is not defined. 'Hero' does not contain such a member`,
           );
       const span = mockHost.getLocationMarkerFor(TEST_TEMPLATE, 'emb');
       expect(start).toBe(span.start);

packages/language-service/test/project/app/main.ts

@@ -16,16 +16,13 @@ import * as ParsingCases from './parsing-cases';
   imports: [CommonModule, FormsModule],
   declarations: [
     AppComponent,
-    ParsingCases.AsyncForUsingComponent,
     ParsingCases.CaseIncompleteOpen,
     ParsingCases.CaseMissingClosing,
     ParsingCases.CaseUnknown,
     ParsingCases.CounterDirective,
-    ParsingCases.EmptyInterpolation,
     ParsingCases.HintModel,
     ParsingCases.NoValueAttribute,
     ParsingCases.NumberModel,
-    ParsingCases.References,
     ParsingCases.StringModel,
     ParsingCases.TemplateReference,
     ParsingCases.TestComponent,

packages/language-service/test/project/app/parsing-cases.ts

@@ -63,45 +63,6 @@ export class HintModel {
   hintChange: EventEmitter<string> = new EventEmitter();
 }
 
-interface Person {
-  name: string;
-  age: number;
-  street: string;
-}
-
-@Component({
-  template: `
-    <div *ngFor="let person of people | async">
-      {{person.~{async-person-name}name}}
-    </div>
-    <div *ngIf="promisedPerson | async as person">
-      {{person.~{promised-person-name}name}}
-    </div>
-  `,
-})
-export class AsyncForUsingComponent {
-  people: Promise<Person[]> = Promise.resolve([]);
-  promisedPerson: Promise<Person> = Promise.resolve({
-    name: 'John Doe',
-    age: 42,
-    street: '123 Angular Ln',
-  });
-}
-
-@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 {
-}
-
 class CounterDirectiveContext<T> {
   constructor(public $implicit: T) {}
 }
@@ -121,8 +82,8 @@ export class CounterDirective implements OnChanges {
 }
 
 interface WithContextDirectiveContext {
-  $implicit: {implicitPerson: Person;};
-  nonImplicitPerson: Person;
+  $implicit: {implicitPerson: Hero;};
+  nonImplicitPerson: Hero;
 }
 
 @Directive({selector: '[withContext]'})
@@ -156,7 +117,9 @@ export class TemplateReference {
    */
   title = 'Some title';
   hero: Hero = {id: 1, name: 'Windstorm'};
+  heroP = Promise.resolve(this.hero);
   heroes: Hero[] = [this.hero];
+  heroesP = Promise.resolve(this.heroes);
   tupleArray: [string, Hero] = ['test', this.hero];
   league: Hero[][] = [this.heroes];
   heroesByName: {[name: string]: Hero} = {};
@@ -171,11 +134,3 @@ export class TemplateReference {
   constNames = [{name: 'name'}] as const;
   private myField = 'My Field';
 }
-
-@Component({
-  template: '{{~{empty-interpolation}}}',
-})
-export class EmptyInterpolation {
-  title = 'Some title';
-  subTitle = 'Some sub title';
-}

packages/language-service/test/typescript_host_spec.ts

@@ -94,7 +94,7 @@ describe('TypeScriptServiceHost', () => {
     const tsLS = ts.createLanguageService(tsLSHost);
     const ngLSHost = new TypeScriptServiceHost(tsLSHost, tsLS);
     const templates = ngLSHost.getTemplates('/app/parsing-cases.ts');
-    expect(templates.length).toBe(8);
+    expect(templates.length).toBe(5);
   });
 
   it('should be able to find external template', () => {