Support for Angular in Electron env

[mnumanuyar]

Is Your Feature Request related to a Problem? Please Describe

-Does this support Angular in Electron Env? I am not sure if this already exist, but atleast it is not well documented (I think).

To clarify to use karma with electron I have to use karma-electron and also added require("karma-electron") to the plugins of karma.conf.js. This seems very standart to me but I am not familiar, so i might be wrong.

[lucono]

I'm not familiar with karma-electron and I'd suggest testing it out to see if it works. Karma Test Explorer uses chrome-launcher internally, but does apply whatever plugins are present in the karma config file.

[mnumanuyar]

Then probably no, I failed to use this, and also it requires Electron as browser

[lucono]

Chrome launcher is simply the default, but the extension does support any arbitrary browser through the karmaTestExplorer.customLauncher and karmaTestExplorer.browser extension settings. It is very likely that either of those will provide the support you need. Simply use either one (your choice) to specify the Electron browser instead, which will override the default chrome-launcher.

More information in the documentation here.

[mnumanuyar]

I tried "karmaTestExplorer.browser": "Electron", but it fails. I also tried custom browser but did not succed.

fyi my logs and karma.conf.js is as below.

log

[2022-09-26 05:48:01.138] [INFO] [DefaultTestManager]: Using requested --> available karma port: 9976 --> 9976
[2022-09-26 05:48:01.163] [INFO] [DefaultTestManager]: Using requested --> available karma listener socket port: 9999 --> 9999
[2022-09-26 05:48:01.169] [INFO] [KarmaTestServer]: Starting karma server
[2022-09-26 05:48:01.253] [INFO] [KarmaTestListener]: Waiting for Karma to connect on port 9999
[2022-09-26 05:48:12.856] [INFO] [KarmaTestListener]: Established new connection with Karma on port 9999
[2022-09-26 05:48:13.481] [ERROR] [KarmaTestRunProcessor]: Failure while listening for test events: Browser Failure - cannot start
[2022-09-26 05:48:13.484] [ERROR] [DefaultTestManager]: System component terminated with message: Karma server failed to connect: Browser Failure - cannot start
[2022-09-26 05:48:13.484] [ERROR] [DefaultTestManager]: Error: Karma server failed to connect: Browser Failure - cannot start
[2022-09-26 05:48:13.484] [ERROR] [KarmaTestExplorer]: Failed to load tests - Karma server failed to connect: Browser Failure - cannot start
[2022-09-26 05:48:13.485] [INFO] [KarmaTestExplorer]: Finished loading tests in 12.38 secs (Failed)
[2022-09-26 05:48:13.488] [INFO] [KarmaTestServer]: Killing Karma server on port 9976

karma.conf.js

// Karma configuration file, see link for more information
// https://karma-runner.github.io/1.0/config/configuration-file.html

module.exports = function (config) {
    config.set({
        basePath: "",
        frameworks: ["jasmine", "@angular-devkit/build-angular"],
        plugins: [
            require("karma-jasmine"),
            require("karma-chrome-launcher"),
            require("karma-jasmine-html-reporter"),
            require("karma-coverage"),
            require("@angular-devkit/build-angular/plugins/karma"),
            require("karma-electron"),
        ],
        client: {
            jasmine: {
                // you can add configuration options for Jasmine here
                // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
                // for example, you can disable the random execution with `random: false`
                // or set a specific seed with `seed: 4321`
            },
            clearContext: false, // leave Jasmine Spec Runner output visible in browser
        },
        jasmineHtmlReporter: {
            suppressAll: true, // removes the duplicated traces
        },
        coverageReporter: {
            dir: require("path").join(__dirname, "./coverage/deli-ground-control-software-electron"),
            subdir: ".",
            reporters: [{ type: "html" }, { type: "text-summary" }],
        },
        reporters: ["progress", "kjhtml"],
        port: 9876,
        colors: true,
        logLevel: config.LOG_INFO,
        autoWatch: true,
        browsers: ["Electron"],
        singleRun: false,
        restartOnFileChange: true,
    });
};

[lucono]

@mnumanuyar

• Does your Karma setup work on its own without the Karma Test Explorer extension?
• Could you share your full Karma Test Explorer extension settings
• Also post the log output from the Karma Server output channel of the extension

[mnumanuyar]

• yes it works, (i.e. when I run ng test it shows karma is connected, which tests failed etc)
• in my Code\User\settings.json i only have "karmaTestExplorer.browser": "Electron", that starts with karmaTestExplorer. I am not sure this is what you wanted.
• I couldnt find how to "log output from the Karma Server output channel of the extension". this issue says it is not possible, but i am not sure. can you describe how?

[lucono]

Switch to the Output panel and expand the drop down on the right side of it, where you should see an item that starts with Karma Server. Select it and the Karma Logs will be displayed (example screenshot below). Your earlier log snippet suggests that the error should be captured in that log.

[lucono]

@mnumanuyar were you able to figure this out, or still need help?

[BTMorton]

This got really long, so TL;DR: The ELECTRON_RUN_AS_NODE environment variable which I assume is being set by vscode breaks the karma-electron plugin. Could we remove it when spawning karma?

---

I'm having this same issue, with Angular v13, Electron v19, and Karma-electron v7.

I get the following error thrown in the Karma Server log:

TypeError: Cannot read properties of undefined (reading 'on')
    at Object.<anonymous> (<path_to_node_modules>\karma-electron\lib\electron-launcher.js:38:5)
    at Module._compile (node:internal/modules/cjs/loader:1118:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1173:10)
    at Module.load (node:internal/modules/cjs/loader:988:32)
    at Module._load (node:internal/modules/cjs/loader:829:12)
    at c._load (node:electron/js2c/asar_bundle:5:13343)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:77:12)
    at node:internal/main/run_main_module:17:47

Doing some further digging, what appears to be happening is that the electron import doesn't return the expected electron module, but instead gives just the path. I added the following to electron-launcher.js in the karma-electron plugin:

var electron = require('electron');
console.log(electron, electron.app, electron.BrowserWindow, electron.remote);

which resulted in the following log message:

05 04 2023 13:04:38.998:ERROR [launcher]: Electron stdout: <path_to_node_modules>\electron\dist\electron.exe undefined undefined undefined

Some further digging suggested that this is caused by attempting to import electron from a non-electron environment, e.g. when running in regular node. I turned up the logging and can see the correct electron command is being run:

<path_to_node_modules>\electron\dist\electron.exe <path_to_node_modules>\karma-electron\lib/electron-launcher.js --headless --disable-gpu --disable-dev-shm-usage --remote-debugging-port=9222 --user-data-dir %Temp%\karma-97877604 --encoded-url http%3A%2F%2Flocalhost%3A9976%2F%3Fid%3D97877604 --extended-options %Temp%\karma-97877604\karma-electron-options.json

More digging turned up that the environment variable ELECTRON_RUN_AS_NODE is being set somewhere in the call stack, causing this electron instance to think it should be running as a node instance. I can't figure out how to disable/remove this environment variable using any of the existing configuration, and setting it to false/0/"" doesn't seem to work either.

The Karma test runner doesn't do any modification of the environment when it spawns the browser so I don't see a way to resolve that there. The simplest solution I can think of is to remove that env var when spawning browser processes. I added a delete to the compiled extension and that seems to have resolved the issue. I don't know if there's a way to prevent vscode from setting it in the first place.

If it is something that needs to be done at the extension level, I've come up with three ideas for integration:

1. Add an electronMode config, similar to the containerMode that removes the env var
2. Auto-detect the Electron browser/launcher being used and remove the env var
3. Always remove the env var when spawing karma

I'm open to any other suggestions. Hopefully there's enough detail there to guide you towards a repro if need be. I'm happy to create a PR with whatever fix.

With my temp fix in place, everything else seems to be working as expected 👍

[lucono]

@BTMorton Try using the karmaTestExplorer.env extension option to override ELECTRON_RUN_AS_NODE to the appropriate false value. That will override the value when the extension spawns Karma, which should propagate to the browser process when Karma subsequently spawns it. You can find more details in the docs here.

[BTMorton]

I did try that, with 0, false, and "". None of them worked. As far as I can tell, there is no false value for the ELECTRON_RUN_AS_NODE environment variable, it's just a presence check. There's no mention in the electron docs about how to disable it either. A similar issue was already flagged in the vscode repo about the env var polluting wsl prompts: microsoft/vscode#113687. It seems like it's quite a common issue, judging by the comment here: microsoft/vscode#137510

[lucono]

If it is something that needs to be done at the extension level, I've come up with three ideas for integration:

1. Add an electronMode config, similar to the containerMode that removes the env var
2. Auto-detect the Electron browser/launcher being used and remove the env var
3. Always remove the env var when spawing karma

Or add a way to exclude specific environment variables from the environment, which I think should address this. I will plan that for the next release.

[lucono]

@BTMorton try the updated .visx (or build it yourself) from the beta branch which adds a karmaTestExplorer.envExclude config option to remove specific variables from the test environment. It should appear as v0.8.2 in the VS Code extensions tab.

You'll also need to add the new config setting:

"karmaTestExplorer.envExclude": [ "ELECTRON_RUN_AS_NODE" ]

[BTMorton]

That appears to have done the trick! Thanks a lot :D

[lucono]

Released in v0.8.2.