6 posts tagged with "Docusaurus"

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.

It's a best-practice in Docusaurus to include a truncation marker in your blog posts. That way, when you're looking at a list of posts, you just see a brief introduction from each post, instead of the full content of the first post pushing the second post clear off the page.

It's where all those "Read more" links are coming from on the main page for my blog.

The default truncation marker for markdown files looks like this:

<!-- truncate -->

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.

I really like Docusaurus, but I also find there are some things it's missing. Happily, one of the best things about it is that it is, at bottom, React, which means you can add the things you find missing.

This post is a catch-up post to explain the purpose of this website, and how I got to this point. Going forward, I intend to post whatever is going on with development of this website here.