diff --git a/src/components/messenger/list/conversation-item.test.tsx b/src/components/messenger/list/conversation-item.test.tsx index 819ef0079..53e7694e9 100644 --- a/src/components/messenger/list/conversation-item.test.tsx +++ b/src/components/messenger/list/conversation-item.test.tsx @@ -119,21 +119,6 @@ describe('ConversationItem', () => { expect(wrapper.find('.conversation-item__unread-count').text()).toEqual('7'); }); - it('renders last message timestamp', function () { - const now = moment(); - const wrapper = subject({ - conversation: { - lastMessage: { - createdAt: now.valueOf(), - sender: { userId: 'id' }, - }, - otherMembers: [], - } as any, - }); - - expect(wrapper.find('.conversation-item__timestamp').text()).toEqual(now.format('MMM D')); - }); - it('renders the message preview', function () { const messagePreview = 'I said something here'; @@ -272,6 +257,48 @@ describe('ConversationItem', () => { expect(wrapper.find('Tooltip').prop('overlay')).toEqual('Johnny Cash, Jackie Chan'); }); }); + + describe('displayDate', () => { + const createWrapper = (createdAt: moment.Moment) => { + return subject({ + conversation: { + lastMessage: { + createdAt: createdAt.valueOf(), + sender: { userId: 'id' }, + }, + otherMembers: [], + } as any, + }); + }; + + it('displays the time of day for messages sent on the current day', () => { + const now = moment(); + const wrapper = createWrapper(now); + + expect(wrapper.find('.conversation-item__timestamp').text()).toEqual(now.format('h:mm A')); + }); + + it('displays the three-letter day abbreviation for messages sent within the preceding 7 days', () => { + const sevenDaysAgo = moment().subtract(5, 'days'); + const wrapper = createWrapper(sevenDaysAgo); + + expect(wrapper.find('.conversation-item__timestamp').text()).toEqual(sevenDaysAgo.format('ddd')); + }); + + it('displays the three-letter month abbreviation and day of the month for messages sent in the same calendar year prior to the last 7 days', () => { + const messageDate = moment().subtract(10, 'days'); + const wrapper = createWrapper(messageDate); + + expect(wrapper.find('.conversation-item__timestamp').text()).toEqual(messageDate.format('MMM D')); + }); + + it('displays the three-letter month abbreviation, day of the month, and the year for messages sent before the current calendar year', () => { + const messageDate = moment().subtract(1, 'year').subtract(5, 'days'); + const wrapper = createWrapper(messageDate); + + expect(wrapper.find('.conversation-item__timestamp').text()).toEqual(messageDate.format('MMM D, YYYY')); + }); + }); }); function title(wrapper) { diff --git a/src/components/messenger/list/conversation-item.tsx b/src/components/messenger/list/conversation-item.tsx index 31e708715..a4292aa6d 100644 --- a/src/components/messenger/list/conversation-item.tsx +++ b/src/components/messenger/list/conversation-item.tsx @@ -94,9 +94,23 @@ export class ConversationItem extends React.Component { } get displayDate() { - if (this.props.conversation?.lastMessage?.createdAt) { - return moment(this.props.conversation.lastMessage.createdAt).format('MMM D'); + const { lastMessage } = this.props.conversation; + + if (lastMessage?.createdAt) { + const messageDate = moment(lastMessage.createdAt); + const currentDate = moment(); + + if (messageDate.isSame(currentDate, 'day')) { + return messageDate.format('h:mm A'); + } else if (messageDate.isAfter(currentDate.clone().subtract(7, 'days'), 'day')) { + return messageDate.format('ddd'); + } else if (messageDate.year() === currentDate.year()) { + return messageDate.format('MMM D'); + } else { + return messageDate.format('MMM D, YYYY'); + } } + return ''; }