Testing in Umami codebase - Part 1.0

Inspired by BulletProof React, I applied its codebase architecture concepts to the Umami codebase.

You might be wondering:

1. What is Umami?

2. What is testing?

Let’s find out.

What is Umami?

Umami is an open-source, privacy-focused web analytics tool that serves as an alternative to Google Analytics. It provides essential insights into website traffic, user behavior, and performance, all while prioritizing data privacy.

Unlike many traditional analytics platforms, Umami does not collect or store personal data, avoiding the need for cookies, and is GDPR and PECR compliant.

Designed to be lightweight and easy to set up, Umami can be self-hosted, giving users full control over their data.

A detailed getting started guide can be found at umami.is/docs.

Quickstart

To get Umami up and running you will need to:

1. Install the application

2. Log into the application

3. Add a website

4. Add the tracking code into your website HTML

I pulled the above information from the Umami docs.

What is testing?

Write tests. Not too many. Mostly integration — Guillermo Rauch

Add comprehensive integration and e2e tests in your project to get the confidence in your application functionality. Unit tests help you validating individual components in isolation, but be more interested in how components work together. It also possible that you often change these individual components.

In the Umami codebase, I found that Cypress is used.

Cypress

Create tests, debug failures, and improve quality faster than ever. Get AI-powered guidance at every stage of testing, with full code ownership, on a platform that connects your team. 

Install & Run

1. Check Requirements: make sure you meet the system requirements including operating system, installation of Node.js and a supported package manager.

2. Run in your project root: This will install Cypress locally as a dev dependency for your project.

npm install cypress --save-dev

3. Open Cypress: This launches the Cypress App so you can choose end-to-end (E2E) or component testing (CT) and start writing tests.

• npm

• yarn

• pnpm

npx cypress open

4. Write your first test: Start with E2E or Component Testing.

Check out the Cypress docs.

In the umami/cypress folder, you will see the following:

We review these files in the upcoming articles. 

About me:

Hey, my name is Ramu Narasinga. I study codebase architecture in large open-source projects.

Email: ramu.narasinga@gmail.com

I spent 200+ hours analyzing Supabase, shadcn/ui, LobeChat. Found the patterns that separate AI slop from production code. Stop refactoring AI slop. Start with proven patterns. Check out production-grade projects at thinkthroo.com

References:

1. https://github.com/alan2207/bulletproof-react/blob/master/docs/testing.md

2. https://github.com/umami-software/umami/blob/master/package.json

3. https://github.com/umami-software/umami/blob/master/cypress/e2e/website.cy.ts

4. https://www.cypress.io/#create