We've recently started using Cypress for our E2E tests with our Angular 6 UI. It's proving to be great and, in our opinion, much better to use than Protractor.
Our plan is to mock all interactions with the server. This has been easy for all REST/XHR calls using cy.route() and fixtures.
However, we also use a web socket. And mocking the interactions with that is proving to be not at all so easy.
From the research I've done so far, the only advice I can find suggests using cy.stub(). Which sounds fine in principal but I can't find any elaboration on this, ideally with some examples of using it to mock a web socket.
Another approach I thought might work is to use Angular's TestBed service. Injecting our own service that handles our interaction with the web socket.
But are either of those the correct route to go down? Can anyone provide any examples of the best way it should be done?
Any pointers to get me going in the right direction to get me started will be massively appreciated. Thanks.
After much playing around with this, I finally came up with my own solution. Essentially this comes from using ng.probe().
Specifically for Cypress, access to ng is obtained via the cy.window() function, e.g.:
cy.window().then((win: any) => {
const ngComponent = win.ng.probe(win.document.getElementsByTagName("component-name")[0].componentInstance;
const myService = ngComponent.myService;
myService.doSomething();
});
Note here that you get to a service by first getting a handle on a component that injects that service. In my case the services I was after were injected in to the app-root component so I got a handle on that and then to the websocket service I wanted to call or mock for my tests.