Testing in Umami codebase - Part 1.2

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

This article focuses only on the testing strategies used in Umami codebase.

Prerequisites

1. Testing in Umami codebase — Part 1.0

2. Testing in Umami codebase — Part 1.1

In part 1.1, we reviewed the website.cy.ts. It has the test cases for adding, editing and deleting a website. In this part 1.2, we review the login.cy.ts test cases

There are two test cases in the login.cy.ts:

1. Logs user in with correct credentials and logs user out

2. Login with blank inputs or incorrect credentials

Case 1: Login and Logout

You will find the following code for validating login and logout functionality

it(
  'logs user in with correct credentials and logs user out',
  {
    defaultCommandTimeout: 10000,
  },
  () => {
    cy.getDataTest('input-username').find('input').as('inputUsername').click();
    cy.get('@inputUsername').type(Cypress.env('umami_user'), { delay: 0 });
    cy.get('@inputUsername').click();
    cy.getDataTest('input-password')
      .find('input')
      .type(Cypress.env('umami_password'), { delay: 0 });
    cy.getDataTest('button-submit').click();
    cy.url().should('eq', Cypress.config().baseUrl + '/dashboard');
    cy.logout();
  },
);

Case 2: Incorrect credentials

You will find the following code for validaing incorrect credentials behaviour

it('login with blank inputs or incorrect credentials', () => {
  cy.getDataTest('button-submit').click();
  cy.contains(/Required/i).should('be.visible');
 
  cy.getDataTest('input-username').find('input').as('inputUsername');
  cy.get('@inputUsername').click();
  cy.get('@inputUsername').type(Cypress.env('umami_user'), { delay: 0 });
  cy.get('@inputUsername').click();
  cy.getDataTest('input-password').find('input').type('wrongpassword', { delay: 0 });
  cy.getDataTest('button-submit').click();
  cy.contains(/Incorrect username and\/or password./i).should('be.visible');
});

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/umami-software/umami/blob/master/cypress/e2e/login.cy.ts