i have some vue ant-design code

<a-form...>
  <button @click="submit"
</a-form>
<script>
...
methods: {
 submit() {
   return this.axios({
     method: "POST",
     data: this.form
   }).then(...)
 }
}

i want to create e2e test, which type form and submit this by click button.

...
cy.get("[data-testid=submit-form").click();

but how i can wait when submit axios will call then-callback? cy.wait() is a bad solution for this.

use cy.request it is not 100% user case, its javascript trigger

CodePudding user response：

The usual way to go about this is:

1. define a route with cy.intercept()
2. click the button
3. wait for the response with cy.wait() to the route from 1.

To show it in one example:

cy // 1.
  .intercept('POST', '/change-ad')
  .as('changeAd');

cy // 2.
  .get('#save-button')
  .click();

cy // 3.
  .wait('@changeAd')
  .its('response.statusCode')
  .should('eq', 201);

Obviously you can check other things on the UI after the response has arrived, that is after 3.

For some specific cases where you want to check how the UI reacts to some backend data without actually setting up the backend data first, you can "fake" the response (and status code and what not) in cy.intercept(). This is called stubbing.