How to collect coverage from <template> section?

[iliubinskii]

Currently JEST collects coverage for <script lang="ts"> section but not for section:

Is there any way to collect coverage for ?

I guess that maintainers of "jest" will not work on it.
So, maybe "vue-jest" repository is the right place to raise this question.

[lmiller1990]

Yeah, this is something we'd need to implement here.

It's an interesting one I haven't thought about too much; I guess in the same way we use a source map for the <script>, we'd do the same for <template>, which is compiled to render functions. Off the top of my head, I'm not really sure how/where to start, or even what coverage means here.

What exactly does coverage for HTML actually mean? If the HTML is rendered on the page, it's technically 100% covered, right? Eg - how are you expecting to measure if a line of HTML was covered?

[iliubinskii]

Hi, thx for response.

What exactly does coverage for HTML actually mean?

Ideally:

---

First, I would expect coverage for embeded javascript/typescript code. In my example above, embeded code is:

hasIcon || slotNames.has('icon')

Embeded code is also located inside handlers:

<div @click="handleClick">
<div @click="counter++">

and inside attributes starting with ":":

<div :count="1">

This will be "Satements" coverage:

---

Second, I would expect "Branches" coverage for conditional vue directives (e.g. v-if):

For example:

<div v-if="color === 'red'">
  ...
</div>
<div v-else>
  ...
</div>

In this example, it is not enough to check that "color === 'red'" code is executed.
It is also necessary to check that condition returned both "true" and "false".
If "false" is never returned then "<div v-else>" branch is not covered.
If "true" is never returned then "<div v-if=...>" branch is not covered.

---

So, ideal solution would be to have "Satements" coverage for embeded javascript/typescript code + "Branches" coverage for conditional vue directives.

---

The next question is how to do it.
I am not familiar with vue or vue-jest internal structure.
But I can guess that vue should create map file with two kinds of mapping:

1. Mapping from javascript expressions to vue's inline code
2. Mapping from javascript if statements to vue's v-if directives (the same for other conditional directives).

If they do not produce all necessary mappings then it is possible to ask them to add missing feature.

Then this map file might be used to map coverage from javascript to vue file.

[lmiller1990]

I understand now. We'd need to map the executed render functions, eg

<div v-if="foo">BAR</div>

Becomes something like

import { createVNode } from 'vue'

ctx.foo === true && createVNode('div', 'BAR')

Then map it back to the HTML. I have no idea if this is practical or even possible right now, seems pretty complex. Cool idea for a feature - I'm not sure I can invest the time to make this right now, but would be happy and interested to see if anyone else has some ideas.

First thing I'd do is see if Angular or another framework does something similar, and how they do it.

[LG0012]

Yeah, this is something we'd need to implement here.

It's an interesting one I haven't thought about too much; I guess in the same way we use a source map for the <script>, we'd do the same for <template>, which is compiled to render functions. Off the top of my head, I'm not really sure how/where to start, or even what coverage means here.

What exactly does coverage for HTML actually mean? If the HTML is rendered on the page, it's technically 100% covered, right? Eg - how are you expecting to measure if a line of HTML was covered?

But it's not working even for <script> - #480