Cypress testing

[gs-scooter]

Our Angular app currently subscribes to a couple of Pusher channels. Depending on the incoming push event, something will render on the front end like a popup. What I would like to do is effectively mock/simulate a push event from the server to cause the client app to act on the event, at which point I could assert via Cypress whether or not the popup element exists in the DOM.

Any ideas on how to accomplish this?

[mayteio]

@gs-scooter the updates I have been pushing (see #18 and #19) mock the pusher server more closely, allowing access to multiple clients and the pusher “instance” where you can access all channels and run callbacks on them. This might help you here.

[mayteio]

Hey @gs-scooter you can now mock individual PusherMock instances that refer to the same channels. See:

https://github.com/nikolalsvk/pusher-js-mock/blob/a4d76a114f079b54e036727059f68fe7a60f33d6/src/tests/pusher-js-mock.spec.ts#L142-L175

[maarteNNNN]

@mayteio We currently have a setting where we push everything against a REST API. However any updates are handled by Pusher. I'm currently trying to implement some tests using Cypress. I'd like to try and imitate the Pusher response. I was think about intercepting the POST request via Cypress and emitting the data as the server would via pusher-js-mock. Is the feasible?

[maarteNNNN]

I could make it happen by mounting the Pusher object (with its channels) to the window.Cypress.pusher.

let pusher 
if (window.Cypress) {
  pusher = new PusherMock();
} else {
  pusher = new Pusher(process.env.PUSHER_KEY, {
    cluster: process.env.PUSHER_CLUSTER,
    authorizer: this.pusherAuthorizer,
    encrypted: true,
  });
}
const channel = pusher.subscribe('asjdioasd');
pusher.connection.bind('connected', () => {
  channel.bind('create', (response) => {
    ...
  });

  channel.bind('update', (response) => {
    ...
  });
});

if (window.Cypress) {
  // Activates the channels by executing the `pusher.connection.bind` function
  pusher.connection.callbacks.connected[0]();
  window.Cypress.pusher = this.pusher;
}

and in Cypress:

cy.intercept('POST', `/api/v2/`, (req) => {
   window.Cypress.pusher.channels[PUSHER_CHANNEL].emit('win_created', data);
   req.reply(period);
}).as('pusherCreate');

[legroen]

Hi,

I'm facing similar issues. I have a Laravel backend that broadcasts events and a vue js frontend that does something based on the emitted events.

I want to write cypress e2e test so I'm sure the frontend behaves the way that I want it to behave.

Based on the documentation and the examples provided above, I have the following code

describe.only("presence channels", () => {
        it("removes only own callbacks from the callbacks object", async () => {
            const pusher = new PusherMock("app-key");
            pusher.subscribe("channel-name").emit("event-name", {
                task: {
                    description: "changed task",
                },
            });
        });
    });

Nothing happens in my frontend, I also see no errors.

Am I missing something or do I get it completely wrong?

[nikolalsvk]

@legroen can you try the idea in the comment above yours here https://github.com/nikolalsvk/pusher-js-mock/issues/15#issuecomment-1017700014 Seems promising 🤞