Estoy usando VueJS y Cypress para probar la aplicación e2e. Tengo un modal donde el usuario llena un formulario y hace clic en el botón "enviar". Cuando el usuario hace clic en ese botón, deshabilitamos los campos del formulario y el botón para que el usuario no pueda completarlos o hacer clic en ellos. Después de eso, realizamos una solicitud POST para cargar los datos y cuando termina, habilitamos nuevamente (y cerramos el modal). El método que lo hace:
updateUIComponents: function(status) { this.field.disabled = status; ... this.sendButtondisabled = status; },Quiero probar si esos componentes están realmente deshabilitados, usando Cypress. Pero el problema es que parece que no puedo entender cómo puedo "congelar" la solicitud de publicación y verificar si está deshabilitada. Mi código actual se parece a:
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"); }); }); ¿Cómo puedo hacer que cy.get('div[role="dialog"]').find('button').eq(1).click() "esperar"? La forma en que puedo verificar si está deshabilitado:
cy.get('#edit-document-data-number').find('input').should('be.disabled');Si la rehabilitación ocurre solo después de la respuesta POST, agregue un retraso a la intercepción para permitir suficiente tiempo para cy.get('#edit-document-data-number').find('input').should('be.disabled') para pasar.
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) => { ...