Chat ChatMessageDisplay.js

100% Statements 5/5

100% Branches 4/4

100% Functions 1/1

100% Lines 5/5

Press n or j to go to the next uncovered block, b, p or k for the previous block.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27  
 
5x
36x
 
36x
 
36x
 
36x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import { Card } from 'react-bootstrap';
 
const ChatMessageDisplay = ({ message }) => {
  const username = message?.username || "Anonymous";
 
  const formattedTimestamp = message?.timestamp ? message.timestamp.replace('T', ' ').split('.')[0] : '';
 
  const testId = `ChatMessageDisplay-${message?.id}`;
 
  return (
    <Card data-testid={testId}>
      <Card.Body>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <Card.Title data-testid={`${testId}-User`} style={{ margin: 0 }}>
            {username} ({message?.userId})
          </Card.Title>
          <Card.Subtitle data-testid={`${testId}-Date`} style={{ margin: 0 }}>
            {formattedTimestamp}
          </Card.Subtitle>
        </div>
        <Card.Text data-testid={`${testId}-Message`}>{message?.message}</Card.Text>
      </Card.Body>
    </Card>
  );
};
 
export default ChatMessageDisplay;