refactor: render Message component

src/components/ChatTranscript/ChatTranscript.tsx

@@ -1,9 +1,8 @@
-import Typography from '@mui/material/Typography'
+import { Message as IMessage } from 'models/chat'
-
+import { Message } from 'components/Message'
-import { isMessageReceived, UnsentMessage, ReceivedMessage } from 'models/chat'
 
 export interface ChatTranscriptProps {
-  messageLog: Array<UnsentMessage | ReceivedMessage>
+  messageLog: Array<IMessage>
   userId: string
 }
 
@@ -11,33 +10,7 @@ export const ChatTranscript = ({ messageLog, userId }: ChatTranscriptProps) => {
   return (
     <div className="ChatTranscript flex flex-col">
       {messageLog.map(message => {
-        let backgroundColor: string
+        return <Message key={message.id} message={message} userId={userId} />
-
-        if (message.authorId === userId) {
-          backgroundColor = isMessageReceived(message)
-            ? 'primary.dark'
-            : 'primary.main'
-        } else {
-          backgroundColor = 'grey.700'
-        }
-
-        return (
-          <div className="block" key={message.id}>
-            <Typography
-              variant="body1"
-              sx={{
-                backgroundColor,
-                margin: 0.5,
-                padding: 1,
-                borderRadius: 6,
-                float: message.authorId === userId ? 'right' : 'left',
-                transition: 'background-color 1s',
-              }}
-            >
-              {message.text}
-            </Typography>
-          </div>
-        )
       })}
     </div>
   )

src/components/Message/Message.test.tsx

@@ -0,0 +1,36 @@
+import { render, screen } from '@testing-library/react'
+
+import { ReceivedMessage, UnsentMessage } from 'models/chat'
+
+import { Message } from './Message'
+
+const mockUserId = 'user-123'
+
+const mockUnsentMessage: UnsentMessage = {
+  id: 'abc123',
+  text: 'unsent message',
+  timeSent: 1,
+  authorId: mockUserId,
+}
+
+const mockReceivedMessage: ReceivedMessage = {
+  id: 'abc123',
+  text: 'received message',
+  timeSent: 1,
+  authorId: mockUserId,
+  timeReceived: 2,
+}
+
+describe('Message', () => {
+  test('renders unsent message text', () => {
+    render(<Message message={mockUnsentMessage} userId={mockUserId} />)
+
+    screen.getByText(mockUnsentMessage.text)
+  })
+
+  test('renders received message text', () => {
+    render(<Message message={mockReceivedMessage} userId={mockUserId} />)
+
+    screen.getByText(mockReceivedMessage.text)
+  })
+})

src/components/Message/Message.tsx

@@ -0,0 +1,38 @@
+import Typography from '@mui/material/Typography'
+
+import { Message as IMessage, isMessageReceived } from 'models/chat'
+
+export interface MessageProps {
+  message: IMessage
+  userId: string
+}
+
+export const Message = ({ message, userId }: MessageProps) => {
+  let backgroundColor: string
+
+  if (message.authorId === userId) {
+    backgroundColor = isMessageReceived(message)
+      ? 'primary.dark'
+      : 'primary.main'
+  } else {
+    backgroundColor = 'grey.700'
+  }
+
+  return (
+    <div className="Message block">
+      <Typography
+        variant="body1"
+        sx={{
+          backgroundColor,
+          margin: 0.5,
+          padding: 1,
+          borderRadius: 6,
+          float: message.authorId === userId ? 'right' : 'left',
+          transition: 'background-color 1s',
+        }}
+      >
+        {message.text}
+      </Typography>
+    </div>
+  )
+}

src/components/Message/index.ts

@@ -0,0 +1 @@
+export * from './Message'

src/models/chat.ts

@@ -10,5 +10,7 @@ export interface ReceivedMessage extends UnsentMessage {
 }
 
 export const isMessageReceived = (
-  message: UnsentMessage
+  message: Message
 ): message is ReceivedMessage => 'timeReceived' in message
+
+export type Message = UnsentMessage | ReceivedMessage