Vscode-jest: Coverage Overlay not highlighting the same as coverage/index.html

[nasreddineskandrani]

Environment

node -v: v8.11.3
npm -v: 5.6.0
Operating system: windows10

Prerequisite

• are you able to run jest test from command line? yes
• how do you run your tests from command line?

yarn run testjest:watch --coverage --runTestsByPath src/app/game/game-a.service.spec.ts

Steps to Reproduce

a sample repo branch with the problem
https://github.com/nasreddineskandrani/full-example-angular/tree/jest-playaround

commands:

yarn install
yarn run testjest:watch -- --coverage

for the same test run if i remove the test in my spec file for the false branch in game-a.service.spec.ts

1.
index.html coverage:

2.
overlay coverage:

---

you can see that the true branch is still highlighed by the overlay in vscode => when index.html coverage is not highlihgting this branch.

Relevant Debug Info

i did not debug it yet.

Expected Behavior

coverage/index.html and coverage overlay in vscode are the same

Actual Behavior

covergae/index.html and coverage overlay in vscode are NOT the same

[markcarroll]

I'm seeing the same thing, where branches are highlighted as not covered in vscode-jest but are showing as covered in the index.html test report as verified by stepping through my test code in the debugger.

[fabis94]

experiencing the same thing

[AverageHelper]

Same here.

[connectdotz]

Hi, I looked at the sample repo today, this is an interesting use case since this branch is "partially" covered, i.e. the "invisible" else path is not tested thus not covered. It is true that we do not distinguish "fully not cover" or "partially not cover" in our default coverage display today... it is either fully covered or not. The index.html does provide more useful information stating it is either "else" or the "if" path that is not covered...

We could mark the partially uncovered branch with different visuals... and could possibly take it further by providing different colors for if-vs-else coverage 🤔 ...

[nasreddineskandrani]

@connectdotz i don't get what do you mean?
-> you can do exactly what is done in index.html this is the standard for most testing coverage tools it's highlighted in red when not covered... you are not highlighting the if so you have to fix this. It has nothing to do with else for my understanding.

[connectdotz]

@nasreddineskandrani in your sample repo, you have tested the if path by evaluating

expect(gameAService.play(heroes)).toEqual(true);

but you didn't evaluate the hidden else path, which should returns false. Therefore you have only partially tested your branch. The E marker in the index.html means missing coverage on Else path; it will put a marker I for missing Ifpath, you can play with it to see that effect.

you can do exactly what is done in index.html this is the standard for most testing coverage tools it's highlighted in red when not covered

Just to be sure, the index.html (Istanbul report) is telling you the branch is not fully covered, it just didn't use the red marker but the E. Actually there are many more types of "missing coverage" the report uses: How do I rea an Istanbul Coverage Report?.

I think your suggestion to adopt the same report scheme is good, we can certainly use the same color scheme, provided they look right in vscode editor (lite/dark mode). However, we probably won't use the E or I marker, as they will interfere with code formating since we are dealing with text editors here, unlink the report is a read-only HTML page... That is why I am thinking of using different colors to represent them, I am all ears if you have other suggestions...