User Settings Overview & Setup

In this section, we will be discussing the various tests located within the cypress/tests/ui/user-settings.spec.ts file.

Let's breakdown what is happening within the beforeEach() as it is important to understand what is going on since this hook is running before each test.

beforeEach()

beforeEach(() => {
  cy.task("db:seed")

  cy.intercept("PATCH", "/users/*").as("updateUser")
  cy.intercept("GET", "/notifications*").as("getNotifications")

  cy.database("find", "users").then((user: User) => {
    cy.loginByXstate(user.username)
  })

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

  cy.getBySel("sidenav-user-settings").click()
})

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

The first thing we are doing is seeding our database using a custom Cypress task.

cy.task("db:seed")

Next, we are using cy.intercept() to intercept every PATCH request to the /users/* route. We are then aliasing this intercept to "updateUser." When you see @updateUser being used within a test, it is referring to this intercept.

cy.intercept("PATCH", "/users/*").as("updateUser")

We are also intercepting any GET request to the /notifications route and aliasing the intercept to "getNotifications." When you see @getNotifications being used within a test, it is referring to this intercept.

cy.intercept("GET", "/notifications*").as("getNotifications")

We then use a custom Cypress command cy.database() to query our database for our users. Then we use another custom Cypress command cy.loginByXstate() to login into the application using one of the users returned from cy.database().

You can find out how these custom Commands work in greater detail here.

cy.database("find", "users").then((user: User) => {
  cy.loginByXstate(user.username)
})

Finally, we click the button to open the user settings window. We have a special utility function to determine if we are simulating a mobile device or not. You can find out how the isMobile() function works in greater detail here.

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

cy.getBySel("sidenav-user-settings").click()