Wallaby UI elements not showing up in VSCode (e.g. code coverage indicators, footer test icon, etc.)

[cdavis1324]

Issue description or question

Wallaby UI elements are not showing up in VSCode (e.g. code coverage indicators, footer test icon, etc.). I can see in the VScode wallaby output that the tests are in fact running, but I just see no indication that they are in the vscode IDE.

I can also successfully navigate to the test overview page to verify that the tests are running as well.

Wallaby.js configuration file

module.exports = function wallabyConfig(wallaby) {
  return {
    files: [
      'lib/use-extender/*.js',
      'modules/**/*.js',
      'plugins/**/*.js'
    ],

    tests: [
      'test/lib/*test.js'
    ],
    env: {
      type: 'node'
    }
  };
};

Code editor or IDE name and version

Visual Studio Code v1.10.2 (1.10.2)

OS name and version

OSX 10.12.3

[ArtemGovorov]

Could you please:

• try running this sample project to see if the issue is specific to your project or not,
• check VS Code DevTools output to see if there're any errors there (Help - Toggle Developer Tools or via the command palette),
• list other extensions that you have installed in VS Code.

[cdavis1324]

Hi Artem,

I've verified that:

• the issue also occurs in the sample project

• that there are no errors in the vscode dev tools

Here is a list of the current VSCode Extensions I have installed:

• Atom One Dark Syntax Theme
• Atom One Dark Theme
• Babel ES6/ES7
• C/C++
• C#
• CSS Modules
• Debugger For Chrome
• Document This
• Dracula Official
• ES6 Mocha Snippets
• ESLint
• Flatland Monokai Theme
• HTML CSS Class Completion
• HTML Snippets
• HTMLHint
• Javascript (ES6) Code Snippets
• JS Refactorings
• jshint
• jsx
• jsx snippets
• Material Theme
• Python
• Quokka.js
• React Redux Es6 Snippets
• Reactjs code snippets
• Tesla Syntax Theme
• Tomorrow and Tomorrow Night Theme
• WakaTime
• Wallaby.js

I've started to systemically disable some of these in order to identify whether any of them are causing the problem.

[ArtemGovorov]

Could you please try downloading the insiders build, installing wallaby and trying to run it? If you don't have it installed, there'll be no extensions there, so may be a good isolated test.

[ArtemGovorov]

footer test icon

Also, what do you mean by the footer test icon? I thought you mean the status bar indicator, but it looks like it's there from your screenshot:

[cdavis1324]

Hey Artem,

My mistake on the footer. I was used to seeing it on the other side (it's been a while since I've used Wallaby in a project). So, it seems that the issue is just that the code coverage indicators aren't showing.

Everything works with the installer build. So, it seems that the issue exists with one of the extensions I have installed. I'll try uninstalling what I have in order to isolate what the offending Extension is.

Thanks for your help!

[cdavis1324]

So, I've just uninstalled every extension I have except for Wallaby and Quokka and the issue still remains :(

Do you have any other suggestions that I should try?

Thanks

[ArtemGovorov]

Interesting, I have installed all of the extensions and can't reproduce the issue (same OS). Perhaps it's some extension setting, or general settings that are different. Try pasting your settings.json to the insiders build to see if it breaks wallaby there. Also try uninstalling Quokka.js.

[cdavis1324]

I fixed it!

I copied over the default settings.json user settings file from the insiders build and that did the trick.

So, it seems I had a bad setting in my settings.json file which was causing the problem. I'm going to do a bit more digging and try to find out what the exact setting that was causing the issue is.

Thanks again for all your help.

[ArtemGovorov]

@Wallysburg Awesome, thanks for the update! It'd be really great if you could find the setting - I'd document it so that other users could avoid hitting the same issue.

[cdavis1324]

@ArtemGovorov

Here's the problematic setting: "editor.glyphMargin": false

When "editor.glyphMargin": true it works fine.

Give the name of this setting, this feels obvious in hindsight. However, I don't remember ever explicitly setting this property to false, so perhaps it was set during a vscode update or something? Anyway, hopefully this information will be beneficial to anyone else that experiences this issue in the future.

Thanks again.

[ArtemGovorov]

Awesome, thanks a lot! I was planning to mention it in our docs, but have a better idea - we'll read the setting from the extension and if the setting's value is set to false, then wallaby will notify the user about the implications.

[michael-letcher]

2111 solution is here for anyone who maybe having this issue now.