The html reporter allows viewing the current use case code

[wll8]

Clear and concise description of the problem

I hope that when I click on a use case, I can view the test code of the use case. It can bring the following benefits:

• It is equivalent to a usage example for users to refer to.
• It is equivalent to a code snippet, which helps developers quickly locate problems.
• Use cases are usage examples, which reduces the work of repeatedly writing sample code.

Suggested solution

Suppose there is a use case a. When you click on the use case a, there is a parameter in the url, such as ?it=a, which is used to mark the current use case. And you can view its corresponding code on the right.

I can paste the url link to other places, such as the usage document. When others click on this url, they can view the relevant information of the corresponding use case.

Even simply displaying the toString result of the test case function (ignoring other functions referenced within the function) is sufficient for participating in the example.

Alternative

No response

Additional context

Its functionality is similar to mochawesome.

Test case code:

UI test results:

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[sheremet-va]

Is it html reporter or dynamic Vitest UI? There is usually a Code tab already.

[wll8]

It is html report: npx vitest --reporter=html && npx vite preview --outDir html;
Not dynamic ui: npx vitest --ui;

And the existing Code tab shows the code of the entire *.test.js file, not the code of the current test case.

[sheremet-va]

I don't really see any reason to add a separate tab to show just a small part of the code when we already show full code. The #5948 PR adds a way to scroll to the test line, - it should be enough to close this issue.

[wll8]

reason:

I hope that when I click on a use case, I can view the test code of the use case. It can bring the following benefits:

• It is equivalent to a usage example for users to refer to.
• It is equivalent to a code snippet, which helps developers quickly locate problems.
• Use cases are usage examples, which reduces the work of repeatedly writing sample code.

I'm not sure if that PR has the ability to view the code for the current use case (rather than the code for the entire file) in the html report.

There are more reasons to allow viewing of only the current use case, for example:

• HTML anchor link, Based on it, people created single-page applications.
• mocha ui (weekly downloads over a million) reports only show the current use case code by default
• markdown has the function of navigating by chapter
• vscode/github provides the function of navigating functions when viewing code
• Chrome provides the ability to navigate to a text location

These features clearly demonstrate the usefulness of allowing navigation to a certain content.