test: Add redux capabilities to testing

test: Add backend server mock support for testing

Author: colin969

package-lock.json

@@ -92,6 +92,7 @@
     "lodash": "^4.17.21",
     "mime": "2.4.4",
     "minimist": "^1.2.7",
+    "msw": "^2.12.1",
     "node-7z": "3.0.0",
     "open": "^10.1.0",
     "react": "19.2.0",

package.json

@@ -5,10 +5,11 @@ import { api_handle_message, api_register, api_register_any, api_unregister, api
 import { create_server, server_add_client, server_broadcast, server_request, server_send, SocketServerData } from '@shared/socket/SocketServer';
 import { SocketRequestData, SocketResponseData } from '@shared/socket/types';
 import * as ws from 'ws';
-import { VERBOSE } from '.';
 import { genPipelineBackOut, MiddlewareRes, PipelineRes } from './SocketServerMiddleware';
 import { createNewDialog } from './util/dialog';
 
+const verbose = false;
+
 type BackAPI = SocketAPIData<BackIn, BackInTemplate, MsgEvent>
 type BackClients = SocketServerData<BackOut, BackOutTemplate, ws>
 export type BackClient = BackClients['clients'][number]
@@ -74,7 +75,7 @@ export class SocketServer {
   public async listen(minPort: number, maxPort: number, host: string | undefined): Promise<void> {
     this.host = host;
     const result = await startServer(this.port !== -1 ? this.port : minPort, this.port !== -1 ? this.port : maxPort, host);
-    result.server.on('connection', this.onConnect.bind(this));
+    result.server.on('connection', this.onConnect);
     this.server = result.server;
     this.port = result.port;
     this.retryCounter = 0; // Reset retries on a good connection
@@ -283,7 +284,7 @@ export class SocketServer {
 
   // Event Handlers
 
-  protected onConnect(socket: ws): void {
+  onConnect = (socket: ws) => {
     // Read the first message as a "secret key"
     socket.onmessage = (event) => {
       if (event.data === 'flashpoint-launcher') {
@@ -297,9 +298,9 @@ export class SocketServer {
         socket.close();
       }
     };
-  }
+  };
 
-  protected async onMessage(event: ws.MessageEvent): Promise<void> {
+  async onMessage(event: ws.MessageEvent): Promise<void> {
     const [parsed_data, parse_error] = parse_message_data(event.data);
 
     if (parse_error) {
@@ -360,7 +361,7 @@ export class SocketServer {
     const start = performance.now();
     const [inc, out] = await api_handle_message(this.api, data, msg_event);
     const end = performance.now();
-    if (VERBOSE.enabled && 'type' in data && data.type !== BackIn.KEEP_ALIVE) {
+    if (verbose && 'type' in data && data.type !== BackIn.KEEP_ALIVE) {
       console.log(`${Math.floor(end - start)}ms - "${BackIn[data.type]}"`);
     }
 

src/back/SocketServer.ts

@@ -0,0 +1,25 @@
+import { setMainState } from '@renderer/store/main/slice';
+import { renderWithProviders } from '@test/redux';
+import { waitFor } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { SplashScreen } from './SplashScreen';
+
+describe('SplashScreen', () => {
+  it('should unmount 2000ms after loaded all', async () => {
+    const { container, store } = renderWithProviders(<SplashScreen/>);
+
+    expect(container.querySelector('.splash-screen')).toBeInTheDocument();
+
+    store.dispatch(setMainState({
+      loadedAll: true,
+    }));
+
+    // Wait for it to disappear (with timeout slightly longer than 2000ms)
+    await waitFor(
+      () => {
+        expect(container.querySelector('.splash-screen')).not.toBeInTheDocument();
+      },
+      { timeout: 3000 }
+    );
+  });
+});

src/renderer/components/SplashScreen.test.tsx

@@ -0,0 +1,85 @@
+import { setCurrentCuration } from '@renderer/store/curate/slice';
+import { mockCuration } from '@test/mocks/curate';
+import { useTestServer } from '@test/useTestServer';
+import { describe, expect, it } from 'vitest';
+import { setupStore } from '../store';
+
+describe('Curate Redux Store', () => {
+  useTestServer();
+
+  it('selection ranges with ctrl + shift modifiers', async () => {
+
+    const curations = [
+      mockCuration(),
+      mockCuration(),
+      mockCuration(),
+      mockCuration(),
+      mockCuration()
+    ];
+
+    const store = setupStore({
+      curate: {
+        curations,
+        loaded: true,
+        groups: [],
+        collapsedGroups: [],
+        current: '',
+        selected: [],
+        lastSelected: '',
+        curationTemplates: []
+      }
+    });
+
+    // Select third
+    store.dispatch(setCurrentCuration({
+      folder: curations[2].folder
+    }));
+    expect(store.getState().curate.current).toBe(curations[2].folder);
+    expect(store.getState().curate.lastSelected).toBe(curations[2].folder);
+    expect(store.getState().curate.selected).toHaveLength(1);
+    expect(store.getState().curate.selected).toEqual(expect.arrayContaining([curations[2].folder]));
+
+    // Select top 3 via shift select
+    store.dispatch(setCurrentCuration({
+      shift: true,
+      folder: curations[0].folder
+    }));
+    expect(store.getState().curate.current).toBe(curations[2].folder);
+    expect(store.getState().curate.lastSelected).toBe(curations[2].folder);
+    expect(store.getState().curate.selected).toHaveLength(3);
+    expect(store.getState().curate.selected).toEqual(expect.arrayContaining([
+      curations[0].folder,
+      curations[1].folder,
+      curations[2].folder
+    ]));
+
+    // Select bottom 3 via shift select
+    store.dispatch(setCurrentCuration({
+      shift: true,
+      folder: curations[4].folder
+    }));
+    expect(store.getState().curate.current).toBe(curations[2].folder);
+    expect(store.getState().curate.lastSelected).toBe(curations[2].folder);
+    expect(store.getState().curate.selected).toHaveLength(3);
+    expect(store.getState().curate.selected).toEqual(expect.arrayContaining([
+      curations[2].folder,
+      curations[3].folder,
+      curations[4].folder
+    ]));
+
+    // Select first + bottom 3 via ctrl select
+    store.dispatch(setCurrentCuration({
+      ctrl: true,
+      folder: curations[0].folder
+    }));
+    expect(store.getState().curate.current).toBe(curations[2].folder);
+    expect(store.getState().curate.lastSelected).toBe(curations[0].folder);
+    expect(store.getState().curate.selected).toHaveLength(4);
+    expect(store.getState().curate.selected).toEqual(expect.arrayContaining([
+      curations[0].folder,
+      curations[2].folder,
+      curations[3].folder,
+      curations[4].folder
+    ]));
+  });
+});

src/renderer/store/curate/slice.test.ts

@@ -1,8 +1,9 @@
-import { configureStore } from '@reduxjs/toolkit';
+import { combineReducers, configureStore } from '@reduxjs/toolkit';
 import { addCurationMiddleware } from './curate/middleware';
 import curateReducer from './curate/slice';
 import downloadsReducer from './downloads/slice';
 import fpfssReducer from './fpfss/slice';
+import historyReducer from './history/slice';
 import { listenerMiddleware } from './listenerMiddleware';
 import logsReducer from './logs/slice';
 import { addMainMiddleware } from './main/middleware';
@@ -13,41 +14,48 @@ import { addSearchMiddleware } from './search/middleware';
 import searchReducer from './search/slice';
 import tagCategoriesReducer from './tagCategories/slice';
 import tasksReducer from './tasks/slice';
-import historyReducer from './history/slice';
 
 // Initialize all store middleware
 addSearchMiddleware();
 addCurationMiddleware();
 addMainMiddleware();
 addPreferencesMiddleware();
 
-// Create store
-export const store = configureStore({
-  reducer: {
-    curate: curateReducer,
-    fpfss: fpfssReducer,
-    main: mainReducer,
-    search: searchReducer,
-    tagCategories: tagCategoriesReducer,
-    tasks: tasksReducer,
-    logs: logsReducer,
-    downloads: downloadsReducer,
-    preferences: prefsReducer,
-    history: historyReducer,
-  },
-  devTools: true,
-  middleware: (getDefaultMiddleware) => {
-    const middleware = getDefaultMiddleware({
-      serializableCheck: {
-        ignoredPaths: ['search', 'downloads'] // Big performance drop in dev with this on search views
-      },
-    });
-    middleware.push(listenerMiddleware.middleware);
-    return middleware;
-  }
+const rootReducer = combineReducers({
+  curate: curateReducer,
+  fpfss: fpfssReducer,
+  main: mainReducer,
+  search: searchReducer,
+  tagCategories: tagCategoriesReducer,
+  tasks: tasksReducer,
+  logs: logsReducer,
+  downloads: downloadsReducer,
+  preferences: prefsReducer,
+  history: historyReducer,
 });
 
+export function setupStore(preloadedState?: Partial<RootState>) {
+  return configureStore({
+    reducer: rootReducer,
+    devTools: true,
+    middleware: (getDefaultMiddleware) => {
+      const middleware = getDefaultMiddleware({
+        serializableCheck: {
+          ignoredPaths: ['search', 'downloads'] // Big performance drop in dev with this on search views
+        },
+      });
+      middleware.push(listenerMiddleware.middleware);
+      return middleware;
+    },
+    preloadedState
+  });
+}
+
+// Create store
+export const store = setupStore();
+
 // Create typings for the store
-export type RootState = ReturnType<typeof store.getState>;
+export type RootState = ReturnType<typeof rootReducer>;
+export type AppStore = ReturnType<typeof setupStore>;
 export type AppDispatch = typeof store.dispatch;
 export default store;

src/renderer/store/store.ts

@@ -0,0 +1,29 @@
+import { MsgEvent, SocketServer } from '@back/SocketServer';
+import { BackIn, BackInTemplate } from '@shared/back/types';
+import { ws } from 'msw';
+
+type Callback<T, U extends (...args: any[]) => any> = (event: T, ...args: Parameters<U>) => (ReturnType<U> | Promise<ReturnType<U>>);
+
+export const mockServerUrl = 'ws://localhost:10000';
+export type MockHandlers = Partial<{
+  [key in keyof BackInTemplate]: Callback<MsgEvent, BackInTemplate[key]>;
+}>;
+const mockServer = ws.link(mockServerUrl);
+
+export const defaultHandlers: MockHandlers = {
+  [BackIn.GET_START_TIME]: () => 0,
+};
+
+// Helper to create server handlers with specific mocked functions
+export function createBackendHandler(
+  customHandlers: MockHandlers = {}
+) {
+  const mergedHandlers = { ...defaultHandlers, ...customHandlers };
+  const server: SocketServer = new SocketServer();
+  server.port = 10000;
+  server.api.registered = mergedHandlers;
+
+  return mockServer.addEventListener('connection', ({ client }) => {
+    server.onConnect(client as any);
+  });
+}