Invoice Management E2E Testing

Invoice Management Tests

Overview

This document provides a detailed explanation of the Cypress End-to-End (E2E) test suite for the invoice management system. It covers tests for editing invoice details and processing refunds. The goal is to ensure that the invoice functionalities work as expected and to offer a guide on understanding and running these tests.

Test Suite Structure

The test suite is divided into several key functions, each responsible for different aspects of the testing process. Below is an explanation of each function and its purpose.

describe('Visits Invoices Page, Searches for Company and Updates Due Date & Amount', () => {
  // Function to log in to the application
  const login = () => {
    cy.visit('http://localhost:3000');
    cy.getByData('login-email-input').type('email@example.com');
    cy.getByData('login-password-input').type('loginPassword');
    cy.getByData('sign-in-button').click();
  };

  // Function to search for a company by name
  const searchForCompany = (companyName) => {
    cy.getByData('search-input').type(companyName);
    cy.getByData('search-result').click();
  };

  // Function to update the due date of an invoice
  const updateDueDate = () => {
    cy.getByData('edit-invoice-button').click();
    cy.getByData('date-picker').should('be.visible');

    // Helper function to type a random number in date fields
    const typeRandomNumber = (index) => {
      cy.get('div[inputmode="numeric"]')
        .eq(index)
        .click()
        .then(() => {
          const randomNumber = Math.floor(Math.random() * 12) + 1;
          cy.focused().type(randomNumber.toString());
        });
    };

    typeRandomNumber(0); // Month
    typeRandomNumber(1); // Day

    // Set year to 2024
    cy.get('div[inputmode="numeric"]')
      .last()
      .click()
      .then(() => cy.focused().type("2024"));

    cy.getByData('update-due-date-button').click();
    cy.contains('Confirm Due Date Update');
    cy.getByData('confirm-button').click();
    cy.contains('updated successfully');
  };

  // Function to update the amount of an invoice
  const updateAmount = () => {
    cy.getByData('edit-invoice-button').click();

    cy.get('input[type="number"]')
      .scrollIntoView()
      .focus()
      .clear()
      .then(($input) => {
        $input.val("");
      })
      .type(`${Math.floor(Math.random() * 100) + 1}`)
      .blur();

    cy.contains('Confirm Total Update');
    cy.getByData('confirm-button').click();
    cy.contains('updated successfully');
  };

  // Function to refund a company
  const refundCompany = () => {
    cy.getByData('refund-invoice-button').click();
    cy.contains('Confirm Refund');
    cy.getByData('refund-textarea')
      .type('Running E2E Test')
      .should('have.value', 'Running E2E Test');
    cy.getByData('confirm-refund-button').click();
  };

  // Test case for updating an invoice
  it('Updates Invoice', () => {
    login();
    searchForCompany('Orbtronics LTD');
    updateDueDate();
    updateAmount();
    cy.getByData('logout-button').click();
  });

  // Test case for refunding a company
  it('Refunds Company', () => {
    login();
    searchForCompany('Orbtronics LTD');
    refundCompany();
    cy.getByData('logout-button').click();
  });
});

Function Explanations

1. login() This function automates the login process by visiting the application, entering login credentials, and submitting the login form.

2. searchForCompany(companyName) This function performs a search for a specific company by name and clicks on the search result to view the invoice details.

3. updateDueDate() This function updates the due date of an invoice. It involves clicking the edit button, interacting with the date picker, entering random values for the month and day, and setting the year to 2024. Finally, it confirms the update.

4. updateAmount() This function updates the invoice amount. It involves clicking the edit button, clearing the existing amount, entering a new random amount, and confirming the update.

5. refundCompany() This function initiates a refund for a company. It clicks the refund button, enters a reason for the refund, and confirms the refund action.

Test Cases

it('Updates Invoice', ...) This test case logs in to the application, searches for a company, updates the invoice due date and amount, and then logs out.

it('Refunds Company', ...) This test case logs in to the application, searches for a company, processes a refund, and then logs out.

Running the Tests

To execute the tests, follow these steps:

1. Open Cypress Test Runner:

npx cypress open

This will open the Cypress Test Runner where you can interactively run the tests.

2. Run Tests in Headless Mode:

npx cypress run

This runs the tests in the background and is useful for Continuous Integration (CI) environments.