E2E Angular 6 websocket 模拟

Question

我们最近开始使用 Cypress 进行带有 Angular 6 UI 的 E2E 测试。事实证明它很棒，而且在我们看来，它比 Protractor 好用得多。

我们的计划是模拟与服务器的所有交互。对于使用 cy.route() 和夹具的所有 REST/XHR 调用来说，这很容易。

但是，我们也使用网络套接字。事实证明，嘲笑与它的交互并不那么容易。

从我迄今为止所做的研究来看，我能找到的唯一建议是使用 cy.stub()。这在原则上听起来不错，但我找不到对此的任何详细说明，最好是一些使用它来模拟 Web 套接字的示例。

我认为可能有效的另一种方法是使用 Angular 的 TestBed 服务。注入我们自己的服务来处理我们与 Web 套接字的交互。

但是，其中任何一条都是正确的路线吗？任何人都可以提供任何应该做的最佳方式的例子吗？

任何让我朝着正确方向前进以帮助我入门的指示将不胜感激。谢谢。

Answer 1

经过多次尝试后，我终于想出了自己的解决方案。本质上，这来自于使用 ng.probe()。

特别是对于 Cypress，对 ng 的访问是通过 cy.window() 函数获得的，例如：

cy.window().then((win: any) => {
    const ngComponent = win.ng.probe(win.document.getElementsByTagName("component-name")[0].componentInstance;
    const myService = ngComponent.myService;
    myService.doSomething();
});

这里请注意，您通过首先获取注入该服务的组件的句柄来获取服务。就我而言，我所追求的服务被注入到应用程序根组件中，因此我得到了它的句柄，然后是我想要调用或模拟测试的 websocket 服务。