Notifications between several users

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

it("User C comments on a transaction between User A and User B; User A and B get notifications that User C commented on their transaction", () => {
  cy.loginByXstate(ctx.userC.username)

  cy.database("find", "transactions", {
    senderId: ctx.userB.id,
    receiverId: ctx.userA.id,
  }).then((transaction: Transaction) => {
    cy.visit(`/transaction/${transaction.id}`)
  })

  cy.getBySelLike("comment-input").type("Thank You{enter}")

  cy.wait("@postComment")

  cy.switchUserByXstate(ctx.userA.username)
  cy.visualSnapshot("Switch to User A")
  cy.visualSnapshot(`Switch to User ${ctx.userA.username}`)

  cy.getBySelLike("notifications-link").click()

  cy.wait("@getNotifications")

  cy.getBySelLike("notification-list-item")
    .should("have.length", 9)
    .first()
    .should("contain", ctx.userC.firstName)
    .and("contain", "commented")
  cy.visualSnapshot("User A Notified of User C Comment")

  cy.switchUserByXstate(ctx.userB.username)
  cy.visualSnapshot(`Switch to User ${ctx.userB.username}`)

  cy.getBySelLike("notifications-link").click()
  cy.getBySelLike("notification-list-item")
    .should("have.length", 9)
    .first()
    .should("contain", ctx.userC.firstName)
    .and("contain", "commented")
  cy.visualSnapshot("User B Notified of User C Comment")
})

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

First, we log in as userC from the ctx object, which we set up in the beforeEach() hook at the top of this spec file.

cy.loginByXstate(ctx.userC.username)

Next, we us a custom Cypress command cy.database() to find transactions between userB and userA, which again come from the ctx object we setup in the beforeEach() hook at the top of this spec file. After we find a transaction, we visit that specific transaction page.

cy.database("find", "transactions", {
  senderId: ctx.userB.id,
  receiverId: ctx.userA.id,
}).then((transaction: Transaction) => {
  cy.visit(`/transaction/${transaction.id}`)
})

A screenshot of the Cypress App with the 'Database' command highlighted in purple in the Cypress Command Log. The Dev Tools console is open and shows details about the database command including entity, and query data.

Then, we enter a comment on the transaction page and wait on the @postComment intercept. Remember, this intercept happens in the beforeEach() at the top of this spec file.

cy.getBySelLike("comment-input").type("Thank You{enter}")

cy.wait("@postComment")

Screenshot of Cypress App with the 'type' command highlighted in purple in the Cypress Command Log with the text 'Thank You enter'. The input is highlighted in the application under text with a red dot indicating where the click happened before typing.

Next, we switch users again, this time logging in a userA

cy.switchUserByXstate(ctx.userA.username)

Screenshot of Cypress App with the 'login by xstate' command highlighted in purple in the Cypress Command Log. The application under test shows a Sign In screen of the Real World App including an email, password, and button. The DevTools Console is open showing details of the loginByXState command.

Now that we are logged in as userA we click on the notifications button to view userA's notifications. We also wait for the @getNotifications intercept. Remember, this intercept happens in the beforeEach() at the top of this spec file.

cy.getBySelLike("notifications-link").click()

cy.wait("@getNotifications")

Then, we confirm our user has a total of 9 notifications and that the first notifications contains the first name of userC along with the text "commented"

cy.getBySelLike("notification-list-item")
  .should("have.length", 9)
  .first()
  .should("contain", ctx.userC.firstName)
  .and("contain", "commented")

We switch users yet again, this time logging in as userB

cy.switchUserByXstate(ctx.userB.username)

We then perform similar assertions like we just did for userA. We want to make sure that userB has a total of 9 notifications and that the first notifications contains the first name of userC along with the text "commented"

cy.getBySelLike("notifications-link").click()
cy.getBySelLike("notification-list-item")
  .should("have.length", 9)
  .first()
  .should("contain", ctx.userC.firstName)
  .and("contain", "commented")