verify loading indicator shows with cypress - cypress

Question

I have the following spec:
context('Contact update', () => {
it.only('Can update contact', () => {
const address = 'new address 123'
const cardId = 'c2card-38AF429999C93B5DC844D86381734E62'
cy.viewport('macbook-15')
cy.authVisit('/contact/list')
cy.getByTestId('open-doc-Aaron Dolney-0').click()
cy.get('[name="physicaladdress"').type(`{selectall}{backspace}${address}`)
cy.getByTestId(cardId, 'save-button').click()
cy.getByTestId(cardId, 'loading')
cy.get('[name="physicaladdress"').should('have.value', address)
})
})
getByTestId is a command I wrote to reduce some boilerplate:
Cypress.Commands.add('getByTestId', (...ids) => {
const id = ids.map(id => `[data-testid="${id}"]`).join(' ')
return cy.get(id)
})
When I run this with anything other than cypress open, it fails on getting the loading indicator. I'm thinking my test endpoint is responding too fast and toggling the loading indicator too quickly.
Is there a better, more consistent, way to verify the loading indicator shows?

Answer 1

I was struggling with this as well since I wanted to make sure the loading indicator was showing so I had to get a bit crafty. I found that cy.route() has an onRequest option and that ended up being just what I needed.
https://docs.cypress.io/api/commands/route.html#Options
cy.server();
// Verify that the loading indicator is shown before the request finishes
cy.route({
url: url_of_request_that_triggers_loading,
onRequest: () => {
cy.getByTestId(cardId, 'loading');
},
});
With this implementation we run the loading expectation before the request finishes and before the loading indicator disappears.

Answer 2

I found quite a reliable although bit complicated solution to that. I uses jQuery Deferred (bundled with cypress) along with internal cypress state (via aliases).
For extensive testing of intermediate states it works great.
/**
* Workaround for delegating {#link Cypress.Chainable['intercept']} - internal Method type is
* not exported and thus delegating it is difficult. It's also difficult to extract it from
* the function type because of overloads. If any more methods are needed, feel free
* to add them here
*/
type Method = 'GET' | 'POST' | 'PATCH' | 'DELETE';
// extend this type if you need more flexibility
export interface ResponseStub {
status: number;
response: unknown;
}
/**
* Deferred needs to be wrapped in an object because wrap() acts differently on promise-like args
*/
type InertDeferred = { deferred: Deferred<Partial<ResponseStub> | undefined> };
const deferredAlias = (aliasId: string): string => `${aliasId}Deferred`;
const deferredAliasSelector = (aliasId: string): string => `#${deferredAlias(aliasId)}`;
export const deferredRequestCommand = (
method: Method,
url: string,
aliasId: string,
fixture: string,
): void => {
const deferred: InertDeferred['deferred'] = Cypress.$.Deferred();
cy.wrap({ deferred }).as(deferredAlias(aliasId));
cy.fixture(fixture).then((data) => {
cy.intercept(method, url, (req) => {
deferred
.then((stub) => {
req.reply(stub?.status || 200, stub?.response || data);
});
return deferred.promise();
});
});
};
export const resolveDeferredRequestCommand = (
aliasId: string,
stub: Partial<ResponseStub> = undefined,
): void => {
cy.get<InertDeferred>(deferredAliasSelector(aliasId))
.invoke('deferred.resolve', stub);
};