test: validate that message is sent

src/components/Room/Room.test.tsx

@@ -1,32 +1,69 @@
+import { PropsWithChildren } from 'react'
 import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { MemoryRouter as Router, Route, Routes } from 'react-router-dom'
 
 import { Room } from './'
 
-const getRoomStub = () => {
+const mockSender = jest.fn()
+
+jest.mock('trystero', () => ({
+  joinRoom: () => ({
+    makeAction: () => [mockSender, () => {}, () => {}],
+    ping: () => Promise.resolve(0),
+    leave: () => {},
+    getPeers: () => [],
+    addStream: () => [Promise.resolve()],
+    removeStream: () => {},
+    addTrack: () => [Promise.resolve()],
+    removeTrack: () => {},
+    replaceTrack: () => [Promise.resolve()],
+    onPeerJoin: () => {},
+    onPeerLeave: () => {},
+    onPeerStream: () => {},
+    onPeerTrack: () => {},
+  }),
+}))
+
+const RouteStub = ({ children }: PropsWithChildren) => {
   return (
     <Router initialEntries={['/public/abc123']}>
       <Routes>
-        <Route path="/public/:roomId" element={<Room />}></Route>
+        <Route path="/public/:roomId" element={children}></Route>
       </Routes>
     </Router>
   )
 }
 
+jest.useFakeTimers().setSystemTime(100)
+
 describe('Room', () => {
   test('is available', () => {
-    render(getRoomStub())
+    render(
+      <RouteStub>
+        <Room />
+      </RouteStub>
+    )
   })
 
   test('send button is disabled', () => {
-    render(getRoomStub())
+    render(
+      <RouteStub>
+        <Room />
+      </RouteStub>
+    )
+
     const sendButton = screen.getByText('Send')
     expect(sendButton).toBeDisabled()
   })
 
   test('inputting text enabled send button', () => {
-    render(getRoomStub())
+    render(
+      <RouteStub>
+        <Room />
+      </RouteStub>
+    )
+
     const sendButton = screen.getByText('Send')
     const textInput = screen.getByPlaceholderText('Your message')
     userEvent.type(textInput, 'hello')
@@ -34,11 +71,30 @@ describe('Room', () => {
   })
 
   test('sending a message clears the text input', () => {
-    render(getRoomStub())
+    render(
+      <RouteStub>
+        <Room />
+      </RouteStub>
+    )
+
     const sendButton = screen.getByText('Send')
     const textInput = screen.getByPlaceholderText('Your message')
     userEvent.type(textInput, 'hello')
     userEvent.click(sendButton)
     expect(textInput).toHaveValue('')
   })
+
+  test('message is sent to peer', () => {
+    render(
+      <RouteStub>
+        <Room />
+      </RouteStub>
+    )
+
+    const sendButton = screen.getByText('Send')
+    const textInput = screen.getByPlaceholderText('Your message')
+    userEvent.type(textInput, 'hello')
+    userEvent.click(sendButton)
+    expect(mockSender).toHaveBeenCalledWith({ text: 'hello', timeSent: 100 })
+  })
 })

src/setupTests.ts

@@ -3,3 +3,7 @@
 // expect(element).toHaveTextContent(/react/i)
 // learn more: https://github.com/testing-library/jest-dom
 import '@testing-library/jest-dom'
+
+afterEach(() => {
+  jest.restoreAllMocks()
+})