Custom UI results messages

[bombillazo]

Clear and concise description of the problem

Hello, we'd like a way to show custom HTML messages in the test results sections in vitest UI. For example, we dynamically generate some artifacts in the tests and would like to reference them with a link from the UI test results.

PS: We love Vitest, especially the UI reporter with static file generation. Thanks for the fantastic work.

Suggested solution

Add some parameter or configuration option to the tests to inject these messages into the latest UI results.

Alternative

No response

Additional context

No response

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.

[hi-ogawa]

Can you be more specific about the use case? I think it would help if you can provide an example code and ui with (hypothetical) API as a proposal to understand Vitest side requirement better, then we can brush it up as needed.

[bombillazo]

Hi, thanks for the quick response!

So our use case is that we generate some files based on the tests we run, which are stored locally in the same directory the html UI reporter is being generated. Our goal is to be able to output a message to this window per test:

The HTML would be links to the generated files.

and the test would be something like

  test(
    '-- site is runnning',
    async () => {
      const response = await axios.get(SITE_URL);
      expect(response.status).toBe(200);
      // creates files in HTML UI dir
      await createFiles();
    },
    {
      successMessage: `
<h1>Success!</h1>
<p>You file are found here</p>
<a href="file1.html">File 1</a>
<a href="file2.html">File 2</a>
<a href="file3.html">File 3</a>`,
    }
  );

[hi-ogawa]

The feature sounds too specific to html reporter, so I'm not sure what's the right direction. One idea came to my mind is that to reuse task.meta feature https://vitest.dev/advanced/metadata.html#task-metadata. Probably it's not possible to patch html output on user land, so we probably need to establish some convention specific to html reporter, so it picks up something like task.meta.__html automatically 🤔

  test(
    '-- site is runnning',
    async (ctx) => {
      ...
      
      // custom message as task.meta
      ctx.task.meta.__htmlSuccessMessage = `
<h1>Success!</h1>
<p>You file are found here</p>
<a href="file1.html">File 1</a>
<a href="file2.html">File 2</a>
<a href="file3.html">File 3</a>
`
    }
  )

[bombillazo]

That could work! using meta would be super easy and will work with JSON reporter which we're already using.

[sheremet-va]

I've been meaning to add something similar to attachments from Playwright. If they have the same structure (like, title/link/body), we can print them both in CLI and display in HTML reporter.

test(
  '-- site is runnning',
  { attachments: [{ title: 'file 1', link: 'file1.html' }] },
  async () => { 
     // ...
  },
)

Or

test(
  '-- site is runnning',
  async ({ attachments }) => { 
     attachments.add({ title: 'file 1', link: 'file1.html' })
  },
)