mine feed only shows personal transactions

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

it("mine feed only shows personal transactions", () => {
      cy.database("filter", "contacts", { userId: ctx.user!.id }).then((contacts: Contact[]) => {
        ctx.contactIds = contacts.map((contact) => contact.contactUserId);
      });

      cy.getBySelLike(feedViews.personal.tab).click();

      cy.wait("@personalTransactions")
        .its("response.body.results")
        .each((transaction: Transaction) => {
          const transactionParticipants = [transaction.senderId, transaction.receiverId];
          expect(transactionParticipants).to.include(ctx.user!.id);
        });
      cy.getBySel("list-skeleton").should("not.exist");
      cy.visualSnapshot("Personal Transactions");
    });

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

First, we are using a custom Cypress command cy.database() to filter through the contacts of the user from the ctx object. Remember, the ctx object's data is setup in the beforeEach() hook at the top of this spec file. We .map() over all of the user's contacts and store their id's on the ctx object.

cy.database("filter", "contacts", { userId: ctx.user!.id }).then((contacts: Contact[]) => {
        ctx.contactIds = contacts.map((contact) => contact.contactUserId);
      });

Next, we click on the personal feed view tab

cy.getBySelLike(feedViews.personal.tab).click()

Screenshot of Cypress test running in browser. The click command is highlighted in purple in the Cypress command log. The application under test shows the Real World App. There's an overlay on the AUT saying 'Dom Snapshot (pinned) with a before and after button. The before state is showing the state of the AUT before the click command ran.'

Then, we wait upon the @personalTransactions intercept, grab the results from the body of the response and iterate over each transaction. We then make an assertion to make sure the response only returns transactions associated with our user.

cy.wait("@personalTransactions")
        .its("response.body.results")
        .each((transaction: Transaction) => {
          const transactionParticipants = [transaction.senderId, transaction.receiverId];
          expect(transactionParticipants).to.include(ctx.user!.id);
        });

Cypress Screenshot of Cypress App with the 'its' command highlighted in purple in the Cypress Command Log. There are several assertions in green verifying that the assertions expected certain text. The DevTools console is open displaying the `its` command properties including the details of the array yielded from the command.

Finally, we make sure that the loading skeleton does not exist in the DOM.

cy.getBySel("list-skeleton").should("not.exist")

Screenshot of Cypress App with a passing test and the 'assert' command highlighted in purple in the Cypress Command Log. The text beside the assert command says 'expected data-test=list-skeleton not to exist in the DOM'. The application under test shows the REal World App with a list of transactions.