MM-54211 Fix Unreads category being visible with no unread channels (#24334)

webapp/channels/src/components/sidebar/sidebar.test.tsx

@@ -1,19 +1,30 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React from 'react';
 import {shallow} from 'enzyme';
+import React from 'react';
 
-import Sidebar from 'components/sidebar/sidebar';
+import {DeepPartial} from '@mattermost/types/utilities';
-import Constants, {ModalIdentifiers} from '../../utils/constants';
+
+import {Preferences} from 'mattermost-redux/constants';
+
+import mergeObjects from 'packages/mattermost-redux/test/merge_objects';
+import {renderWithFullContext, screen} from 'tests/react_testing_utils';
+import type {GlobalState} from 'types/store';
+import Constants, {ModalIdentifiers} from 'utils/constants';
+import {TestHelper} from 'utils/test_helper';
+
+import Sidebar from './sidebar';
 
 describe('components/sidebar', () => {
+    const currentTeamId = 'fake_team_id';
+
     const baseProps = {
         canCreatePublicChannel: true,
         canCreatePrivateChannel: true,
         canJoinPublicChannel: true,
         isOpen: false,
-        teamId: 'fake_team_id',
+        teamId: currentTeamId,
         hasSeenModal: true,
         isCloud: false,
         unreadFilterEnabled: false,
@@ -113,4 +124,134 @@ describe('components/sidebar', () => {
 
         expect(wrapper).toMatchSnapshot();
     });
+
+    describe('unreads category', () => {
+        const currentUserId = 'current_user_id';
+
+        const channel1 = TestHelper.getChannelMock({id: 'channel1', team_id: currentTeamId});
+        const channel2 = TestHelper.getChannelMock({id: 'channel2', team_id: currentTeamId});
+
+        const baseState: DeepPartial<GlobalState> = {
+            entities: {
+                channels: {
+                    currentChannelId: channel1.id,
+                    channels: {
+                        channel1,
+                        channel2,
+                    },
+                    channelsInTeam: {
+                        [currentTeamId]: [channel1.id, channel2.id],
+                    },
+                    messageCounts: {
+                        channel1: {total: 10},
+                        channel2: {total: 10},
+                    },
+                    myMembers: {
+                        channel1: TestHelper.getChannelMembershipMock({channel_id: channel1.id, user_id: currentUserId, msg_count: 10}),
+                        channel2: TestHelper.getChannelMembershipMock({channel_id: channel2.id, user_id: currentUserId, msg_count: 10}),
+                    },
+                },
+                teams: {
+                    currentTeamId,
+                    teams: {
+                        [currentTeamId]: TestHelper.getTeamMock({id: currentTeamId}),
+                    },
+                },
+                users: {
+                    currentUserId,
+                },
+            },
+        };
+
+        test('should not render unreads category when disabled by user preference', () => {
+            const testState = mergeObjects(baseState, {
+                entities: {
+                    channels: {
+                        messageCounts: {
+                            [channel2.id]: {total: 15},
+                        },
+                    },
+                    preferences: {
+                        myPreferences: TestHelper.getPreferencesMock([
+                            {category: Preferences.CATEGORY_SIDEBAR_SETTINGS, name: Preferences.SHOW_UNREAD_SECTION, value: 'false'},
+                        ]),
+                    },
+                },
+            });
+
+            renderWithFullContext(
+                <Sidebar {...baseProps}/>,
+                mergeObjects(baseState, testState),
+            );
+
+            expect(screen.queryByText('UNREADS')).not.toBeInTheDocument();
+        });
+
+        test('should render unreads category when there are unread channels', () => {
+            const testState: DeepPartial<GlobalState> = {
+                entities: {
+                    channels: {
+                        messageCounts: {
+                            [channel2.id]: {total: 15},
+                        },
+                    },
+                    preferences: {
+                        myPreferences: TestHelper.getPreferencesMock([
+                            {category: Preferences.CATEGORY_SIDEBAR_SETTINGS, name: Preferences.SHOW_UNREAD_SECTION, value: 'true'},
+                        ]),
+                    },
+                },
+            };
+
+            renderWithFullContext(
+                <Sidebar {...baseProps}/>,
+                mergeObjects(baseState, testState),
+            );
+
+            expect(screen.queryByText('UNREADS')).toBeInTheDocument();
+        });
+
+        test('should not render unreads category when there are no unread channels', () => {
+            const testState: DeepPartial<GlobalState> = {
+                entities: {
+                    preferences: {
+                        myPreferences: TestHelper.getPreferencesMock([
+                            {category: Preferences.CATEGORY_SIDEBAR_SETTINGS, name: Preferences.SHOW_UNREAD_SECTION, value: 'true'},
+                        ]),
+                    },
+                },
+            };
+
+            renderWithFullContext(
+                <Sidebar {...baseProps}/>,
+                mergeObjects(baseState, testState),
+            );
+
+            expect(screen.queryByText('UNREADS')).not.toBeInTheDocument();
+        });
+
+        test('should render unreads category when there are no unread channels but the current channel was previously unread', () => {
+            const testState: DeepPartial<GlobalState> = {
+                entities: {
+                    preferences: {
+                        myPreferences: TestHelper.getPreferencesMock([
+                            {category: Preferences.CATEGORY_SIDEBAR_SETTINGS, name: Preferences.SHOW_UNREAD_SECTION, value: 'true'},
+                        ]),
+                    },
+                },
+                views: {
+                    channel: {
+                        lastUnreadChannel: {id: channel1.id},
+                    },
+                },
+            };
+
+            renderWithFullContext(
+                <Sidebar {...baseProps}/>,
+                mergeObjects(baseState, testState),
+            );
+
+            expect(screen.queryByText('UNREADS')).toBeInTheDocument();
+        });
+    });
 });

webapp/channels/src/components/sidebar/unread_channels.tsx

@@ -35,6 +35,10 @@ export default function UnreadChannels({
         trackEvent('ui', 'ui_sidebar_category_menu_viewUnreadCategory');
     }, [unreadChannels, dispatch]);
 
+    if (unreadChannels.length === 0) {
+        return null;
+    }
+
     return (
         <div className='SidebarChannelGroup dropDisabled a11y__section'>
             <SidebarCategoryHeaderStatic displayName={intl.formatMessage({id: 'sidebar.types.unreads', defaultMessage: 'UNREADS'})}>