feat: add 'Show read notifications' setting (#2488)

Co-authored-by: Adam Setch <adam.setch@outlook.com>

Author: afonsojramos

src/renderer/__helpers__/jest.setup.ts

@@ -7,6 +7,19 @@ import '@testing-library/jest-dom';
  */
 import '@primer/react/test-helpers';
 
+/**
+ * Custom snapshot serializer to normalize React auto-generated IDs.
+ * This makes snapshots stable regardless of test execution order.
+ * React's useId() generates IDs like "_r_X_" where X changes based on
+ * how many components have rendered before.
+ */
+expect.addSnapshotSerializer({
+  test: (val) => typeof val === 'string' && /_r_[a-z0-9]+_/.test(val),
+  serialize: (val: string) => {
+    return `"${val.replace(/_r_[a-z0-9]+_/g, '_r_ID_')}"`;
+  },
+});
+
 /**
  * Gitify context bridge API
  */

src/renderer/__helpers__/test-utils.tsx

@@ -22,19 +22,41 @@ export function AppContextProvider({
   children,
   value = {},
 }: AppContextProviderProps) {
-  const defaultValue: Partial<AppContextState> = useMemo(() => {
+  const defaultValue: AppContextState = useMemo(() => {
     return {
       auth: mockAuth,
       settings: mockSettings,
       isLoggedIn: true,
 
       notifications: [],
+      notificationCount: 0,
+      unreadNotificationCount: 0,
+      hasNotifications: false,
+      hasUnreadNotifications: false,
 
       status: 'success',
       globalError: null,
 
+      // Default mock implementations for all required methods
+      loginWithGitHubApp: jest.fn(),
+      loginWithOAuthApp: jest.fn(),
+      loginWithPersonalAccessToken: jest.fn(),
+      logoutFromAccount: jest.fn(),
+
+      fetchNotifications: jest.fn(),
+      removeAccountNotifications: jest.fn(),
+
+      markNotificationsAsRead: jest.fn(),
+      markNotificationsAsDone: jest.fn(),
+      unsubscribeNotification: jest.fn(),
+
+      clearFilters: jest.fn(),
+      resetSettings: jest.fn(),
+      updateSetting: jest.fn(),
+      updateFilter: jest.fn(),
+
       ...value,
-    } as Partial<AppContextState>;
+    } as AppContextState;
   }, [value]);
 
   return (

src/renderer/__mocks__/state-mocks.ts

@@ -43,6 +43,7 @@ const mockNotificationSettings: NotificationSettingsState = {
   showPills: true,
   showNumber: true,
   participating: false,
+  fetchReadNotifications: false,
   markAsDoneOnOpen: false,
   markAsDoneOnUnsubscribe: false,
   delayNotificationState: false,

src/renderer/components/Sidebar.tsx

@@ -37,7 +37,7 @@ export const Sidebar: FC = () => {
     status,
     settings,
     auth,
-    unreadNotificationCount,
+    notificationCount,
     hasUnreadNotifications,
     updateSetting,
   } = useAppContext();
@@ -92,7 +92,7 @@ export const Sidebar: FC = () => {
         <IconButton
           aria-label="Notifications"
           data-testid="sidebar-notifications"
-          description={`${unreadNotificationCount} unread notifications ↗`}
+          description={`${notificationCount} ${settings.fetchReadNotifications ? 'notifications' : 'unread notifications'} ↗`}
           icon={BellIcon}
           onClick={() => openGitHubNotifications(primaryAccountHostname)}
           size="small"