-
Notifications
You must be signed in to change notification settings - Fork 11k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
chore: refactor sidebar unread handler (#33792)
- Loading branch information
1 parent
dfd59e5
commit c68cd1b
Showing
5 changed files
with
330 additions
and
63 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
237 changes: 237 additions & 0 deletions
237
apps/meteor/client/sidebarv2/hooks/useUnreadDisplay.spec.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,237 @@ | ||
| import { mockAppRoot } from '@rocket.chat/mock-providers'; | ||
| import { renderHook } from '@testing-library/react'; | ||
|
|
||
| import { createFakeSubscription } from '../../../tests/mocks/data'; | ||
| import { useUnreadDisplay } from './useUnreadDisplay'; | ||
|
|
||
| const dmUnread = createFakeSubscription({ | ||
| t: 'd', | ||
| unread: 3, | ||
| userMentions: 0, | ||
| groupMentions: 0, | ||
| tunread: undefined, | ||
| tunreadUser: undefined, | ||
| }); | ||
|
|
||
| const dmThread = createFakeSubscription({ | ||
| t: 'd', | ||
| unread: 3, | ||
| userMentions: 0, | ||
| groupMentions: 0, | ||
| tunread: ['1'], | ||
| tunreadUser: undefined, | ||
| }); | ||
|
|
||
| const alert = createFakeSubscription({ | ||
| t: 'p', | ||
| unread: 0, | ||
| userMentions: 0, | ||
| groupMentions: 0, | ||
| tunread: undefined, | ||
| tunreadUser: undefined, | ||
| alert: true, | ||
| }); | ||
|
|
||
| const mentionAndGroupMention = createFakeSubscription({ | ||
| t: 'p', | ||
| unread: 2, | ||
| userMentions: 1, | ||
| groupMentions: 1, | ||
| tunread: undefined, | ||
| tunreadUser: undefined, | ||
| alert: true, | ||
| }); | ||
|
|
||
| const groupMention = createFakeSubscription({ | ||
| t: 'p', | ||
| unread: 2, | ||
| userMentions: 0, | ||
| groupMentions: 2, | ||
| tunread: undefined, | ||
| tunreadUser: undefined, | ||
| alert: true, | ||
| }); | ||
|
|
||
| const tunread = createFakeSubscription({ | ||
| t: 'p', | ||
| unread: 0, | ||
| userMentions: 0, | ||
| groupMentions: 0, | ||
| tunread: ['1'], | ||
| tunreadUser: undefined, | ||
| alert: true, | ||
| }); | ||
|
|
||
| const tunreadUser = createFakeSubscription({ | ||
| t: 'p', | ||
| unread: 1, | ||
| userMentions: 0, | ||
| groupMentions: 0, | ||
| tunread: ['1'], | ||
| tunreadUser: ['1'], | ||
| alert: true, | ||
| }); | ||
|
|
||
| const hideUnreadStatus = createFakeSubscription({ | ||
| t: 'p', | ||
| hideUnreadStatus: true, | ||
| }); | ||
|
|
||
| const hideUnreadAndMention = createFakeSubscription({ | ||
| t: 'p', | ||
| hideUnreadStatus: true, | ||
| hideMentionStatus: true, | ||
| }); | ||
|
|
||
| const noUnread = createFakeSubscription({ | ||
| t: 'p', | ||
| unread: 0, | ||
| userMentions: 0, | ||
| groupMentions: 0, | ||
| tunread: undefined, | ||
| tunreadUser: undefined, | ||
| }); | ||
|
|
||
| const wrapper = mockAppRoot() | ||
| .withTranslations('en', 'core', { | ||
| mentions_counter_one: '{{count}} mention', | ||
| mentions_counter_other: '{{count}} mentions', | ||
| threads_counter_one: '{{count}} unread threaded message', | ||
| threads_counter_other: '{{count}} unread threaded messages', | ||
| group_mentions_counter_one: '{{count}} group mention', | ||
| group_mentions_counter_other: '{{count}} group mentions', | ||
| unread_messages_counter_one: '{{count}} unread message', | ||
| unread_messages_counter_other: '{{count}} unread messages', | ||
| }) | ||
| .build(); | ||
|
|
||
| it('should return correct unread data for [Direct message unread]', async () => { | ||
| const { result } = renderHook(() => useUnreadDisplay(dmUnread), { | ||
| legacyRoot: true, | ||
| wrapper, | ||
| }); | ||
| expect(result.current.unreadVariant).toBe('secondary'); | ||
| expect(result.current.unreadTitle).toBe('3 unread messages'); | ||
|
|
||
| expect(result.current.unreadCount).toHaveProperty('mentions', 0); | ||
| expect(result.current.unreadCount).toHaveProperty('threads', 0); | ||
| expect(result.current.unreadCount).toHaveProperty('groupMentions', 0); | ||
| expect(result.current.unreadCount).toHaveProperty('total', 3); | ||
| }); | ||
|
|
||
| it('should return correct unread data for [Direct message with thread unread]', async () => { | ||
| const { result } = renderHook(() => useUnreadDisplay(dmThread), { | ||
| legacyRoot: true, | ||
| wrapper, | ||
| }); | ||
| expect(result.current.unreadVariant).toBe('primary'); | ||
| expect(result.current.unreadTitle).toBe('1 unread threaded message, 3 unread messages'); | ||
|
|
||
| expect(result.current.unreadCount).toHaveProperty('mentions', 0); | ||
| expect(result.current.unreadCount).toHaveProperty('threads', 1); | ||
| expect(result.current.unreadCount).toHaveProperty('groupMentions', 0); | ||
| expect(result.current.unreadCount).toHaveProperty('total', 4); | ||
| }); | ||
|
|
||
| it('should return correct unread data for [Channel with unread messages alert only]', async () => { | ||
| const { result } = renderHook(() => useUnreadDisplay(alert), { | ||
| legacyRoot: true, | ||
| wrapper, | ||
| }); | ||
|
|
||
| expect(result.current.highlightUnread).toBe(true); | ||
| expect(result.current.showUnread).toBe(false); | ||
|
|
||
| expect(result.current.unreadCount).toHaveProperty('mentions', 0); | ||
| expect(result.current.unreadCount).toHaveProperty('threads', 0); | ||
| expect(result.current.unreadCount).toHaveProperty('groupMentions', 0); | ||
| expect(result.current.unreadCount).toHaveProperty('total', 0); | ||
| }); | ||
|
|
||
| it('should return correct unread data for [Mention and group mention]', async () => { | ||
| const { result } = renderHook(() => useUnreadDisplay(mentionAndGroupMention), { | ||
| legacyRoot: true, | ||
| wrapper, | ||
| }); | ||
| expect(result.current.unreadVariant).toBe('danger'); | ||
| expect(result.current.unreadTitle).toBe('1 mention, 1 group mention'); | ||
|
|
||
| expect(result.current.unreadCount).toHaveProperty('mentions', 1); | ||
| expect(result.current.unreadCount).toHaveProperty('threads', 0); | ||
| expect(result.current.unreadCount).toHaveProperty('groupMentions', 1); | ||
| expect(result.current.unreadCount).toHaveProperty('total', 2); | ||
| }); | ||
|
|
||
| it('should return correct unread data for [Group mention]', async () => { | ||
| const { result } = renderHook(() => useUnreadDisplay(groupMention), { | ||
| legacyRoot: true, | ||
| wrapper, | ||
| }); | ||
| expect(result.current.unreadVariant).toBe('warning'); | ||
| expect(result.current.unreadTitle).toBe('2 group mentions'); | ||
|
|
||
| expect(result.current.unreadCount).toHaveProperty('mentions', 0); | ||
| expect(result.current.unreadCount).toHaveProperty('threads', 0); | ||
| expect(result.current.unreadCount).toHaveProperty('groupMentions', 2); | ||
| expect(result.current.unreadCount).toHaveProperty('total', 2); | ||
| }); | ||
|
|
||
| it('should return correct unread data for [Thread unread]', async () => { | ||
| const { result } = renderHook(() => useUnreadDisplay(tunread), { | ||
| legacyRoot: true, | ||
| wrapper, | ||
| }); | ||
| expect(result.current.unreadVariant).toBe('primary'); | ||
| expect(result.current.unreadTitle).toBe('1 unread threaded message'); | ||
|
|
||
| expect(result.current.unreadCount).toHaveProperty('mentions', 0); | ||
| expect(result.current.unreadCount).toHaveProperty('groupMentions', 0); | ||
| expect(result.current.unreadCount).toHaveProperty('threads', 1); | ||
| expect(result.current.unreadCount).toHaveProperty('total', 1); | ||
| }); | ||
|
|
||
| it('should return correct unread data for [Thread and thread user mention]', async () => { | ||
| const { result } = renderHook(() => useUnreadDisplay(tunreadUser), { | ||
| legacyRoot: true, | ||
| wrapper, | ||
| }); | ||
| expect(result.current.unreadVariant).toBe('danger'); | ||
| expect(result.current.unreadTitle).toBe('1 mention, 1 unread threaded message'); | ||
|
|
||
| expect(result.current.unreadCount).toHaveProperty('mentions', 1); | ||
| expect(result.current.unreadCount).toHaveProperty('groupMentions', 0); | ||
| expect(result.current.unreadCount).toHaveProperty('threads', 1); | ||
| expect(result.current.unreadCount).toHaveProperty('total', 2); | ||
| }); | ||
|
|
||
| it('should not highlight unread if hideUnreadStatus is enabled', async () => { | ||
| const { result } = renderHook(() => useUnreadDisplay(hideUnreadStatus), { | ||
| legacyRoot: true, | ||
| }); | ||
|
|
||
| expect(result.current.highlightUnread).toBe(false); | ||
| expect(result.current.showUnread).toBe(true); | ||
| }); | ||
|
|
||
| it('should not show unread if hideUnreadStatus and hideMentionStatus is enabled', async () => { | ||
| const { result } = renderHook(() => useUnreadDisplay(hideUnreadAndMention), { | ||
| legacyRoot: true, | ||
| }); | ||
|
|
||
| expect(result.current.highlightUnread).toBe(false); | ||
| expect(result.current.showUnread).toBe(false); | ||
| }); | ||
|
|
||
| it("should not show unread if there isn't any unread message", async () => { | ||
| const { result } = renderHook(() => useUnreadDisplay(noUnread), { | ||
| legacyRoot: true, | ||
| }); | ||
|
|
||
| expect(result.current.highlightUnread).toBe(false); | ||
| expect(result.current.showUnread).toBe(false); | ||
|
|
||
| expect(result.current.unreadCount).toHaveProperty('mentions', 0); | ||
| expect(result.current.unreadCount).toHaveProperty('groupMentions', 0); | ||
| expect(result.current.unreadCount).toHaveProperty('threads', 0); | ||
| expect(result.current.unreadCount).toHaveProperty('total', 0); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| import type { SubscriptionWithRoom } from '@rocket.chat/ui-contexts'; | ||
| import { useTranslation } from 'react-i18next'; | ||
|
|
||
| import { getSubscriptionUnreadData } from '../../../lib/getSubscriptionUnreadData'; | ||
|
|
||
| export const useUnreadDisplay = ( | ||
| unreadData: Pick< | ||
| SubscriptionWithRoom, | ||
| 'alert' | 'userMentions' | 'unread' | 'tunread' | 'tunreadUser' | 'groupMentions' | 'hideMentionStatus' | 'hideUnreadStatus' | ||
| >, | ||
| ) => { | ||
| const { t } = useTranslation(); | ||
|
|
||
| return getSubscriptionUnreadData(unreadData, t); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.