Creating a New Bank Account

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

it("creates a new bank account", () => {
  cy.wait("@getNotifications")
  if (isMobile()) {
    cy.getBySel("sidenav-toggle").click()
  }

  cy.getBySel("sidenav-bankaccounts").click()

  cy.getBySel("bankaccount-new").click()
  cy.location("pathname").should("eq", "/bankaccounts/new")
  cy.visualSnapshot("Display New Bank Account Form")

  cy.getBySelLike("bankName-input").type("The Best Bank")
  cy.getBySelLike("routingNumber-input").type("987654321")
  cy.getBySelLike("accountNumber-input").type("123456789")
  cy.visualSnapshot("Fill out New Bank Account Form")
  cy.getBySelLike("submit").click()

  cy.wait("@gqlCreateBankAccountMutation")

  cy.getBySelLike("bankaccount-list-item")
    .should("have.length", 2)
    .eq(1)
    .should("contain", "The Best Bank")
  cy.visualSnapshot("Bank Account Created")
})

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

First, we wait upon our aliased intercept @getNotifications

cy.wait("@getNotifications")

Next, we click on the "Bank Accounts" link in the left sidebar, depending upon if we are a mobile device or not. You can find out more info about the isMobile() utility function here.

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

cy.getBySel("sidenav-bankaccounts").click()

Next, we will click on the "Create" button and write an assertion that the application has taken us to the correct screen by validating the URL.

cy.getBySel("bankaccount-new").click()
cy.location("pathname").should("eq", "/bankaccounts/new")

Screenshot of the Cypress App. The application under test is showing a 'Create Bank Account' screen with 3 inputs and a save button. The Cypress Command Log is displaying the test body including get, click, and location commands.

Then, we fill out the new bank account form with our bank account information and save it.

// Create Bank Account Form
cy.getBySelLike("bankName-input").type("The Best Bank")
cy.getBySelLike("routingNumber-input").type("987654321")
cy.getBySelLike("accountNumber-input").type("123456789")
cy.getBySelLike("submit").click()

Screenshot of Cypress App with the Cypress Command log showing several commands having run in the backaccounts.spec.ts file. The application under test shows the Real World App with a Bank Accounts list with a Create button and a Delete button on each back account row.

We then wait for our GraphQL mutation to create a new bank account.

cy.wait("@gqlCreateBankAccountMutation")

Finally, we will write an assertion that ensures that our new bank account is created successfully.

cy.getBySelLike("bankaccount-list-item")
  .should("have.length", 2)
  .eq(1)
  .should("contain", "The Best Bank")