CI/CD: Refresh Frontend Test Suites

frontend/jest.setup.ts

@@ -16,3 +16,95 @@ class ResizeObserver {
 }
 
 (global as any).ResizeObserver = ResizeObserver;
+
+// --- Tauri Mocks ---
+
+// Mock matchMedia
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: jest.fn().mockImplementation((query) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: jest.fn(), // deprecated
+    removeListener: jest.fn(), // deprecated
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn(),
+  })),
+});
+
+// Mock Tauri Internals
+(window as any).__TAURI_INTERNALS__ = {
+  invoke: jest.fn().mockResolvedValue(null),
+  transformCallback: jest.fn(),
+  metadata: {},
+};
+
+// Mock the module imports
+jest.mock('@tauri-apps/api/core', () => ({
+  invoke: jest.fn().mockResolvedValue(null),
+}));
+
+jest.mock('@tauri-apps/api/app', () => ({
+  getVersion: jest.fn().mockResolvedValue('1.0.0'),
+  getName: jest.fn().mockResolvedValue('PictoPy'),
+  getTauriVersion: jest.fn().mockResolvedValue('2.0.0'),
+}));
+
+jest.mock('@tauri-apps/plugin-updater', () => ({
+  check: jest.fn().mockResolvedValue(null),
+}));
+
+jest.mock('@tauri-apps/plugin-dialog', () => ({
+  save: jest.fn().mockResolvedValue(null),
+  open: jest.fn().mockResolvedValue(null),
+  ask: jest.fn().mockResolvedValue(false),
+}));
+
+jest.mock('@tauri-apps/plugin-fs', () => ({
+  readDir: jest.fn().mockResolvedValue([]),
+  createDir: jest.fn().mockResolvedValue(undefined),
+}));
+
+jest.mock('@tauri-apps/plugin-shell', () => ({
+  open: jest.fn().mockResolvedValue(undefined),
+}));
+
+jest.mock('@tauri-apps/plugin-store', () => ({
+  Store: jest.fn().mockImplementation(() => ({
+    get: jest.fn().mockResolvedValue(null),
+    set: jest.fn().mockResolvedValue(undefined),
+    save: jest.fn().mockResolvedValue(undefined),
+    load: jest.fn().mockResolvedValue(undefined),
+    delete: jest.fn().mockResolvedValue(true),
+    has: jest.fn().mockResolvedValue(false),
+    clear: jest.fn().mockResolvedValue(undefined),
+    keys: jest.fn().mockResolvedValue([]),
+    values: jest.fn().mockResolvedValue([]),
+    entries: jest.fn().mockResolvedValue([]),
+    length: jest.fn().mockResolvedValue(0),
+    onKeyChange: jest.fn().mockResolvedValue(() => {}), // Returns unlisten function
+    onChange: jest.fn().mockResolvedValue(() => {}), // Returns unlisten function
+  })),
+}));
+
+// Mock Axios
+jest.mock('axios', () => {
+  const mockAxiosInstance = {
+    get: jest.fn().mockResolvedValue({ data: [] }),
+    post: jest.fn().mockResolvedValue({ data: {} }),
+    put: jest.fn().mockResolvedValue({ data: {} }),
+    patch: jest.fn().mockResolvedValue({ data: {} }),
+    delete: jest.fn().mockResolvedValue({ data: {} }),
+    interceptors: {
+      request: { use: jest.fn(), eject: jest.fn() },
+      response: { use: jest.fn(), eject: jest.fn() },
+    },
+  };
+  return {
+    default: mockAxiosInstance,
+    create: jest.fn(() => mockAxiosInstance),
+    ...mockAxiosInstance,
+  };
+});

frontend/src/app/store.ts

@@ -1,4 +1,4 @@
-import { configureStore } from '@reduxjs/toolkit';
+import { configureStore, combineReducers } from '@reduxjs/toolkit';
 import loaderReducer from '@/features/loaderSlice';
 import onboardingReducer from '@/features/onboardingSlice';
 import searchReducer from '@/features/searchSlice';
@@ -7,18 +7,20 @@ import faceClustersReducer from '@/features/faceClustersSlice';
 import infoDialogReducer from '@/features/infoDialogSlice';
 import folderReducer from '@/features/folderSlice';
 
+export const rootReducer = combineReducers({
+  loader: loaderReducer,
+  onboarding: onboardingReducer,
+  images: imageReducer,
+  faceClusters: faceClustersReducer,
+  infoDialog: infoDialogReducer,
+  folders: folderReducer,
+  search: searchReducer,
+});
+
 export const store = configureStore({
-  reducer: {
-    loader: loaderReducer,
-    onboarding: onboardingReducer,
-    images: imageReducer,
-    faceClusters: faceClustersReducer,
-    infoDialog: infoDialogReducer,
-    folders: folderReducer,
-    search: searchReducer,
-  },
+  reducer: rootReducer,
 });
 // Infer the `RootState` and `AppDispatch` types from the store itself
 export type RootState = ReturnType<typeof store.getState>;
-// Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState}
+// Inferred type: {loader: LoaderState, onboarding: OnboardingState, images: ImageState, ...}
 export type AppDispatch = typeof store.dispatch;

frontend/src/components/__tests__/Sidebar.test.tsx

@@ -0,0 +1,151 @@
+import { render, screen } from '@/test-utils';
+import userEvent from '@testing-library/user-event';
+import { Routes, Route, useLocation } from 'react-router';
+import { AppSidebar } from '../Navigation/Sidebar/AppSidebar';
+import { SidebarProvider } from '@/components/ui/sidebar';
+import { ROUTES } from '@/constants/routes';
+
+// Display current routes
+const LocationDisplay = () => {
+  const location = useLocation();
+  return <div data-testid="location-display">{location.pathname}</div>;
+};
+
+// Sidebar + routes display
+const SidebarWithRoutes = () => (
+  <SidebarProvider>
+    <AppSidebar />
+    <main>
+      <LocationDisplay />
+      <Routes>
+        <Route path="/" element={<div>Home Page</div>} />
+        <Route path={ROUTES.HOME} element={<div>Home Page</div>} />
+        <Route path={ROUTES.SETTINGS} element={<div>Settings Page</div>} />
+        <Route path={ROUTES.AI} element={<div>AI Tagging Page</div>} />
+        <Route path={ROUTES.FAVOURITES} element={<div>Favourites Page</div>} />
+        <Route path={ROUTES.VIDEOS} element={<div>Videos Page</div>} />
+        <Route path={ROUTES.ALBUMS} element={<div>Albums Page</div>} />
+        <Route path={ROUTES.MEMORIES} element={<div>Memories Page</div>} />
+      </Routes>
+    </main>
+  </SidebarProvider>
+);
+
+describe('Sidebar', () => {
+  describe('Structure Tests', () => {
+    test('renders all main navigation links', () => {
+      render(
+        <SidebarProvider>
+          <AppSidebar />
+        </SidebarProvider>,
+      );
+
+      // Verify key navigation items exist
+      expect(screen.getByText('Home')).toBeInTheDocument();
+      expect(screen.getByText('AI Tagging')).toBeInTheDocument();
+      expect(screen.getByText('Favourites')).toBeInTheDocument();
+      expect(screen.getByText('Videos')).toBeInTheDocument();
+      expect(screen.getByText('Albums')).toBeInTheDocument();
+      expect(screen.getByText('Memories')).toBeInTheDocument();
+      expect(screen.getByText('Settings')).toBeInTheDocument();
+    });
+  });
+
+  describe('Navigation Interaction Tests', () => {
+    test('clicking Settings link navigates to /settings', async () => {
+      const user = userEvent.setup();
+      render(<SidebarWithRoutes />, { initialRoutes: ['/'] });
+
+      expect(screen.getByTestId('location-display')).toHaveTextContent('/'); // start location
+
+      await user.click(screen.getByText('Settings')); // click settings
+
+      // verify
+      expect(screen.getByTestId('location-display')).toHaveTextContent(
+        '/settings',
+      );
+      expect(screen.getByText('Settings Page')).toBeInTheDocument();
+    });
+
+    test('clicking Home link navigates to /home', async () => {
+      const user = userEvent.setup();
+      render(<SidebarWithRoutes />, { initialRoutes: ['/settings'] });
+
+      // start location
+      expect(screen.getByTestId('location-display')).toHaveTextContent(
+        '/settings',
+      );
+
+      await user.click(screen.getByText('Home')); // click home
+
+      // verify
+      expect(screen.getByTestId('location-display')).toHaveTextContent('/home');
+      expect(screen.getByText('Home Page')).toBeInTheDocument();
+    });
+
+    test('clicking AI Tagging link navigates to /ai-tagging', async () => {
+      const user = userEvent.setup();
+      render(<SidebarWithRoutes />, { initialRoutes: ['/'] });
+
+      await user.click(screen.getByText('AI Tagging')); // click ai-tagging
+
+      // verify
+      expect(screen.getByTestId('location-display')).toHaveTextContent(
+        '/ai-tagging',
+      );
+      expect(screen.getByText('AI Tagging Page')).toBeInTheDocument();
+    });
+
+    test('clicking Favourites link navigates to /favourites', async () => {
+      const user = userEvent.setup();
+      render(<SidebarWithRoutes />, { initialRoutes: ['/'] });
+
+      await user.click(screen.getByText('Favourites')); // click favourites
+
+      // verify
+      expect(screen.getByTestId('location-display')).toHaveTextContent(
+        '/favourites',
+      );
+      expect(screen.getByText('Favourites Page')).toBeInTheDocument();
+    });
+
+    test('clicking Videos link navigates to /videos', async () => {
+      const user = userEvent.setup();
+      render(<SidebarWithRoutes />, { initialRoutes: ['/'] });
+
+      await user.click(screen.getByText('Videos')); // click videos
+
+      // verify
+      expect(screen.getByTestId('location-display')).toHaveTextContent(
+        '/videos',
+      );
+      expect(screen.getByText('Videos Page')).toBeInTheDocument();
+    });
+
+    test('clicking Albums link navigates to /albums', async () => {
+      const user = userEvent.setup();
+      render(<SidebarWithRoutes />, { initialRoutes: ['/'] });
+
+      await user.click(screen.getByText('Albums')); // click albums
+
+      // verify
+      expect(screen.getByTestId('location-display')).toHaveTextContent(
+        '/albums',
+      );
+      expect(screen.getByText('Albums Page')).toBeInTheDocument();
+    });
+
+    test('clicking Memories link navigates to /memories', async () => {
+      const user = userEvent.setup();
+      render(<SidebarWithRoutes />, { initialRoutes: ['/'] });
+
+      await user.click(screen.getByText('Memories')); // click memories
+
+      // verify
+      expect(screen.getByTestId('location-display')).toHaveTextContent(
+        '/memories',
+      );
+      expect(screen.getByText('Memories Page')).toBeInTheDocument();
+    });
+  });
+});

frontend/src/pages/__tests__/PageSanity.test.tsx

@@ -0,0 +1,31 @@
+import { render, screen } from '@/test-utils';
+import { Home } from '../Home/Home';
+import Settings from '../SettingsPage/Settings';
+
+describe('Page Sanity Tests', () => {
+  describe('Home Page', () => {
+    test('renders home page structure', async () => {
+      render(<Home />);
+      expect(
+        await screen.findByText(
+          /Image Gallery|No Images to Display|Loading images/i,
+        ),
+      ).toBeInTheDocument();
+    });
+  });
+
+  describe('Settings Page', () => {
+    test('renders settings page sections', () => {
+      render(<Settings />);
+
+      expect(screen.getByText('Folder Management')).toBeInTheDocument();
+      expect(screen.getByText('User Preferences')).toBeInTheDocument();
+      expect(screen.getByText('Application Controls')).toBeInTheDocument();
+
+      expect(
+        screen.getByRole('button', { name: /Check for Updates/i }),
+      ).toBeInTheDocument();
+      expect(screen.getByText('GPU Acceleration')).toBeInTheDocument();
+    });
+  });
+});

frontend/src/test-utils.tsx

@@ -0,0 +1,69 @@
+import React, { ReactElement } from 'react';
+import { render, RenderOptions } from '@testing-library/react';
+import { Provider } from 'react-redux';
+import { ThemeProvider } from '@/contexts/ThemeContext';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { MemoryRouter } from 'react-router';
+import { configureStore } from '@reduxjs/toolkit';
+import { rootReducer, RootState } from '@/app/store';
+
+interface CustomRenderOptions extends Omit<RenderOptions, 'wrapper'> {
+  preloadedState?: Partial<RootState>;
+  store?: ReturnType<typeof configureStore>;
+  initialRoutes?: string[];
+}
+
+const AllTheProviders = ({
+  children,
+  store,
+  initialRoutes = ['/'],
+}: {
+  children: React.ReactNode;
+  store: ReturnType<typeof configureStore>;
+  initialRoutes?: string[];
+}) => {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false,
+      },
+    },
+  });
+
+  return (
+    <Provider store={store}>
+      <ThemeProvider>
+        <QueryClientProvider client={queryClient}>
+          <MemoryRouter initialEntries={initialRoutes}>{children}</MemoryRouter>
+        </QueryClientProvider>
+      </ThemeProvider>
+    </Provider>
+  );
+};
+
+const customRender = (ui: ReactElement, options?: CustomRenderOptions) => {
+  const { store, initialRoutes, preloadedState, ...renderOptions } =
+    options || {};
+
+  const testStore =
+    store ??
+    configureStore({
+      reducer: rootReducer,
+      preloadedState,
+    });
+
+  return render(ui, {
+    wrapper: (props) => (
+      <AllTheProviders
+        {...props}
+        store={testStore}
+        initialRoutes={initialRoutes}
+      />
+    ),
+    ...renderOptions,
+  });
+};
+
+// Re-export everything
+export * from '@testing-library/react';
+export { customRender as render };