Initial commit

This commit is contained in:
2025-12-27 20:24:47 +01:00
commit 7b6f164130
5573 changed files with 727178 additions and 0 deletions

58
node_modules/jest-websocket-mock/CONTRIBUTING.md generated vendored Normal file
View File

@@ -0,0 +1,58 @@
# Contributing to jest-websocket-mock
## Set up the workspace
Fork the project, clone your fork, configure the remotes and install the dependencies:
First, you'll need to [Fork the project, clone your fork and configure the remote](https://guides.github.com/activities/forking/).
```bash
# Install the dependencies
npm install
# Navigate to the examples folder to set up the environment for working on the examples
cd examples
npm install
cd ..
```
## Working with the code
### Prettier
This codebase is formatted using [prettier](https://prettier.io/).
- To check that the code is correctly formatted, run `npm run prettier:check`.
- To automatically reformat the code with prettier, run `npm run prettier:apply`.
### TypeScript
This codebase is written in [TypeScript](https://www.typescriptlang.org/).
- To type-check the source tree, run `npm run type:check`.
### Tests
To ensure consistency and quality, we enforce 100% test coverage, both for the `jest-websocket-mock` source code and for the [examples](https://github.com/romgain/jest-websocket-mock/blob/master/examples/src).
- To run the tests ,run `npm test -- --coverage`.
- To run the examples tests, run `SKIP_PREFLIGHT_CHECK=true npm test -- --coverage` in the `examples` folder. The `SKIP_PREFLIGHT_CHECK=true` environment variable is needed because Create React App detects a different jest version in the root folder (even if it doesn't use it).
### Testing the example app against a local build of the library
To ensure that a new library build stays backwards compatible,
it is useful to run the tests for the example app using a local library build.
To do so:
```bash
# build the library
npm run build
# generate a local library package
npm pack
# navigate to the examples folder
cd examples
# install the local library package
npm install ../jest-websocket-mock-*
# run the examples test suite
SKIP_PREFLIGHT_CHECK=true npm test -- --coverage
cd ..
```

19
node_modules/jest-websocket-mock/LICENSE.txt generated vendored Normal file
View File

@@ -0,0 +1,19 @@
Copyright 2018 Romain Bertrand
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

352
node_modules/jest-websocket-mock/README.md generated vendored Normal file
View File

@@ -0,0 +1,352 @@
# Jest websocket mock
[![npm version](https://badge.fury.io/js/jest-websocket-mock.svg)](https://badge.fury.io/js/jest-websocket-mock)
[![Build Status](https://github.com/romgain/jest-websocket-mock/actions/workflows/ci.yml/badge.svg)](https://github.com/romgain/jest-websocket-mock/actions)
[![Coverage report](https://codecov.io/gh/romgain/jest-websocket-mock/branch/master/graph/badge.svg)](https://codecov.io/gh/romgain/jest-websocket-mock)
[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)
A set of utilities and Jest matchers to help testing complex websocket interactions.
**Examples:**
Several examples are provided in the [examples folder](https://github.com/romgain/jest-websocket-mock/blob/master/examples/).
In particular:
- [testing a redux saga that manages a websocket connection](https://github.com/romgain/jest-websocket-mock/blob/master/examples/redux-saga/src/__tests__/saga.test.js)
- [testing a component using the saga above](https://github.com/romgain/jest-websocket-mock/blob/master/examples/redux-saga/src/__tests__/App.test.js)
- [testing a component that manages a websocket connection using react hooks](https://github.com/romgain/jest-websocket-mock/blob/master/examples/hooks/src/App.test.tsx)
## Install
```bash
npm install --save-dev jest-websocket-mock
```
## Mock a websocket server
### The `WS` constructor
`jest-websocket-mock` exposes a `WS` class that can instantiate mock websocket
servers that keep track of the messages they receive, and in turn
can send messages to connected clients.
```js
import WS from "jest-websocket-mock";
// create a WS instance, listening on port 1234 on localhost
const server = new WS("ws://localhost:1234");
// real clients can connect
const client = new WebSocket("ws://localhost:1234");
await server.connected; // wait for the server to have established the connection
// the mock websocket server will record all the messages it receives
client.send("hello");
// the mock websocket server can also send messages to all connected clients
server.send("hello everyone");
// ...simulate an error and close the connection
server.error();
// ...or gracefully close the connection
server.close();
// The WS class also has a static "clean" method to gracefully close all open connections,
// particularly useful to reset the environment between test runs.
WS.clean();
```
The `WS` constructor also accepts an optional options object as second argument:
- `jsonProtocol: true` can be used to automatically serialize and deserialize JSON messages:
```js
const server = new WS("ws://localhost:1234", { jsonProtocol: true });
server.send({ type: "GREETING", payload: "hello" });
```
- The `mock-server` options `verifyClient` and `selectProtocol` are directly passed-through to the mock-server's constructor.
### Attributes of a `WS` instance
A `WS` instance has the following attributes:
- `connected`: a Promise that resolves every time the `WS` instance receives a
new connection. The resolved value is the `WebSocket` instance that initiated
the connection.
- `closed`: a Promise that resolves every time a connection to a `WS` instance
is closed.
- `nextMessage`: a Promise that resolves every time a `WS` instance receives a
new message. The resolved value is the received message (deserialized as a
JavaScript Object if the `WS` was instantiated with the `{ jsonProtocol: true }`
option).
### Methods on a `WS` instance
- `send`: send a message to all connected clients. (The message will be
serialized from a JavaScript Object to a JSON string if the `WS` was
instantiated with the `{ jsonProtocol: true }` option).
- `close`: gracefully closes all opened connections.
- `error`: sends an error message to all connected clients and closes all
opened connections.
- `on`: attach event listeners to handle new `connection`, `message` and `close` events. The callback receives the `socket` as its only argument.
## Run assertions on received messages
`jest-websocket-mock` registers custom jest matchers to make assertions
on received messages easier:
- `.toReceiveMessage`: async matcher that waits for the next message received
by the the mock websocket server, and asserts its content. It will time out
with a helpful message after 1000ms.
- `.toHaveReceivedMessages`: synchronous matcher that checks that all the
expected messages have been received by the mock websocket server.
### Run assertions on messages as they are received by the mock server
```js
test("the server keeps track of received messages, and yields them as they come in", async () => {
const server = new WS("ws://localhost:1234");
const client = new WebSocket("ws://localhost:1234");
await server.connected;
client.send("hello");
await expect(server).toReceiveMessage("hello");
expect(server).toHaveReceivedMessages(["hello"]);
});
```
### Send messages to the connected clients
```js
test("the mock server sends messages to connected clients", async () => {
const server = new WS("ws://localhost:1234");
const client1 = new WebSocket("ws://localhost:1234");
await server.connected;
const client2 = new WebSocket("ws://localhost:1234");
await server.connected;
const messages = { client1: [], client2: [] };
client1.onmessage = (e) => {
messages.client1.push(e.data);
};
client2.onmessage = (e) => {
messages.client2.push(e.data);
};
server.send("hello everyone");
expect(messages).toEqual({
client1: ["hello everyone"],
client2: ["hello everyone"],
});
});
```
### JSON protocols support
`jest-websocket-mock` can also automatically serialize and deserialize
JSON messages:
```js
test("the mock server seamlessly handles JSON protocols", async () => {
const server = new WS("ws://localhost:1234", { jsonProtocol: true });
const client = new WebSocket("ws://localhost:1234");
await server.connected;
client.send(`{ "type": "GREETING", "payload": "hello" }`);
await expect(server).toReceiveMessage({ type: "GREETING", payload: "hello" });
expect(server).toHaveReceivedMessages([
{ type: "GREETING", payload: "hello" },
]);
let message = null;
client.onmessage = (e) => {
message = e.data;
};
server.send({ type: "CHITCHAT", payload: "Nice weather today" });
expect(message).toEqual(`{"type":"CHITCHAT","payload":"Nice weather today"}`);
});
```
### verifyClient server option
A `verifyClient` function can be given in the options for the `jest-websocket-mock` constructor.
This can be used to test behaviour for a client that connects to a WebSocket server it's blacklisted from for example.
**Note** : _Currently `mock-socket`'s implementation does not send any parameters to this function (unlike the real `ws` implementation)._
```js
test("rejects connections that fail the verifyClient option", async () => {
new WS("ws://localhost:1234", { verifyClient: () => false });
const errorCallback = jest.fn();
await expect(
new Promise((resolve, reject) => {
errorCallback.mockImplementation(reject);
const client = new WebSocket("ws://localhost:1234");
client.onerror = errorCallback;
client.onopen = resolve;
})
// WebSocket onerror event gets called with an event of type error and not an error
).rejects.toEqual(expect.objectContaining({ type: "error" }));
});
```
### selectProtocol server option
A `selectProtocol` function can be given in the options for the `jest-websocket-mock` constructor.
This can be used to test behaviour for a client that connects to a WebSocket server using the wrong protocol.
```js
test("rejects connections that fail the selectProtocol option", async () => {
const selectProtocol = () => null;
new WS("ws://localhost:1234", { selectProtocol });
const errorCallback = jest.fn();
await expect(
new Promise((resolve, reject) => {
errorCallback.mockImplementationOnce(reject);
const client = new WebSocket("ws://localhost:1234", "foo");
client.onerror = errorCallback;
client.onopen = resolve;
})
).rejects.toEqual(
// WebSocket onerror event gets called with an event of type error and not an error
expect.objectContaining({
type: "error",
currentTarget: expect.objectContaining({ protocol: "foo" }),
})
);
});
```
### Sending errors
```js
test("the mock server sends errors to connected clients", async () => {
const server = new WS("ws://localhost:1234");
const client = new WebSocket("ws://localhost:1234");
await server.connected;
let disconnected = false;
let error = null;
client.onclose = () => {
disconnected = true;
};
client.onerror = (e) => {
error = e;
};
server.send("hello everyone");
server.error();
expect(disconnected).toBe(true);
expect(error.origin).toBe("ws://localhost:1234/");
expect(error.type).toBe("error");
});
```
### Add custom event listeners
#### For instance, to refuse connections:
```js
it("the server can refuse connections", async () => {
const server = new WS("ws://localhost:1234");
server.on("connection", (socket) => {
socket.close({ wasClean: false, code: 1003, reason: "NOPE" });
});
const client = new WebSocket("ws://localhost:1234");
client.onclose = (event: CloseEvent) => {
expect(event.code).toBe(1003);
expect(event.wasClean).toBe(false);
expect(event.reason).toBe("NOPE");
};
expect(client.readyState).toBe(WebSocket.CONNECTING);
await server.connected;
expect(client.readyState).toBe(WebSocket.CLOSING);
await server.closed;
expect(client.readyState).toBe(WebSocket.CLOSED);
});
```
### Environment set up and tear down between tests
You can set up a mock server and a client, and reset them between tests:
```js
beforeEach(async () => {
server = new WS("ws://localhost:1234");
client = new WebSocket("ws://localhost:1234");
await server.connected;
});
afterEach(() => {
WS.clean();
});
```
## Known issues
`mock-socket` has a strong usage of delays (`setTimeout` to be more specific). This means using `jest.useFakeTimers();` will cause issues such as the client appearing to never connect to the server.
While running the websocket server from tests within the jest-dom environment (as opposed to node)
you may see errors of the nature:
```bash
ReferenceError: setImmediate is not defined
```
You can work around this by installing the setImmediate shim from
[https://github.com/YuzuJS/setImmediate](https://github.com/YuzuJS/setImmediate) and
adding `require('setimmediate');` to your `setupTests.js`.
## Testing React applications
When testing React applications, `jest-websocket-mock` will look for
`@testing-library/react`'s implementation of [`act`](https://reactjs.org/docs/test-utils.html#act).
If it is available, it will wrap all the necessary calls in `act`, so you don't have to.
If `@testing-library/react` is not available, we will assume that you're not testing a React application,
and you might need to call `act` manually.
## Using `jest-websocket-mock` to interact with a non-global WebSocket object
`jest-websocket-mock` uses [Mock Socket](https://github.com/thoov/mock-socket)
under the hood to mock out WebSocket clients.
Out of the box, Mock Socket will only mock out the global `WebSocket` object.
If you are using a third-party WebSocket client library (eg. a Node.js
implementation, like [`ws`](https://github.com/websockets/ws)), you'll need
to set up a [manual mock](https://jestjs.io/docs/en/manual-mocks#mocking-node-modules):
- Create a `__mocks__` folder in your project root
- Add a new file in the `__mocks__` folder named after the library you want to
mock out. For instance, for the `ws` library: `__mocks__/ws.js`.
- Export Mock Socket's implementation in-lieu of the normal export from the
library you want to mock out. For instance, for the `ws` library:
```js
// __mocks__/ws.js
export { WebSocket as default } from "mock-socket";
```
**NOTE** The `ws` library is not 100% compatible with the browser API, and
the `mock-socket` library that `jest-websocket-mock` uses under the hood only
implements the browser API.
As a result, `jest-websocket-mock` will only work with the `ws` library if you
restrict yourself to the browser APIs!
## Examples
For a real life example, see the
[examples directory](https://github.com/romgain/jest-websocket-mock/tree/master/examples),
and in particular the saga tests.
## Contributing
See the [contributing guide](https://github.com/romgain/jest-websocket-mock/tree/master/CONTRIBUTING.md).

28
node_modules/jest-websocket-mock/examples/README.md generated vendored Normal file
View File

@@ -0,0 +1,28 @@
# Examples
This folder is here to showcase testing examples of a real application.
To run the tests:
```bash
cd redux-saga # or `cd hooks`...
npm install
npm install jest-websocket-mock
# Or, to run the tests against a local jest-websocket-mock build:
cd ..; npm run build && npm pack; cd examples; npm install ../jest-websocket-mock-*;
SKIP_PREFLIGHT_CHECK=true npm test -- --coverage
```
The websocket tests are under `src/__tests__/saga.test.js` and ``src/**tests**/App.test.js`.
If you want to see the app running locally:
```bash
node server.js # start the server
```
and in another terminal:
```bash
npm start # start the client
```

View File

@@ -0,0 +1,44 @@
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
## Available Scripts
In the project directory, you can run:
### `npm start`
Runs the app in the development mode.<br />
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
The page will reload if you make edits.<br />
You will also see any lint errors in the console.
### `npm test`
Launches the test runner in the interactive watch mode.<br />
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
### `npm run build`
Builds the app for production to the `build` folder.<br />
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.<br />
Your app is ready to be deployed!
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
### `npm run eject`
**Note: this is a one-way operation. Once you `eject`, you cant go back!**
If you arent satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point youre on your own.
You dont have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldnt feel obligated to use this feature. However we understand that this tool wouldnt be useful if you couldnt customize it when you are ready for it.
## Learn More
You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
To learn React, check out the [React documentation](https://reactjs.org/).

View File

@@ -0,0 +1,42 @@
{
"name": "hooks",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.5.0",
"@testing-library/user-event": "^7.2.1",
"@types/jest": "^24.9.1",
"@types/node": "^12.12.50",
"@types/react": "^16.9.43",
"@types/react-dom": "^16.9.8",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.1",
"typescript": "^3.7.5"
},
"peerDependencies": {
"jest-websocket-mock": "~2.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.1 KiB

View File

@@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.4 KiB

View File

@@ -0,0 +1,25 @@
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}

View File

@@ -0,0 +1,3 @@
# https://www.robotstxt.org/robotstxt.html
User-agent: *
Disallow:

View File

@@ -0,0 +1,43 @@
import React from "react";
import { render, screen, fireEvent } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import WS from "jest-websocket-mock";
import App from "./App";
let ws: WS;
beforeEach(() => {
ws = new WS("ws://localhost:8080");
});
afterEach(() => {
WS.clean();
});
describe("The App component", () => {
it("renders a dot indicating the connection status", async () => {
render(<App />);
expect(screen.getByTitle("disconnected")).toBeInTheDocument();
await ws.connected;
expect(screen.getByTitle("connected")).toBeInTheDocument();
ws.close();
expect(screen.getByTitle("disconnected")).toBeInTheDocument();
});
it("sends and receives messages", async () => {
render(<App />);
await ws.connected;
const input = screen.getByPlaceholderText("type your message here...");
userEvent.type(input, "Hello there");
fireEvent.submit(input);
await expect(ws).toReceiveMessage("Hello there");
expect(screen.getByText("(sent) Hello there")).toBeInTheDocument();
ws.send("[echo] Hello there");
expect(
screen.getByText("(received) [echo] Hello there")
).toBeInTheDocument();
});
});

View File

@@ -0,0 +1,70 @@
import React, {
useState,
ChangeEvent,
FormEvent,
useEffect,
useRef,
} from "react";
type MessageProps = { text: string; side: "sent" | "received" };
const Message = ({ text, side }: MessageProps) => (
<div>{`(${side}) ${text}`}</div>
);
function App() {
const wsRef = useRef<WebSocket>();
const [connected, setConnected] = useState(false);
const [messages, setMessages] = useState<MessageProps[]>([]);
const [currentMessage, setCurrentMessage] = useState("");
useEffect(() => {
const ws = new WebSocket(`ws://${window.location.hostname}:8080`);
ws.onopen = () => {
setConnected(true);
};
ws.onclose = () => setConnected(false);
ws.onmessage = (event) =>
setMessages((m) => [{ side: "received", text: event.data }, ...m]);
wsRef.current = ws;
}, []);
const onChange = (event: ChangeEvent<HTMLInputElement>) =>
setCurrentMessage(event.target.value);
const send = (event: FormEvent<HTMLFormElement>) => {
event.preventDefault();
wsRef.current!.send(currentMessage);
setCurrentMessage("");
setMessages((m) => [{ side: "sent", text: currentMessage }, ...m]);
};
return (
<div className="App">
<div
className={
connected
? "ConnectionIndicator ConnectionIndicator--connected"
: "ConnectionIndicator ConnectionIndicator--disconnected"
}
title={connected ? "connected" : "disconnected"}
/>
<div className="Messages">
{messages.map((message, i) => (
<Message key={i} {...message} />
))}
</div>
<form className="MessageForm" onSubmit={send}>
<input
autoFocus
className="MessageInput"
value={currentMessage}
onChange={onChange}
placeholder="type your message here..."
/>
</form>
</div>
);
}
export default App;

View File

@@ -0,0 +1,13 @@
const { act } = require("react-dom/test-utils");
describe("The index", () => {
it("can be imported without errors", () => {
const root = document.createElement("div");
root.setAttribute("id", "root");
document.body.appendChild(root);
act(() => {
require("./index.tsx");
});
});
});

View File

@@ -0,0 +1,11 @@
import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
import App from "./App";
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById("root")
);

View File

@@ -0,0 +1 @@
/// <reference types="react-scripts" />

View File

@@ -0,0 +1,5 @@
// jest-dom adds custom jest matchers for asserting on DOM nodes.
// allows you to do things like:
// expect(element).toHaveTextContent(/react/i)
// learn more: https://github.com/testing-library/jest-dom
import '@testing-library/jest-dom/extend-expect';

View File

@@ -0,0 +1,54 @@
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.App {
background-color: #282c34;
min-height: 100vh;
color: white;
padding: 2rem;
}
.ConnectionIndicator {
width: 2rem;
height: 2rem;
border-radius: 2rem;
position: fixed;
top: 2rem;
right: 2rem;
}
.ConnectionIndicator--connected {
background-color: green;
}
.ConnectionIndicator--disconnected {
background-color: indianred;
}
.Messages {
margin-bottom: 8rem;
display: flex;
flex-direction: column-reverse;
}
.MessageForm {
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: 2rem;
background-color: inherit;
}
.MessageInput {
width: 100%;
}

View File

@@ -0,0 +1,48 @@
{
"name": "examples",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-redux": "^7.2.0",
"react-scripts": "^3.4.1",
"redux": "^4.0.5",
"redux-actions": "^2.6.5",
"redux-saga": "^1.1.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"jest": {
"coverageThreshold": {
"global": {
"branches": 100,
"functions": 100,
"lines": 100,
"statements": 100
}
}
},
"devDependencies": {
"@testing-library/jest-dom": "^5.11.0",
"@testing-library/react": "^10.4.6",
"@testing-library/user-event": "^12.0.11",
"mock-socket": "^9.3.0"
},
"peerDependencies": {
"jest-websocket-mock": "~2.0"
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.8 KiB

View File

@@ -0,0 +1,40 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<!--
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>

View File

@@ -0,0 +1,15 @@
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}

View File

@@ -0,0 +1,14 @@
import React from "react";
import ConnectionIndicator from "./ConnectionIndicator";
import Messages from "./Messages";
import MessageInput from "./MessageInput";
const App = () => (
<div className="App">
<ConnectionIndicator />
<Messages />
<MessageInput />
</div>
);
export default App;

View File

@@ -0,0 +1,17 @@
import React from "react";
import { connect } from "react-redux";
const ConnectionIndicator = ({ connected }) => (
<div
className={
connected
? "ConnectionIndicator ConnectionIndicator--connected"
: "ConnectionIndicator ConnectionIndicator--disconnected"
}
title={connected ? "connected" : "disconnected"}
/>
);
export default connect((state) => ({ connected: state.connected }))(
ConnectionIndicator
);

View File

@@ -0,0 +1,35 @@
import React, { PureComponent } from "react";
import { connect } from "react-redux";
import { actions } from "./store/reducer";
class MessageInput extends PureComponent {
state = { message: "" };
onChange = event => this.setState({ message: event.target.value });
onSubmit = event => {
event.preventDefault();
this.props.send(this.state.message);
this.setState({ message: "" });
};
render() {
const { message } = this.state;
return (
<form className="MessageForm" onSubmit={this.onSubmit}>
<input
autoFocus
className="MessageInput"
value={message}
onChange={this.onChange}
placeholder="type your message here..."
/>
</form>
);
}
}
export default connect(
null,
{ send: actions.send }
)(MessageInput);

View File

@@ -0,0 +1,14 @@
import React from "react";
import { connect } from "react-redux";
const Message = ({ text, side }) => <div>{`(${side}) ${text}`}</div>;
const Messages = ({ messages }) => (
<div className="Messages">
{messages.map((message, i) => (
<Message key={i} {...message} />
))}
</div>
);
export default connect((state) => ({ messages: state.messages }))(Messages);

View File

@@ -0,0 +1,35 @@
import React from "react";
import { render, screen, userEvent, fireEvent } from "../test-utils";
import App from "../App";
describe("The App component", () => {
it("renders the app skeleton", async () => {
const { container } = await render(<App />);
expect(container.firstChild).toMatchSnapshot();
});
it("renders a green dot when successfully connected", async () => {
await render(<App />);
expect(screen.getByTitle("connected")).toBeInTheDocument();
});
it("renders a red dot when not connected", async () => {
const { ws } = await render(<App />);
ws.close();
expect(screen.getByTitle("disconnected")).toBeInTheDocument();
});
it("sends the message when submitting the form", async () => {
const { ws } = await render(<App />);
const input = screen.getByPlaceholderText("type your message here...");
userEvent.type(input, "Hello there");
fireEvent.submit(input);
expect(screen.getByText("(sent) Hello there")).toBeInTheDocument();
await expect(ws).toReceiveMessage("Hello there");
ws.send("[echo] Hello there");
expect(
screen.getByText("(received) [echo] Hello there")
).toBeInTheDocument();
});
});

View File

@@ -0,0 +1,24 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`The App component renders the app skeleton 1`] = `
<div
class="App"
>
<div
class="ConnectionIndicator ConnectionIndicator--connected"
title="connected"
/>
<div
class="Messages"
/>
<form
class="MessageForm"
>
<input
class="MessageInput"
placeholder="type your message here..."
value=""
/>
</form>
</div>
`;

View File

@@ -0,0 +1,10 @@
import ReactDOM from "react-dom";
import "..";
jest.mock("react-dom");
describe("The index", () => {
it("can be imported without errors", () => {
expect(ReactDOM.render).toHaveBeenCalled();
});
});

View File

@@ -0,0 +1,108 @@
import WS from "jest-websocket-mock";
import makeStore from "../store";
import { actions } from "../store/reducer";
let ws, store;
beforeEach(async () => {
ws = new WS("ws://localhost:8080");
store = makeStore();
await ws.connected;
ws.send("Hello there");
});
afterEach(() => {
WS.clean();
});
describe("The saga", () => {
it("connects to the websocket server", () => {
expect(store.getState().messages).toEqual([
{ side: "received", text: "Hello there" },
]);
});
it("stores new messages", () => {
ws.send("how you doin?");
expect(store.getState().messages).toEqual([
{ side: "received", text: "Hello there" },
{ side: "received", text: "how you doin?" },
]);
});
it("stores new messages received shortly one after the other", () => {
ws.send("hey");
ws.send("hey?");
ws.send("hey??");
ws.send("hey???");
expect(store.getState().messages).toEqual([
{ side: "received", text: "Hello there" },
{ side: "received", text: "hey" },
{ side: "received", text: "hey?" },
{ side: "received", text: "hey??" },
{ side: "received", text: "hey???" },
]);
});
it("sends messages", async () => {
store.dispatch(actions.send("oh hi Mark"));
await expect(ws).toReceiveMessage("oh hi Mark");
expect(ws).toHaveReceivedMessages(["oh hi Mark"]);
expect(store.getState().messages).toEqual([
{ side: "received", text: "Hello there" },
{ side: "sent", text: "oh hi Mark" },
]);
});
it("sends messages in a quick succession", async () => {
store.dispatch(actions.send("hey"));
store.dispatch(actions.send("hey?"));
store.dispatch(actions.send("hey??"));
store.dispatch(actions.send("hey???"));
await expect(ws).toReceiveMessage("hey");
await expect(ws).toReceiveMessage("hey?");
await expect(ws).toReceiveMessage("hey??");
await expect(ws).toReceiveMessage("hey???");
expect(ws).toHaveReceivedMessages(["hey", "hey?", "hey??", "hey???"]);
expect(store.getState().messages).toEqual([
{ side: "received", text: "Hello there" },
{ side: "sent", text: "hey" },
{ side: "sent", text: "hey?" },
{ side: "sent", text: "hey??" },
{ side: "sent", text: "hey???" },
]);
});
it("marks the connection as active when it successfully connects to the ws server", () => {
expect(store.getState().connected).toBe(true);
});
it("marks the connection as inactive after a disconnect", async () => {
ws.close();
await ws.closed;
expect(store.getState().connected).toBe(false);
});
it("marks the connection as inactive after a connection error", async () => {
ws.error();
await ws.closed;
expect(store.getState().connected).toBe(false);
});
it("reconnects after losing the ws connection", async () => {
// We cannot use jest.useFakeTimers because mock-socket has to work around timing issues
jest.spyOn(window, "setTimeout");
ws.error();
await ws.closed;
expect(store.getState().connected).toBe(false);
// Trigger our delayed reconnection
window.setTimeout.mock.calls.forEach(([cb, , ...args]) => cb(...args));
await ws.connected; // reconnected!
expect(store.getState().connected).toBe(true);
window.setTimeout.mockRestore();
});
});

View File

@@ -0,0 +1,15 @@
import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import "./styles.css";
import makeStore from "./store";
import App from "./App";
const store = makeStore();
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById("root")
);

View File

@@ -0,0 +1 @@
import "@testing-library/jest-dom";

View File

@@ -0,0 +1,11 @@
import { createStore, applyMiddleware } from "redux";
import createSagaMiddleware from "redux-saga";
import reducer from "./reducer";
import saga from "./saga";
export default () => {
const sagaMiddleware = createSagaMiddleware();
const store = createStore(reducer, applyMiddleware(sagaMiddleware));
sagaMiddleware.run(saga);
return store;
};

View File

@@ -0,0 +1,30 @@
import { createActions, handleActions, combineActions } from "redux-actions";
const defaultState = {
messages: [],
connected: false,
};
export const actions = createActions({
STORE_SENT_MESSAGE: text => ({ text, side: "sent" }),
STORE_RECEIVED_MESSAGE: text => ({ text, side: "received" }),
SEND: undefined,
CONNECTION_SUCCESS: () => ({ connected: true }),
CONNECTION_LOST: () => ({ connected: false }),
});
const reducer = handleActions(
{
[combineActions(actions.storeReceivedMessage, actions.storeSentMessage)]: (
state,
{ payload }
) => ({ ...state, messages: [...state.messages, payload] }),
[combineActions(actions.connectionSuccess, actions.connectionLost)]: (
state,
{ payload: { connected } }
) => ({ ...state, connected }),
},
defaultState
);
export default reducer;

View File

@@ -0,0 +1,54 @@
import { eventChannel, END } from "redux-saga";
import { cancel, call, delay, fork, put, take } from "redux-saga/effects";
import { actions } from "./reducer";
const RECONNECT_TIMEOUT = 6000;
function websocketInitChannel(connection) {
return eventChannel(emitter => {
const closeCallback = () => {
emitter(actions.connectionLost());
return emitter(END);
};
connection.onmessage = e => {
return emitter(actions.storeReceivedMessage(e.data));
};
connection.onclose = closeCallback;
connection.onerror = closeCallback;
return () => {
// unsubscribe function
connection.close();
};
});
}
function* sendMessage(connection) {
while (true) {
const { payload } = yield take(actions.send);
yield put(actions.storeSentMessage(payload));
yield call([connection, connection.send], payload);
}
}
export default function* saga() {
const connection = new WebSocket(`ws://${window.location.hostname}:8080`);
const channel = yield call(websocketInitChannel, connection);
yield put(actions.connectionSuccess());
const sendMessageTask = yield fork(sendMessage, connection);
try {
while (true) {
const action = yield take(channel);
yield put(action);
}
} finally {
// cancel background tasks...
channel.close();
yield cancel(sendMessageTask);
// ...and start again
yield delay(RECONNECT_TIMEOUT);
return yield call(saga);
}
}

View File

@@ -0,0 +1,54 @@
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.App {
background-color: #282c34;
min-height: 100vh;
color: white;
padding: 2rem;
}
.ConnectionIndicator {
width: 2rem;
height: 2rem;
border-radius: 2rem;
position: fixed;
top: 2rem;
right: 2rem;
}
.ConnectionIndicator--connected {
background-color: green;
}
.ConnectionIndicator--disconnected {
background-color: indianred;
}
.Messages {
margin-bottom: 8rem;
display: flex;
flex-direction: column-reverse;
}
.MessageForm {
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: 2rem;
background-color: inherit;
}
.MessageInput {
width: 100%;
}

View File

@@ -0,0 +1,24 @@
import React from "react";
import { render } from "@testing-library/react";
import { Provider } from "react-redux";
import WS from "jest-websocket-mock";
import makeStore from "./store";
afterEach(() => {
WS.clean();
});
const renderWithStore = async (ui, options = {}) => {
const ws = new WS("ws://localhost:8080");
const store = makeStore();
const rendered = render(<Provider store={store}>{ui}</Provider>, options);
await ws.connected;
return {
ws,
...rendered,
};
};
export * from "@testing-library/react";
export { default as userEvent } from "@testing-library/user-event";
export { renderWithStore as render };

24
node_modules/jest-websocket-mock/examples/server.js generated vendored Normal file
View File

@@ -0,0 +1,24 @@
/**
* This is a simple example server, mostly here for demonstration
* purposes.
* The subfolders in this directory contain actual client code with
* supporting tests.
**/
const WebSocket = require("ws");
const PORT = 8080;
const server = new WebSocket.Server({ port: PORT });
server.on("connection", function connection(ws, req) {
ws.on("message", function incoming(message) {
console.log(`[received] ${message}`);
ws.send(`[echo] ${message}`);
});
const remoteAddress = req.connection.remoteAddress;
console.log(`[connected] Client at ${remoteAddress}`);
ws.send(`Hello ${remoteAddress}`);
});
console.log(`[start] Starting echo server on port ${PORT}.`);

12
node_modules/jest-websocket-mock/lib/act-compat.d.ts generated vendored Normal file
View File

@@ -0,0 +1,12 @@
/**
* A simple compatibility method for react's "act".
* If @testing-library/react is already installed, we just use
* their implementation - it's complete and has useful warnings.
* If @testing-library/react is *not* installed, then we just assume
* that the user is not testing a react application, and use a noop instead.
*/
declare type Callback = () => Promise<void | undefined> | void | undefined;
declare type AsyncAct = (callback: Callback) => Promise<undefined>;
declare type SyncAct = (callback: Callback) => void;
declare let act: AsyncAct | SyncAct;
export default act;

3
node_modules/jest-websocket-mock/lib/index.d.ts generated vendored Normal file
View File

@@ -0,0 +1,3 @@
export { default } from "./websocket";
export { default as WS } from "./websocket";
import "./matchers";

View File

@@ -0,0 +1,267 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var mockSocket = require('mock-socket');
var jestDiff = require('jest-diff');
function _defineProperty(obj, key, value) {
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true
});
} else {
obj[key] = value;
}
return obj;
}
class Queue {
constructor() {
_defineProperty(this, "pendingItems", []);
_defineProperty(this, "nextItemResolver", void 0);
_defineProperty(this, "nextItem", new Promise(done => this.nextItemResolver = done));
}
put(item) {
this.pendingItems.push(item);
this.nextItemResolver();
this.nextItem = new Promise(done => this.nextItemResolver = done);
}
get() {
const item = this.pendingItems.shift();
if (item) {
// return the next queued item immediately
return Promise.resolve(item);
}
let resolver;
const nextItemPromise = new Promise(done => resolver = done);
this.nextItem.then(() => {
resolver(this.pendingItems.shift());
});
return nextItemPromise;
}
}
/**
* A simple compatibility method for react's "act".
* If @testing-library/react is already installed, we just use
* their implementation - it's complete and has useful warnings.
* If @testing-library/react is *not* installed, then we just assume
* that the user is not testing a react application, and use a noop instead.
*/
let act;
try {
act = require("@testing-library/react").act;
} catch (_) {
act = callback => {
callback();
};
}
var act$1 = act;
const identity = x => x;
class WS {
static clean() {
WS.instances.forEach(instance => {
instance.close();
instance.messages = [];
});
WS.instances = [];
}
constructor(url, opts = {}) {
_defineProperty(this, "server", void 0);
_defineProperty(this, "serializer", void 0);
_defineProperty(this, "deserializer", void 0);
_defineProperty(this, "messages", []);
_defineProperty(this, "messagesToConsume", new Queue());
_defineProperty(this, "_isConnected", void 0);
_defineProperty(this, "_isClosed", void 0);
WS.instances.push(this);
const {
jsonProtocol = false,
...serverOptions
} = opts;
this.serializer = jsonProtocol ? JSON.stringify : identity;
this.deserializer = jsonProtocol ? JSON.parse : identity;
let connectionResolver, closedResolver;
this._isConnected = new Promise(done => connectionResolver = done);
this._isClosed = new Promise(done => closedResolver = done);
this.server = new mockSocket.Server(url, serverOptions);
this.server.on("close", closedResolver);
this.server.on("connection", socket => {
connectionResolver(socket);
socket.on("message", message => {
const parsedMessage = this.deserializer(message);
this.messages.push(parsedMessage);
this.messagesToConsume.put(parsedMessage);
});
});
}
get connected() {
let resolve;
const connectedPromise = new Promise(done => resolve = done);
const waitForConnected = async () => {
await act$1(async () => {
await this._isConnected;
});
resolve(await this._isConnected); // make sure `await act` is really done
};
waitForConnected();
return connectedPromise;
}
get closed() {
let resolve;
const closedPromise = new Promise(done => resolve = done);
const waitForclosed = async () => {
await act$1(async () => {
await this._isClosed;
});
await this._isClosed; // make sure `await act` is really done
resolve();
};
waitForclosed();
return closedPromise;
}
get nextMessage() {
return this.messagesToConsume.get();
}
on(eventName, callback) {
// @ts-ignore https://github.com/romgain/jest-websocket-mock/issues/26#issuecomment-571579567
this.server.on(eventName, callback);
}
send(message) {
act$1(() => {
this.server.emit("message", this.serializer(message));
});
}
close(options) {
act$1(() => {
this.server.close(options);
});
}
error(options) {
act$1(() => {
this.server.emit("error", null);
});
this.server.close(options);
}
}
_defineProperty(WS, "instances", []);
const WAIT_DELAY = 1000;
const TIMEOUT = Symbol("timoeut");
const makeInvalidWsMessage = function makeInvalidWsMessage(ws, matcher) {
return this.utils.matcherHint(this.isNot ? `.not.${matcher}` : `.${matcher}`, "WS", "expected") + "\n\n" + `Expected the websocket object to be a valid WS mock.\n` + `Received: ${typeof ws}\n` + ` ${this.utils.printReceived(ws)}`;
};
expect.extend({
async toReceiveMessage(ws, expected, options) {
const isWS = ws instanceof WS;
if (!isWS) {
return {
pass: this.isNot,
// always fail
message: makeInvalidWsMessage.bind(this, ws, "toReceiveMessage")
};
}
const waitDelay = options?.timeout ?? WAIT_DELAY;
let timeoutId;
const messageOrTimeout = await Promise.race([ws.nextMessage, new Promise(resolve => {
timeoutId = setTimeout(() => resolve(TIMEOUT), waitDelay);
})]);
clearTimeout(timeoutId);
if (messageOrTimeout === TIMEOUT) {
return {
pass: this.isNot,
// always fail
message: () => this.utils.matcherHint(this.isNot ? ".not.toReceiveMessage" : ".toReceiveMessage", "WS", "expected") + "\n\n" + `Expected the websocket server to receive a message,\n` + `but it didn't receive anything in ${waitDelay}ms.`
};
}
const received = messageOrTimeout;
const pass = this.equals(received, expected);
const message = pass ? () => this.utils.matcherHint(".not.toReceiveMessage", "WS", "expected") + "\n\n" + `Expected the next received message to not equal:\n` + ` ${this.utils.printExpected(expected)}\n` + `Received:\n` + ` ${this.utils.printReceived(received)}` : () => {
const diffString = jestDiff.diff(expected, received, {
expand: this.expand
});
return this.utils.matcherHint(".toReceiveMessage", "WS", "expected") + "\n\n" + `Expected the next received message to equal:\n` + ` ${this.utils.printExpected(expected)}\n` + `Received:\n` + ` ${this.utils.printReceived(received)}\n\n` + `Difference:\n\n${diffString}`;
};
return {
actual: received,
expected,
message,
name: "toReceiveMessage",
pass
};
},
toHaveReceivedMessages(ws, messages) {
const isWS = ws instanceof WS;
if (!isWS) {
return {
pass: this.isNot,
// always fail
message: makeInvalidWsMessage.bind(this, ws, "toHaveReceivedMessages")
};
}
const received = messages.map(expected => // object comparison to handle JSON protocols
ws.messages.some(actual => this.equals(actual, expected)));
const pass = this.isNot ? received.some(Boolean) : received.every(Boolean);
const message = pass ? () => this.utils.matcherHint(".not.toHaveReceivedMessages", "WS", "expected") + "\n\n" + `Expected the WS server to not have received the following messages:\n` + ` ${this.utils.printExpected(messages)}\n` + `But it received:\n` + ` ${this.utils.printReceived(ws.messages)}` : () => {
return this.utils.matcherHint(".toHaveReceivedMessages", "WS", "expected") + "\n\n" + `Expected the WS server to have received the following messages:\n` + ` ${this.utils.printExpected(messages)}\n` + `Received:\n` + ` ${this.utils.printReceived(ws.messages)}\n\n`;
};
return {
actual: ws.messages,
expected: messages,
message,
name: "toHaveReceivedMessages",
pass
};
}
});
exports.WS = WS;
exports["default"] = WS;

View File

@@ -0,0 +1,262 @@
import { Server } from 'mock-socket';
import { diff } from 'jest-diff';
function _defineProperty(obj, key, value) {
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true
});
} else {
obj[key] = value;
}
return obj;
}
class Queue {
constructor() {
_defineProperty(this, "pendingItems", []);
_defineProperty(this, "nextItemResolver", void 0);
_defineProperty(this, "nextItem", new Promise(done => this.nextItemResolver = done));
}
put(item) {
this.pendingItems.push(item);
this.nextItemResolver();
this.nextItem = new Promise(done => this.nextItemResolver = done);
}
get() {
const item = this.pendingItems.shift();
if (item) {
// return the next queued item immediately
return Promise.resolve(item);
}
let resolver;
const nextItemPromise = new Promise(done => resolver = done);
this.nextItem.then(() => {
resolver(this.pendingItems.shift());
});
return nextItemPromise;
}
}
/**
* A simple compatibility method for react's "act".
* If @testing-library/react is already installed, we just use
* their implementation - it's complete and has useful warnings.
* If @testing-library/react is *not* installed, then we just assume
* that the user is not testing a react application, and use a noop instead.
*/
let act;
try {
act = require("@testing-library/react").act;
} catch (_) {
act = callback => {
callback();
};
}
var act$1 = act;
const identity = x => x;
class WS {
static clean() {
WS.instances.forEach(instance => {
instance.close();
instance.messages = [];
});
WS.instances = [];
}
constructor(url, opts = {}) {
_defineProperty(this, "server", void 0);
_defineProperty(this, "serializer", void 0);
_defineProperty(this, "deserializer", void 0);
_defineProperty(this, "messages", []);
_defineProperty(this, "messagesToConsume", new Queue());
_defineProperty(this, "_isConnected", void 0);
_defineProperty(this, "_isClosed", void 0);
WS.instances.push(this);
const {
jsonProtocol = false,
...serverOptions
} = opts;
this.serializer = jsonProtocol ? JSON.stringify : identity;
this.deserializer = jsonProtocol ? JSON.parse : identity;
let connectionResolver, closedResolver;
this._isConnected = new Promise(done => connectionResolver = done);
this._isClosed = new Promise(done => closedResolver = done);
this.server = new Server(url, serverOptions);
this.server.on("close", closedResolver);
this.server.on("connection", socket => {
connectionResolver(socket);
socket.on("message", message => {
const parsedMessage = this.deserializer(message);
this.messages.push(parsedMessage);
this.messagesToConsume.put(parsedMessage);
});
});
}
get connected() {
let resolve;
const connectedPromise = new Promise(done => resolve = done);
const waitForConnected = async () => {
await act$1(async () => {
await this._isConnected;
});
resolve(await this._isConnected); // make sure `await act` is really done
};
waitForConnected();
return connectedPromise;
}
get closed() {
let resolve;
const closedPromise = new Promise(done => resolve = done);
const waitForclosed = async () => {
await act$1(async () => {
await this._isClosed;
});
await this._isClosed; // make sure `await act` is really done
resolve();
};
waitForclosed();
return closedPromise;
}
get nextMessage() {
return this.messagesToConsume.get();
}
on(eventName, callback) {
// @ts-ignore https://github.com/romgain/jest-websocket-mock/issues/26#issuecomment-571579567
this.server.on(eventName, callback);
}
send(message) {
act$1(() => {
this.server.emit("message", this.serializer(message));
});
}
close(options) {
act$1(() => {
this.server.close(options);
});
}
error(options) {
act$1(() => {
this.server.emit("error", null);
});
this.server.close(options);
}
}
_defineProperty(WS, "instances", []);
const WAIT_DELAY = 1000;
const TIMEOUT = Symbol("timoeut");
const makeInvalidWsMessage = function makeInvalidWsMessage(ws, matcher) {
return this.utils.matcherHint(this.isNot ? `.not.${matcher}` : `.${matcher}`, "WS", "expected") + "\n\n" + `Expected the websocket object to be a valid WS mock.\n` + `Received: ${typeof ws}\n` + ` ${this.utils.printReceived(ws)}`;
};
expect.extend({
async toReceiveMessage(ws, expected, options) {
const isWS = ws instanceof WS;
if (!isWS) {
return {
pass: this.isNot,
// always fail
message: makeInvalidWsMessage.bind(this, ws, "toReceiveMessage")
};
}
const waitDelay = options?.timeout ?? WAIT_DELAY;
let timeoutId;
const messageOrTimeout = await Promise.race([ws.nextMessage, new Promise(resolve => {
timeoutId = setTimeout(() => resolve(TIMEOUT), waitDelay);
})]);
clearTimeout(timeoutId);
if (messageOrTimeout === TIMEOUT) {
return {
pass: this.isNot,
// always fail
message: () => this.utils.matcherHint(this.isNot ? ".not.toReceiveMessage" : ".toReceiveMessage", "WS", "expected") + "\n\n" + `Expected the websocket server to receive a message,\n` + `but it didn't receive anything in ${waitDelay}ms.`
};
}
const received = messageOrTimeout;
const pass = this.equals(received, expected);
const message = pass ? () => this.utils.matcherHint(".not.toReceiveMessage", "WS", "expected") + "\n\n" + `Expected the next received message to not equal:\n` + ` ${this.utils.printExpected(expected)}\n` + `Received:\n` + ` ${this.utils.printReceived(received)}` : () => {
const diffString = diff(expected, received, {
expand: this.expand
});
return this.utils.matcherHint(".toReceiveMessage", "WS", "expected") + "\n\n" + `Expected the next received message to equal:\n` + ` ${this.utils.printExpected(expected)}\n` + `Received:\n` + ` ${this.utils.printReceived(received)}\n\n` + `Difference:\n\n${diffString}`;
};
return {
actual: received,
expected,
message,
name: "toReceiveMessage",
pass
};
},
toHaveReceivedMessages(ws, messages) {
const isWS = ws instanceof WS;
if (!isWS) {
return {
pass: this.isNot,
// always fail
message: makeInvalidWsMessage.bind(this, ws, "toHaveReceivedMessages")
};
}
const received = messages.map(expected => // object comparison to handle JSON protocols
ws.messages.some(actual => this.equals(actual, expected)));
const pass = this.isNot ? received.some(Boolean) : received.every(Boolean);
const message = pass ? () => this.utils.matcherHint(".not.toHaveReceivedMessages", "WS", "expected") + "\n\n" + `Expected the WS server to not have received the following messages:\n` + ` ${this.utils.printExpected(messages)}\n` + `But it received:\n` + ` ${this.utils.printReceived(ws.messages)}` : () => {
return this.utils.matcherHint(".toHaveReceivedMessages", "WS", "expected") + "\n\n" + `Expected the WS server to have received the following messages:\n` + ` ${this.utils.printExpected(messages)}\n` + `Received:\n` + ` ${this.utils.printReceived(ws.messages)}\n\n`;
};
return {
actual: ws.messages,
expected: messages,
message,
name: "toHaveReceivedMessages",
pass
};
}
});
export { WS, WS as default };

13
node_modules/jest-websocket-mock/lib/matchers.d.ts generated vendored Normal file
View File

@@ -0,0 +1,13 @@
import { DeserializedMessage } from "./websocket";
declare type ReceiveMessageOptions = {
timeout?: number;
};
declare global {
namespace jest {
interface Matchers<R, T> {
toReceiveMessage<TMessage = object>(message: DeserializedMessage<TMessage>, options?: ReceiveMessageOptions): Promise<R>;
toHaveReceivedMessages<TMessage = object>(messages: Array<DeserializedMessage<TMessage>>): R;
}
}
}
export {};

7
node_modules/jest-websocket-mock/lib/queue.d.ts generated vendored Normal file
View File

@@ -0,0 +1,7 @@
export default class Queue<ItemT> {
pendingItems: Array<ItemT>;
nextItemResolver: () => void;
nextItem: Promise<void>;
put(item: ItemT): void;
get(): Promise<ItemT>;
}

29
node_modules/jest-websocket-mock/lib/websocket.d.ts generated vendored Normal file
View File

@@ -0,0 +1,29 @@
import { Server, ServerOptions, CloseOptions, Client } from "mock-socket";
import Queue from "./queue";
interface WSOptions extends ServerOptions {
jsonProtocol?: boolean;
}
export declare type DeserializedMessage<TMessage = object> = string | TMessage;
interface MockWebSocket extends Omit<Client, "close"> {
close(options?: CloseOptions): void;
}
export default class WS {
server: Server;
serializer: (deserializedMessage: DeserializedMessage) => string;
deserializer: (message: string) => DeserializedMessage;
static instances: Array<WS>;
messages: Array<DeserializedMessage>;
messagesToConsume: Queue<unknown>;
private _isConnected;
private _isClosed;
static clean(): void;
constructor(url: string, opts?: WSOptions);
get connected(): Promise<Client>;
get closed(): Promise<void>;
get nextMessage(): Promise<unknown>;
on(eventName: "connection" | "message" | "close", callback: (socket: MockWebSocket) => void): void;
send(message: DeserializedMessage): void;
close(options?: CloseOptions): void;
error(options?: CloseOptions): void;
}
export {};

66
node_modules/jest-websocket-mock/package.json generated vendored Normal file
View File

@@ -0,0 +1,66 @@
{
"name": "jest-websocket-mock",
"version": "2.5.0",
"description": "Mock websockets and assert complex websocket interactions with Jest",
"main": "lib/jest-websocket-mock.cjs.js",
"module": "lib/jest-websocket-mock.es.js",
"repository": {
"type": "git",
"url": "git+https://github.com/romgain/jest-websocket-mock.git"
},
"types": "lib/index.d.ts",
"scripts": {
"clean": "rimraf lib",
"build": "npm run clean && npm run build:lib && npm run build:types",
"build:lib": "rollup -c",
"build:types": "tsc -p tsconfig.build.json",
"prettier:check": "prettier --list-different \"src/**/*.{ts,js,md}\" \"**/*.md\"",
"prettier:apply": "prettier --write \"src/**/*.{ts,js}\" \"**/*.md\"",
"type:check": "tsc --noEmit",
"prepublishOnly": "npm run build",
"test": "jest --colors"
},
"keywords": [
"jest",
"websocket",
"mock",
"unit-testing"
],
"author": "Romain Bertrand",
"license": "MIT",
"jest": {
"roots": [
"<rootDir>/src"
],
"coverageThreshold": {
"global": {
"branches": 100,
"functions": 100,
"lines": 100,
"statements": 100
}
}
},
"devDependencies": {
"@babel/core": "^7.4.0",
"@babel/plugin-proposal-class-properties": "^7.4.0",
"@babel/plugin-transform-runtime": "^7.4.0",
"@babel/plugin-transform-typescript": "^7.4.0",
"@babel/preset-env": "^7.4.2",
"@babel/preset-typescript": "^7.3.3",
"@babel/runtime": "^7.4.2",
"@types/jest": "^28.1.6",
"babel-jest": "^29.2.0",
"jest": "^28.0.3",
"prettier": "^2.0.2",
"rimraf": "^5.0.0",
"rollup": "^2.0.3",
"rollup-plugin-babel": "^4.0.3",
"rollup-plugin-node-resolve": "^5.2.0",
"typescript": "^5.0.4"
},
"dependencies": {
"jest-diff": "^29.2.0",
"mock-socket": "^9.3.0"
}
}

View File

@@ -0,0 +1,263 @@
import WS from "../websocket";
import "../matchers";
let server: WS, client: WebSocket;
beforeEach(async () => {
server = new WS("ws://localhost:1234");
client = new WebSocket("ws://localhost:1234");
await server.connected;
});
afterEach(() => {
WS.clean();
});
describe(".toReceiveMessage", () => {
it("passes when the websocket server receives the expected message", async () => {
client.send("hello there");
await expect(server).toReceiveMessage("hello there");
});
it("passes when the websocket server receives the expected message with custom timeout", async () => {
setTimeout(() => {
client.send("hello there");
}, 2000);
await expect(server).toReceiveMessage("hello there", { timeout: 3000 });
});
it("passes when the websocket server receives the expected JSON message", async () => {
const jsonServer = new WS("ws://localhost:9876", { jsonProtocol: true });
const jsonClient = new WebSocket("ws://localhost:9876");
await jsonServer.connected;
jsonClient.send(`{"answer":42}`);
await expect(jsonServer).toReceiveMessage({ answer: 42 });
});
it("fails when called with an expected argument that is not a valid WS", async () => {
expect.hasAssertions();
await expect(expect("boom").toReceiveMessage("hello there")).rejects
.toThrowErrorMatchingInlineSnapshot(`
"expect(WS).toReceiveMessage(expected)
Expected the websocket object to be a valid WS mock.
Received: string
\\"boom\\""
`);
});
it("fails when the WS server does not receive the expected message", async () => {
expect.hasAssertions();
await expect(expect(server).toReceiveMessage("hello there")).rejects
.toThrowErrorMatchingInlineSnapshot(`
"expect(WS).toReceiveMessage(expected)
Expected the websocket server to receive a message,
but it didn't receive anything in 1000ms."
`);
});
it("fails when the WS server does not receive the expected message with custom timeout", async () => {
expect.hasAssertions();
await expect(
expect(server).toReceiveMessage("hello there", { timeout: 3000 })
).rejects.toThrowErrorMatchingInlineSnapshot(`
"expect(WS).toReceiveMessage(expected)
Expected the websocket server to receive a message,
but it didn't receive anything in 3000ms."
`);
});
it("fails when the WS server receives a different message", async () => {
expect.hasAssertions();
client.send("hello there");
await expect(expect(server).toReceiveMessage("HI!")).rejects
.toThrowErrorMatchingInlineSnapshot(`
"expect(WS).toReceiveMessage(expected)
Expected the next received message to equal:
\\"HI!\\"
Received:
\\"hello there\\"
Difference:
- Expected
+ Received
- HI!
+ hello there"
`);
});
it("fails when expecting a JSON message but the server is not configured for JSON protocols", async () => {
expect.hasAssertions();
client.send(`{"answer":42}`);
await expect(expect(server).toReceiveMessage({ answer: 42 })).rejects
.toThrowErrorMatchingInlineSnapshot(`
"expect(WS).toReceiveMessage(expected)
Expected the next received message to equal:
{\\"answer\\": 42}
Received:
\\"{\\\\\\"answer\\\\\\":42}\\"
Difference:
Comparing two different types of values. Expected object but received string."
`);
});
});
describe(".not.toReceiveMessage", () => {
it("passes when the websocket server doesn't receive the expected message", async () => {
client.send("hello there");
await expect(server).not.toReceiveMessage("What's up?");
});
it("fails when called with an expected argument that is not a valid WS", async () => {
expect.hasAssertions();
await expect(expect("boom").not.toReceiveMessage("hello there")).rejects
.toThrowErrorMatchingInlineSnapshot(`
"expect(WS).not.toReceiveMessage(expected)
Expected the websocket object to be a valid WS mock.
Received: string
\\"boom\\""
`);
});
it("fails when the WS server doesn't receive any messages", async () => {
expect.hasAssertions();
await expect(expect(server).not.toReceiveMessage("hello there")).rejects
.toThrowErrorMatchingInlineSnapshot(`
"expect(WS).not.toReceiveMessage(expected)
Expected the websocket server to receive a message,
but it didn't receive anything in 1000ms."
`);
});
it("fails when the WS server receives the un-expected message", async () => {
expect.hasAssertions();
client.send("hello there");
await expect(expect(server).not.toReceiveMessage("hello there")).rejects
.toThrowErrorMatchingInlineSnapshot(`
"expect(WS).not.toReceiveMessage(expected)
Expected the next received message to not equal:
\\"hello there\\"
Received:
\\"hello there\\""
`);
});
});
describe(".toHaveReceivedMessages", () => {
it("passes when the websocket server received the expected messages", async () => {
client.send("hello there");
client.send("how are you?");
client.send("good?");
await server.nextMessage;
await server.nextMessage;
await server.nextMessage;
expect(server).toHaveReceivedMessages(["hello there", "good?"]);
});
it("passes when the websocket server received the expected JSON messages", async () => {
const jsonServer = new WS("ws://localhost:9876", { jsonProtocol: true });
const jsonClient = new WebSocket("ws://localhost:9876");
await jsonServer.connected;
jsonClient.send(`{"type":"GREETING","payload":"hello there"}`);
jsonClient.send(`{"type":"GREETING","payload":"how are you?"}`);
jsonClient.send(`{"type":"GREETING","payload":"good?"}`);
await jsonServer.nextMessage;
await jsonServer.nextMessage;
await jsonServer.nextMessage;
expect(jsonServer).toHaveReceivedMessages([
{ type: "GREETING", payload: "good?" },
{ type: "GREETING", payload: "hello there" },
]);
});
it("fails when the websocket server did not receive the expected messages", async () => {
client.send("hello there");
client.send("how are you?");
client.send("good?");
await server.nextMessage;
await server.nextMessage;
await server.nextMessage;
expect(() => {
expect(server).toHaveReceivedMessages(["hello there", "'sup?"]);
}).toThrowErrorMatchingInlineSnapshot(`
"expect(WS).toHaveReceivedMessages(expected)
Expected the WS server to have received the following messages:
[\\"hello there\\", \\"'sup?\\"]
Received:
[\\"hello there\\", \\"how are you?\\", \\"good?\\"]
"
`);
});
it("fails when called with an expected argument that is not a valid WS", async () => {
expect(() => {
expect("boom").toHaveReceivedMessages(["hello there"]);
}).toThrowErrorMatchingInlineSnapshot(`
"expect(WS).toHaveReceivedMessages(expected)
Expected the websocket object to be a valid WS mock.
Received: string
\\"boom\\""
`);
});
});
describe(".not.toHaveReceivedMessages", () => {
it("passes when the websocket server received none of the specified messages", async () => {
client.send("hello there");
client.send("how are you?");
client.send("good?");
await server.nextMessage;
await server.nextMessage;
await server.nextMessage;
expect(server).not.toHaveReceivedMessages(["'sup?", "U good?"]);
});
it("fails when the websocket server received at least one unexpected message", async () => {
client.send("hello there");
client.send("how are you?");
client.send("good?");
await server.nextMessage;
await server.nextMessage;
await server.nextMessage;
expect(() => {
expect(server).not.toHaveReceivedMessages([
"'sup?",
"U good?",
"hello there",
]);
}).toThrowErrorMatchingInlineSnapshot(`
"expect(WS).not.toHaveReceivedMessages(expected)
Expected the WS server to not have received the following messages:
[\\"'sup?\\", \\"U good?\\", \\"hello there\\"]
But it received:
[\\"hello there\\", \\"how are you?\\", \\"good?\\"]"
`);
});
it("fails when called with an expected argument that is not a valid WS", async () => {
expect(() => {
expect("boom").not.toHaveReceivedMessages(["hello there"]);
}).toThrowErrorMatchingInlineSnapshot(`
"expect(WS).not.toHaveReceivedMessages(expected)
Expected the websocket object to be a valid WS mock.
Received: string
\\"boom\\""
`);
});
});

View File

@@ -0,0 +1,324 @@
import WS from "../websocket";
describe("The WS helper", () => {
afterEach(() => {
WS.clean();
});
it("keeps track of received messages, and yields them as they come in", async () => {
const server = new WS("ws://localhost:1234");
const client = new WebSocket("ws://localhost:1234");
await server.connected;
client.send("hello");
const message = await server.nextMessage;
expect(message).toBe("hello");
expect(server.messages).toEqual(["hello"]);
});
it("cleans up connected clients and messages on 'clean'", async () => {
const server = new WS("ws://localhost:1234");
const client1 = new WebSocket("ws://localhost:1234");
await server.connected;
const client2 = new WebSocket("ws://localhost:1234");
await server.connected;
const connections = { client1: true, client2: true };
const onclose = (name: "client1" | "client2") => () => {
connections[name] = false;
};
client1.onclose = onclose("client1");
client2.onclose = onclose("client2");
client1.send("hello 1");
await server.nextMessage;
client2.send("hello 2");
await server.nextMessage;
expect(server.messages).toEqual(["hello 1", "hello 2"]);
WS.clean();
expect(WS.instances).toEqual([]);
expect(server.messages).toEqual([]);
expect(connections).toEqual({ client1: false, client2: false });
});
it("handles messages received in a quick succession", async () => {
expect.hasAssertions();
const server = new WS("ws://localhost:1234");
const client = new WebSocket("ws://localhost:1234");
await server.connected;
"abcdef".split("").forEach(client.send.bind(client));
let waitedEnough: (value: void) => void;
const waitABit = new Promise((done) => (waitedEnough = done));
setTimeout(async () => {
await server.nextMessage;
await server.nextMessage;
await server.nextMessage;
await server.nextMessage;
await server.nextMessage;
await server.nextMessage;
"xyz".split("").forEach(client.send.bind(client));
await server.nextMessage;
await server.nextMessage;
await server.nextMessage;
waitedEnough();
}, 500);
await waitABit;
expect(server.messages).toEqual("abcdefxyz".split(""));
});
it("sends messages to connected clients", async () => {
const server = new WS("ws://localhost:1234");
const client1 = new WebSocket("ws://localhost:1234");
await server.connected;
const client2 = new WebSocket("ws://localhost:1234");
await server.connected;
interface Messages {
client1: Array<string>;
client2: Array<string>;
}
const messages: Messages = { client1: [], client2: [] };
client1.onmessage = (e) => {
messages.client1.push(e.data);
};
client2.onmessage = (e) => {
messages.client2.push(e.data);
};
server.send("hello everyone");
expect(messages).toEqual({
client1: ["hello everyone"],
client2: ["hello everyone"],
});
});
it("seamlessly handles JSON protocols", async () => {
const server = new WS("ws://localhost:1234", { jsonProtocol: true });
const client = new WebSocket("ws://localhost:1234");
await server.connected;
client.send(`{ "type": "GREETING", "payload": "hello" }`);
const received = await server.nextMessage;
expect(server.messages).toEqual([{ type: "GREETING", payload: "hello" }]);
expect(received).toEqual({ type: "GREETING", payload: "hello" });
let message = null;
client.onmessage = (e) => {
message = e.data;
};
server.send({ type: "CHITCHAT", payload: "Nice weather today" });
expect(message).toEqual(
`{"type":"CHITCHAT","payload":"Nice weather today"}`
);
});
it("rejects connections that fail the verifyClient option", async () => {
const verifyClient = jest.fn().mockReturnValue(false);
new WS("ws://localhost:1234", { verifyClient: verifyClient });
const errorCallback = jest.fn();
await expect(
new Promise((resolve, reject) => {
errorCallback.mockImplementation(reject);
const client = new WebSocket("ws://localhost:1234");
client.onerror = errorCallback;
client.onopen = resolve;
})
// WebSocket onerror event gets called with an event of type error and not an error
).rejects.toEqual(expect.objectContaining({ type: "error" }));
expect(verifyClient).toHaveBeenCalledTimes(1);
expect(errorCallback).toHaveBeenCalledTimes(1);
// ensure that the WebSocket mock set up by mock-socket is still present
expect(WebSocket).toBeDefined();
});
it("rejects connections that fail the selectProtocol option", async () => {
const selectProtocol = () => null;
new WS("ws://localhost:1234", { selectProtocol });
const errorCallback = jest.fn();
await expect(
new Promise((resolve, reject) => {
errorCallback.mockImplementationOnce(reject);
const client = new WebSocket("ws://localhost:1234", "foo");
client.onerror = errorCallback;
client.onopen = resolve;
})
).rejects.toEqual(
// WebSocket onerror event gets called with an event of type error and not an error
expect.objectContaining({
type: "error",
currentTarget: expect.objectContaining({ protocol: "foo" }),
})
);
// ensure that the WebSocket mock set up by mock-socket is still present
expect(WebSocket).toBeDefined();
});
it("closes the connection", async () => {
const server = new WS("ws://localhost:1234");
const client = new WebSocket("ws://localhost:1234");
const closeCallback = jest.fn();
await server.connected;
client.onclose = closeCallback;
server.send("hello everyone");
server.close();
expect(closeCallback).toHaveBeenCalledTimes(1);
expect(closeCallback).toHaveBeenCalledWith(
expect.objectContaining({
code: 1000,
eventPhase: 0,
reason: "",
type: "close",
wasClean: true,
})
);
// ensure that the WebSocket mock set up by mock-socket is still present
expect(WebSocket).toBeDefined();
});
it("closes the connection with a custom close code", async () => {
const server = new WS("ws://localhost:1234");
const client = new WebSocket("ws://localhost:1234");
const closeCallback = jest.fn();
await server.connected;
client.onclose = closeCallback;
server.close({ code: 1234, reason: "boom", wasClean: false });
expect(closeCallback).toHaveBeenCalledTimes(1);
expect(closeCallback).toHaveBeenCalledWith(
expect.objectContaining({
code: 1234,
eventPhase: 0,
reason: "boom",
type: "close",
wasClean: false,
})
);
});
it("can refuse connections", async () => {
expect.assertions(6);
const server = new WS("ws://localhost:1234");
server.on("connection", (socket) => {
socket.close({ wasClean: false, code: 1003, reason: "NOPE" });
});
const client = new WebSocket("ws://localhost:1234");
client.onclose = (event: CloseEvent) => {
expect(event.code).toBe(1003);
expect(event.wasClean).toBe(false);
expect(event.reason).toBe("NOPE");
};
expect(client.readyState).toBe(WebSocket.CONNECTING);
await server.connected;
expect(client.readyState).toBe(WebSocket.CLOSING);
await server.closed;
expect(client.readyState).toBe(WebSocket.CLOSED);
});
it("can send messages in the connection callback", async () => {
expect.assertions(1);
const server = new WS("ws://localhost:1234");
let receivedMessage = null;
server.on("connection", (socket) => {
socket.send("hello there");
});
const client = new WebSocket("ws://localhost:1234");
client.onmessage = (event) => {
receivedMessage = event.data;
};
await server.connected;
expect(receivedMessage).toBe("hello there");
});
it("provides a callback when receiving messages", async () => {
const server = new WS("ws://localhost:1234");
expect.assertions(1);
server.on("connection", (socket) => {
socket.on("message", (msg) => {
expect(msg).toEqual("client says hi");
});
});
const client = new WebSocket("ws://localhost:1234");
await server.connected;
client.send("client says hi");
await server.nextMessage;
});
it("sends errors to connected clients", async () => {
const server = new WS("ws://localhost:1234");
const client = new WebSocket("ws://localhost:1234");
await server.connected;
let disconnected = false;
let error: any; // bad types in MockSockets
client.onclose = () => {
disconnected = true;
};
client.onerror = (e) => {
error = e;
};
server.send("hello everyone");
server.error();
expect(disconnected).toBe(true);
expect(error.origin).toBe("ws://localhost:1234/");
expect(error.type).toBe("error");
});
it("resolves the client socket that connected", async () => {
const server = new WS("ws://localhost:1234");
const client = new WebSocket("ws://localhost:1234");
const socket = await server.connected;
expect(socket).toStrictEqual(client);
});
it("passes on close options on server error event", async () => {
const server = new WS("ws://localhost:1234");
const client = new WebSocket("ws://localhost:1234");
const closeCallback = jest.fn();
await server.connected;
client.onclose = closeCallback;
server.error({ code: 1234, reason: "boom", wasClean: false });
expect(closeCallback).toHaveBeenCalledTimes(1);
expect(closeCallback).toHaveBeenCalledWith(
expect.objectContaining({
code: 1234,
eventPhase: 0,
reason: "boom",
type: "close",
wasClean: false,
})
);
});
});

23
node_modules/jest-websocket-mock/src/act-compat.ts generated vendored Normal file
View File

@@ -0,0 +1,23 @@
/**
* A simple compatibility method for react's "act".
* If @testing-library/react is already installed, we just use
* their implementation - it's complete and has useful warnings.
* If @testing-library/react is *not* installed, then we just assume
* that the user is not testing a react application, and use a noop instead.
*/
type Callback = () => Promise<void | undefined> | void | undefined;
type AsyncAct = (callback: Callback) => Promise<undefined>;
type SyncAct = (callback: Callback) => void;
let act: AsyncAct | SyncAct;
try {
act = require("@testing-library/react").act;
} catch (_) {
act = (callback: Function) => {
callback();
};
}
export default act;

3
node_modules/jest-websocket-mock/src/index.ts generated vendored Normal file
View File

@@ -0,0 +1,3 @@
export { default } from "./websocket";
export { default as WS } from "./websocket";
import "./matchers";

166
node_modules/jest-websocket-mock/src/matchers.ts generated vendored Normal file
View File

@@ -0,0 +1,166 @@
import { diff } from "jest-diff";
import WS from "./websocket";
import { DeserializedMessage } from "./websocket";
type ReceiveMessageOptions = {
timeout?: number;
};
declare global {
namespace jest {
interface Matchers<R, T> {
toReceiveMessage<TMessage = object>(
message: DeserializedMessage<TMessage>,
options?: ReceiveMessageOptions
): Promise<R>;
toHaveReceivedMessages<TMessage = object>(
messages: Array<DeserializedMessage<TMessage>>
): R;
}
}
}
const WAIT_DELAY = 1000;
const TIMEOUT = Symbol("timoeut");
const makeInvalidWsMessage = function makeInvalidWsMessage(
this: jest.MatcherUtils,
ws: WS,
matcher: string
) {
return (
this.utils.matcherHint(
this.isNot ? `.not.${matcher}` : `.${matcher}`,
"WS",
"expected"
) +
"\n\n" +
`Expected the websocket object to be a valid WS mock.\n` +
`Received: ${typeof ws}\n` +
` ${this.utils.printReceived(ws)}`
);
};
expect.extend({
async toReceiveMessage(
ws: WS,
expected: DeserializedMessage,
options?: ReceiveMessageOptions
) {
const isWS = ws instanceof WS;
if (!isWS) {
return {
pass: this.isNot, // always fail
message: makeInvalidWsMessage.bind(this, ws, "toReceiveMessage"),
};
}
const waitDelay = options?.timeout ?? WAIT_DELAY;
let timeoutId;
const messageOrTimeout = await Promise.race([
ws.nextMessage,
new Promise((resolve) => {
timeoutId = setTimeout(() => resolve(TIMEOUT), waitDelay);
}),
]);
clearTimeout(timeoutId);
if (messageOrTimeout === TIMEOUT) {
return {
pass: this.isNot, // always fail
message: () =>
this.utils.matcherHint(
this.isNot ? ".not.toReceiveMessage" : ".toReceiveMessage",
"WS",
"expected"
) +
"\n\n" +
`Expected the websocket server to receive a message,\n` +
`but it didn't receive anything in ${waitDelay}ms.`,
};
}
const received = messageOrTimeout;
const pass = this.equals(received, expected);
const message = pass
? () =>
this.utils.matcherHint(".not.toReceiveMessage", "WS", "expected") +
"\n\n" +
`Expected the next received message to not equal:\n` +
` ${this.utils.printExpected(expected)}\n` +
`Received:\n` +
` ${this.utils.printReceived(received)}`
: () => {
const diffString = diff(expected, received, { expand: this.expand });
return (
this.utils.matcherHint(".toReceiveMessage", "WS", "expected") +
"\n\n" +
`Expected the next received message to equal:\n` +
` ${this.utils.printExpected(expected)}\n` +
`Received:\n` +
` ${this.utils.printReceived(received)}\n\n` +
`Difference:\n\n${diffString}`
);
};
return {
actual: received,
expected,
message,
name: "toReceiveMessage",
pass,
};
},
toHaveReceivedMessages(ws: WS, messages: Array<DeserializedMessage>) {
const isWS = ws instanceof WS;
if (!isWS) {
return {
pass: this.isNot, // always fail
message: makeInvalidWsMessage.bind(this, ws, "toHaveReceivedMessages"),
};
}
const received = messages.map((expected) =>
// object comparison to handle JSON protocols
ws.messages.some((actual) => this.equals(actual, expected))
);
const pass = this.isNot ? received.some(Boolean) : received.every(Boolean);
const message = pass
? () =>
this.utils.matcherHint(
".not.toHaveReceivedMessages",
"WS",
"expected"
) +
"\n\n" +
`Expected the WS server to not have received the following messages:\n` +
` ${this.utils.printExpected(messages)}\n` +
`But it received:\n` +
` ${this.utils.printReceived(ws.messages)}`
: () => {
return (
this.utils.matcherHint(
".toHaveReceivedMessages",
"WS",
"expected"
) +
"\n\n" +
`Expected the WS server to have received the following messages:\n` +
` ${this.utils.printExpected(messages)}\n` +
`Received:\n` +
` ${this.utils.printReceived(ws.messages)}\n\n`
);
};
return {
actual: ws.messages,
expected: messages,
message,
name: "toHaveReceivedMessages",
pass,
};
},
});

29
node_modules/jest-websocket-mock/src/queue.ts generated vendored Normal file
View File

@@ -0,0 +1,29 @@
export default class Queue<ItemT> {
pendingItems: Array<ItemT> = [];
nextItemResolver!: () => void;
nextItem: Promise<void> = new Promise(
(done) => (this.nextItemResolver = done)
);
put(item: ItemT): void {
this.pendingItems.push(item);
this.nextItemResolver();
this.nextItem = new Promise((done) => (this.nextItemResolver = done));
}
get(): Promise<ItemT> {
const item = this.pendingItems.shift();
if (item) {
// return the next queued item immediately
return Promise.resolve(item);
}
let resolver: (item: ItemT) => void;
const nextItemPromise: Promise<ItemT> = new Promise(
(done) => (resolver = done)
);
this.nextItem.then(() => {
resolver(this.pendingItems.shift() as ItemT);
});
return nextItemPromise;
}
}

124
node_modules/jest-websocket-mock/src/websocket.ts generated vendored Normal file
View File

@@ -0,0 +1,124 @@
import { Server, ServerOptions, CloseOptions, Client } from "mock-socket";
import Queue from "./queue";
import act from "./act-compat";
const identity = (x: string) => x;
interface WSOptions extends ServerOptions {
jsonProtocol?: boolean;
}
export type DeserializedMessage<TMessage = object> = string | TMessage;
// The WebSocket object passed to the `connection` callback is actually
// a WebSocket proxy that overrides the signature of the `close` method.
// To work around this inconsistency, we need to override the WebSocket
// interface. See https://github.com/romgain/jest-websocket-mock/issues/26#issuecomment-571579567
interface MockWebSocket extends Omit<Client, "close"> {
close(options?: CloseOptions): void;
}
export default class WS {
server: Server;
serializer: (deserializedMessage: DeserializedMessage) => string;
deserializer: (message: string) => DeserializedMessage;
static instances: Array<WS> = [];
messages: Array<DeserializedMessage> = [];
messagesToConsume = new Queue();
private _isConnected: Promise<Client>;
private _isClosed: Promise<{}>;
static clean() {
WS.instances.forEach((instance) => {
instance.close();
instance.messages = [];
});
WS.instances = [];
}
constructor(url: string, opts: WSOptions = {}) {
WS.instances.push(this);
const { jsonProtocol = false, ...serverOptions } = opts;
this.serializer = jsonProtocol ? JSON.stringify : identity;
this.deserializer = jsonProtocol ? JSON.parse : identity;
let connectionResolver: (socket: Client) => void,
closedResolver!: (socket: Client) => void;
this._isConnected = new Promise((done) => (connectionResolver = done));
this._isClosed = new Promise((done) => (closedResolver = done));
this.server = new Server(url, serverOptions);
this.server.on("close", closedResolver);
this.server.on("connection", (socket: Client) => {
connectionResolver(socket);
socket.on("message", (message) => {
const parsedMessage = this.deserializer(message as string);
this.messages.push(parsedMessage);
this.messagesToConsume.put(parsedMessage);
});
});
}
get connected() {
let resolve: (socket: Client) => void;
const connectedPromise = new Promise<Client>((done) => (resolve = done));
const waitForConnected = async () => {
await act(async () => {
await this._isConnected;
});
resolve(await this._isConnected); // make sure `await act` is really done
};
waitForConnected();
return connectedPromise;
}
get closed() {
let resolve: () => void;
const closedPromise = new Promise<void>((done) => (resolve = done));
const waitForclosed = async () => {
await act(async () => {
await this._isClosed;
});
await this._isClosed; // make sure `await act` is really done
resolve();
};
waitForclosed();
return closedPromise;
}
get nextMessage() {
return this.messagesToConsume.get();
}
on(
eventName: "connection" | "message" | "close",
callback: (socket: MockWebSocket) => void
): void {
// @ts-ignore https://github.com/romgain/jest-websocket-mock/issues/26#issuecomment-571579567
this.server.on(eventName, callback);
}
send(message: DeserializedMessage) {
act(() => {
this.server.emit("message", this.serializer(message));
});
}
close(options?: CloseOptions) {
act(() => {
this.server.close(options);
});
}
error(options?: CloseOptions) {
act(() => {
this.server.emit("error", null);
});
this.server.close(options);
}
}