Make ms-vscode.live-server an optional dependency (#480)

Resolves #392

Co-authored-by: Ryan Luker <[email protected]>

Author: Gerrit0

QUICKSTART/QUICKSTART.md

@@ -65,7 +65,7 @@ You need two extensions to get started.  Installation via CLI or Quick Open work
 </details>
 
 <details>
-<summary>Live Preview - ms-vscode.live-server</summary>
+<summary>Optional - Live Preview - ms-vscode.live-server</summary>
 
 -----
 
@@ -104,7 +104,7 @@ After the extensions are installed, you need to get your coverage files.
      * `coverage.xml`
      * `jacoco.xml`
      * `coverage.cobertura.xml`
-  
+
   2. Customizable file name.  You may use any filename you like, but the file must be a Clover, Cobertura, Jacoco, or LCov format file.
 
   3. Generating a coverage file is language specific.
@@ -155,9 +155,9 @@ After the extensions are installed, you need to get your coverage files.
 
 -----
 
-  * Directory where the **coverage file** is located.  
+* Directory where the **coverage file** is located.
 
-* Default is "`**`" which is the entire workspace.  
+* Default is "`**`" which is the entire workspace.
 
 * To prevent searching through the entire workspace, you can limit **coverage gutters* to a specific folder.
 

README.md

@@ -55,7 +55,7 @@ See [examples directory](example) on how to setup a project.
 ## Requirements
 - vscode 1.27.0 and up
 - macos, linux or windows
-- Requires Live Preview extension
+- Optional: Live Preview extension
   - vscode extension id: ms-vscode.live-server
   - v0.2.12 or higher
 

package.json

@@ -294,8 +294,5 @@
     "lcov-parse": "1.0.0",
     "tslib": "2.4.0",
     "uuid": "8.3.2"
-  },
-  "extensionDependencies": [
-    "ms-vscode.live-server"
-  ]
+  }
 }

src/extension/gutters.ts

@@ -1,10 +1,11 @@
-import { commands, extensions } from "vscode";
-import { OutputChannel, window } from "vscode";
+import { commands, extensions, window, OutputChannel } from "vscode";
 import { Coverage } from "../coverage-system/coverage";
 import { CoverageService } from "../coverage-system/coverageservice";
 import { Config } from "./config";
 import { StatusBarToggler } from "./statusbartoggler";
 
+export const PREVIEW_COMMAND = "livePreview.start.internalPreview.atFile";
+
 export class Gutters {
     private coverage: Coverage;
     private outputChannel: OutputChannel;
@@ -29,6 +30,15 @@ export class Gutters {
 
     public async previewCoverageReport() {
         try {
+            const livePreview = this.getLiveServerExtension();
+            if (!livePreview) {
+                await window.showErrorMessage("Live Preview extension not installed", {
+                    modal: true,
+                    detail: "The ms-vscode.live-server extension must be installed to preview the coverage report."
+                }, "Ok");
+                return;
+            }
+
             const coverageReports = await this.coverage.findReports();
             const pickedReport = await this.coverage.pickFile(
                 coverageReports,
@@ -39,27 +49,18 @@ export class Gutters {
                 return;
             }
 
+            // is the ext loaded and ready?
+            if (livePreview.isActive === false) {
+                await livePreview.activate();
+            }
+
             // TODO:  Figure out how to convert pickedReport to a workspace relative filename.
             // Right now the livePreview.start.internalPreview.atFile is called with "false" as
             // the second parameter.  This means that the file specified has an absolute path.
             // See the Live Preview extension source code:
             // https://github.com/microsoft/vscode-livepreview/blob/
             // 3be1e2eb5c8a7b51aa4a88275ad73bb4d923432b/src/extension.ts#L169
-            const livePreview = extensions.getExtension("ms-vscode.live-server");
-            // is the ext loaded and ready?
-            if (livePreview?.isActive === false) {
-                livePreview.activate().then(
-                    function() {
-                        console.log("Extension activated");
-                        commands.executeCommand("livePreview.start.internalPreview.atFile", pickedReport, false);
-                    },
-                    function() {
-                        console.log("Extension activation failed");
-                    },
-                );
-            } else {
-                commands.executeCommand("livePreview.start.internalPreview.atFile", pickedReport, false);
-            }
+            await commands.executeCommand(PREVIEW_COMMAND, pickedReport, false);
 
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         } catch (error: any) {
@@ -125,6 +126,10 @@ export class Gutters {
         }
     }
 
+    getLiveServerExtension() {
+        return extensions.getExtension("ms-vscode.live-server");
+    }
+
     private handleError(area: string, error: Error) {
         const message = error.message ? error.message : error;
         const stackTrace = error.stack;

test/extension.test.ts

@@ -1,26 +1,69 @@
 import { expect } from "chai";
 import { exec } from "child_process";
 import sinon from "sinon";
-import { after } from "mocha";
+import { after, afterEach } from "mocha";
 import * as vscode from "vscode";
 import { ICoverageLines, Renderer } from "../src/coverage-system/renderer";
 import { StatusBarToggler } from "../src/extension/statusbartoggler";
+import { Gutters, PREVIEW_COMMAND } from "../src/extension/gutters";
 
 suite("Extension Tests", function () {
+    const disposables: vscode.Disposable[] = [];
+
+    afterEach(() => {
+        // Clear mocks after each test to avoid cascading failures due to one test failing
+        sinon.restore();
+
+        // Also clear any disposables
+        disposables.forEach(d => d.dispose());
+        disposables.length = 0;
+    });
+
     after(() => {
         vscode.window.showInformationMessage('All tests done!');
     });
 
-    test("Preview the coverage report in a new webview tab @integration", async () => {
+    test("Preview the coverage report without live server extension @integration", async function() {
+        const getLiveServerStub = sinon.stub(Gutters.prototype, "getLiveServerExtension");
+        getLiveServerStub.returns(undefined);
+
+        const toastStub = sinon.stub(vscode.window, "showErrorMessage");
+
+        await vscode.commands.executeCommand("coverage-gutters.previewCoverageReport");
+
+        expect(toastStub.callCount).to.equal(1);
+        const call = toastStub.getCall(0);
+        expect(call.args[0]).to.equal("Live Preview extension not installed");
+    });
+
+    test("Preview the coverage report with live server installed but inactive @integration", async function() {
+        const getLiveServerStub = sinon.stub(Gutters.prototype, "getLiveServerExtension");
+        const liveServer = { isActive: false, activate: () => { liveServer.isActive = true; } };
+        getLiveServerStub.returns(liveServer as never);
+
+        const doPreviewStub = sinon.stub();
+        disposables.push(vscode.commands.registerCommand(PREVIEW_COMMAND, doPreviewStub));
+
+        // Note: depends on "coverage-gutters.coverageReportFileName": "index.html",
+        // being set in the example.code-workspace setting file as the coverage report
+        // is in the root of the node folder and not inside the default /coverage
+        await vscode.commands.executeCommand("coverage-gutters.previewCoverageReport");
+        expect(liveServer.isActive).to.equal(true);
+        expect(doPreviewStub.callCount).to.equal(1);
+    });
+
+    test("Preview the coverage report with live server @integration", async function() {
+        const getLiveServerStub = sinon.stub(Gutters.prototype, "getLiveServerExtension");
+        getLiveServerStub.returns({ isActive: true } as never);
+
+        const doPreviewStub = sinon.stub();
+        disposables.push(vscode.commands.registerCommand(PREVIEW_COMMAND, doPreviewStub));
+
         // Note: depends on "coverage-gutters.coverageReportFileName": "index.html",
         // being set in the example.code-workspace setting file as the coverage report
         // is in the root of the node folder and not inside the default /coverage
         await vscode.commands.executeCommand("coverage-gutters.previewCoverageReport");
-        // Look to see if the webview is open and showing preview coverage
-        await checkCoverage(() => {
-            const livePreview = vscode.extensions.getExtension("ms-vscode.live-server");
-            expect(livePreview?.isActive).to.equal(true);
-        });
+        expect(doPreviewStub.callCount).to.equal(1);
     });
 
     test("Run display coverage on a test file that has coverages generated remotely @integration", async () => {

test/runTest.ts

@@ -1,48 +1,23 @@
-import * as cp from "child_process";
 import * as path from "path";
-import {
-    downloadAndUnzipVSCode,
-    resolveCliArgsFromVSCodeExecutablePath,
-    runTests,
-} from "@vscode/test-electron";
+import { runTests } from "@vscode/test-electron";
 
 async function main() {
     try {
         const extensionDevelopmentPath = path.resolve(__dirname, "../../out");
         const extensionTestsPath = path.resolve(__dirname, "index");
 
-        // Add the dependent extension for test coverage preview functionality
-        const vscodeExecutablePath = await downloadAndUnzipVSCode("insiders");
-        const [cliPath, ...args] = resolveCliArgsFromVSCodeExecutablePath(vscodeExecutablePath);
-
-        // Use cp.spawn / cp.exec for custom setup
-        // Note: shell true is needed to fix an issue with install-extension (on windows)
-        // https://github.com/microsoft/vscode-test/issues/266#issuecomment-2085723194
-        const output = cp.spawnSync(
-            cliPath,
-            [...args, "--install-extension", "ms-vscode.live-server"],
-            {
-                shell: process.platform === 'win32',
-                encoding: 'utf-8',
-                stdio: 'inherit'
-            },
-        );
-
-        // Useful for debugging failing dependant extension installs
-        console.info(output);
-
-        // Default test options for gutters testing
         await runTests({
-            vscodeExecutablePath,
+            version: "insiders",
             extensionDevelopmentPath,
             extensionTestsPath,
             launchArgs: ["example/example.code-workspace"],
-        });
+        })
 
         console.info("Success!");
         process.exit(0);
     } catch (err) {
         console.error("Failed to run tests");
+        console.error(err);
         process.exit(1);
     }
 }

tsconfig.json

@@ -7,7 +7,7 @@
         "alwaysStrict": true,
         "importHelpers": true,
         "forceConsistentCasingInFileNames": true,
-		"esModuleInterop": true,
+        "esModuleInterop": true,
         "lib": [
             "es6",
             "dom",