Gutter icons in VS Code are displayed in the wrong line

[kevinkasper]

Please provide the environment you discovered this bug in.

Clone minimal reproducible example:

https://github.com/kevinkasper/vitest-vscode-gutter-icons-mre

1. yarn install
2. Open src/app/app.component.spec.ts file
3. Run all tests within the Test Explorer

Which area/package is the issue in?

vite-plugin-angular

Description

The gutter icons in VS Code are displayed in the wrong line if the @analogjs/vite-plugin-angular plugin is used.

Below is an example with activated plugin in the vite.config.ts and empty lines in the spec file:

Below is an example without activated plugin in the vite.config.ts and empty lines in the spec file:

In the second screenshot, the tests fail, but the gutter icons are in the right place.

---

This problem has already been reported in the vitest-dev/vscode repository. In the following issue it was confirmed that it is a problem with @analogjs/vite-plugin-angular:

vitest-dev/vscode#400

Many thanks in advance!

Please provide the exception or error you saw

No response

Other information

No response

I would be willing to submit a PR to fix this issue

• Yes
• No

[Kendox-STA]

Same issue here, which prevents us from evaluating Vitest. Would be great to get that resolved.

[rafagsiqueira]

Here too. The gutter icons move all over the place when adding comments to tests. Was this fix released? Just tried to use the most recent beta versions and I still get the error.

[rafagsiqueira]

@brandonroberts has this fix made it to one of the releases?

[rafagsiqueira]

Any news on this? It really sends both our breakpoints and our gutter icons all over the place. Makes it nearly impossible to use the vitest extension in vscode nor debugging tests on the IDE.

[brandonroberts]

Still looking into this one. The sourcemaps are fine when served in the browser, so trying to see what the difference is when using Vitest

[rafagsiqueira]

@brandonroberts thank you very much! Forgive my ignorance, but what exactly does the vite-plugin-angular do?

[brandonroberts]

@rafagsiqueira no problem. The plugin does the Angular compilation step so your external styles, templates, and constructor DI works during testing.

If you use all inline styles and templates, and the inject function for DI, then you don't need the plugin. I have found this to be rare though.

[brandonroberts]

Sourcemaps fix for VSCode/IDEs has landed in the 1.9.0-beta.12 release. I've done some testing but please validate the fix on your end also