I’m using VueJS and Cypress to test the app e2e. I have a modal where user fills a form and click on the “send” button. When user clicks on that button, we disable the form fields and the button so the user won’t be able to fill/click them. After that we perform a POST request to upload the data and when it’s done, we enable again (and close the modal). The method which does it:
updateUIComponents: function(status) {
this.field.disabled = status;
...
this.sendButtondisabled = status;
},
I want to test if those components are actually disabled, using Cypress. But the problem is that I can’t seem to figure how can I “freeze” the post request and check if it’s disabled. My current code looks like:
it('Test', () => {
cy.intercept('GET','**/api/get-data', {
statusCode: 200,
fixture: 'test_input_one_record.json'
});
cy.intercept('POST','**/api/update-data', {
statusCode: 200,
fixture: 'test_input_no_data.json'
}).as('updateData');
cy.visit("http://localhost:8080");
cy.get('tbody tr').eq(0).find('td').eq(8).find('button').click(); // Open modal
cy.get('div[role="dialog"]').find('button').eq(1).click(); // Click on update button
cy.get('@updateData').then((interception) => { // Check form data parameters
assert.isNotNull(interception);
const values = parseDataRequest(interception.request);
assert.isTrue(values.data_number === "2222");
});
});
How can I make the cy.get('div[role="dialog"]').find('button').eq(1).click() “wait”? The way I can check if it’s disabled:
cy.get('#edit-document-data-number').find('input').should('be.disabled');
