CODEWITHSUNDEEP
javascriptintegration-testingcypress
Georgi
Georgi

Reputation: 329

How could we initialize Cypress intercepts, in beforeEach properly?

I am relatively new to Cypress and even though it looks straightforward, there some things that I still don't understand. The particular problem:

  const componentsRouteMatcher = {
    pathname: '/component-management/api/components',
    query: {
      size: '5',
      page: '0',
      property: 'name',
      direction: 'asc',
      activated: 'true',
      organisationId: '33'
    }
  };

    beforeEach(() => {
   

    cy.interceptStaticDataCalls(); // just a custom command, containing interceptors registrations

    cy.intercept(componentsRouteMatcher, {fixture: 'components/first-5.json'}).as('first5');

    const composSecond5Route = Object.assign({}, componentsRouteMatcher, {query: {page: '1'}});
    cy.intercept(composSecond5Route, {fixture: 'components/second-5.json'}).as('second5');

    const composFirst50Route = Object.assign({}, componentsRouteMatcher, {query: {size: '50'}});
    cy.intercept(composFirst50Route, {fixture: 'components/first-50.json'}).as('first50');

    const composFirst20Route = Object.assign({}, componentsRouteMatcher, {query: {size: '20'}});
    cy.intercept(composFirst20Route, {fixture: 'components/first-20.json'}).as('first20');


    cy.intercept('/component-management/api/functional-areas', {fixture: 'functional-areas/functional-areas.json'}).as('fa');

  });

 it('should display all components based on a default filter', () => {
    cy.visit("/");
    cy.wait(['@first20', '@fa'], {timeout: 5000});
});

So the problem is in the last interceptor - it loads a fixture (a JSON file that is a few MB big) but it never intercepts. The contradictive part is that it's listed in the list of available routes by Cypress. When I move the particular interceptor, at the beginning of beforeEach, it works. I guess there's some async process happening underneath but is not intuitive at all. Is there any controlled way to setup all those interceptors, without guessing which one to be placed when?

Thank you in advance!

UPDATE:

// standard set of initializations that will be required for all tests
Cypress.Commands.add('interceptStaticDataCalls', () => {
  cy.intercept('/component-management/api/jira/project', { fixture: 'projects.json'});
  cy.intercept('/component-management/api/appclientrelationships/apps', { fixture: 'apps.json'});
  cy.intercept('/component-management/api/appclientrelationships/clients', { fixture: 'clients.json'});
  cy.intercept('/component-management/api/appclientrelationships', { fixture: 'appClientRelationships.json'});
  cy.intercept('/component-management/api/usergroups', { fixture: 'usergroups.json'});
  cy.intercept('/component-management/api/organisations', { fixture: 'organisations.json'});
  cy.intercept('/component-management/api/configs', { fixture: 'configs.json'});
  //we must use pathname here, otherwise it would intercept also the current user request
  cy.intercept({pathname: '/component-management/api/users'}, { fixture: 'users.json'});
})

Upvotes: 4

Views: 5247

Answers (1)

Georgi
Georgi

Reputation: 329

After some reading of Cypress sources, I realized that indeed, almost everything in Cypress is async, as well as the requests interceptors registration (event driven). To make sure I "visit" the home page, after having all interceptors registered, I just extracted everything into an async function (of course annotated all async processes with await) and then I visit the "/". See the working example bellow:

async function initTests() {

  cy.interceptStaticDataCalls();

  await cy.intercept(componentsRouteMatcher, {fixture: 'components/first-5.json'}).as('first5');

  const composSecond5Route = Object.assign({}, componentsRouteMatcher, {query: {page: '1'}});
  await cy.intercept(composSecond5Route, {fixture: 'components/second-5.json'}).as('second5');

  const composFirst50Route = Object.assign({}, componentsRouteMatcher, {query: {size: '50'}});
  await cy.intercept(composFirst50Route, {fixture: 'components/first-50.json'}).as('first50');

  const composFirst20Route = Object.assign({}, componentsRouteMatcher, {query: {size: '20'}});
  await cy.intercept(composFirst20Route, {fixture: 'components/first-20.json'}).as('first20');

  await cy.intercept('/component-management/api/functional-areas', {fixture: 'functional-areas/functional-areas.json'}).as('fa');
}


.....

  beforeEach( () => {
    initTests().then( () => {
      console.log('Initialized!');
      cy.visit("/");
    })
  });

Upvotes: 4

Related Questions