Enable intellisense and improve web smoke tests (#9623)

* Enable intellisense and improve web smoke tests

* Misc

Author: DonJayamanne

.github/workflows/build-test.yml

@@ -767,7 +767,7 @@ jobs:
           retention-days: 1
 
       - name: Build web parts
-        run: npm run compile-web
+        run: npm run compile-web-test
         if: always()
 
       - name: Run web smoke test

.vscode/launch.json

@@ -44,6 +44,18 @@
                 "order": 1
             }
         },
+        {
+            "name": "Extension (web with daemon compilation)",
+            "type": "pwa-extensionHost",
+            "debugWebWorkerHost": true,
+            "request": "launch",
+            "args": ["--extensionDevelopmentPath=${workspaceFolder}", "--extensionDevelopmentKind=web"],
+            "outFiles": ["${workspaceFolder}/out/**/*", "!${workspaceFolder}/**/node_modules**/*"],
+            "presentation": {
+                "group": "1_extension",
+                "order": 1
+            }
+        },
         {
             "name": "Extension (with daemon compilation)",
             "type": "extensionHost",
@@ -88,6 +100,27 @@
                 "order": 3
             }
         },
+		{
+			"name": "Web Tests",
+			"type": "extensionHost",
+			"debugWebWorkerHost": true,
+			"request": "launch",
+			"args": [
+				"--extensionDevelopmentPath=${workspaceFolder}",
+                "--enable-proposed-api",
+				"--extensionDevelopmentKind=web",
+				"--extensionTestsPath=${workspaceFolder}/out/extension.web.bundle"
+			],
+			"outFiles": [
+				"${workspaceFolder}/out/**/*.*"
+			],
+            "sourceMaps": true,
+            "preLaunchTask": "compile-web-test",
+            "presentation": {
+                "group": "2_tests",
+                "order": 11
+            }
+		},
         {
             // Note, for the smoke test you want to debug, you may need to copy the file,
             // rename it and remove a check for only smoke tests.

.vscode/tasks.json

@@ -40,6 +40,17 @@
             },
             "problemMatcher": ["$ts-webpack-watch"]
         },
+        {
+            "label": "compile-web-test",
+            "type": "npm",
+            "script": "compile-web-test",
+            "isBackground": true,
+            "group": {
+                "kind": "build",
+                "isDefault": true
+            },
+            "problemMatcher": ["$ts-webpack-watch"]
+        },
         {
             "label": "Run Unit Tests",
             "type": "npm",

build/launchWebTest.js

@@ -0,0 +1,19 @@
+// Copyright (c) Microsoft Corporation. All rights reserved.
+// Licensed under the MIT License.
+
+const path = require('path');
+const test_web = require('@vscode/test-web');
+async function go() {
+    try {
+        const extensionDevelopmentPath = path.resolve(__dirname, '../');
+        await test_web.runTests({
+            browserType: 'chromium',
+            extensionDevelopmentPath,
+            extensionTestsPath: path.join(extensionDevelopmentPath, 'out', 'extension.web.bundle')
+        });
+    } catch (err) {
+        console.error('Failed to run tests');
+        process.exit(1);
+    }
+}
+void go();

build/webpack/webpack.extension.web.config.js

@@ -8,16 +8,23 @@ const webpack = require('webpack');
 const constants = require('../constants');
 const CleanTerminalPlugin = require('clean-terminal-webpack-plugin');
 
+const prodEntry = {
+    extension: './src/extension.web.ts',
+    'test/smoke.test/index': './src/test/web/smoke.test/index.ts' // source of the web extension test runner
+};
+const testEntry = {
+    extension: './src/test/web/smoke.test/index.ts' // source of the web extension test runner
+};
+
+// When running web tests, the entry point for the tests and extension are the same.
+const entry = process.env.VSC_TEST_BUNDLE ? testEntry : prodEntry;
+
 // tslint:disable-next-line:no-var-requires no-require-imports
 const configFileName = path.join(constants.ExtensionRootDir, 'tsconfig.extension.web.json');
 const config = {
-    mode: 'none',
+    mode: process.env.VSC_TEST_BUNDLE ? 'development' : 'none',
     target: 'webworker',
-    entry: {
-        extension: './src/extension.web.ts',
-        'test/vscode.test/index': './src/test/web/vscode.test/index.ts', // source of the web extension test runner
-        'test/smoke.test/index': './src/test/web/smoke.test/index.ts' // source of the web extension test runner
-    },
+    entry,
     devtool: 'nosources-source-map', // create a source map that points to the original source file
     node: {
         __dirname: false,

package.json

@@ -2102,6 +2102,8 @@
         "compile-webviews-watch": "webpack --config ./build/webpack/webpack.datascience-ui.config.js --watch",
         "compile-web-watch": "webpack --config ./build/webpack/webpack.extension.web.config.js --stats-error-details --watch",
         "compile-web": "webpack --config ./build/webpack/webpack.extension.web.config.js",
+        "compile-web-test": "cross-env VSC_TEST_BUNDLE=true npm run compile-web",
+        "compile-web-test-watch": "cross-env VSC_TEST_BUNDLE=true npm run compile-web-watch",
         "compile-webviews-watchd": "deemon npm run compile-webviews-watch",
         "compile-widgetTester": "cross-env NODE_OPTIONS=--max_old_space_size=9096 webpack --config ./build/webpack/webpack.datascience-ui-widgetTester.config.js --watch",
         "kill-compile-webviews-watchd": "deemon --kill npm run compile-webviews-watch",
@@ -2125,7 +2127,7 @@
         "testPerformance": "node ./out/test/testBootstrap.node.js ./out/test/performanceTest.js",
         "testSmoke": "node ./out/test/testBootstrap.node.js ./out/test/smokeTest.node.js",
         "testSmokeLogged": "cross-env VSC_JUPYTER_FORCE_LOGGING=true VSC_JUPYTER_LOG_FILE=smoke-test.log node --no-force-async-hooks-checks ./out/test/testBootstrap.node.js ./out/test/smokeTest.node.js",
-        "testSmokeWeb": "node ./out/test/smokeTest.web.js",
+        "testSmokeWeb": "node ./build/launchWebTest.js",
         "lint": "eslint -c .eslintrc.js --ext .ts src",
         "prettier-fix": "prettier 'src/**/*.ts*' --write && prettier 'build/**/*.js' --write",
         "clean": "gulp clean",

src/platform/api.ts

@@ -9,7 +9,6 @@ import { INotebookEditorProvider } from '../notebooks/types';
 import { IDataViewerDataProvider, IDataViewerFactory } from '../webviews/extension-side/dataviewer/types';
 import { IExportedKernelService } from './api/extension';
 import { IExportedKernelServiceFactory, IPythonApiProvider, PythonApi } from './api/types';
-import { IApplicationShell } from './common/application/types';
 import { isTestExecution } from './common/constants';
 import { IExtensionContext } from './common/types';
 import { IServiceContainer, IServiceManager } from './ioc/types';
@@ -102,14 +101,6 @@ export function buildApi(
         /* eslint-disable @typescript-eslint/no-explicit-any */
         (api as any).serviceContainer = serviceContainer;
         (api as any).serviceManager = serviceManager;
-        (api as any).getSymbol = (symbol: String) => {
-            // Needed for web tests. Eval for the extension happens in another web worker so
-            // the symbol objects have different values
-            switch (symbol) {
-                case 'IApplicationShell':
-                    return IApplicationShell;
-            }
-        };
         /* eslint-enable @typescript-eslint/no-explicit-any */
     }
     return api;

src/test/common.ts

@@ -2,12 +2,10 @@
 // Licensed under the MIT License.
 'use strict';
 
-import { interfaces } from 'inversify';
 import { IExtensionApi } from '../platform/api';
 import { IServiceContainer, IServiceManager } from '../platform/ioc/types';
 
 export interface IExtensionTestApi extends IExtensionApi {
     serviceContainer: IServiceContainer;
     serviceManager: IServiceManager;
-    getSymbol<T>(symbolName: string): interfaces.ServiceIdentifier<T> | undefined;
 }

src/test/smokeTest.web.ts

@@ -1,29 +1,64 @@
-// imports mocha for the browser, defining the `mocha` global.
-require('mocha/mocha');
+// Re-export extension entry point, so that the output from this file
+// when bundled can be used as entry point for extension as well as tests.
+// The same objects/types will be used as the module is only ever loaded once by nodejs.
+import * as extension from '../../../extension.web';
+import * as vscode from 'vscode';
+import type { IExtensionApi } from '../../../platform/api';
+import type { IExtensionContext } from '../../../platform/common/types';
+import { IExtensionTestApi } from '../../common';
+import { JVSC_EXTENSION_ID } from '../../../platform/common/constants';
 
-export function run(): Promise<void> {
-    return new Promise((c, e) => {
-        mocha.setup({
-            ui: 'tdd',
-            reporter: undefined
-        });
+let activatedResponse: undefined | IExtensionApi;
 
-        // bundles all files in the current directory matching `*.test`
-        const importAll = (r: __WebpackModuleApi.RequireContext) => r.keys().forEach(r);
-        importAll(require.context('.', true, /\.web.test$/));
+// Basically this is the entry point for the extension.
+export async function activate(context: IExtensionContext): Promise<IExtensionApi> {
+    if (activatedResponse) {
+        return activatedResponse;
+    }
+    vscode.commands.registerCommand('jupyter.web.runTests', async () => {
+        // imports mocha for the browser, defining the `mocha` global.
+        require('mocha/mocha');
 
-        try {
-            // Run the mocha test
-            mocha.run((failures) => {
-                if (failures > 0) {
-                    e(new Error(`${failures} tests failed.`));
-                } else {
-                    c();
-                }
+        return new Promise<void>((resolve, reject) => {
+            mocha.setup({
+                ui: 'tdd',
+                reporter: undefined
             });
-        } catch (err) {
-            console.error(err);
-            e(err);
-        }
+
+            // bundles all files in the current directory matching `*.test`
+            const importAll = (r: __WebpackModuleApi.RequireContext) => r.keys().forEach(r);
+            importAll(require.context('.', true, /\.web.test$/));
+
+            try {
+                // Run the mocha test
+                mocha.run((failures) => {
+                    if (failures > 0) {
+                        reject(new Error(`${failures} tests failed.`));
+                    } else {
+                        resolve();
+                    }
+                });
+            } catch (err) {
+                console.error(err);
+                reject(err);
+            }
+        });
     });
+    activatedResponse = await extension.activate(context);
+    return activatedResponse;
+}
+
+export async function deactivate(): Promise<void> {
+    return extension.deactivate();
+}
+
+export async function run(): Promise<void> {
+    // Activate the extension so that the commands are registered.
+    // Also this will not slow down the suite-setups.
+    const extension = vscode.extensions.getExtension<IExtensionTestApi>(JVSC_EXTENSION_ID)!;
+    const api = await extension.activate();
+    await api.ready;
+    // Run the tests from within the context of the extension bundle.
+    // We achieve this by getting the extension to run the tests (then its guaranteed to use the same context as the extension).
+    await vscode.commands.executeCommand('jupyter.web.runTests');
 }

src/test/web/smoke.test/index.ts

@@ -18,9 +18,7 @@ suite('Web Extension Smoke Test Suite', () => {
     });
 
     test('Verify containers', () => {
-        const appShellSymbol = extensionApi.getSymbol<IApplicationShell>('IApplicationShell');
-        assert.ok(appShellSymbol, `Cannot get the symbol for IApplicationShell`);
-        const appShell = extensionApi.serviceManager?.get<IApplicationShell>(appShellSymbol!);
+        const appShell = extensionApi.serviceManager?.get<IApplicationShell>(IApplicationShell);
         assert.ok(appShell, 'Dependency Injection container not initialized in web context');
     });
 });

src/test/web/smoke.test/smoke.web.test.ts

@@ -3,8 +3,7 @@
     "compilerOptions": {
         "paths": {
             "*": ["types/*"]
-        },
-        "types": ["@types/vscode-notebook-renderer/preload", "webpack-env"]
+        }
     },
     "exclude": [
         "node_modules",

src/test/web/vscode.test/extension.web.test.ts

@@ -22,7 +22,7 @@
         "resolveJsonModule": true,
         "removeComments": true,
         "useUnknownInCatchVariables": false,
-        "types": ["@types/vscode-notebook-renderer/preload"]
+        "types": ["@types/vscode-notebook-renderer/preload", "webpack-env"]
     },
     "exclude": [
         "node_modules",
@@ -35,7 +35,6 @@
         "src/ipywidgets",
         "src/smoke",
         "src/test/datascience/extensionapi",
-        "src/test/web",
         "build",
         "out",
         "ipywidgets",