3 posts tagged with "Formatting/Styles/CSS"

Automating Test Reporting with Vitest and Istanbul​

As part of our commitment to ensuring high-quality code, we've set up an automated testing and reporting workflow using Vitest, Istanbul, and XUnit Viewer. Here’s a quick overview of how we made that happen.

Choosing the Right Tools​

We opted for:

• Vitest: A fast testing framework tailored for projects using Vite and TypeScript.
• Istanbul: A comprehensive code coverage tool, ensuring detailed metrics like branch, function, and statement coverage.
• XUnit Viewer: A simple way to convert XML test results into clean, shareable HTML reports.

In my last blog post, I used a diff to show how my SVG files had changed.

For those who don't know a diff is an operation on two files that shows a graphical representation of how one is different than the other.

They look like this:

on the command line	in a nice UI like GitHub

I thought it would be a good idea to have a central location to showcase whatever components I add to the Docusaurus repertoire.

I'd worked with Storybook before, and found it pretty handy. During development, it gives you a way to interact with a component-in-progress and see that it works as intended. It can serve as a beginning basis for unit and component tests, and it can be a really handy tool for communicating with non-technical stakeholders... clicking on a component and seeing immediately how it responds is much easier to grasp than an engineer trying to explain something to you in non-engineer-speak as best they can. The proof is in the pudding, as they say.