test: refactor render with app context

Signed-off-by: Adam Setch <[email protected]>

Author: setchy

src/renderer/__helpers__/test-utils.tsx

@@ -0,0 +1,140 @@
+import type { RenderOptions } from '@testing-library/react';
+import { render } from '@testing-library/react';
+import type { ReactElement, ReactNode } from 'react';
+import { useMemo } from 'react';
+
+import { BaseStyles, ThemeProvider } from '@primer/react';
+
+import { mockAuth, mockSettings } from '../__mocks__/state-mocks';
+import type { AppContextState } from '../context/App';
+import { AppContext } from '../context/App';
+
+/**
+ * Props for the AppContextProvider wrapper
+ */
+interface AppContextProviderProps {
+  readonly children: ReactNode;
+  readonly value?: Partial<AppContextState>;
+}
+
+/**
+ * Wrapper component that provides ThemeProvider, BaseStyles, and AppContext
+ * with sensible defaults for testing.
+ */
+export function AppContextProvider({
+  children,
+  value = {},
+}: AppContextProviderProps) {
+  const defaultValue: Partial<AppContextState> = useMemo(() => {
+    return {
+      auth: mockAuth,
+      isLoggedIn: false,
+      loginWithGitHubApp: async () => {},
+      loginWithOAuthApp: async () => {},
+      loginWithPersonalAccessToken: async () => {},
+      logoutFromAccount: async () => {},
+
+      status: 'success',
+      globalError: { title: '', descriptions: [], emojis: [] },
+
+      notifications: [],
+      notificationCount: 0,
+      unreadNotificationCount: 0,
+      hasNotifications: false,
+      hasUnreadNotifications: false,
+
+      fetchNotifications: async () => {},
+      removeAccountNotifications: async () => {},
+
+      markNotificationsAsRead: async () => {},
+      markNotificationsAsDone: async () => {},
+      unsubscribeNotification: async () => {},
+
+      settings: mockSettings,
+      clearFilters: () => {},
+      resetSettings: () => {},
+      updateSetting: () => {},
+      updateFilter: () => {},
+
+      ...value,
+    } as Partial<AppContextState>;
+  }, [value]);
+
+  return (
+    <ThemeProvider>
+      <BaseStyles>
+        <AppContext.Provider value={defaultValue}>
+          {children}
+        </AppContext.Provider>
+      </BaseStyles>
+    </ThemeProvider>
+  );
+}
+
+/**
+ * Custom render function that wraps components with AppContextProvider by default.
+ *
+ * Usage (simplified):
+ *   renderWithAppContext(<MyComponent />, { auth, settings })
+ *
+ * Legacy (still supported):
+ *   renderWithAppContext(<MyComponent />, { appContext: { auth, settings } })
+ */
+type RenderWithAppContextOptions = Omit<RenderOptions, 'wrapper'> &
+  Partial<AppContextState> & {
+    appContext?: Partial<AppContextState>;
+  };
+
+export function renderWithAppContext(
+  ui: ReactElement,
+  options: RenderWithAppContextOptions = {},
+) {
+  const CONTEXT_KEYS: Array<keyof AppContextState> = [
+    'auth',
+    'isLoggedIn',
+    'loginWithGitHubApp',
+    'loginWithOAuthApp',
+    'loginWithPersonalAccessToken',
+    'logoutFromAccount',
+    'status',
+    'globalError',
+    'notifications',
+    'notificationCount',
+    'unreadNotificationCount',
+    'hasNotifications',
+    'hasUnreadNotifications',
+    'fetchNotifications',
+    'removeAccountNotifications',
+    'markNotificationsAsRead',
+    'markNotificationsAsDone',
+    'unsubscribeNotification',
+    'settings',
+    'clearFilters',
+    'resetSettings',
+    'updateSetting',
+    'updateFilter',
+  ];
+
+  const { appContext, ...rest } = options as Partial<Record<string, unknown>> & {
+    appContext?: Partial<AppContextState>;
+  };
+
+  const ctxFromTopLevel: Partial<AppContextState> = {};
+  for (const key of CONTEXT_KEYS) {
+    if (key in rest && rest[key] !== undefined) {
+      (ctxFromTopLevel as Partial<Record<string, unknown>>)[key] = rest[key];
+    }
+  }
+
+  const value: Partial<AppContextState> = { ...ctxFromTopLevel };
+  if (appContext) {
+    Object.assign(value, appContext);
+  }
+
+  return render(ui, {
+    wrapper: ({ children }) => (
+      <AppContextProvider value={value}>{children}</AppContextProvider>
+    ),
+    // No additional render options by default
+  });
+}

src/renderer/components/AllRead.test.tsx

@@ -1,8 +1,8 @@
-import { act, render } from '@testing-library/react';
+import { act } from '@testing-library/react';
 
+import { renderWithAppContext } from '../__helpers__/test-utils';
 import { mockSettings } from '../__mocks__/state-mocks';
 import { ensureStableEmojis } from '../__mocks__/utils';
-import { AppContext } from '../context/App';
 import { AllRead } from './AllRead';
 
 describe('renderer/components/AllRead.tsx', () => {
@@ -11,41 +11,27 @@ describe('renderer/components/AllRead.tsx', () => {
   });
 
   it('should render itself & its children - no filters', async () => {
-    let tree: ReturnType<typeof render> | null = null;
+    let tree: ReturnType<typeof renderWithAppContext> | null = null;
 
     await act(async () => {
-      tree = render(
-        <AppContext.Provider
-          value={{
-            settings: {
-              ...mockSettings,
-            },
-          }}
-        >
-          <AllRead />
-        </AppContext.Provider>,
-      );
+      tree = renderWithAppContext(<AllRead />, {
+        
+          settings: {
+            ...mockSettings } });
     });
 
     expect(tree).toMatchSnapshot();
   });
 
   it('should render itself & its children - with filters', async () => {
-    let tree: ReturnType<typeof render> | null = null;
+    let tree: ReturnType<typeof renderWithAppContext> | null = null;
 
     await act(async () => {
-      tree = render(
-        <AppContext.Provider
-          value={{
-            settings: {
-              ...mockSettings,
-              filterReasons: ['author'],
-            },
-          }}
-        >
-          <AllRead />
-        </AppContext.Provider>,
-      );
+      tree = renderWithAppContext(<AllRead />, {
+        
+          settings: {
+            ...mockSettings,
+            filterReasons: ['author'] } });
     });
 
     expect(tree).toMatchSnapshot();

src/renderer/components/Oops.test.tsx

@@ -1,5 +1,6 @@
-import { act, render } from '@testing-library/react';
+import { act } from '@testing-library/react';
 
+import { renderWithAppContext } from '../__helpers__/test-utils';
 import { ensureStableEmojis } from '../__mocks__/utils';
 import { Oops } from './Oops';
 
@@ -15,20 +16,20 @@ describe('renderer/components/Oops.tsx', () => {
       emojis: ['🔥'],
     };
 
-    let tree: ReturnType<typeof render> | null = null;
+    let tree: ReturnType<typeof renderWithAppContext> | null = null;
 
     await act(async () => {
-      tree = render(<Oops error={mockError} />);
+      tree = renderWithAppContext(<Oops error={mockError} />);
     });
 
     expect(tree).toMatchSnapshot();
   });
 
   it('should render itself & its children - fallback to unknown error', async () => {
-    let tree: ReturnType<typeof render> | null = null;
+    let tree: ReturnType<typeof renderWithAppContext> | null = null;
 
     await act(async () => {
-      tree = render(<Oops error={null} />);
+      tree = renderWithAppContext(<Oops error={null} />);
     });
 
     expect(tree).toMatchSnapshot();