app layout and responsiveness

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

describe("app layout and responsiveness", () => {
  it("toggles the navigation drawer", () => {
    cy.wait("@notifications")
    cy.wait("@publicTransactions")
    if (isMobile()) {
      cy.getBySel("sidenav-home").should("not.exist")
      cy.visualSnapshot("Mobile Initial Side Navigation Not Visible")
      cy.getBySel("sidenav-toggle").click()
      cy.getBySel("sidenav-home").should("be.visible")
      cy.visualSnapshot("Mobile Toggle Side Navigation Visible")
      cy.get(".MuiBackdrop-root").click({ force: true })
      cy.getBySel("sidenav-home").should("not.exist")
      cy.visualSnapshot("Mobile Home Link Side Navigation Not Visible")

      cy.getBySel("sidenav-toggle").click()
      cy.getBySel("sidenav-home").click().should("not.exist")
      cy.visualSnapshot("Mobile Toggle Side Navigation Not Visible")
    } else {
      cy.getBySel("sidenav-home").should("be.visible")
      cy.visualSnapshot("Desktop Side Navigation Visible")
      cy.getBySel("sidenav-toggle").click()
      cy.getBySel("sidenav-home").should("not.be.visible")
      cy.visualSnapshot("Desktop Side Navigation Not Visible")
    }
  })
})

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

This test is relatively straightforward, and we will not be covering every single line. The general purpose of this test is to make sure that certain elements are either visible or invisible depending upon whether we are in a mobile viewport or not. We also use several cy.visualSnapshot() to confirm that our UI has not changed. Tests like these are essential as they demonstrate the importance of testing what is there and what should not be there. Remember, you do not want to only test for the positive or "happy paths"; you also want to test the negative or "unhappy paths."

The first thing we are doing is waiting on a couple of intercepts that occur in the .beforeEach() hook.

cy.wait("@notifications")
cy.wait("@publicTransactions")

Next, we use our isMobile() utility method to determine if this test is being run in a mobile viewport or not.

if (isMobile()) {
// ...

If we are in a mobile viewport, then we verify the certain elements are visible or not visible when we click on various buttons.

cy.getBySel("sidenav-home").should("not.exist")
cy.visualSnapshot("Mobile Initial Side Navigation Not Visible")
cy.getBySel("sidenav-toggle").click()
cy.getBySel("sidenav-home").should("be.visible")
cy.visualSnapshot("Mobile Toggle Side Navigation Visible")
cy.get(".MuiBackdrop-root").click({ force: true })
cy.getBySel("sidenav-home").should("not.exist")
cy.visualSnapshot("Mobile Home Link Side Navigation Not Visible")

cy.getBySel("sidenav-toggle").click()
cy.getBySel("sidenav-home").click().should("not.exist")
cy.visualSnapshot("Mobile Toggle Side Navigation Not Visible")

If we are not in a mobile viewport, then verify that certain elements are visible or not for desktop and greater viewports.

cy.getBySel("sidenav-home").should("be.visible")
cy.visualSnapshot("Desktop Side Navigation Visible")
cy.getBySel("sidenav-toggle").click()
cy.getBySel("sidenav-home").should("not.be.visible")
cy.visualSnapshot("Desktop Side Navigation Not Visible")