fix(completions): fix completions for inputs / outputs (#1405)

* fix: add directive and event to completion kind type

* fix(completions): fix completions for inputs / outputs

The `TextEdit` is not meant to replace text to the right of the
position. Instead, `InsesrtReplaceEdit` should be used.

Reference discussion in LSP issue for examples on replacement vs
insertion range for `InsertReplaceEdit`:
microsoft/language-server-protocol#846

Fixes #1388

Note that the issue did not appear in the VE version of the extension
because it was only providing completions as inserts (they had
no `replacementSpan`).

Author: atscott

integration/lsp/ivy_spec.ts

@@ -234,6 +234,27 @@ describe('Angular Ivy language server', () => {
     });
   });
 
+  describe('completions', () => {
+    it('for events', async () => {
+      openTextDocument(client, FOO_TEMPLATE, `<my-app ()></my-app>`);
+      const languageServiceEnabled = await waitForNgcc(client);
+      expect(languageServiceEnabled).toBeTrue();
+      const response = await client.sendRequest(lsp.CompletionRequest.type, {
+        textDocument: {
+          uri: `file://${FOO_TEMPLATE}`,
+        },
+        position: {line: 0, character: 9},
+      }) as lsp.CompletionItem[];
+      const outputCompletion = response.find(i => i.label === '(appOutput)')!;
+      expect(outputCompletion.kind).toEqual(lsp.CompletionItemKind.Property);
+      expect((outputCompletion.textEdit as lsp.InsertReplaceEdit).insert)
+          .toEqual({start: {line: 0, character: 8}, end: {line: 0, character: 9}});
+      // replace range includes the closing )
+      expect((outputCompletion.textEdit as lsp.InsertReplaceEdit).replace)
+          .toEqual({start: {line: 0, character: 8}, end: {line: 0, character: 10}});
+    });
+  });
+
   describe('renaming', () => {
     describe('from template files', () => {
       beforeEach(async () => {

integration/lsp/test_utils.ts

@@ -66,7 +66,7 @@ export function initializeServer(client: MessageConnection): Promise<lsp.Initial
   });
 }
 
-export function openTextDocument(client: MessageConnection, filePath: string) {
+export function openTextDocument(client: MessageConnection, filePath: string, newText?: string) {
   let languageId = 'unknown';
   if (filePath.endsWith('ts')) {
     languageId = 'typescript';
@@ -78,7 +78,7 @@ export function openTextDocument(client: MessageConnection, filePath: string) {
       uri: `file://${filePath}`,
       languageId,
       version: 1,
-      text: fs.readFileSync(filePath, 'utf-8'),
+      text: newText ?? fs.readFileSync(filePath, 'utf-8'),
     },
   });
 }

integration/project/app/app.component.ts

@@ -1,9 +1,11 @@
-import {Component} from '@angular/core';
+import {Component, EventEmitter, Input, Output} from '@angular/core';
 
 @Component({
   selector: 'my-app',
   template: `<h1>Hello {{name}}</h1>`,
 })
 export class AppComponent {
   name = 'Angular';
+  @Input() appInput = '';
+  @Output() appOutput = new EventEmitter<string>();
 }

server/src/completion.ts

@@ -9,15 +9,17 @@
 import * as ts from 'typescript/lib/tsserverlibrary';
 import * as lsp from 'vscode-languageserver';
 
-import {tsTextSpanToLspRange} from './utils';
+import {lspPositionToTsPosition, tsTextSpanToLspRange} from './utils';
 
 // TODO: Move this to `@angular/language-service`.
 enum CompletionKind {
   attribute = 'attribute',
   htmlAttribute = 'html attribute',
   property = 'property',
   component = 'component',
+  directive = 'directive',
   element = 'element',
+  event = 'event',
   key = 'key',
   method = 'method',
   pipe = 'pipe',
@@ -72,7 +74,9 @@ function ngCompletionKindToLspCompletionItemKind(kind: CompletionKind): lsp.Comp
     case CompletionKind.attribute:
     case CompletionKind.htmlAttribute:
     case CompletionKind.property:
+    case CompletionKind.event:
       return lsp.CompletionItemKind.Property;
+    case CompletionKind.directive:
     case CompletionKind.component:
     case CompletionKind.element:
     case CompletionKind.key:
@@ -114,9 +118,16 @@ export function tsCompletionEntryToLspCompletionItem(
   // from 'entry.name'. For example, a method name could be 'greet', but the
   // insertText is 'greet()'.
   const insertText = entry.insertText || entry.name;
-  item.textEdit = entry.replacementSpan ?
-      lsp.TextEdit.replace(tsTextSpanToLspRange(scriptInfo, entry.replacementSpan), insertText) :
-      lsp.TextEdit.insert(position, insertText);
+  if (entry.replacementSpan) {
+    const replacementRange = tsTextSpanToLspRange(scriptInfo, entry.replacementSpan);
+    const tsPosition = lspPositionToTsPosition(scriptInfo, position);
+    const insertLength = tsPosition - entry.replacementSpan.start;
+    const insertionRange =
+        tsTextSpanToLspRange(scriptInfo, {...entry.replacementSpan, length: insertLength});
+    item.textEdit = lsp.InsertReplaceEdit.create(insertText, insertionRange, replacementRange);
+  } else {
+    item.textEdit = lsp.TextEdit.insert(position, insertText);
+  }
   item.data = {
     kind: 'ngCompletionOriginData',
     filePath: scriptInfo.fileName,

server/src/session.ts

@@ -929,7 +929,7 @@ export class Session {
     }
     const {kind, kindModifiers, textSpan, displayParts, documentation} = info;
     let desc = kindModifiers ? kindModifiers + ' ' : '';
-    if (displayParts) {
+    if (displayParts && displayParts.length > 0) {
       // displayParts does not contain info about kindModifiers
       // but displayParts does contain info about kind
       desc += displayParts.map(dp => dp.text).join('');
@@ -994,7 +994,7 @@ export class Session {
 
     const {kind, kindModifiers, displayParts, documentation} = details;
     let desc = kindModifiers ? kindModifiers + ' ' : '';
-    if (displayParts) {
+    if (displayParts && displayParts.length > 0) {
       // displayParts does not contain info about kindModifiers
       // but displayParts does contain info about kind
       desc += displayParts.map(dp => dp.text).join('');