E2E Angular 6 websocket 模拟

Question

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

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

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

根据我目前所做的研究，我能找到的唯一建议是使用 cy.stub()。原则上这听起来不错，但我找不到任何详细说明，最好是一些使用它来模拟网络套接字的示例。

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

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

任何能让我朝着正确的方向前进的指示，我们都将不胜感激。谢谢。

Answer 1

我在工作中遇到了类似的问题，最终得到了与您类似的解决方案（我认为）。

我们的应用程序依赖于另一个库，它做一些网络工作。我没有使用 TestBed 或类似工具，而是使用 Angular 的环境文件来为 e2e 测试提供不同的服务，该服务遵循与真实服务相同的接口。

然后在存根服务（返回固定数据）中，我在窗口对象上公开了用于在运行时与存根交互以使其返回不同数据等的方法。

我已经发表了一篇博文，解释了这种方法以及提交。

http://wtfisanapi.com/htf-do-i-write-e2e-tests-with-a-stubbed-dependency-angular-nrwl-nx-edition/

完整代码可以在这里找到https://github.com/robt1019/e2e-stub-demo

您的解决方案效果如何？

Answer 2

在玩了这么多之后，我终于想出了自己的解决方案。本质上，这来自使用 ng.probe()。

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

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

在此请注意，您首先要获得注入该服务的组件的句柄才能访问该服务。在我的情况下，我所追求的服务被注入到 app-root 组件中，所以我得到了一个处理，然后我想调用或模拟我的测试的 websocket 服务。