HOWTO: fancy tests output

[hobovsky]

Motivated by this post

Some authors use undocumented capabilities of test output panel to improve styling or presentation of test results, like:

• console output with messages or ASCII art presenting input (like "break the pieces" kata)
• text styling with colors and font styles,
• pieces of HTML with tables, accordions, collapsible sections, images, svgs,
• myjinxin's game kata even contain really cool animations of the gameplay.

It cold be explained if such improved test reports are desirable or not, and if they are, how to create them.

So, first question to @kazk : encouraged or discouraged?

[kazk]

HTML output is officially supported and it's fine when it makes sense. It's encouraged if it improves the user experience. @ggorlen made some cool outputs for Qualified like trees and visualizations for data science challenges.

Just don't do colorful message just because you can. For example, I've seen stuff like Don't forget to vote! in yellow at the end of the test output. Don't do that and it should be removed when found. Similar to how HTML shouldn't be used unless necessary in the description.

When using this feature, you should use the explicit HTML mode (<LOG:HTML:>message-with-html) and remove new lines (\n) in the message for future compatibility. Most of the Codewars' content is currently using implicit one that requires the runner to guess the correct handling. This can cause unexpected output and Qualified has this turned off. It's not going to be removed anytime soon, but Codewars should follow.

Also, don't depend on the implementation details of the current output. For example, don't write CSS that depends on the class names used in the current output. One exception is theming. Sometimes you need to change the style depending on the theme to make it readable. The output uses .night for the dark mode at the moment, but it's probably a good idea to also specify .dark.

For data visualization on canvas, CSS like the following works in many cases to support dark mode:

.dark .canvas-figure,
.night .canvas-figure { filter: invert(100%) hue-rotate(180deg) !important; }
/* .dark is added for future compatibility */

Example from Qualified challenge:

(I'm also planning to define a set of class names and/or custom properties of a safe color palette to use. So instead of <span style="color:red">red text</span> you'll do <span class="text-red">red text</span> which will adjust to the current theme.)

---

HTML output can be made by outputting to stdout with a special mode:

<LOG:HTML:>line

This makes the output panel treat line as HTML. line can contain CSS and JS. Because the output panel itself is in a sandboxed iframe hosted on a different domain, you cannot access any information on www.codewars.com.