Dealing with extensive fixtures in Cypress

Scenario:

Currently, the task at hand involves setting up end-to-end tests for a web application that relies on a rather complex API. In order to test just one aspect of the site, approximately 15 REST requests need to be intercepted. The API in question is not particularly well-designed, but due to it being a third-party integration critical to the functioning of the web app, making changes to it is not feasible.

Queries:

  1. What would be the best approach for managing the cy.intercept() calls? With each test requiring such extensive interception setup, readability becomes an issue as the code can quickly span over 50 lines.

  2. Is it advisable to keep the cy.intercept() calls within the test file or should they be outsourced into separate files like below:

fixtures/car-list.ts

export function mockCarList() {
 cy.intercept()
 cy.intercept()
 ...
}

integration/car-list.spec.ts

import { mockCarList } from '../fixtures/car-list'

describe('Test car', () => {
  it('Should test car list', () => {
    mockCarList();
    
    do test stuff
  });
});

Answer №1

While your approach is sound, avoid placing the function in fixtures as it does not qualify as a fixture (i.e. data).

Instead, place it in /cypress/support/commands.js and convert it into a custom command to eliminate the need for importing it into the test.

// commands.js

Cypress.Commands.add('mockCarList', function() {
  cy.intercept()
  cy.intercept()
  ...
}

Test

describe('Testing cars', () => {
  it('Should test car list', () => {
    cy.mockCarList();
    
    // perform test actions
  });
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Prevent keyboard overlay during TextField interaction in a NativeScript app

When dealing with a NativeScript app view that includes a TextField component for user input, the native Keyboard Input tends to overlay the text field. Although it does not prevent users from entering text, it disrupts the overall user experience and affe ...

Oops! The API request was denied with error code 401 - Unauthorized in React

I have been working on incorporating an API into my front-end project using React/Typescript. The documentation for the API specifies that authorization requires a key named token with a corresponding value, which should be included in the header. To stor ...

Using TypeScript, we can assign a JSON object to an extended class by leveraging the

Task was to include an additional property. I modified a current class by adding a new property, but when I assign a JSON object from the database, the newly added property disappears. Is there a way to correctly assign a JSON object to a TypeScript class ...

Angular sub-route is failing to activate

My current setup involves Angular routing along with the use of ngx-translate-router, and I've encountered an unusual issue with child routes. It's unclear whether this problem is connected to the translated router module I'm utilizing, but ...

Issue of displaying buttons based on sibling's height under certain conditions

OBJECTIVE I have undertaken a project to enhance my skills in React and TypeScript by developing a UI chat interface. The design requirement is that when a chat message has enough vertical space, its action buttons should appear stacked vertically to the ...

When using Typescript, you may encounter varying error messages in VSCode compared to those

Visual Studio Code utilizes an internal instance of the typescript compiler to provide error feedback within the editor. Users have the flexibility to select which version of TypeScript to use by adjusting the typescript.tsdk setting. I am currently facin ...

Issue with the Material UI theme module enhancement feature not functioning as expected

I've been researching the MUI documentation, blogs, and various posts on Stackoverflow, but despite my efforts, I can't seem to get my vscode intellisense/typescript to recognize the changes I've made. These are fairly straightforward modif ...

Animated drop-down menu in Angular 4

I recently came across this design on web.whatsapp.com https://i.stack.imgur.com/ZnhtR.png Are there any Angular packages available to achieve a dropdown menu with the same appearance? If not, how can I create it using CSS? ...

Error: The variable "prisma" is not defined in this context - Next.js version 14

While working with Prisma and next.js 14, I encountered an issue with the Stripe payment API. The error message ReferenceError: prisma is not defined popped up. How can I resolve this? import { NextApiRequest, NextApiResponse } from "next" import ...

Switch Angular checkbox to display string values instead of boolean true/false

My task is to create three checkboxes in a form with values toggling between "optin" and "optout" as I check/uncheck the checkboxes. Additionally, all checkboxes should be checked by default for the "optin" value. I'm struggling to find a solution, an ...

Angular users should be cautious of the 'grid zero width' warning that may arise when employing ag-Grid's sizeColumnsToFit() on multiple ag-Grids simultaneously

I'm encountering an issue with ag-grid where I see the following warning in the console. Despite conducting some research, none of the solutions I found have resolved my problem. It appears that there may be a memory leak within my application based o ...

Passing route parameters to child routes in Angular 2: A step-by-step guide

Struggling with passing routing parameters to my component when loaded in a subroute using Angular 2 rc.1 and TypeScript, and utilizing the @angular/router-deprecated package. In the routes configuration of my root component, I have set it up like this: ...

Angular 2 Quickstart encountered a 404 error when trying to retrieve the /app/main.js

I'm attempting to follow the Angular 2 quickstart guide, but I'm having trouble getting it to work. I've searched for similar questions but haven't found a solution yet. Can anyone assist me with this? Here is my code: app.component.t ...

Discovering class methods in typescript

Currently, I am running TypeScript unit tests using Mocha Chai after configuring the compiler options to ts-node. Within one of my unit tests, I am seeking a way to retrieve all methods from a utility class that I have designed and execute the same set of ...

retrieve information from Angular service

Is there a way for parent components to communicate with child components by injecting providers directly into the TypeScript file of each child component? I am trying to retrieve data using get and set methods, but I am unsure how to proceed. Any suggesti ...

Leveraging FormControlName in Typescript to Interact with HTML Components in Angular 4

How can I use FormControlName to access HTML elements in typescript? Typically, I am able to access HTML elements using their ID. For example: var element = document.getElementById("txtID") But is it possible to access the element without using its ID a ...

Provide a boolean value of true or false to indicate whether all delete operations were successfully completed

Currently, I am using Sequelize, GraphQL, and Typescript for my coding. Within my database, I have two tables named RecordInformation and OtherDescription. The RecordInformation table contains a foreign key called "OtherID" which references the OtherDescri ...

Struggling to solve a never-ending loop problem in a messaging application

I am currently in the process of developing a chat application. During the initialization of the chat page, I am checking for messages and storing them in an array. ngOnInit() { this.messageService.getMessages().doc(`${this.sortItineraries[0] + ...

checking if the regex pattern matches every input

I am working with a regex named 'pattern' that is intended to allow only numbers as input. However, I'm noticing that both pattern.test("a") and pattern.test("1") are unexpectedly returning true. Can anyone explain why th ...

When you utilize useSelector, the state may be returned as undefined even after it has been initialized

In the process of developing a project that mirrors Twitter(X), my approach involves implementing state management with REDUX and maintaining persistent login using redux-persist. I am storing the user's username and token in both the Redux store (for ...