From 3bbe8b1430b561064b9d00b53ad1bde70b24b2ae Mon Sep 17 00:00:00 2001
From: Jeremy Kahn <jeremyckahn@gmail.com>
Date: Thu, 18 Aug 2022 21:36:13 -0500
Subject: [PATCH] test: validate message sending UX

---
 src/components/Room/Room.test.tsx | 26 +++++++++++++++++++++++++-
 src/components/Room/Room.tsx      |  2 +-
 2 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/src/components/Room/Room.test.tsx b/src/components/Room/Room.test.tsx
index 52ededc..9e93d8d 100644
--- a/src/components/Room/Room.test.tsx
+++ b/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('')
+  })
 })
diff --git a/src/components/Room/Room.tsx b/src/components/Room/Room.tsx
index 21b4375..dd21758 100644
--- a/src/components/Room/Room.tsx
+++ b/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