test: fix vscode language service e2e tests (angular#64197)

Fix the e2e test suite for the vscode language service extension and run it in CI.

PR Close angular#64197

Author: alan-agius4

pnpm-lock.yaml

@@ -1,34 +1,22 @@
 load("@aspect_rules_ts//ts:defs.bzl", "ts_config", "ts_project")
 
-ts_config(
-    name = "tsconfig",
-    src = "tsconfig.json",
-    visibility = ["//vscode-ng-language-service/integration:__subpackages__"],
-    deps = [
-        "//vscode-ng-language-service:tsconfig",
-        "//vscode-ng-language-service/server:tsconfig",
-    ],
-)
-
 ts_config(
     name = "tsconfig-test",
     src = "tsconfig-test.json",
     visibility = ["//vscode-ng-language-service/integration:__subpackages__"],
     deps = [
-        ":tsconfig",
         "//vscode-ng-language-service:tsconfig",
-        "//vscode-ng-language-service/server:tsconfig",
     ],
 )
 
 ts_project(
     name = "integration",
-    srcs = glob([
-        "*.ts",
-    ]),
+    srcs = [
+        "test_constants.ts",
+    ],
     declaration = True,
     source_map = True,
-    tsconfig = ":tsconfig",
+    tsconfig = "//vscode-ng-language-service:tsconfig",
     visibility = ["//vscode-ng-language-service/integration:__subpackages__"],
     deps = [
         "//vscode-ng-language-service:node_modules/@types/node",

vscode-ng-language-service/integration/BUILD.bazel

@@ -3,18 +3,20 @@ load("@aspect_rules_ts//ts:defs.bzl", "ts_project")
 
 ts_project(
     name = "e2e",
+    testonly = True,
     srcs = glob(["*.ts"]),
     declaration = True,
     source_map = True,
-    tsconfig = "//vscode-ng-language-service/integration:tsconfig",
+    tsconfig = "//vscode-ng-language-service:tsconfig",
     visibility = [
         "//vscode-ng-language-service/integration:__subpackages__",
     ],
     deps = [
         "//vscode-ng-language-service:node_modules/@types/jasmine",
+        "//vscode-ng-language-service:node_modules/@types/jasmine-reporters",
         "//vscode-ng-language-service:node_modules/@types/node",
         "//vscode-ng-language-service:node_modules/@types/vscode",
-        "//vscode-ng-language-service:node_modules/vscode-test",
+        "//vscode-ng-language-service:node_modules/@vscode/test-electron",
         "//vscode-ng-language-service/integration",
     ],
 )
@@ -23,21 +25,26 @@ js_test(
     name = "test",
     data = [
         ":e2e",
+        "//vscode-ng-language-service:node_modules/jasmine",
+        "//vscode-ng-language-service:node_modules/jasmine-reporters",
+        "//vscode-ng-language-service:node_modules/typescript",
+        "//vscode-ng-language-service:node_modules/xvfb",
         "//vscode-ng-language-service:npm",
-        "//vscode-ng-language-service/integration",
         "//vscode-ng-language-service/integration/project",
-        # Depend on //:node_modules/jasmine as a temporary work-around for jasmine escaping its
-        # runfiles likely due to esm import issue in rules_js https://github.com/aspect-build/rules_js/issues/362
-        "//vscode-ng-language-service:node_modules/jasmine",
+        "//vscode-ng-language-service/integration/project:node_modules/@angular/common",
+        "//vscode-ng-language-service/integration/project:node_modules/@angular/core",
     ],
     entry_point = ":index.js",
+    env = {
+        "DBUS_SESSION_BUS_ADDRESS": "",
+    },
     # This test downloads vscode & installs it which is not allowed in the sandbox
     # due to file system protection. It is tagged local so it runs outside of
     # the sandbox. It would need some redesign to allow for sandbox execution.
-    # Tagged manual so that `bazel test //...` doesn't run it automatically.
     tags = [
         "e2e",
-        "local",
-        "manual",
+        "no-remote-exec",
+        "no-sandbox",
+        "requires-network",
     ],
 )

vscode-ng-language-service/integration/e2e/BUILD.bazel

@@ -5,7 +5,7 @@ import {activate, COMPLETION_COMMAND, FOO_TEMPLATE_URI} from './helper';
 describe('Angular LS completions', () => {
   beforeAll(async () => {
     await activate(FOO_TEMPLATE_URI);
-  });
+  }, 20_000);
 
   it(`does not duplicate HTML completions in external templates`, async () => {
     const position = new vscode.Position(0, 0);

vscode-ng-language-service/integration/e2e/completion_spec.ts

@@ -10,7 +10,7 @@ const APP_COMPONENT_URI = vscode.Uri.file(APP_COMPONENT);
 describe('Angular LS', () => {
   beforeAll(async () => {
     await activate(APP_COMPONENT_URI);
-  }, 25000 /* 25 seconds */);
+  }, 20_000);
 
   it(`returns definition for variable in template`, async () => {
     // vscode Position is zero-based
@@ -29,8 +29,8 @@ describe('Angular LS', () => {
     expect(def.targetUri.fsPath).toBe(APP_COMPONENT); // in the same document
     const {start, end} = def.targetRange;
     // Should start and end on line 6
-    expect(start.line).toBe(7);
-    expect(end.line).toBe(7);
+    expect(start.line).toBe(8);
+    expect(end.line).toBe(8);
     expect(start.character).toBe(2);
     expect(end.character).toBe(start.character + `name`.length);
   });

vscode-ng-language-service/integration/e2e/definition_spec.ts

@@ -1,3 +1,4 @@
+import {setTimeout} from 'node:timers/promises';
 import * as vscode from 'vscode';
 
 import {APP_COMPONENT, FOO_TEMPLATE} from '../test_constants';
@@ -8,20 +9,16 @@ export const DEFINITION_COMMAND = 'vscode.executeDefinitionProvider';
 export const APP_COMPONENT_URI = vscode.Uri.file(APP_COMPONENT);
 export const FOO_TEMPLATE_URI = vscode.Uri.file(FOO_TEMPLATE);
 
-function sleep(ms: number) {
-  return new Promise((resolve) => setTimeout(resolve, ms));
-}
-
-export async function activate(uri: vscode.Uri) {
-  // set default timeout to 30 seconds
-  jasmine.DEFAULT_TIMEOUT_INTERVAL = 30_000;
+export async function activate(uri: vscode.Uri): Promise<void> {
   await vscode.window.showTextDocument(uri);
   await waitForDefinitionsToBeAvailable(20);
 }
 
-async function waitForDefinitionsToBeAvailable(maxSeconds: number) {
+async function waitForDefinitionsToBeAvailable(maxTries: number) {
+  await vscode.workspace.openTextDocument(APP_COMPONENT_URI);
+
   let tries = 0;
-  while (tries < maxSeconds) {
+  while (tries < maxTries) {
     const position = new vscode.Position(4, 25);
     // For a complete list of standard commands, see
     // https://code.visualstudio.com/api/references/commands
@@ -30,10 +27,12 @@ async function waitForDefinitionsToBeAvailable(maxSeconds: number) {
       APP_COMPONENT_URI,
       position,
     );
-    if (definitions && definitions.length > 0) {
+
+    if (definitions?.length > 0) {
       return;
     }
+
     tries++;
-    await sleep(1000);
+    await setTimeout(500);
   }
 }

vscode-ng-language-service/integration/e2e/helper.ts

@@ -2,12 +2,10 @@ import * as vscode from 'vscode';
 
 import {activate, FOO_TEMPLATE_URI, HOVER_COMMAND} from './helper';
 
-// This hover tests appear to be the only flaky ones in the suite. Disable until they can
-// consistently pass.
-xdescribe('Angular LS quick info', () => {
+describe('Angular LS quick info', () => {
   beforeAll(async () => {
     await activate(FOO_TEMPLATE_URI);
-  });
+  }, 20_000);
 
   it(`returns quick info from built in extension for class in template`, async () => {
     const position = new vscode.Position(1, 8);

vscode-ng-language-service/integration/e2e/hover_spec.ts

@@ -1,27 +1,51 @@
-import {join} from 'path';
-import {runTests} from 'vscode-test';
+import {join} from 'node:path';
+import {tmpdir} from 'node:os';
+import {runTests} from '@vscode/test-electron';
 
 import {PACKAGE_ROOT, PROJECT_PATH} from '../test_constants';
+import {mkdtemp} from 'node:fs/promises';
+
+// @ts-expect-error no types.
+import Xvfb from 'xvfb';
 
 async function main() {
-  const EXT_DEVELOPMENT_PATH = join(PACKAGE_ROOT, 'npm');
+  const EXT_DEVELOPMENT_PATH = join(PACKAGE_ROOT, 'npm/vscode-ng-language-service/vsix_sandbox');
   const EXT_TESTS_PATH = join(PACKAGE_ROOT, 'integration', 'e2e', 'jasmine');
+  const xvfb = new Xvfb();
+
+  // We cannot use `TEST_TMPDIR` as it's longer than 170 characters
+  const vsCodeDataDir = await mkdtemp(join(tmpdir(), 'vscode-e2e-'));
 
   try {
-    await runTests({
+    xvfb.start();
+    const exitCode = await runTests({
       // Keep version in sync with vscode engine version in package.json
       version: '1.74.3',
       extensionDevelopmentPath: EXT_DEVELOPMENT_PATH,
       extensionTestsPath: EXT_TESTS_PATH,
+      // Avoid redownloading vscode if the test if flaky.
+      cachePath: join(tmpdir(), 'vscode-cache'),
       launchArgs: [
         PROJECT_PATH,
         // This disables all extensions except the one being tested
         '--disable-extensions',
+        '--disable-gpu',
+        '--no-sandbox',
+        '--disable-dev-shm-usage',
+        '--disable-software-rasterizer',
+        `--extensions-dir=${vsCodeDataDir}/extensions`,
+        `--user-data-dir=${vsCodeDataDir}/user-data`,
       ],
     });
+
+    if (exitCode !== 0) {
+      process.exitCode = exitCode;
+    }
   } catch (err) {
     console.error('Failed to run tests', err);
-    process.exit(1);
+    process.exitCode = 1;
+  } finally {
+    xvfb.stop();
   }
 }
 

vscode-ng-language-service/integration/e2e/index.ts

@@ -0,0 +1,24 @@
+import Jasmine from 'jasmine';
+import {TerminalReporter} from 'jasmine-reporters';
+
+export async function run(
+  _testsRoot: string,
+  cb: (error: any, exitCode?: number) => void,
+): Promise<void> {
+  const jasmine = new Jasmine({projectBaseDir: __dirname});
+  jasmine.loadConfig({
+    spec_files: ['*_spec.js'],
+  });
+
+  jasmine.addReporter(new TerminalReporter());
+  jasmine.exitOnCompletion = false;
+  const result = await jasmine.execute();
+
+  if (result.overallStatus === 'passed') {
+    console.log('All specs have passed');
+    cb(null, 0);
+  } else {
+    console.log('At least one spec has failed');
+    cb(result.incompleteReason, 1);
+  }
+}

vscode-ng-language-service/integration/e2e/jasmine.ts

@@ -12,13 +12,11 @@ jasmine_test(
         "//vscode-ng-language-service/integration/project:node_modules/@angular/common",
         "//vscode-ng-language-service/integration/project:node_modules/@angular/core",
         "//vscode-ng-language-service/server:index",
-        "//vscode-ng-language-service/server:node_modules",
+        "//vscode-ng-language-service/server:node_modules/@angular/language-service",
+        "//vscode-ng-language-service/server:node_modules/typescript",
     ],
     flaky = True,
     shard_count = 2,
-    tags = [
-        "e2e",
-    ],
 )
 
 ts_project(