Re-enabling and stabilizing completion tests (#8306)

Author: alexgav

.vscode/launch.json

@@ -76,7 +76,7 @@
                 // The profile can be found under /test/csharp-test-profile.
                 "--profile",
                 "csharp-test-profile",
-                "${workspaceRoot}/test/razor/razorIntegrationTests/testAssets/RazorApp/.vscode/RazorApp.code-workspace",
+                "${workspaceRoot}/test/razor/razorIntegrationTests/testAssets/RazorApp/.vscode/devkit_RazorApp.code-workspace",
                 "--extensionDevelopmentPath=${workspaceRoot}",
                 "--extensionTestsPath=${workspaceRoot}/out/test/razor/razorIntegrationTests",
                 "--log",

test/razor/razorIntegrationTests/completion.integration.test.ts

@@ -5,11 +5,11 @@
 
 import * as path from 'path';
 import * as vscode from 'vscode';
-import { beforeAll, afterAll, test, expect, beforeEach, describe } from '@jest/globals';
+import { beforeAll, afterAll, test, expect, beforeEach } from '@jest/globals';
 import testAssetWorkspace from './testAssets/testAssetWorkspace';
 import * as integrationHelpers from '../../lsptoolshost/integrationTests/integrationHelpers';
 
-describe.skip(`Razor Completion ${testAssetWorkspace.description}`, function () {
+integrationHelpers.describeIfDevKit(`Razor Hover ${testAssetWorkspace.description}`, function () {
     beforeAll(async function () {
         if (!integrationHelpers.isRazorWorkspace(vscode.workspace)) {
             return;
@@ -31,48 +31,41 @@ describe.skip(`Razor Completion ${testAssetWorkspace.description}`, function ()
             return;
         }
 
-        const insertPosition = new vscode.Position(4, 4);
-        await insertText(insertPosition, '<te');
-        const completionList = await getCompletionsAsync(new vscode.Position(4, 7), 'e', undefined);
-        expect(completionList.items.length).toBeGreaterThan(0);
-        const textTagCompletionItem = completionList.items.find((item) => item.label === 'text');
-
-        if (!textTagCompletionItem) {
-            throw new Error(completionList.items.reduce((acc, item) => acc + item.label + '\n', ''));
+        const activeDocument = vscode.window.activeTextEditor?.document.uri;
+        if (!activeDocument) {
+            throw new Error('No active document');
         }
 
-        expect(textTagCompletionItem).toBeDefined();
-        expect(textTagCompletionItem!.kind).toEqual(vscode.CompletionItemKind.Text);
-        expect(textTagCompletionItem!.insertText).toBe('text');
+        await waitForExpectedCompletionItemAsync(
+            new vscode.Position(4, 7),
+            undefined,
+            undefined,
+            'text',
+            vscode.CompletionItemKind.TypeParameter,
+            'text'
+        );
     });
 
     test('Div Tag', async () => {
         if (!integrationHelpers.isRazorWorkspace(vscode.workspace)) {
             return;
         }
 
-        const insertPosition = new vscode.Position(6, 0);
-        await insertText(insertPosition, '<di');
-        const completionList = await getCompletionsAsync(new vscode.Position(6, 3), undefined, 10);
-        expect(completionList.items.length).toBeGreaterThan(0);
-        const divTagCompletionItem = completionList.items.find((item) => item.label === 'div');
-
-        if (!divTagCompletionItem) {
-            throw new Error(completionList.items.reduce((acc, item) => acc + item.label + '\n', ''));
-        }
+        const expectedDocumentation = `The div element has no special meaning at all. It represents its children. It can be used with the class, lang, and title attributes to mark up semantics common to a group of consecutive elements.
 
-        expect(divTagCompletionItem).toBeDefined();
+![Baseline icon](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTAiIHZpZXdCb3g9IjAgMCA1NDAgMzAwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxzdHlsZT4KICAgIC5ncmVlbi1zaGFwZSB7CiAgICAgIGZpbGw6ICNDNEVFRDA7IC8qIExpZ2h0IG1vZGUgKi8KICAgIH0KCiAgICBAbWVkaWEgKHByZWZlcnMtY29sb3Itc2NoZW1lOiBkYXJrKSB7CiAgICAgIC5ncmVlbi1zaGFwZSB7CiAgICAgICAgZmlsbDogIzEyNTIyNTsgLyogRGFyayBtb2RlICovCiAgICAgIH0KICAgIH0KICA8L3N0eWxlPgogIDxwYXRoIGQ9Ik00MjAgMzBMMzkwIDYwTDQ4MCAxNTBMMzkwIDI0MEwzMzAgMTgwTDMwMCAyMTBMMzkwIDMwMEw1NDAgMTUwTDQyMCAzMFoiIGNsYXNzPSJncmVlbi1zaGFwZSIvPgogIDxwYXRoIGQ9Ik0xNTAgMEwzMCAxMjBMNjAgMTUwTDE1MCA2MEwyMTAgMTIwTDI0MCA5MEwxNTAgMFoiIGNsYXNzPSJncmVlbi1zaGFwZSIvPgogIDxwYXRoIGQ9Ik0zOTAgMEw0MjAgMzBMMTUwIDMwMEwwIDE1MEwzMCAxMjBMMTUwIDI0MEwzOTAgMFoiIGZpbGw9IiMxRUE0NDYiLz4KPC9zdmc+) _Widely available across major browsers (Baseline since 2015)_
 
-        // Reader, you may be wondering why the kind is a Property. To that I say: I don't know.
-        // If you find out please add a detailed explanation. Thank you in advance.
-        expect(divTagCompletionItem!.kind).toEqual(vscode.CompletionItemKind.Property);
-        expect(divTagCompletionItem!.insertText).toBe('div');
-
-        const documentation = divTagCompletionItem!.documentation as vscode.MarkdownString;
-        expect(documentation.value).toBe(
-            'The div element has no special meaning at all. It represents its children. It can be used with the class, lang, and title attributes to mark up semantics common to a group of consecutive elements.\n\n[MDN Reference](https://developer.mozilla.org/docs/Web/HTML/Element/div)'
+[MDN Reference](https://developer.mozilla.org/docs/Web/HTML/Reference/Elements/div)`;
+        await waitForExpectedCompletionItemAsync(
+            new vscode.Position(6, 3),
+            undefined,
+            undefined,
+            'div',
+            vscode.CompletionItemKind.Property,
+            'div',
+            expectedDocumentation
         );
-    });
+    }, 30000);
 
     async function getCompletionsAsync(
         position: vscode.Position,
@@ -93,14 +86,43 @@ describe.skip(`Razor Completion ${testAssetWorkspace.description}`, function ()
         );
     }
 
-    async function insertText(position: vscode.Position, text: string): Promise<void> {
-        const activeEditor = vscode.window.activeTextEditor;
-        if (!activeEditor) {
-            throw new Error('No active editor');
-        }
-
-        await activeEditor.edit((builder) => {
-            builder.insert(position, text);
-        });
+    async function waitForExpectedCompletionItemAsync(
+        position: vscode.Position,
+        triggerCharacter: string | undefined,
+        resolvedItemCount: number | undefined,
+        expectedLabel: string,
+        expectedKind: vscode.CompletionItemKind,
+        expectedInsertText: string,
+        expectedDocumentation: string | undefined = undefined
+    ): Promise<void> {
+        const duration = 30 * 1000;
+        const step = 500;
+
+        await integrationHelpers.waitForExpectedResult<vscode.CompletionList>(
+            async () => {
+                const completions = await getCompletionsAsync(position, undefined, resolvedItemCount);
+                return completions;
+            },
+            duration,
+            step,
+            (completionList) => {
+                if (!completionList) {
+                    throw new Error('No completion list');
+                }
+                expect(completionList.items.length).toBeGreaterThan(0);
+
+                const completionItem = completionList.items.find((item) => item.label === expectedLabel);
+                if (!completionItem) {
+                    throw new Error();
+                }
+                expect(completionItem).toBeDefined();
+                expect(completionItem!.kind).toEqual(expectedKind);
+                expect(completionItem!.insertText).toBe(expectedInsertText);
+                if (expectedDocumentation) {
+                    const documentation = completionItem!.documentation as vscode.MarkdownString;
+                    expect(documentation.value).toBe(expectedDocumentation);
+                }
+            }
+        );
     }
 });

test/razor/razorIntegrationTests/testAssets/RazorApp/Pages/Completion.razor

@@ -2,9 +2,9 @@
 
 @* Insert text tag in below using completion *@
 @{
-    
+    <te
 }
-
+<di
 @code {
 
 }