Gutter icons are displayed in the wrong line when @analogjs/vite-plugin-angular is used

kevinkasper commented 1 month ago

Describe the bug

The Gutter icons are displayed in the wrong line if the @analogjs/vite-plugin-angular 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.

Am I in the right place with this issue in this repository or should I create the issue in @analogjs/vite-plugin-angular?

Many thanks in advance!

Reproduction

Clone minimal reproducible example:

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

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

Output

[INFO 20:45:07] [v0.10.7] Vitest extension is activated because Vitest is installed or there is a Vite/Vitest config file in the workspace.
[INFO 20:45:08] [API] Running Vitest: v1.6.0 (vite.config.ts)
[INFO 20:45:08] [API] Starting Vitest process with Node.js: /Users/kevin/.nvm/versions/node/v20.11.0/bin/node
[INFO 20:45:09] [API] Vitest process 10339 created
[INFO 20:45:09] [API] Collecting tests: src/app/app.component.spec.ts

Version

0.10.7

Validations

[X] Check that you are using the latest version of the extension
[X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
[X] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
[X] The provided reproduction is a minimal reproducible example of the bug.

sheremet-va commented 1 month ago

Source maps in the angular plugin are incorrect, this is an issue with a plugin. Does Vitest CLI also show incorrect lines if the error is thrown?

kevinkasper commented 1 month ago

If an error is thrown, the statement in the beforeEach block is correctly referenced in the vitest CLI output:

❯ yarn vitest --run
yarn run v1.22.19
$ /Users/kevin/dev/kevin-kasper/angular-vite-test/node_modules/.bin/vitest --run

 RUN  v1.6.0 /Users/kevin/dev/kevin-kasper/angular-vite-test

 ❯ src/app/app.component.spec.ts (3)
   ❯ AppComponent (3)
     × should create the app
       ⠹ [ beforeEach ]
     × should have the 'angular-vite-test' title
       ⠹ [ beforeEach ]
     × should render title
       ⠹ [ beforeEach ]

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Failed Tests 3 ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

 FAIL  src/app/app.component.spec.ts > AppComponent > should create the app
 FAIL  src/app/app.component.spec.ts > AppComponent > should have the 'angular-vite-test' title
 FAIL  src/app/app.component.spec.ts > AppComponent > should render title
Error: Component 'AppComponent' is not resolved:
 - templateUrl: ./app.component.html
 - styleUrl: ./app.component.scss
Did you run and wait for 'resolveComponentResources()'?
 ❯ Function.get ../../packages/core/src/render3/jit/directive.ts:89:17
 ❯ getComponentDef ../../packages/core/testing/src/test_bed_compiler.ts:970:25
 ❯ isStandaloneComponent ../../packages/core/testing/src/test_bed_compiler.ts:963:15
 ❯ queueTypesFromModulesArrayRecur ../../packages/core/testing/src/test_bed_compiler.ts:692:20
 ❯ TestBedCompiler.queueTypesFromModulesArray ../../packages/core/testing/src/test_bed_compiler.ts:716:5
 ❯ TestBedCompiler.configureTestingModule ../../packages/core/testing/src/test_bed_compiler.ts:144:12
 ❯ TestBedImpl.configureTestingModule ../../packages/core/testing/src/test_bed.ts:524:19
 ❯ Function.configureTestingModule ../../packages/core/testing/src/test_bed.ts:275:33
 ❯ src/app/app.component.spec.ts:7:19
      5| describe('AppComponent', () => {
      6|   beforeEach(async () => {
      7|     await TestBed.configureTestingModule({
       |                   ^
      8|       imports: [AppComponent],
      9|     }).compileComponents();

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[1/3]⎯

 Test Files  1 failed (1)
      Tests  3 failed (3)
   Start at  21:32:29
   Duration  425ms (transform 20ms, setup 110ms, collect 23ms, tests 47ms, environment 134ms, prepare 33ms)

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

sheremet-va commented 1 month ago

Isn't this without the plugin? The error is the same as on the second screenshot that also has correct stack traces. I am asking about the actual test error (in expect, for example) when the plugin is enabled.

kevinkasper commented 1 month ago

Sorry, I misunderstood that.

If I change a test so that it fails, the error is displayed in the wrong line:

❯ yarn vitest --run
yarn run v1.22.19
$ /Users/kevin/dev/kevin-kasper/angular-vite-test/node_modules/.bin/vitest --run

 RUN  v1.6.0 /Users/kevin/dev/kevin-kasper/angular-vite-test

 ❯ src/app/app.component.spec.ts (3)
   ❯ AppComponent (3)
     × should create the app
     ✓ should have the 'angular-vite-test' title
     ✓ should render title

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Failed Tests 1 ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

 FAIL  src/app/app.component.spec.ts > AppComponent > should create the app
AssertionError: expected AppComponent{ …(2) } to be undefined
 ❯ src/app/app.component.spec.ts:14:21
     12|   it('should create the app', () => {
     13|     const fixture = TestBed.createComponent(AppComponent);
     14|     const app = fixture.componentInstance;
       |                     ^
     15|     expect(app).toBeUndefined();
     16|   });

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[1/1]⎯

 Test Files  1 failed (1)
      Tests  1 failed | 2 passed (3)
   Start at  07:44:59
   Duration  724ms (transform 237ms, setup 171ms, collect 215ms, tests 68ms, environment 144ms, prepare 197ms)

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

If I remove the blank lines, it is displayed in the correct place:

❯ yarn vitest --run
yarn run v1.22.19
$ /Users/kevin/dev/kevin-kasper/angular-vite-test/node_modules/.bin/vitest --run

 RUN  v1.6.0 /Users/kevin/dev/kevin-kasper/angular-vite-test

 ❯ src/app/app.component.spec.ts (3)
   ❯ AppComponent (3)
     × should create the app
     ✓ should have the 'angular-vite-test' title
     ✓ should render title

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Failed Tests 1 ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

 FAIL  src/app/app.component.spec.ts > AppComponent > should create the app
AssertionError: expected AppComponent{ …(2) } to be undefined
 ❯ src/app/app.component.spec.ts:14:21
     12|     const fixture = TestBed.createComponent(AppComponent);
     13|     const app = fixture.componentInstance;
     14|     expect(app).toBeUndefined();
       |                     ^
     15|   });
     16|   it(`should have the 'angular-vite-test' title`, () => {

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[1/1]⎯

 Test Files  1 failed (1)
      Tests  1 failed | 2 passed (3)
   Start at  07:44:20
   Duration  704ms (transform 223ms, setup 172ms, collect 198ms, tests 69ms, environment 134ms, prepare 184ms)

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

sheremet-va commented 1 month ago

This confirms the issue is with the angular plugin.

vitest-dev / vscode