Cypress：准备 HttpProgressEvent

Question

在 Cypress 中，我可以使用

HttpResponse

命令拦截 HTTP 调用并返回任意

intercept

：

cy.intercept("POST", 'some/url', {
  statusCode: 200,
  // etc.
});

是否可以类似地以

HttpProgressEvent

的形式准备响应？

我使用本教程开发了文件上传，具体来说

const req = new HttpRequest('GET', 'someUrl, {
  reportProgress: true
});
this.http.request(req)
  .subscribe(...);  //here all the handling stuff is located

由于文件相当大，我希望在 UI 中看到一些加载标记，并使用 Cypress 测试它是否显示。

Answer 1

对于 e2e 测试，您可以使用

cy.get()

查询来查询 UI 中的标记。

为了确保测试进度不会太快，或者始终慢到足以让测试看到标记，您可以在

cy.intercept

上使用节流阀，例如 节流或延迟响应所有传入响应。

// Throttle API responses to simulate real-world conditions
beforeEach(() => {
  cy.intercept(
    {
      url: 'http://localhost:3001/**',
      middleware: true,
    },
    (req) => {
      req.on('response', (res) => {
        // Throttle the response to 1 Mbps to simulate a
        // mobile 3G connection
        res.setThrottle(1000)
      })
    }
  )
})