Chat ChatMessageDisplay.js

100% Statements 6/6

100% Branches 8/8

100% Functions 1/1

100% Lines 6/6

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
28  
 
5x
38x
38x
 
38x
 
38x
 
38x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import { Card } from 'react-bootstrap';
 
const ChatMessageDisplay = ({ message, currentUser }) => {
  const username = message?.username || "Anonymous";
  const isCurrentUser = message?.userId === currentUser?.root.user.id;
 
  const formattedTimestamp = message?.timestamp ? message.timestamp.replace('T', ' ').split('.')[0] : '';
 
  const testId = `ChatMessageDisplay-${message?.id}`;
 
  return (
    <Card data-testid={testId} style={{ border: 0, background: isCurrentUser ? 'whitesmoke' : 'white' }}>
      <Card.Body>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <Card.Title data-testid={`${testId}-User`} style={{ margin: 0, fontWeight: isCurrentUser ? '600' : '400' }}>
            {username} 
          </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;