Fix e2e testing

Author: Draco1js

.github/workflows/ci.yml

@@ -49,6 +49,9 @@ jobs:
           
       - name: Lint
         run: pnpm --filter client lint
+      
+      - name: End-to-end tests
+        run: pnpm e2e
 
       - name: Build
         run: pnpm build

.gitignore

@@ -22,3 +22,7 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+playwright-report
+playwright-report/index.html
+test-results

e2e/test-1.spec.ts

@@ -0,0 +1,26 @@
+import { test, expect } from '@playwright/test';
+
+test('should add new todo item', async ({ page }) => {
+  await page.goto('http://localhost:5173/');
+  await page.getByRole('textbox', { name: 'Add a new todo' }).click();
+  await page.getByRole('textbox', { name: 'Add a new todo' }).fill('Hello');
+  await page.getByRole('button', { name: 'Add' }).click();
+  await expect(page.getByRole('list')).toContainText('Hello');
+});
+
+test('should mark a todo as completed', async ({ page }) => {
+  await page.goto('http://localhost:5173');
+  
+  // Add a new todo if none exists
+  if (await page.locator('li').count() === 0) {
+  await page.getByRole('textbox', { name: 'Add a new todo' }).click();
+  await page.getByRole('textbox', { name: 'Add a new todo' }).fill('Hello');
+  await page.getByRole('button', { name: 'Add' }).click();
+  }
+  
+  // Mark the first todo as completed
+  await page.click('input[type="checkbox"]');
+  
+  // Verify the todo is marked as completed
+  await expect(page.locator('li span:has-text("Hello")').first()).toHaveCSS('text-decoration', /line-through/);
+});

e2e/todo.spec.ts

@@ -15,16 +15,17 @@
     "typecheck": "pnpm --filter shared build && pnpm --filter server exec tsc --noEmit"
   },
   "devDependencies": {
-    "typescript": "~5.7.2",
-    "husky": "^9.0.6",
-    "lint-staged": "^15.2.0",
+    "@eslint/js": "^9.22.0",
     "@playwright/test": "^1.40.0",
+    "@types/node": "^18.15.11",
     "eslint": "^9.22.0",
-    "@eslint/js": "^9.22.0",
-    "globals": "^16.0.0",
-    "typescript-eslint": "^8.26.1",
     "eslint-plugin-react-hooks": "^5.2.0",
-    "eslint-plugin-react-refresh": "^0.4.19"
+    "eslint-plugin-react-refresh": "^0.4.19",
+    "globals": "^16.0.0",
+    "husky": "^9.0.6",
+    "lint-staged": "^15.2.0",
+    "typescript": "~5.7.2",
+    "typescript-eslint": "^8.26.1"
   },
   "lint-staged": {
     "*.{ts,tsx}": [

package.json

@@ -10,8 +10,21 @@ function App() {
   const [input, setInput] = useState("");
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
+  const [errorCount, setErrorCount] = useState(1);
   const [onlineUsers, setOnlineUsers] = useState<number>(1);
 
+  // Function to handle errors with counter
+  const handleError = (errorMessage: string) => {
+    if (error === errorMessage) {
+      // Same error occurred again, increment counter
+      setErrorCount(prev => prev + 1);
+    } else {
+      // New error, reset counter and set new error
+      setError(errorMessage);
+      setErrorCount(1);
+    }
+  };
+
   // Calculate progress
   const totalTodos = todos.length;
   const completedTodos = todos.filter(todo => todo.completed).length;
@@ -27,8 +40,9 @@ function App() {
         // Check if the response is an object with a todos property
         setTodos(Array.isArray(data) ? data : (data.todos || []));
         setError(null);
+        setErrorCount(1);
       } catch (err) {
-        setError("Failed to fetch todos. Please try again.");
+        handleError("Failed to fetch todos. Please try again.");
         console.error(err);
       } finally {
         setLoading(false);
@@ -41,20 +55,28 @@ function App() {
     socketService.connect();
 
     // Listen for todo updates
-    const unsubscribe = socketService.on('todos:update', (updatedTodos: Todo[]) => {
-      setTodos(updatedTodos);
+    const unsubscribeTodos = socketService.on('todos:update', (updatedTodos: Todo[] | { todos: Todo[] }) => {
+      console.log('Received todos update:', updatedTodos);
+      if (Array.isArray(updatedTodos)) {
+        setTodos(updatedTodos);
+      } else if (updatedTodos && 'todos' in updatedTodos) {
+        setTodos(updatedTodos.todos);
+      }
     });
 
     // Listen for user count updates
-    socketService.on('users:count', (count: number) => {
+    const unsubscribeUsers = socketService.on('users:count', (count: number) => {
+      console.log('Received users count update:', count);
       setOnlineUsers(count);
     });
 
     // Cleanup on unmount
     return () => {
-      unsubscribe();
+      unsubscribeTodos();
+      unsubscribeUsers();
       socketService.disconnect();
     };
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
@@ -64,7 +86,7 @@ function App() {
         await createTodo(input.trim());
         setInput("");
       } catch (err) {
-        setError("Failed to create todo. Please try again.");
+        handleError("Failed to create todo. Please try again.");
         console.error(err);
       }
     }
@@ -86,7 +108,7 @@ function App() {
 
       await updateTodo(id, { completed: !todoToUpdate.completed });
     } catch (err) {
-      setError("Failed to update todo. Please try again.");
+      handleError("Failed to update todo. Please try again.");
       console.error(err);
     }
   };
@@ -95,7 +117,7 @@ function App() {
     try {
       await deleteTodo(id);
     } catch (err) {
-      setError("Failed to delete todo. Please try again.");
+      handleError("Failed to delete todo. Please try again.");
       console.error(err);
     }
   };
@@ -137,8 +159,13 @@ function App() {
           <h2 className="text-xl font-bold mb-4 text-white">Your Tasks</h2>
 
           {error && (
-            <div className="bg-red-900/50 border border-red-700 text-white p-3 rounded mb-4">
-              {error}
+            <div className="bg-red-900/50 border border-red-700 text-white p-3 rounded mb-4 flex justify-between items-center">
+              <span>{error}</span>
+              {errorCount > 1 && (
+                <span className="bg-red-700 text-white text-xs font-medium px-2 py-1 rounded-full">
+                  {errorCount}
+                </span>
+              )}
             </div>
           )}
 

packages/client/src/App.tsx

@@ -1,24 +1,65 @@
-// Basic socket service
-const socketService = {
-  connect: () => {
-    // Implementation will be mocked in tests
-  },
-  disconnect: () => {
-    // Implementation will be mocked in tests
-  },
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
-  on: (_event: string, _callback: (...args: any[]) => void) => {
-    // Implementation will be mocked in tests
-    return () => {}; // Unsubscribe function
-  },
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
-  emit: (_event: string, ..._args: any[]) => {
-    // Implementation will be mocked in tests
-  },
-  isTodoValid: (id: string): boolean => {
-    // Simple implementation to validate todo IDs
+import { io, Socket } from 'socket.io-client';
+
+// Get the server URL from environment or use default
+const SERVER_URL = import.meta.env.VITE_SERVER_URL || 'http://localhost:3001';
+
+class SocketService {
+  private socket: Socket | null = null;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  private eventHandlers: Record<string, Array<(...args: any[]) => void>> = {};
+
+  connect(): void {
+    if (this.socket) return;
+    
+    this.socket = io(SERVER_URL);
+    
+    this.socket.on('connect', () => {
+      console.log('Socket connected:', this.socket?.id);
+    });
+    
+    this.socket.on('connect_error', (error) => {
+      console.error('Socket connection error:', error);
+    });
+    
+    // Re-register any existing event handlers after reconnection
+    Object.entries(this.eventHandlers).forEach(([event, handlers]) => {
+      handlers.forEach(handler => {
+        this.socket?.on(event, handler);
+      });
+    });
+  }
+
+  disconnect(): void {
+    if (!this.socket) return;
+    
+    this.socket.disconnect();
+    this.socket = null;
+    console.log('Socket disconnected');
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  on(event: string, callback: (...args: any[]) => void): () => void {
+    if (!this.eventHandlers[event]) {
+      this.eventHandlers[event] = [];
+    }
+    
+    this.eventHandlers[event].push(callback);
+    this.socket?.on(event, callback);
+    
+    return () => {
+      this.eventHandlers[event] = this.eventHandlers[event].filter(cb => cb !== callback);
+      this.socket?.off(event, callback);
+    };
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  emit(event: string, ...args: any[]): void {
+    this.socket?.emit(event, ...args);
+  }
+
+  isTodoValid(id: string): boolean {
     return id !== undefined && typeof id === 'string' && id.length > 0;
   }
-};
+}
 
-export default socketService;
+export default new SocketService();

packages/client/src/services/socketService.ts

@@ -67,7 +67,7 @@ io.on('connection', (socket) => {
   io.emit('users:count', onlineUsers);
 
   // Send current todos to newly connected client
-  socket.emit('todos:init', todos);
+  socket.emit('todos:update', todos);
 
   socket.on('disconnect', () => {
     console.info('Client disconnected:', socket.id);
@@ -209,16 +209,11 @@ const broadcastTodos = () => {
 
   // Debounce broadcasts to reduce frequency
   setTimeout(() => {
-    // Only send the first 100 todos to reduce payload size
-    const limitedTodos = todos.slice(0, 100);
+    // Send the full todos list to all clients
+    io.emit('todos:update', todos);
 
-    // Send the todo IDs separately to help clients track what's available
-    const todoIds = todos.map(t => t.id);
-    
-    io.emit('todos:update', limitedTodos);
-    io.emit('todos:ids', todoIds);
     broadcastPending = false;
-  }, 100);
+  }, 50); // Reduced debounce time for faster updates
 };
 
 // Add memory usage monitoring

packages/server/src/index.ts

@@ -7,9 +7,9 @@ import fs from 'fs';
 
 const API_URL = 'http://localhost:3001/api';
 const SOCKET_URL = 'ws://localhost:3001';
-const NUM_USERS = 500; // Reduced from 100
-const OPERATIONS_PER_USER = 30; // Reduced from 20
-const DELAY_BETWEEN_OPS_MS = 100; // Increased from 200
+const NUM_USERS = 600; // Reduced from 100
+const OPERATIONS_PER_USER = 60; // Reduced from 20
+const DELAY_BETWEEN_OPS_MS = 20; // Increased from 200
 const LOG_FILE = 'stress-test-results.log';
 const BATCH_SIZE = 20;
 
@@ -52,7 +52,12 @@ class User {
 
   constructor(id: number) {
     this.id = id;
-    this.socket = io(SOCKET_URL);
+    this.socket = io(SOCKET_URL, {
+      transports: ['websocket'],
+      reconnection: true,
+      reconnectionAttempts: 5,
+      reconnectionDelay: 1000
+    });
 
     this.socket.on('connect', () => {
       conditionalLog(`User ${this.id} connected with socket ID: ${this.socket.id}`);
@@ -63,13 +68,14 @@ class User {
       console.error(`User ${this.id} socket connection error:`, error.message);
     });
 
-    // Update to handle the new todos format (paginated)
+    // Update to handle the new todos format (paginated or array)
     this.socket.on('todos:update', (todosData: Todo[] | { todos: Todo[] }) => {
       if (Array.isArray(todosData)) {
         this.todos = todosData;
       } else if (todosData && 'todos' in todosData) {
         this.todos = todosData.todos;
       }
+      conditionalLog(`User ${this.id} received ${this.todos.length} todos`);
     });
   }
 

packages/server/src/stress-test.ts

@@ -8,7 +8,7 @@ export default defineConfig({
   workers: process.env.CI ? 1 : undefined,
   reporter: 'html',
   use: {
-    baseURL: 'http://localhost:3000',
+    baseURL: 'http://localhost:5173',
     trace: 'on-first-retry',
   },
   projects: [
@@ -33,7 +33,7 @@ export default defineConfig({
     },
     {
       command: 'pnpm --filter client dev',
-      port: 3000,
+      port: 5173,
       reuseExistingServer: !process.env.CI,
     },
   ],