Tests never show up in Test Explorer, stuck at spinning 'reloading tests'

[jonstelly]

Describe the bug
Test Explorer never shows the list of tests. The Test Explorer toolbar shows the spinner spinning with 'reloading tests' status.

To Reproduce
This happens on my real project: Angular 8 (upgraded from 7), CLI based, angular app and single component library project using ng-packagr) but it also happens on a brand new project generated with angular cli (8.2).

This is on Ubuntu 19.04 and I'm running VS Code and Chromium via snap. From the command-line, running ng test works as expected, 3 tests from default cli project pass.

On the test project, the only change I made from the output of ng new (yes to routing, scss for styles) was to modify karma.conf.js to use Chromium instead of Chrome: browsers: ['Chromium'],

Logs

Test Explorer Log

[10:02:05 AM] INFO: Starting Angular test enviroment for project: ngt
[10:02:05 AM] INFO: Listening to AngularReporter events on port 9999
[10:02:09 AM] INFO: AngularReporter closed connection with event: transport error

lsof -i :9999

COMMAND   PID USER   FD   TYPE  DEVICE SIZE/OFF NODE NAME
code    40551  me  140u  IPv6 4426147      0t0  TCP *:9999 (LISTEN)

VS Code Developer Tools

[Extension Host] [10:02:09 AM] INFO: AngularReporter closed connection with event: transport error console.ts:134
[Extension Host] Error: Unexpected SIGPIPE	at process.on (/snap/code/11/usr/share/code/resources/app/out/bootstrap.js:5:192)	at process.emit (events.js:182:13)
t.log @ console.ts:134
$logExtensionHostMessage @ mainThreadConsole.ts:38
_doInvokeHandler @ rpcProtocol.ts:394
_invokeHandler @ rpcProtocol.ts:379
_receiveRequest @ rpcProtocol.ts:299
_receiveOneMessage @ rpcProtocol.ts:226
_protocol.onMessage.e @ rpcProtocol.ts:101
fire @ event.ts:558
a @ ipc.net.ts:421
e @ ipc.net.ts:428
fire @ event.ts:558
_receiveMessage @ ipc.net.ts:715
S._socketDisposables.push._socketReader.onMessage.e @ ipc.net.ts:578
fire @ event.ts:558
acceptChunk @ ipc.net.ts:236
_register._socket.onData.e @ ipc.net.ts:197
t @ ipc.net.ts:28
emit @ events.js:182
addChunk @ _stream_readable.js:283
readableAddChunk @ _stream_readable.js:264
Readable.push @ _stream_readable.js:219
onStreamRead @ internal/stream_base_commons.js:94

Desktop (please complete the following information):

• OS: ubuntu 19.04
• Angular Version 8.2.0
• Node version 12.7.0
• karma.conf.js path from the root folder you're opening in vscode: /home/me/code/junk/ngt/karma.conf.js

Additional context
One other oddness, in my real project, if I try to switch to the component library, the extension throws an error in the VS Code Dev Tools, complaining that port 9999 is in use. As though the extension doesn't know that it already started a listener on 9999 for my main angular app. Maybe this info helps narrow down when the error is occurring?

[jonstelly]

I noticed this code in the extension:

    config.browsers = ["ChromeTestExplorer"];
    config.browserNoActivityTimeout = undefined;
    config.singleRun = false;
    config.customLaunchers = {
      ChromeTestExplorer: {
        base: "ChromeHeadless",
        debug: true,
        flags: ["--remote-debugging-port=9222"],
      },
    };

If I try change my karma.conf.js from 'Chromium' to 'ChromeHeadless' then ng test gives the error saying it can't find chrome. If I set it to ChromiumHeadless instead then ng test succeeds. Or if I set CHROME_BIN to point to chromium, ng test also succeeds.

So I cloned this repository and edited the code to use ChromiumHeadless, or to launch VS Code with the CHROME_BIN environment variable set but that also failed with the same error, quick transport error a few seconds after connecting.

[Raagh]

Hi Jon, first of all thank you for downloading the extension and reporting this bug.

To be honest I have not tested this on linux or using chromium. And indeed the code expects that you re using Chrome and you have Chrome installed instead of Chromium.
But still if you are debugging the code from the cloned repository and you changed the value to ChromiumHeadless that should be enough to make it work.

When I get home today I am gonna give it a try with Chromium to see what I can find. Hopefully I can replicate your issue on windows or mac os and fix it right away. If not It's gonna take me awhile to setup an environment just like yours to give the bug a hard try but I will do my best to fix it.

If you find anything new while debugging the project please let me know.

again, thank you for reporting this

[Raagh]

I tried chromium on my mac and indeed everything works okey(after changing the code to use ChromiumHeadless of course). what happens if you install chrome?

the most strange thing is this.

const isKarmaBeingClosedByChrome = event === ErrorCodes.TransportClose && !this.karmaBeingReloaded; const isKarmaBeingClosedOnReloadingByTestExplorer = event === ErrorCodes.ForcedClose && this.karmaBeingReloaded;

      // workaround: if the connection is closed by chrome, we just reload the test enviroment
      // TODO: fix chrome closing all socket connections.
      if (isKarmaBeingClosedByChrome || isKarmaBeingClosedOnReloadingByTestExplorer) {
        commands.executeCommand("test-explorer.reload");
      }`

so as you can see there is bug in karma that sometimes it closes socket connection but I made some hacky workaround that if transport close happens then we reload the tests..

your test explorer is not even doing that, could you put a breakpoint there?

[gshock]

hi, i am also trying to use this extension (it sounds great!) but my Test tab is also stuck spinning reloading tests.

Is there any thing that I can send you to troubleshoot it? Thanks!

[Raagh]

Hey @gshock Gerardo, yes for sure. If you are available now join here https://gitter.im/Angular-Karma-Test-Explorer/Bugs and we can workout this problem together. Every scenario is different due to different setups so it's better to create a separate bug for it and follow all the questions that the bug report has.

[jonstelly]

My case seems to have been caused by node being installed via a snap. I'll admit I haven't 100% validated that, since when I uninstalled node via snap I was using node 12.7.0 but I installed node 10.16.0 through the normal install scripts. So it's possible it was the node version as the problem but I'm pretty confident that it was snap... I've had a host of other problems related to snap and sandboxing from docker to powershell, etc...

Looks like I'll be moving away from snap in general, the idea is great but apps still seem have tons of problems

[Raagh]

Hey Jon, very happy you solve it. I am gonna take note of that for the next guy that encounters a problem on Ubuntu.

Also now I have the virtual machine to try out myself so thank you very much for that. It's nice to read this when I wake up, I went to bed yesterday thinking about this bug ahaha.

Again, very happy for you and thank you for the support.

[Raagh]

@gshock please create a bug with your specific scenario and we can solve it there.

[gshock]

Hi @Raagh, i came in this morning and the tests loaded. i didn't need to update the extension. i have rebooted since yesterday (maybe that helped). this looks great. thank you

[Raagh]

@gshock no hay porque Gerardo, me alegro que te funcione. Saludos

[gshock]

Es una buena herramienta cual prevéo que me ayudará a mejores tests y mejor code 👍
Buena suerte!