Verifying the deposit of a payment

Before continuing, make sure you have read the New Transaction Overview & Setup lesson first.

it("submits a transaction payment and verifies the deposit for the receiver", () => {
  cy.getBySel("nav-top-new-transaction").click();

  const transactionPayload = {
    transactionType: "payment",
    amount: 25,
    description: "Indian Food",
    sender: ctx.user,
    receiver: ctx.contact,
  };

  // first let's grab the current balance from the UI
  let startBalance: string;
  if (!isMobile()) {
    // only check the balance display in desktop resolution
    // as it is NOT shown on mobile screen
    cy.get("[data-test=sidenav-user-balance]")
      .invoke("text")
      .then((x) => {
        startBalance = x; // something like "$1,484.81"
        expect(startBalance).to.match(/\$\d/);
      });
  }

  cy.createTransaction(transactionPayload);
  cy.wait("@createTransaction");
  cy.getBySel("new-transaction-create-another-transaction").should("be.visible");

  if (!isMobile()) {
    // make sure the new balance is displayed
    cy.get("[data-test=sidenav-user-balance]").should(($el) => {
      // here we only make sure the text has changed
      // we could also convert the balance to actual number
      // and confirm the new balance is the start balance - amount
      expect($el.text()).to.not.equal(startBalance);
    });
  }
  cy.visualSnapshot("Transaction Payment Submitted Notification");

  cy.switchUserByXstate(ctx.contact!.username);

  const updatedAccountBalance = Dinero({
    amount: ctx.contact!.balance + transactionPayload.amount * 100,
  }).toFormat();

  if (isMobile()) {
    cy.getBySel("sidenav-toggle").click();
  }

  cy.getBySelLike("user-balance").should("contain", updatedAccountBalance);
  cy.visualSnapshot("Verify Updated Sender Account Balance");
});

You can find out more information about the custom Cypress commands used in this test here.

First, we click on the "New" transaction button.

cy.getBySel("nav-top-new-transaction").click()

We then create a transactionPayload object.

const transactionPayload = {
  transactionType: "payment",
  amount: 25,
  description: "Indian Food",
  sender: ctx.user,
  receiver: ctx.contact,
}

Then, we grab the current balance from the UI, only if we are not in a mobile viewport and store it inside of the startBalance variable.

// first let's grab the current balance from the UI
let startBalance: string
if (!isMobile()) {
  // only check the balance display in desktop resolution
  // as it is NOT shown on mobile screen
  cy.get("[data-test=sidenav-user-balance]")
    .invoke("text")
    .then((x) => {
      startBalance = x // something like "$1,484.81"
      expect(startBalance).to.match(/\$\d/)
    })
}

We then create a new transaction using a custom Cypress command cy.createTransaction() with the transactionPayload object we created earlier.

cy.createTransaction(transactionPayload)

We then wait on the @createTransaction intercept and assert the "Create Another Transaction" button is visible

cy.wait("@createTransaction")
cy.getBySel("new-transaction-create-another-transaction").should("be.visible")

We then make sure we are not in a mobile viewport and assert that the user balance has been updated from the transaction we just created.

if (!isMobile()) {
  // make sure the new balance is displayed
  cy.get("[data-test=sidenav-user-balance]").should(($el) => {
    // here we only make sure the text has changed
    // we could also convert the balance to actual number
    // and confirm the new balance is the start balance - amount
    expect($el.text()).to.not.equal(startBalance)
  })
}

We then switch users by using a custom command cy.switchUserByXstate()

cy.switchUserByXstate(ctx.contact!.username);

We then use a 3rd party library called Dinero.js to format the updatedAccountBalance properly.

const updatedAccountBalance = Dinero({
      amount: ctx.contact!.balance + transactionPayload.amount * 100,
    }).toFormat();

If we are in a mobile viewport we click the button to open the sidebar.

if (isMobile()) {
  cy.getBySel("sidenav-toggle").click()
}

Finally, we assert that the user's balance contains the correct amount.

cy.getBySelLike("user-balance").should("contain", updatedAccountBalance)