How to freeze request to test that components are disabled using Cypress?-CodePudding

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');

CodePudding user response：

If re-enable happens only after POST response, add a delay to the intercept to allow enough time for cy.get('#edit-document-data-number').find('input').should('be.disabled') to pass.

cy.intercept('POST','**/api/update-data', {
  statusCode: 200,
  delay: 2000,                               // delay here, maybe shorter will work
  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();  
cy.get('div[role="dialog"]').find('button').eq(1).click();  

cy.get('#edit-document-data-number input')  // select in one command 
  .should('be.disabled')                    // for retry of assertion

cy.wait('@updateData')

cy.get('#edit-document-data-number input')  
  .should('not.be.disabled')                 

cy.get('@updateData').then((interception) => { 
  ...