renders an empty notifications state

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

it("renders an empty notifications state", () => {
  cy.intercept("GET", "/notifications", []).as("notifications")

  cy.loginByXstate(ctx.userA.username)

  if (isMobile()) {
    cy.getBySel("sidenav-toggle").click()
  }
  cy.getBySel("sidenav-notifications").click()
  cy.location("pathname").should("equal", "/notifications")
  cy.getBySel("notification-list").should("not.exist")
  cy.getBySel("empty-list-header").should("contain", "No Notifications")
  cy.visualSnapshot("No Notifications")
})

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

First, we use cy.intercept() to intercept any GET request to the /notifications route. If you look closely, we are also passing in an empty array [] as a 3rd argument which will set the response data to be this empty array. The reason for this is we are trying to test what happens when a user does not have any notifications. The intercept is aliased to @notifications

cy.intercept("GET", "/notifications", []).as("notifications")

Then, we use another custom Cypress command cy.loginByXstate() to log in as one of the users which we retrieved in the beforeEach() hook at the top of this spec file.

cy.loginByXstate(ctx.userA.username)

If this test is being run in a mobile viewport, we click on the button to toggle the sidebar.

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

Next, we click on the "Notifications" button in the sidebar and verify the app has routed us to the notifications screen.

cy.getBySel("sidenav-notifications").click()
cy.location("pathname").should("equal", "/notifications")

Finally, we verify that there are not any notifications in the DOM and that the screen displays the correct text letting the user know there are no notifications.

cy.getBySel("notification-list").should("not.exist")
cy.getBySel("empty-list-header").should("contain", "No Notifications")