Transaction Feeds Overview & Setup

In this section we will be discussing the various tests located within the cypress/tests/ui/new-transaction-feeds.spec.ts file.

ctx & feedViews Objects

const ctx: TransactionFeedsCtx = {}

const feedViews = {
  public: {
    tab: "public-tab",
    tabLabel: "everyone",
    routeAlias: "publicTransactions",
    service: "publicTransactionService",
  },
  contacts: {
    tab: "contacts-tab",
    tabLabel: "friends",
    routeAlias: "contactsTransactions",
    service: "contactTransactionService",
  },
  personal: {
    tab: "personal-tab",
    tabLabel: "mine",
    routeAlias: "personalTransactions",
    service: "personalTransactionService",
  },
}

The ctx object is an empty object that we will later populate within the beforeEach() below with some user data used through the tests in this file. The feedViews object contains various information for the different views depending upon which transaction feed we are testing. For example, for the public feed views object.

  • The tab property is the name of the selector we will use to grab the correct element.
  • The tabLabel is the text contained within the <label> element for the tab.
  • The routeAlias is the alias name we are using for cy.intercept()
  • The service is the name of the service we are using for a custom Cypress command cy.nextTransactionFeedPage(feed.service, pageData.totalPages); around line 203.

beforeEach()

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

  cy.intercept("GET", "/notifications").as("notifications")
  cy.intercept("GET", "/transactions*").as(feedViews.personal.routeAlias)
  cy.intercept("GET", "/transactions/public*").as(feedViews.public.routeAlias)
  cy.intercept("GET", "/transactions/contacts*").as(
    feedViews.contacts.routeAlias
  )

  cy.database("filter", "users").then((users: User[]) => {
    ctx.user = users[0]
    ctx.allUsers = users

    cy.loginByXstate(ctx.user.username)
  })
})

First, we are using a custom Cypress task to seed our database.

cy.task("db:seed")

Next, we use cy.intercept() to intercept various requests and alias them using the data within the feedViews object.

cy.intercept("GET", "/notifications").as("notifications")
cy.intercept("GET", "/transactions*").as(feedViews.personal.routeAlias)
cy.intercept("GET", "/transactions/public*").as(feedViews.public.routeAlias)
cy.intercept("GET", "/transactions/contacts*").as(feedViews.contacts.routeAlias)

Then, we use a custom Cypress command cy.database() to retrieve some users from the database. We then use the users returned from the database and add them to our ctx object later in our tests. Finally, we are using another custom Cypress command cy.loginByXstate() to login as one of the users returned from the database.

cy.database("filter", "users").then((users: User[]) => {
  ctx.user = users[0]
  ctx.allUsers = users

  cy.loginByXstate(ctx.user.username)
})