comments on a transaction

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

it("comments on a transaction", () => {
  cy.getBySelLike("transaction-item").first().click()
  cy.wait("@getTransaction")

  const comments = ["Thank you!", "Appreciate it."]

  comments.forEach((comment, index) => {
    cy.getBySelLike("comment-input").type(`${comment}{enter}`)
    cy.getBySelLike("comments-list").children().eq(index).contains(comment)
  })

  cy.getBySelLike("comments-list")
    .children()
    .should("have.length", comments.length)
  cy.visualSnapshot("Comment on Transaction")
})

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

First, we click on the first transaction and wait upon the @getTransaction intercept.

cy.getBySelLike("transaction-item").first().click()
cy.wait("@getTransaction")

Next, we loop through the array of comments, typing in each one and ensuring the comment is displayed in the UI.

const comments = ["Thank you!", "Appreciate it."]

comments.forEach((comment, index) => {
  cy.getBySelLike("comment-input").type(`${comment}{enter}`)
  cy.getBySelLike("comments-list").children().eq(index).contains(comment)
})

Screenshot of Cypress App with the type command highlighted in purple in the Cypress Command Log. The input DOM element is highlighted in the application under test, The Real World App.

Finally, we confirm that all of our comments in the comments array are displayed within the UI.

cy.getBySelLike("comments-list")
  .children()
  .should("have.length", comments.length)

Screenshot of the Cypress App with the 'assert' highlighted in purple in the Cypress Command Log. The passing assertion text says 'expected li.MuiListItem to have a length of 2. There are 2 DOM elements highlighted in the application under text with the content highlighted in blue and the padding highlighted in yellow.'