Макет imgur запрос / ответ в тесте Cypress

Question

Я пытаюсь заглушить имгурский запрос и ответ. Согласно документации API , я могу сделать анонимный запрос следующим образом:

curl --location --request POST 'https://api.imgur.com/3/image' \
--header 'Authorization: Client-ID {{clientId}}' \
--form 'image=R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'

, и ответ будет следующим (для которого я создал приспособление, как navbar-logo-image.json)

{
  "data": {
    "id": "orunSTu",
    "title": null,
    "description": null,
    "datetime": 1587998106,
    "type": "image/png",
    "animated": false,
    "width": 2100,
    "height": 1709,
    "size": 138557,
    "views": 0,
    "bandwidth": 0,
    "vote": null,
    "favorite": false,
    "nsfw": null,
    "section": null,
    "account_url": null,
    "account_id": 0,
    "is_ad": false,
    "in_most_viral": false,
    "tags": [],
    "ad_type": 0,
    "ad_url": "",
    "in_gallery": false,
    "deletehash": "N9YaI4CIkq3rIar",
    "name": "",
    "link": "https://i.imgur.com/12gZbNU.png"
  },
  "success": true,
  "status": 200
}

Мой тестовый сценарий выглядит следующим образом:

it('should allow the user to select a navbar component and replace a logo', () => {
  cy.server();
  cy.route({
    url: '/3/image',
    method: 'POST',
    response: "fixture:navbar-logo-image.json",
  }).as('imgurRequest');
  cy.getIframeBody('builder-showcase').find('[data-cy="navbar-component"]').eq(0).click();
  cy.getIframeBody('builder-showcase').find('[data-cy="navbar-logo-image"]').eq(0).click();
  cy.get('[data-cy="builder-sidebar-menu-select-image-navbar"]').eq(0).click();
  const navbarLogoImage = 'images/navbar-logo-image.png';
  cy.get('[data-cy="image-file-input"]').attachFile(navbarLogoImage);
  cy.get('[data-cy="image-alt-text"]')
    .clear()
    .type('Twitter logo image');
  cy.get('.source-image').invoke('attr', 'src')
    .then(uploadedLogoImage => {
      expect(uploadedLogoImage).to.contain('iVBORw0KGgoAAAANSUhEUgAACDQAAAatCAYAAAAmAogfAAAgAElEQVR4XuzdC5icdXn38');
    });
  cy.get('[data-cy=image-select-save]').click();
});

В этой строке запускается вызов API cy.get('[data-cy=image-select-save]').click();. Я хочу перехватить его и сделать пост в фиктивном API, а затем предоставить фиктивный ответ. Как я go об этом?

Answer 1

Если ваши параметры в cy.request() верны, вы уже настроены на перехват вызова и высмеивание ответа на ваше устройство json. Затем вы можете использовать cy.wait(), чтобы получить объект http, содержащий запрос и ответ:

cy.get('[data-cy=image-select-save]').click();
cy.wait('@imgurRequest').then(xhr => {
    // do something with the xhr object
});

Убедитесь, что ваш запрос не относится к типу fetch, поскольку кипарис пока не может перехватить fetch запросов. Кроме того, я рекомендую использовать шаблон glob в параметре url в cy.request() как url: '*/3/image'