mirror of https://github.com/waku-org/js-waku.git
Create waku mock
This commit is contained in:
parent
5f9e6b24eb
commit
ca7445d65c
|
@ -1,6 +1,6 @@
|
|||
import React from 'react';
|
||||
import './App.css';
|
||||
import Log from './Log';
|
||||
import Room from './Room';
|
||||
|
||||
interface Props {
|
||||
}
|
||||
|
@ -21,8 +21,8 @@ class App extends React.Component<Props, State> {
|
|||
render() {
|
||||
return (
|
||||
<div className='App'>
|
||||
<div className='chat-log'>
|
||||
<Log lines={this.state.messages} />
|
||||
<div className='chat-room'>
|
||||
<Room lines={this.state.messages} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
@ -7,10 +7,10 @@ interface Props {
|
|||
interface State {
|
||||
}
|
||||
|
||||
export default class Log extends React.Component<Props, State> {
|
||||
export default class Room extends React.Component<Props, State> {
|
||||
render() {
|
||||
return (
|
||||
<div className='log'>
|
||||
<div className='room'>
|
||||
{this.renderLines(this.props.lines)}
|
||||
</div>
|
||||
);
|
||||
|
@ -20,7 +20,7 @@ export default class Log extends React.Component<Props, State> {
|
|||
|
||||
const renderedLines = [];
|
||||
for (const line of lines) {
|
||||
renderedLines.push(<div className='log-row'>{line}</div>);
|
||||
renderedLines.push(<div className='room-row'>{line}</div>);
|
||||
}
|
||||
|
||||
return (
|
|
@ -0,0 +1,30 @@
|
|||
import WakuMock, { Message } from './WakuMock';
|
||||
|
||||
test('Messages are emitted', async () => {
|
||||
const wakuMock = await WakuMock.create();
|
||||
|
||||
let message: Message;
|
||||
wakuMock.on('message', (msg) => {
|
||||
message = msg;
|
||||
});
|
||||
|
||||
await new Promise((resolve) => setTimeout(resolve, 2000));
|
||||
// @ts-ignore
|
||||
expect(message.message).toBeDefined();
|
||||
});
|
||||
|
||||
test('Messages are sent', async () => {
|
||||
const wakuMock = await WakuMock.create();
|
||||
|
||||
const text = 'This is a message.';
|
||||
|
||||
let message: Message;
|
||||
wakuMock.on('message', (msg) => {
|
||||
message = msg;
|
||||
});
|
||||
|
||||
await wakuMock.send(text);
|
||||
|
||||
// @ts-ignore
|
||||
expect(message.message).toEqual(text);
|
||||
});
|
|
@ -0,0 +1,71 @@
|
|||
class EventEmitter<T> {
|
||||
public callbacks: { [key: string]: Array<(data: T) => void> };
|
||||
|
||||
constructor() {
|
||||
this.callbacks = {};
|
||||
}
|
||||
|
||||
on(event: string, cb: (data: T) => void) {
|
||||
if (!this.callbacks[event]) this.callbacks[event] = [];
|
||||
this.callbacks[event].push(cb);
|
||||
}
|
||||
|
||||
emit(event: string, data: T) {
|
||||
let cbs = this.callbacks[event];
|
||||
if (cbs) {
|
||||
cbs.forEach(cb => cb(data));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
export interface Message {
|
||||
timestamp: Date;
|
||||
handle: string;
|
||||
message: string;
|
||||
}
|
||||
|
||||
export default class WakuMock extends EventEmitter<Message> {
|
||||
index: number;
|
||||
intervalId?: number | NodeJS.Timeout;
|
||||
|
||||
private constructor() {
|
||||
super();
|
||||
this.index = 0;
|
||||
}
|
||||
|
||||
public static async create(): Promise<WakuMock> {
|
||||
await new Promise((resolve) => setTimeout(resolve, 1000));
|
||||
|
||||
const wakuMock = new WakuMock();
|
||||
wakuMock.startInterval();
|
||||
return wakuMock;
|
||||
}
|
||||
|
||||
public async send(message: string): Promise<void> {
|
||||
const timestamp = new Date();
|
||||
const handle = 'me';
|
||||
this.emit('message', {
|
||||
timestamp,
|
||||
handle,
|
||||
message
|
||||
});
|
||||
}
|
||||
|
||||
private startInterval() {
|
||||
if (this.intervalId === undefined) {
|
||||
this.intervalId = setInterval(this.emitMessage.bind(this), 1000);
|
||||
}
|
||||
}
|
||||
|
||||
private emitMessage() {
|
||||
const handle = 'you';
|
||||
const timestamp = new Date();
|
||||
this.emit('message', {
|
||||
timestamp,
|
||||
handle,
|
||||
message: `This is message #${this.index++}.`
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -12,12 +12,12 @@ code {
|
|||
monospace;
|
||||
}
|
||||
|
||||
.log-row {
|
||||
.room-row {
|
||||
text-align: left;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.log-row:after {
|
||||
.room-row:after {
|
||||
clear: both;
|
||||
content: "";
|
||||
display: table;
|
||||
|
|
Loading…
Reference in New Issue