test: validate message sending UX

src/components/Room/Room.test.tsx

@@ -1,4 +1,5 @@
-import { render } from '@testing-library/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 './'
@@ -17,4 +18,27 @@ describe('Room', () => {
   test('is available', () => {
     render(getRoomStub())
   })
+
+  test('send button is disabled', () => {
+    render(getRoomStub())
+    const sendButton = screen.getByText('Send')
+    expect(sendButton).toBeDisabled()
+  })
+
+  test('inputting text enabled send button', () => {
+    render(getRoomStub())
+    const sendButton = screen.getByText('Send')
+    const textInput = screen.getByPlaceholderText('Your message')
+    userEvent.type(textInput, 'hello')
+    expect(sendButton).not.toBeDisabled()
+  })
+
+  test('sending a message clears the text input', () => {
+    render(getRoomStub())
+    const sendButton = screen.getByText('Send')
+    const textInput = screen.getByPlaceholderText('Your message')
+    userEvent.type(textInput, 'hello')
+    userEvent.click(sendButton)
+    expect(textInput).toHaveValue('')
+  })
 })

src/components/Room/Room.tsx

@@ -62,11 +62,11 @@ export function Room({
       <form onSubmit={handleMessageSubmit} className="max-w-xl mt-8">
         <FormControl fullWidth>
           <TextField
-            label="Your message"
             variant="outlined"
             value={textMessage}
             onChange={handleMessageChange}
             size="medium"
+            placeholder="Your message"
           />
         </FormControl>
         <Button