\n\n \n \n\n
\n ![\"npm](\"https://badge.fury.io/js/pusher-js-mock.svg\"){kind=icon}
\n ![\"GitHub](\"https://img.shields.io/github/check-runs/nikolalsvk/pusher-js-mock/master\")
![\"Maintainability\"](\"https://qlty.sh/badges/fafa3af3-7f17-4052-b73c-d442fd71d634/maintainability.svg\")
\n ![\"Test](\"https://qlty.sh/badges/fafa3af3-7f17-4052-b73c-d442fd71d634/test_coverage.svg\")
\n ![\"Open](\"https://www.codetriage.com/nikolalsvk/pusher-js-mock/badges/users.svg\")
\n
\n Mock Pusher.js in your JavaScript tests with ease.\n
\n\n\n## Installing ⏬\n\nUsing yarn:\n\n```\nyarn add --dev pusher-js-mock\n```\n\nOr using npm:\n\n```\nnpm install -D pusher-js-mock\n```\n\n## Usage 🛠\n\n- [Emitting an event 📶](#emitting-an-event-)\n- [Listening for an event 👂](#listening-for-an-event-)\n- [Emitting an event from connection 📶](#emitting-an-event-from-connection-)\n- [Listening for an event from connection 👂](#listening-for-an-event-from-connection-)\n- [Stubbing Pusher when imported from pusher-js package 📦](#stubbing-pusher-when-imported-from-pusher-js-package-)\n- [Stubbing Pusher when used as a global variable 🌍](#stubbing-pusher-when-used-as-a-global-variable-)\n- [Mocking presence channels](#mocking-presence-channels)\n - [Using custom authorizer](#using-custom-authorizer)\n - [Pusher events emitted by presence channels](#pusher-events-emitted-by-presence-channels)\n- [Using with Vitest](#using-with-vitest)\n\nFor more detailed examples, check out [`examples` directory](https://github.com/nikolalsvk/pusher-js-mock/tree/master/examples)\ninside the project!\n\nAlso, you can check out the\n[Docs](https://nikolalsvk.github.io/pusher-js-mock/) for even more information.\n\n### Emitting an event 📶\n\nIf you need to mock a Pusher object in your tests that can\nsubscribe to channel, it's best to use PusherMock.\n\n```javascript\nimport { PusherMock } from \"pusher-js-mock\";\n\n// initializing PusherMock\nconst pusher = new PusherMock();\n\n// subscribing to a Pusher channel\nconst channel = pusher.subscribe(\"my-channel\");\n\n// emitting an event\nchannel.emit(\"event-name\");\n```\n\n### Listening for an event 👂\n\nIf you want to check whether your callback is getting called properly, you can\nbind a callback to your channel, and then emit an event.\n\n```javascript\nimport { PusherMock } from \"pusher-js-mock\";\n\ndescribe(\"listening for an event\", () => {\n // initializing PusherMock\n const pusher = new PusherMock();\n\n // subscribing to a Pusher channel\n const channel = pusher.subscribe(\"my-channel\");\n\n // define and attach a listener\n const listener = jest.fn();\n channel.bind(\"event-name\", listener);\n\n // emitting an event\n channel.emit(\"event-name\");\n\n // Expect listener to have been called\n expect(listener).toHaveBeenCalled();\n});\n```\n\n### Emitting an event from connection 📶\n\nThe 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.\n\n```javascript\nimport { PusherMock } from \"pusher-js-mock\";\n\n// initializing PusherMock\nconst pusher = new PusherMock();\n\n// emitting connection event\npusher.connection.emit(\"event-name\");\n```\n\n### Listening for an event from connection 👂\n\nAs with channels, you can also listen to connection for events.\n\n```javascript\nimport { PusherMock } from \"pusher-js-mock\";\n\ndescribe(\"listening for an event\", () => {\n // initializing PusherMock\n const pusher = new PusherMock();\n\n // define and attach a listener\n const listener = jest.fn();\n pusher.connection.bind(\"event-name\", listener);\n\n // emitting an event\n pusher.connection.emit(\"event-name\");\n\n // Expect listener to have been called\n expect(listener).toHaveBeenCalled();\n});\n```\n\n### Stubbing Pusher when imported from pusher-js package 📦\n\nIf you're using Pusher in your code in this or similar manner:\n\n```javascript\nimport Pusher from \"pusher-js\";\n```\n\nYou will need to mock Pusher in a specific way.\n\nI suggest you use [Jest](https://jestjs.io/) to test your code.\nTo do this in Jest, you'll need something like this:\n\n```javascript\njest.mock(\"pusher-js\", () => {\n const Pusher = require(\"pusher-js-mock\").PusherMock;\n return Pusher;\n});\n```\n\nIf you have tips on how to mock this using other testing frameworks, please\nsubmit an issue or a pull request.\n\n### Stubbing Pusher when used as a global variable 🌍\n\nThis shows how to stub a pusher if you're attaching it to window object in your\nproject. If you're attaching a PusherFactory to a `window` object like this in\nyour code:\n\n```javascript\nwindow.PusherFactory = {\n pusherClient: function(pusherKey) {\n return new Pusher(pusherKey);\n }\n};\n```\n\nIt's best for you to use PusherFactoryMock.\n\n```javascript\nimport { PusherFactoryMock } from \"pusher-js-mock\";\n\n// initialize instance of PusherFactoryMock\nconst pusherFactoryMock = new PusherFactoryMock();\n// replace it with the object that is attached to a window\nwindow.PusherFactory = pusherFactoryMock;\n\n// get the Pusher client reference\npusher = pusherFactoryMock.pusherClient();\n```\n\nThis way you'll just replace your PusherFactory with PusherFactoryMock.\n\n### Mocking presence channels\n\nThis package also supports using presence channels for multiple clients. The\nmock will automatically detect when `presence-` is in the channel name and\nreturn a presence channel with `channel.members` filled out as expected. You\ncan pass in IDs and info via a custom authorizer, just as you would with the\nreal package.\n\n#### Using custom authorizer\n\nIf you want, you can pass in a custom authorizer when creating a Pusher client.\n\n```js\n// create-client.js\nimport Pusher from \"pusher-js\";\nimport { getAuthSomehow } from \"./getAuthSomehow\";\n\nexport const createClient = ({ id, info }) =>\n new Pusher(\"APP_KEY\", {\n cluster: \"APP_CLUSTER\",\n // see https://github.com/pusher/pusher-js#authorizer-function\n authorizer: ({ name }) => ({\n authorize: (socketId, callback) => {\n const auth = getAuthSomehow(id, info);\n callback(false, auth);\n }\n })\n });\n\nexport default createClient;\n```\n\n```js\n// create-client.spec.js\nimport createClient from \"../create-client\";\n\n// mock the authorize function and pusher\njest.mock(\"pusher-js\", () => require(\"pusher-js-mock\"));\njest.mock(\"../getAuthSomehow\", () => ({\n getAuthSomehow: (id, info) => ({ id, info })\n}));\n\nit(\"should create a presence channel\", async () => {\n // arrange: create pusher client\n const pusher = createClient({ id: \"my-id\", info: { role: \"moderator\" } });\n\n // act: required to ensure pusher events are called, i.e. pusher:member_added\n const presenceChannel = await pusher.subscribe(\"presence-channel\");\n\n // assert: presenceChannel has the properties we expect it to.\n expect(presenceChannel.members.myID).toBe(\"my-id\");\n expect(presenceChannel.members.me).toEqual({\n id: \"my-id\",\n info: { role: \"moderator\" }\n });\n expect(presenceChannel.members.members).toEqual({\n \"my-id\": { role: \"moderator\" }\n });\n});\n```\n\n[Check out a code example of using presence channels](https://github.com/nikolalsvk/pusher-js-mock/tree/master/examples/presence-channels)\n\n#### Pusher events emitted by presence channels\n\nThe mocked Pusher instance will also emit pusher internal events\n`pusher:subscription_succeeded`, `pusher:member_added` and\n`pusher:member_removed` to the relevant clients:\n\n```js\nit(\"should emit presence-channel events\", async () => {\n const client = createClient({ id: \"my-id\" });\n const channel = client.subscribe(\"presence-channel\");\n const listener = jest.fn();\n\n /**\n * On bind, pusher:subscription_succeded will trigger\n * for the client subscribing. Other clients will be\n * notified via pusher:member_added as below.\n */\n await channel.bind(\"pusher:subscription_succeeded\", listener);\n expect(listener).toHaveBeenCalledTimes(1);\n\n /**\n * Create and subscribe a new client that will trigger the\n * pusher:member_added event. This only gets triggered for\n * clients are not the client subscribing\n */\n channel.bind(\"pusher:member_added\", listener);\n const otherClient = createClient({ id: \"your-id\" });\n await otherClient.subscribe(\"presence-channel\");\n expect(listener).toHaveBeenCalledTimes(2);\n\n /**\n * Unsubscribe the otherClient to trigger pusher:member_removed.\n * This only gets triggered for clients that are not the client\n * unsubscribing.\n */\n channel.bind(\"pusher:member_removed\", listener);\n await otherClient.unsubscribe(\"presence-channel\");\n expect(listener).toHaveBeenCalledTimes(3);\n});\n```\n\n### Using with Vitest\n\nYou can mock Pusher.js in Vitest environment like this:\n\n```js\nvi.mock(\"pusher-js\", () => {\n return {\n __esModule: true,\n default: require(\"pusher-js-mock\").PusherMock\n };\n});\n```\n\n### [Code of Conduct](CODE_OF_CODUCT.md)\n\n### [Contributing](CONTRIBUTING.md)\n\n### Credits\n\nPhoto by [Octavian Rosca on Unsplash](https://unsplash.com/@tavi004)\n","readmeFilename":"README.md","users":{"nikolalsvk":true}}