E2E Angular 6 websocket 模拟

Question

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

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

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

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

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

但这些都是正确的下山路线吗？任何人都可以提供任何应该完成的最佳方式的例子吗？

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

Answer 1

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

特别是对于赛普拉斯，通过 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 服务。

Answer 2

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

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

然后在存根服务（returns 夹具数据）中，我在 window 对象上公开了方法，以便在运行时间与存根交互，使其 return 不同的数据等

我写了一篇博客 post 解释了该方法以及提交。

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

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

您的解决方案效果如何？

E2E Angular 6 websocket 模拟

E2E Angular 6 websocket mocking

angular

websocket

angular6

cypress

angular-e2e