Merge branch 'main' into feat/filter-search

Author: setchy

src/renderer/__helpers__/jest.setup.ts

@@ -67,3 +67,5 @@ global.CSS = {
     return false;
   }),
 };
+
+window.HTMLMediaElement.prototype.play = jest.fn();

src/renderer/components/avatars/AvatarWithFallback.test.tsx

@@ -1,4 +1,4 @@
-import { render, screen } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 
 import { type Link, Size } from '../../types';
 import {
@@ -47,8 +47,8 @@ describe('renderer/components/avatars/AvatarWithFallback.tsx', () => {
     // Find the avatar element by its alt text
     const avatar = screen.getByAltText('gitify-app') as HTMLImageElement;
 
-    // Simulate an error event on the image element
-    avatar.dispatchEvent(new Event('error'));
+    // Simulate image load error (wrapped in act via fireEvent)
+    fireEvent.error(avatar);
 
     expect(screen.getByTestId('avatar')).toMatchSnapshot();
   });
@@ -59,8 +59,8 @@ describe('renderer/components/avatars/AvatarWithFallback.tsx', () => {
     // Find the avatar element by its alt text
     const avatar = screen.getByAltText('gitify-app') as HTMLImageElement;
 
-    // Simulate an error event on the image element
-    avatar.dispatchEvent(new Event('error'));
+    // Simulate image load error (wrapped in act via fireEvent)
+    fireEvent.error(avatar);
 
     expect(screen.getByTestId('avatar')).toMatchSnapshot();
   });

src/renderer/components/avatars/__snapshots__/AvatarWithFallback.test.tsx.snap

@@ -4,7 +4,7 @@ import { Page } from './Page';
 
 describe('renderer/components/layout/Page.tsx', () => {
   it('should render itself & its children', () => {
-    const tree = render(<Page id="test">Test</Page>);
+    const tree = render(<Page testId="test">Test</Page>);
 
     expect(tree).toMatchSnapshot();
   });

src/renderer/components/layout/Page.test.tsx

@@ -4,17 +4,17 @@ import { Box } from '@primer/react';
 
 interface IPage {
   children: ReactNode;
-  id: string;
+  testId?: string;
 }
 
 /**
  * Page component represents a single page view.
  * It creates a column layout for header, content, and footer.
  * The height is 100% to fill the parent container.
  */
-export const Page: FC<IPage> = ({ children, id }) => {
+export const Page: FC<IPage> = ({ children, testId }) => {
   return (
-    <Box className="flex flex-col h-screen" data-testid={id}>
+    <Box className="flex flex-col h-screen" data-testid={testId}>
       {children}
     </Box>
   );

src/renderer/components/layout/Page.tsx

@@ -110,7 +110,7 @@ export const AccountsRoute: FC = () => {
   }, []);
 
   return (
-    <Page id="accounts">
+    <Page testId="accounts">
       <Header icon={PersonIcon}>Accounts</Header>
 
       <Contents>

src/renderer/routes/Accounts.tsx

@@ -18,7 +18,7 @@ export const FiltersRoute: FC = () => {
   const { clearFilters } = useContext(AppContext);
 
   return (
-    <Page id="filters">
+    <Page testId="filters">
       <Header fetchOnBack icon={FilterIcon}>
         Filters
       </Header>

src/renderer/routes/Filters.tsx

@@ -133,7 +133,7 @@ export const LoginWithOAuthAppRoute: FC = () => {
   );
 
   return (
-    <Page id="Login With OAuth App">
+    <Page testId="Login With OAuth App">
       <Header icon={PersonIcon}>Login with OAuth App</Header>
 
       <Contents>

src/renderer/routes/LoginWithOAuthApp.tsx

@@ -125,7 +125,7 @@ export const LoginWithPersonalAccessTokenRoute: FC = () => {
   );
 
   return (
-    <Page id="Login With Personal Access Token">
+    <Page testId="Login With Personal Access Token">
       <Header icon={KeyIcon}>Login with Personal Access Token</Header>
 
       <Contents>

src/renderer/routes/LoginWithPersonalAccessToken.tsx

@@ -37,7 +37,7 @@ export const NotificationsRoute: FC = () => {
   }
 
   return (
-    <Page id="notifications">
+    <Page testId="notifications">
       <Contents paddingHorizontal={false}>
         {notifications.map((accountNotifications) => (
           <AccountNotifications