From 9b9116c79d626b6356f3dfe0d48c9d990ac412a2 Mon Sep 17 00:00:00 2001
From: Keen Yee Liau <kyliau@umich.edu>
Date: Fri, 20 Dec 2019 10:26:24 -0800
Subject: [PATCH] feat(language-service): Append symbol type to hover tooltip
 (#34515)

Now that https://github.com/angular/angular/pull/34177 fixed the `TypeWrapper`
to have a proper name, we have the information needed to show the type
name in a hover tooltip.

PR Close #34515
---
 .../goldens/quickinfo.json                    |  2 +-
 packages/language-service/src/hover.ts        | 20 ++++++++++++++-----
 packages/language-service/test/hover_spec.ts  | 16 +++++++--------
 3 files changed, 24 insertions(+), 14 deletions(-)

diff --git a/integration/language_service_plugin/goldens/quickinfo.json b/integration/language_service_plugin/goldens/quickinfo.json
index 5171068d649a6..a30b8c66c1e3b 100644
--- a/integration/language_service_plugin/goldens/quickinfo.json
+++ b/integration/language_service_plugin/goldens/quickinfo.json
@@ -15,7 +15,7 @@
       "line": 5,
       "offset": 30
     },
-    "displayString": "(property) AppComponent.name",
+    "displayString": "(property) AppComponent.name: string",
     "documentation": "",
     "tags": []
   }
diff --git a/packages/language-service/src/hover.ts b/packages/language-service/src/hover.ts
index 9860f7eb3f977..04c3a28a80e4f 100644
--- a/packages/language-service/src/hover.ts
+++ b/packages/language-service/src/hover.ts
@@ -18,6 +18,7 @@ const SYMBOL_SPACE = ts.SymbolDisplayPartKind[ts.SymbolDisplayPartKind.space];
 const SYMBOL_PUNC = ts.SymbolDisplayPartKind[ts.SymbolDisplayPartKind.punctuation];
 const SYMBOL_CLASS = ts.SymbolDisplayPartKind[ts.SymbolDisplayPartKind.className];
 const SYMBOL_TEXT = ts.SymbolDisplayPartKind[ts.SymbolDisplayPartKind.text];
+const SYMBOL_INTERFACE = ts.SymbolDisplayPartKind[ts.SymbolDisplayPartKind.interfaceName];
 
 /**
  * Traverse the template AST and look for the symbol located at `position`, then
@@ -45,19 +46,28 @@ export function getHover(info: AstResult, position: number, host: Readonly<TypeS
         {text: '.', kind: SYMBOL_PUNC},
       ] :
       [];
+  const typeDisplayParts: ts.SymbolDisplayPart[] = symbol.type ?
+      [
+        {text: ':', kind: SYMBOL_PUNC},
+        {text: ' ', kind: SYMBOL_SPACE},
+        {text: symbol.type.name, kind: SYMBOL_INTERFACE},
+      ] :
+      [];
   return {
     kind: symbol.kind as ts.ScriptElementKind,
     kindModifiers: '',  // kindModifier info not available on 'ng.Symbol'
     textSpan,
-    // this would generate a string like '(property) ClassX.propY'
+    // this would generate a string like '(property) ClassX.propY: type'
     // 'kind' in displayParts does not really matter because it's dropped when
     // displayParts get converted to string.
     displayParts: [
-      {text: '(', kind: SYMBOL_PUNC}, {text: symbol.kind, kind: symbol.kind},
-      {text: ')', kind: SYMBOL_PUNC}, {text: ' ', kind: SYMBOL_SPACE}, ...containerDisplayParts,
+      {text: '(', kind: SYMBOL_PUNC},
+      {text: symbol.kind, kind: symbol.kind},
+      {text: ')', kind: SYMBOL_PUNC},
+      {text: ' ', kind: SYMBOL_SPACE},
+      ...containerDisplayParts,
       {text: symbol.name, kind: symbol.kind},
-      // TODO: Append type info as well, but Symbol doesn't expose that!
-      // Ideally hover text should be like '(property) ClassX.propY: string'
+      ...typeDisplayParts,
     ],
   };
 }
diff --git a/packages/language-service/test/hover_spec.ts b/packages/language-service/test/hover_spec.ts
index e47263373cf4f..8320dc38ea36d 100644
--- a/packages/language-service/test/hover_spec.ts
+++ b/packages/language-service/test/hover_spec.ts
@@ -36,7 +36,7 @@ describe('hover', () => {
     expect(quickInfo).toBeTruthy();
     const {textSpan, displayParts} = quickInfo !;
     expect(textSpan).toEqual(marker);
-    expect(toText(displayParts)).toBe('(property) MyComponent.name');
+    expect(toText(displayParts)).toBe('(property) MyComponent.name: string');
   });
 
   it('should be able to find a field in a attribute reference', () => {
@@ -52,7 +52,7 @@ describe('hover', () => {
     expect(quickInfo).toBeTruthy();
     const {textSpan, displayParts} = quickInfo !;
     expect(textSpan).toEqual(marker);
-    expect(toText(displayParts)).toBe('(property) MyComponent.name');
+    expect(toText(displayParts)).toBe('(property) MyComponent.name: string');
   });
 
   it('should be able to find a method from a call', () => {
@@ -69,7 +69,7 @@ describe('hover', () => {
     const {textSpan, displayParts} = quickInfo !;
     expect(textSpan).toEqual(marker);
     expect(textSpan.length).toBe('myClick()'.length);
-    expect(toText(displayParts)).toBe('(method) MyComponent.myClick');
+    expect(toText(displayParts)).toBe('(method) MyComponent.myClick: () => void');
   });
 
   it('should be able to find a field reference in an *ngIf', () => {
@@ -85,7 +85,7 @@ describe('hover', () => {
     expect(quickInfo).toBeTruthy();
     const {textSpan, displayParts} = quickInfo !;
     expect(textSpan).toEqual(marker);
-    expect(toText(displayParts)).toBe('(property) MyComponent.include');
+    expect(toText(displayParts)).toBe('(property) MyComponent.include: boolean');
   });
 
   it('should be able to find a reference to a component', () => {
@@ -113,7 +113,7 @@ describe('hover', () => {
     expect(quickInfo).toBeTruthy();
     const {textSpan, displayParts} = quickInfo !;
     expect(textSpan).toEqual(marker);
-    expect(toText(displayParts)).toBe('(directive) StringModel');
+    expect(toText(displayParts)).toBe('(directive) StringModel: typeof StringModel');
   });
 
   it('should be able to find an event provider', () => {
@@ -129,7 +129,7 @@ describe('hover', () => {
     expect(quickInfo).toBeTruthy();
     const {textSpan, displayParts} = quickInfo !;
     expect(textSpan).toEqual(marker);
-    expect(toText(displayParts)).toBe('(event) TestComponent.testEvent');
+    expect(toText(displayParts)).toBe('(event) TestComponent.testEvent: EventEmitter<any>');
   });
 
   it('should be able to find an input provider', () => {
@@ -145,7 +145,7 @@ describe('hover', () => {
     expect(quickInfo).toBeTruthy();
     const {textSpan, displayParts} = quickInfo !;
     expect(textSpan).toEqual(marker);
-    expect(toText(displayParts)).toBe('(property) TestComponent.name');
+    expect(toText(displayParts)).toBe('(property) TestComponent.name: string');
   });
 
   it('should be able to ignore a reference declaration', () => {
@@ -203,7 +203,7 @@ describe('hover', () => {
       start: position,
       length: '$any(title)'.length,
     });
-    expect(toText(displayParts)).toBe('(method) $any');
+    expect(toText(displayParts)).toBe('(method) $any: $any');
   });
 });