Testing in Umami codebase - Part 1.2

Source: Dev.to

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

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

Prerequisites

• Testing in Umami codebase — Part 1.0
• Testing in Umami codebase --- Part 1.1

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

Test cases in login.cy.ts

There are two test cases:

1. Logs user in with correct credentials and logs user out
2. Login with blank inputs or incorrect credentials

Case 1: Login and Logout

The following code validates 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

The following code validates the behavior when credentials are missing or incorrect:

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');
});

References