👋 Welcome to pusher-js-mock

Mock Pusher.js in your JavaScript tests with ease.

Installing ⏬

Using yarn:

yarn add --dev pusher-js-mock

Or using npm:

npm install -D pusher-js-mock

Usage 🛠

• Emitting an event 📶
• Listening for an event 👂
• Emitting an event from connection 📶
• Listening for an event from connection 👂
• Stubbing Pusher when imported from pusher-js package 📦
• Stubbing Pusher when used as a global variable 🌍
• Mocking presence channels
  • Using custom authorizer
  • Pusher events emitted by presence channels

For more detailed examples, check out examples directory inside the project!

Also, you can check out the Docs for even more information.

Emitting an event 📶

If you need to mock a Pusher object in your tests that can subscribe to channel, it's best to use PusherMock.

1import { PusherMock } from "pusher-js-mock";
2
3// initializing PusherMock
4const pusher = new PusherMock();
5
6// subscribing to a Pusher channel
7const channel = pusher.subscribe("my-channel");
8
9// emitting an event
10channel.emit("event-name");

Listening for an event 👂

If you want to check whether your callback is getting called properly, you can bind a callback to your channel, and then emit an event.

1import { PusherMock } from "pusher-js-mock";
2
3descibe("listening for an event", () => {
4  // initializing PusherMock
5  const pusher = new PusherMock();
6
7  // subscribing to a Pusher channel
8  const channel = pusher.subscribe("my-channel");
9
10  // define and attach a listener
11  const listener = jest.fn();
12  channel.bind("event-name", listener);
13
14  // emitting an event
15  channel.emit("event-name");
16
17  // Expect listener to have been called
18  expect(listener).toHaveBeenCalled();
19});

Emitting an event from connection 📶

The connection within pusher is mocked and can be used much like a channel channel. There's no need to subscribe to subscription as it's subscribed by default on pusher.

1import { PusherMock } from "pusher-js-mock";
2
3// initializing PusherMock
4const pusher = new PusherMock();
5
6// emitting connection event
7pusher.connection.emit("event-name");

Listening for an event from connection 👂

As with channels, you can also listen to connection for events.

1import { PusherMock } from "pusher-js-mock";
2
3descibe("listening for an event", () => {
4  // initializing PusherMock
5  const pusher = new PusherMock();
6
7  // define and attach a listener
8  const listener = jest.fn();
9  pusher.connection.bind("event-name", listener);
10
11  // emitting an event
12  pusher.connection.emit("event-name");
13
14  // Expect listener to have been called
15  expect(listener).toHaveBeenCalled();
16});

Stubbing Pusher when imported from pusher-js package 📦

If you're using Pusher in your code in this or similar manner:

1import Pusher from "pusher-js";

You will need to mock Pusher in a specific way.

I suggest you use Jest to test your code. To do this in Jest, you'll need something like this:

1jest.mock("pusher-js", () => {
2  const Pusher = require("pusher-js-mock").PusherMock;
3  return Pusher;
4});

If you have tips on how to mock this using other testing frameworks, please submit an issue or a pull request.

Stubbing Pusher when used as a global variable 🌍

This shows how to stub a pusher if you're attaching it to window object in your project. If you're attaching a PusherFactory to a window object like this in your code:

1window.PusherFactory = {
2  pusherClient: function(pusherKey) {
3    return new Pusher(pusherKey);
4  }
5};

It's best for you to use PusherFactoryMock.

1import { PusherFactoryMock } from "pusher-js-mock";
2
3// initialize instance of PusherFactoryMock
4const pusherFactoryMock = new PusherFactoryMock();
5// replace it with the object that is attached to a window
6window.PusherFactory = pusherFactoryMock;
7
8// get the Pusher client reference
9pusher = pusherFactoryMock.pusherClient();

This way you'll just replace your PusherFactory with PusherFactoryMock.

Mocking presence channels

This package also supports using presence channels for multiple clients. The mock will automatically detect when presence- is in the channel name and return a presence channel with channel.members filled out as expected. You can pass in IDs and info via a custom authorizer, just as you would with the real package.

Using custom authorizer

If you want, you can pass in a custom authorizer when creating a Pusher client.

1// create-client.js
2import Pusher from "pusher-js";
3import { getAuthSomehow } from "./getAuthSomehow";
4
5export const createClient = ({ id, info }) =>
6  new Pusher("APP_KEY", {
7    cluster: "APP_CLUSTER",
8    // see https://github.com/pusher/pusher-js#authorizer-function
9    authorizer: ({ name }) => ({
10      authorize: (socketId, callback) => {
11        const auth = getAuthSomehow(id, info);
12        callback(false, auth);
13      }
14    })
15  });
16
17export default createClient;

1// create-client.spec.js
2import createClient from "../create-client";
3
4// mock the authorize function and pusher
5jest.mock("pusher-js", () => require("pusher-js-mock"));
6jest.mock("../getAuthSomehow", () => ({
7  getAuthSomehow: (id, info) => ({ id, info })
8}));
9
10it("should create a presence channel", async () => {
11  // arrange: create pusher client
12  const pusher = createClient({ id: "my-id", info: { role: "moderator" } });
13
14  // act: required to ensure pusher events are called, i.e. pusher:member_added
15  const presenceChannel = await pusher.subscribe("presence-channel");
16
17  // assert: presenceChannel has the properties we expect it to.
18  expect(presenceChannel.members.myID).toBe("my-id");
19  expect(presenceChannel.members.me).toEqual({
20    id: "my-id",
21    info: { role: "moderator" }
22  });
23  expect(presenceChannel.members.members).toEqual({
24    "my-id": { role: "moderator" }
25  });
26});

Check out a code example of using presence channels

Pusher events emitted by presence channels

The mocked Pusher instance will also emit pusher internal events pusher:subscription_succeeded, pusher:member_added and pusher:member_removed to the relevant clients:

1it("should emit presence-channel events", async () => {
2  const client = createClient({ id: "my-id" });
3  const channel = client.subscribe("presence-channel");
4  const listener = jest.fn();
5
6  /**
7   * On bind, pusher:subscription_succeded will trigger
8   * for the client subscribing. Other clients will be
9   * notified via pusher:member_added as below.
10   */
11  await channel.bind("pusher:subscription_succeeded", listener);
12  expect(listener).toHaveBeenCalledTimes(1);
13
14  /**
15   * Create and subscribe a new client that will trigger the
16   * pusher:member_added event. This only gets triggered for
17   * clients are not the client subscribing
18   */
19  channel.bind("pusher:member_added", listener);
20  const otherClient = createClient({ id: "your-id" });
21  await otherClient.subscribe("presence-channel");
22  expect(listener).toHaveBeenCalledTimes(2);
23
24  /**
25   * Unsubscribe the otherClient to trigger pusher:member_removed.
26   * This only gets triggered for clients that are not the client
27   * unsubscribing.
28   */
29  channel.bind("pusher:member_removed", listener);
30  await otherClient.unsubscribe("presence-channel");
31  expect(listener).toHaveBeenCalledTimes(3);
32});

Code of Conduct

Contributing

Credits

Photo by Octavian Rosca on Unsplash