Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

✅ Added testing example to documentation #1

Merged
merged 1 commit into from
Aug 22, 2019
Merged

✅ Added testing example to documentation #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
49 changes: 49 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -175,6 +175,55 @@ const Example = () => {

This project was built using typescript, so types are built-in. Yeeeew!

## Testing

Typed `PusherMock`, `PusherChannelMock` and `PusherPresenceChannelMock` utils are provided based on [`pusher-js-mock`](https://github.com/nikolalsvk/pusher-js-mock) (thanks mate 🙏). Use these to stub out the client and channels, with an additional `emit` method on the channel classes.

Testing emitted events with jest can be achieved using `jest.mock` and `react-testing-library` (or `enzyme`, though your tests should reflect what the user should see **NOT** how the component handles events internally):

```tsx
// Example.tsx
import React from "react";
import { useChannel, useEvent } from "use-pusher";

const Example = () => {
const [title, setTitle] = useState();
const channel = useChannel("my-channel");
useEvent(channel, "title", ({ data }) => setTitle(data));

return <span>{title}</span>;
};

// Example.test.tsx
import { render, act } from "@testing-library/react";
import { PusherMock, PusherChannelMock } from "use-pusher";

// mock out the result of the useChannel hook
const mockChannel = new PusherChannelMock();
jest.mock("use-pusher", () => ({
...require.requireActual("use-pusher"),
useChannel: () => mockChannel
}));

test("should show a title when it receives a title event", async () => {
// mock the client
const client = { current: new PusherMock("client-key", { cluster: "ap4" }) };

// render component and provider with a mocked context value
const { findByText } = render(
<PusherProvider clientKey="client-key" cluster="ap4" value={{ client }}>
<Example />
</PusherProvider>
);

// emit an event on the mocked channel
act(() => mockChannel.emit("title", { data: "Hello world" }));

// assert expectations
expect(await findByText("Hello world")).toBeInTheDocument();
});
```

## Contributing

1. Clone the repository and run `yarn && yarn test:watch`
Expand Down
2 changes: 1 addition & 1 deletion docs/assets/js/search.js
View file
Open in desktop

Large diffs are not rendered by default.

10 changes: 5 additions & 5 deletions docs/classes/_mocks_.pusherchannelmock.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,7 @@ <h3>constructor</h3>
<li class="tsd-description">
<aside class="tsd-sources">
<ul>
<li>Defined in <a href="https://github.com/mayteio/use-pusher/blob/d440d3b/src/mocks.ts#L5">mocks.ts:5</a></li>
<li>Defined in <a href="https://github.com/mayteio/use-pusher/blob/9d4a5fb/src/mocks.ts#L6">mocks.ts:6</a></li>
</ul>
</aside>
<h4 class="tsd-returns-title">Returns <a href="_mocks_.pusherchannelmock.html" class="tsd-signature-type">PusherChannelMock</a></h4>
Expand All @@ -137,7 +137,7 @@ <h3>callbacks</h3>
<div class="tsd-signature tsd-kind-icon">callbacks<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">object</span></div>
<aside class="tsd-sources">
<ul>
<li>Defined in <a href="https://github.com/mayteio/use-pusher/blob/d440d3b/src/mocks.ts#L5">mocks.ts:5</a></li>
<li>Defined in <a href="https://github.com/mayteio/use-pusher/blob/9d4a5fb/src/mocks.ts#L6">mocks.ts:6</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
Expand Down Expand Up @@ -167,7 +167,7 @@ <h3>bind</h3>
<li class="tsd-description">
<aside class="tsd-sources">
<ul>
<li>Defined in <a href="https://github.com/mayteio/use-pusher/blob/d440d3b/src/mocks.ts#L15">mocks.ts:15</a></li>
<li>Defined in <a href="https://github.com/mayteio/use-pusher/blob/9d4a5fb/src/mocks.ts#L16">mocks.ts:16</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
Expand Down Expand Up @@ -204,7 +204,7 @@ <h3>emit</h3>
<li class="tsd-description">
<aside class="tsd-sources">
<ul>
<li>Defined in <a href="https://github.com/mayteio/use-pusher/blob/d440d3b/src/mocks.ts#L36">mocks.ts:36</a></li>
<li>Defined in <a href="https://github.com/mayteio/use-pusher/blob/9d4a5fb/src/mocks.ts#L37">mocks.ts:37</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
Expand Down Expand Up @@ -241,7 +241,7 @@ <h3>unbind</h3>
<li class="tsd-description">
<aside class="tsd-sources">
<ul>
<li>Defined in <a href="https://github.com/mayteio/use-pusher/blob/d440d3b/src/mocks.ts#L25">mocks.ts:25</a></li>
<li>Defined in <a href="https://github.com/mayteio/use-pusher/blob/9d4a5fb/src/mocks.ts#L26">mocks.ts:26</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
Expand Down
16 changes: 8 additions & 8 deletions docs/classes/_mocks_.pushermock.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,7 +119,7 @@ <h3>constructor</h3>
<li class="tsd-description">
<aside class="tsd-sources">
<ul>
<li>Defined in <a href="https://github.com/mayteio/use-pusher/blob/d440d3b/src/mocks.ts#L60">mocks.ts:60</a></li>
<li>Defined in <a href="https://github.com/mayteio/use-pusher/blob/9d4a5fb/src/mocks.ts#L61">mocks.ts:61</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
Expand Down Expand Up @@ -149,7 +149,7 @@ <h3>channels</h3>
<div class="tsd-signature tsd-kind-icon">channels<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">object</span></div>
<aside class="tsd-sources">
<ul>
<li>Defined in <a href="https://github.com/mayteio/use-pusher/blob/d440d3b/src/mocks.ts#L60">mocks.ts:60</a></li>
<li>Defined in <a href="https://github.com/mayteio/use-pusher/blob/9d4a5fb/src/mocks.ts#L61">mocks.ts:61</a></li>
</ul>
</aside>
<div class="tsd-type-declaration">
Expand All @@ -167,7 +167,7 @@ <h3>config</h3>
<div class="tsd-signature tsd-kind-icon">config<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">Config</span></div>
<aside class="tsd-sources">
<ul>
<li>Defined in <a href="https://github.com/mayteio/use-pusher/blob/d440d3b/src/mocks.ts#L59">mocks.ts:59</a></li>
<li>Defined in <a href="https://github.com/mayteio/use-pusher/blob/9d4a5fb/src/mocks.ts#L60">mocks.ts:60</a></li>
</ul>
</aside>
</section>
Expand All @@ -177,7 +177,7 @@ <h3>key</h3>
<div class="tsd-signature tsd-kind-icon">key<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span></div>
<aside class="tsd-sources">
<ul>
<li>Defined in <a href="https://github.com/mayteio/use-pusher/blob/d440d3b/src/mocks.ts#L58">mocks.ts:58</a></li>
<li>Defined in <a href="https://github.com/mayteio/use-pusher/blob/9d4a5fb/src/mocks.ts#L59">mocks.ts:59</a></li>
</ul>
</aside>
</section>
Expand All @@ -194,7 +194,7 @@ <h3>channel</h3>
<li class="tsd-description">
<aside class="tsd-sources">
<ul>
<li>Defined in <a href="https://github.com/mayteio/use-pusher/blob/d440d3b/src/mocks.ts#L73">mocks.ts:73</a></li>
<li>Defined in <a href="https://github.com/mayteio/use-pusher/blob/9d4a5fb/src/mocks.ts#L74">mocks.ts:74</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
Expand Down Expand Up @@ -226,7 +226,7 @@ <h3>disconnect</h3>
<li class="tsd-description">
<aside class="tsd-sources">
<ul>
<li>Defined in <a href="https://github.com/mayteio/use-pusher/blob/d440d3b/src/mocks.ts#L103">mocks.ts:103</a></li>
<li>Defined in <a href="https://github.com/mayteio/use-pusher/blob/9d4a5fb/src/mocks.ts#L104">mocks.ts:104</a></li>
</ul>
</aside>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
Expand All @@ -243,7 +243,7 @@ <h3>subscribe</h3>
<li class="tsd-description">
<aside class="tsd-sources">
<ul>
<li>Defined in <a href="https://github.com/mayteio/use-pusher/blob/d440d3b/src/mocks.ts#L88">mocks.ts:88</a></li>
<li>Defined in <a href="https://github.com/mayteio/use-pusher/blob/9d4a5fb/src/mocks.ts#L89">mocks.ts:89</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
Expand Down Expand Up @@ -275,7 +275,7 @@ <h3>unsubscribe</h3>
<li class="tsd-description">
<aside class="tsd-sources">
<ul>
<li>Defined in <a href="https://github.com/mayteio/use-pusher/blob/d440d3b/src/mocks.ts#L96">mocks.ts:96</a></li>
<li>Defined in <a href="https://github.com/mayteio/use-pusher/blob/9d4a5fb/src/mocks.ts#L97">mocks.ts:97</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
Expand Down
12 changes: 6 additions & 6 deletions docs/classes/_mocks_.pusherpresencechannelmock.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -131,7 +131,7 @@ <h3>constructor</h3>
<aside class="tsd-sources">
<p>Overrides <a href="_mocks_.pusherchannelmock.html">PusherChannelMock</a>.<a href="_mocks_.pusherchannelmock.html#constructor">constructor</a></p>
<ul>
<li>Defined in <a href="https://github.com/mayteio/use-pusher/blob/d440d3b/src/mocks.ts#L48">mocks.ts:48</a></li>
<li>Defined in <a href="https://github.com/mayteio/use-pusher/blob/9d4a5fb/src/mocks.ts#L49">mocks.ts:49</a></li>
</ul>
</aside>
<h4 class="tsd-returns-title">Returns <a href="_mocks_.pusherpresencechannelmock.html" class="tsd-signature-type">PusherPresenceChannelMock</a></h4>
Expand All @@ -148,7 +148,7 @@ <h3>callbacks</h3>
<aside class="tsd-sources">
<p>Inherited from <a href="_mocks_.pusherchannelmock.html">PusherChannelMock</a>.<a href="_mocks_.pusherchannelmock.html#callbacks">callbacks</a></p>
<ul>
<li>Defined in <a href="https://github.com/mayteio/use-pusher/blob/d440d3b/src/mocks.ts#L5">mocks.ts:5</a></li>
<li>Defined in <a href="https://github.com/mayteio/use-pusher/blob/9d4a5fb/src/mocks.ts#L6">mocks.ts:6</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
Expand All @@ -171,7 +171,7 @@ <h3>members</h3>
<div class="tsd-signature tsd-kind-icon">members<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">object</span></div>
<aside class="tsd-sources">
<ul>
<li>Defined in <a href="https://github.com/mayteio/use-pusher/blob/d440d3b/src/mocks.ts#L48">mocks.ts:48</a></li>
<li>Defined in <a href="https://github.com/mayteio/use-pusher/blob/9d4a5fb/src/mocks.ts#L49">mocks.ts:49</a></li>
</ul>
</aside>
<div class="tsd-type-declaration">
Expand Down Expand Up @@ -205,7 +205,7 @@ <h3>bind</h3>
<aside class="tsd-sources">
<p>Inherited from <a href="_mocks_.pusherchannelmock.html">PusherChannelMock</a>.<a href="_mocks_.pusherchannelmock.html#bind">bind</a></p>
<ul>
<li>Defined in <a href="https://github.com/mayteio/use-pusher/blob/d440d3b/src/mocks.ts#L15">mocks.ts:15</a></li>
<li>Defined in <a href="https://github.com/mayteio/use-pusher/blob/9d4a5fb/src/mocks.ts#L16">mocks.ts:16</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
Expand Down Expand Up @@ -243,7 +243,7 @@ <h3>emit</h3>
<aside class="tsd-sources">
<p>Inherited from <a href="_mocks_.pusherchannelmock.html">PusherChannelMock</a>.<a href="_mocks_.pusherchannelmock.html#emit">emit</a></p>
<ul>
<li>Defined in <a href="https://github.com/mayteio/use-pusher/blob/d440d3b/src/mocks.ts#L36">mocks.ts:36</a></li>
<li>Defined in <a href="https://github.com/mayteio/use-pusher/blob/9d4a5fb/src/mocks.ts#L37">mocks.ts:37</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
Expand Down Expand Up @@ -281,7 +281,7 @@ <h3>unbind</h3>
<aside class="tsd-sources">
<p>Inherited from <a href="_mocks_.pusherchannelmock.html">PusherChannelMock</a>.<a href="_mocks_.pusherchannelmock.html#unbind">unbind</a></p>
<ul>
<li>Defined in <a href="https://github.com/mayteio/use-pusher/blob/d440d3b/src/mocks.ts#L25">mocks.ts:25</a></li>
<li>Defined in <a href="https://github.com/mayteio/use-pusher/blob/9d4a5fb/src/mocks.ts#L26">mocks.ts:26</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
Expand Down
49 changes: 47 additions & 2 deletions docs/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ <h1>use-pusher</h1>
<blockquote>
<p>Easy as hooks that integrate with the <a href="https://github.com/pusher/pusher-js">pusher-js</a> library.</p>
</blockquote>
<p><a href="https://www.npmjs.com/package/react-pusher-hooks"><img src="https://img.shields.io/npm/v/use-pusher.svg" alt="NPM"></a> <a href="https://standardjs.com"><img src="https://img.shields.io/badge/code_style-standard-brightgreen.svg" alt="JavaScript Style Guide"></a></p>
<p><a href="https://www.npmjs.com/package/react-pusher-hooks"><img src="https://img.shields.io/npm/v/use-pusher.svg" alt="NPM"></a> <img src="https://badgen.net/badge//types/Typescript?icon=typescript" alt="Typed"></p>
<a href="#a-hrefhttpsmayteiogithubiouse-pusherapi-referencedocsa" id="a-hrefhttpsmayteiogithubiouse-pusherapi-referencedocsa" style="color: inherit; text-decoration: none;">
<h5><a href="https://mayteio.github.io/use-pusher/">API Reference/Docs</a></h5>
</a>
Expand Down Expand Up @@ -158,7 +158,7 @@ <h2><code>useEvent</code></h2>
<h2><code>useTrigger</code></h2>
</a>
<p>A helper function to create a <strong>server triggered</strong> event. BYO server (See <a href="#trigger-server">Trigger Server</a> below). Pass in <code>triggerEndpoint</code> prop to <code>&lt;PusherProvider /&gt;</code>. Any auth headers from config.auth.headers automatically get passed to the <code>fetch</code> call.</p>
<pre><code class="language-tsx">import {useTrigger} from &#39;use-pusher`;
<pre><code class="language-tsx">import {useTrigger} from &#39;use-pusher&#39;;

const Example = () =&gt; {.
const trigger = useTrigger();
Expand Down Expand Up @@ -218,6 +218,51 @@ <h2>Trigger Server</h2>
<h2>Typescript</h2>
</a>
<p>This project was built using typescript, so types are built-in. Yeeeew!</p>
<a href="#testing" id="testing" style="color: inherit; text-decoration: none;">
<h2>Testing</h2>
</a>
<p>Typed <code>PusherMock</code>, <code>PusherChannelMock</code> and <code>PusherPresenceChannelMock</code> utils are provided based on <a href="https://github.com/nikolalsvk/pusher-js-mock"><code>pusher-js-mock</code></a> (thanks mate 🙏). Use these to stub out the client and channels, with an additional <code>emit</code> method on the channel classes.</p>
<p>Testing emitted events with jest can be achieved using <code>jest.mock</code> and <code>react-testing-library</code> (or <code>enzyme</code>, though your tests should reflect what the user should see <strong>NOT</strong> how the component handles events internally):</p>
<pre><code class="language-tsx">// Example.tsx
import React from &quot;react&quot;;
import { useChannel, useEvent } from &quot;use-pusher&quot;;

const Example = () =&gt; {
const [title, setTitle] = useState();
const channel = useChannel(&quot;my-channel&quot;);
useEvent(channel, &quot;title&quot;, ({ data }) =&gt; setTitle(data));

return &lt;span&gt;{title}&lt;/span&gt;;
};

// Example.test.tsx
import { render, act } from &quot;@testing-library/react&quot;;
import { PusherMock, PusherChannelMock } from &quot;use-pusher&quot;;

// mock out the result of the useChannel hook
const mockChannel = new PusherChannelMock();
jest.mock(&quot;use-pusher&quot;, () =&gt; ({
...require.requireActual(&quot;use-pusher&quot;),
useChannel: () =&gt; mockChannel
}));

test(&quot;should show a title when it receives a title event&quot;, async () =&gt; {
// mock the client
const client = { current: new PusherMock(&quot;client-key&quot;, { cluster: &quot;ap4&quot; }) };

// render component and provider with a mocked context value
const { findByText } = render(
&lt;PusherProvider clientKey=&quot;client-key&quot; cluster=&quot;ap4&quot; value={{ client }}&gt;
&lt;Example /&gt;
&lt;/PusherProvider&gt;
);

// emit an event on the mocked channel
act(() =&gt; mockChannel.emit(&quot;title&quot;, { data: &quot;Hello world&quot; }));

// assert expectations
expect(await findByText(&quot;Hello world&quot;)).toBeInTheDocument();
});</code></pre>
<a href="#contributing" id="contributing" style="color: inherit; text-decoration: none;">
<h2>Contributing</h2>
</a>
Expand Down
18 changes: 2 additions & 16 deletions docs/interfaces/_types_.pushercontextvalues.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,6 @@ <h2>Index</h2>
<h3>Properties</h3>
<ul class="tsd-index-list">
<li class="tsd-kind-property tsd-parent-kind-interface"><a href="_types_.pushercontextvalues.html#client" class="tsd-kind-icon">client</a></li>
<li class="tsd-kind-property tsd-parent-kind-interface"><a href="_types_.pushercontextvalues.html#pusheroptions" class="tsd-kind-icon">pusher<wbr>Options</a></li>
<li class="tsd-kind-property tsd-parent-kind-interface"><a href="_types_.pushercontextvalues.html#triggerendpoint" class="tsd-kind-icon">trigger<wbr>Endpoint</a></li>
</ul>
</section>
Expand All @@ -100,17 +99,7 @@ <h3><span class="tsd-flag ts-flagOptional">Optional</span> client</h3>
<div class="tsd-signature tsd-kind-icon">client<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">undefined</span></div>
<aside class="tsd-sources">
<ul>
<li>Defined in <a href="https://github.com/mayteio/use-pusher/blob/d440d3b/src/types.ts#L5">types.ts:5</a></li>
</ul>
</aside>
</section>
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface">
<a name="pusheroptions" class="tsd-anchor"></a>
<h3><span class="tsd-flag ts-flagOptional">Optional</span> pusher<wbr>Options</h3>
<div class="tsd-signature tsd-kind-icon">pusher<wbr>Options<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">Config</span></div>
<aside class="tsd-sources">
<ul>
<li>Defined in <a href="https://github.com/mayteio/use-pusher/blob/d440d3b/src/types.ts#L7">types.ts:7</a></li>
<li>Defined in <a href="https://github.com/mayteio/use-pusher/blob/9d4a5fb/src/types.ts#L5">types.ts:5</a></li>
</ul>
</aside>
</section>
Expand All @@ -120,7 +109,7 @@ <h3><span class="tsd-flag ts-flagOptional">Optional</span> trigger<wbr>Endpoint<
<div class="tsd-signature tsd-kind-icon">trigger<wbr>Endpoint<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">undefined</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">string</span></div>
<aside class="tsd-sources">
<ul>
<li>Defined in <a href="https://github.com/mayteio/use-pusher/blob/d440d3b/src/types.ts#L6">types.ts:6</a></li>
<li>Defined in <a href="https://github.com/mayteio/use-pusher/blob/9d4a5fb/src/types.ts#L6">types.ts:6</a></li>
</ul>
</aside>
</section>
Expand Down Expand Up @@ -168,9 +157,6 @@ <h3><span class="tsd-flag ts-flagOptional">Optional</span> trigger<wbr>Endpoint<
<li class=" tsd-kind-property tsd-parent-kind-interface">
<a href="_types_.pushercontextvalues.html#client" class="tsd-kind-icon">client</a>
</li>
<li class=" tsd-kind-property tsd-parent-kind-interface">
<a href="_types_.pushercontextvalues.html#pusheroptions" class="tsd-kind-icon">pusher<wbr>Options</a>
</li>
<li class=" tsd-kind-property tsd-parent-kind-interface">
<a href="_types_.pushercontextvalues.html#triggerendpoint" class="tsd-kind-icon">trigger<wbr>Endpoint</a>
</li>
Expand Down
Loading