Create waku mock

web-chat/src/App.tsx

@@ -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>
     );

web-chat/src/Room.tsx

@@ -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 (

web-chat/src/WakuMock.test.ts

@@ -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);
+});

web-chat/src/WakuMock.ts

@@ -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++}.`
+    });
+  }
+}
+

web-chat/src/index.css

@@ -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;