test: add comprehensive test suite for client and server

Author: blink-zero

client/src/test/components/Footer.test.jsx

@@ -0,0 +1,73 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { BrowserRouter } from 'react-router-dom';
+import Footer from '../../components/navigation/Footer';
+import appConfig from '../../config/appConfig';
+
+// Mock appConfig to control test values
+vi.mock('../../config/appConfig', () => ({
+  default: {
+    version: '1.8.2',
+    appName: 'PowerPulse',
+    githubUrl: 'https://github.com/blink-zero/powerpulse',
+    copyrightYear: 2025,
+    copyrightOwner: 'blink-zero'
+  }
+}));
+
+describe('Footer Component', () => {
+  // Helper function to render the Footer with Router context
+  const renderFooter = () => {
+    return render(
+      <BrowserRouter>
+        <Footer />
+      </BrowserRouter>
+    );
+  };
+
+  it('renders without crashing', () => {
+    renderFooter();
+    expect(screen.getByRole('contentinfo')).toBeInTheDocument();
+  });
+
+  it('displays the correct version number', () => {
+    renderFooter();
+    expect(screen.getByText(`v${appConfig.version}`)).toBeInTheDocument();
+  });
+
+  it('displays the correct copyright information', () => {
+    renderFooter();
+    const year = appConfig.copyrightYear;
+    const owner = appConfig.copyrightOwner;
+    expect(screen.getByText(`© ${year} ${owner}`)).toBeInTheDocument();
+  });
+
+  it('includes a link to the GitHub repository', () => {
+    renderFooter();
+    const githubLink = screen.getByRole('link', { name: /github/i });
+    expect(githubLink).toHaveAttribute('href', appConfig.githubUrl);
+    expect(githubLink).toHaveAttribute('target', '_blank');
+    expect(githubLink).toHaveAttribute('rel', 'noopener noreferrer');
+  });
+
+  it('displays the app name', () => {
+    renderFooter();
+    expect(screen.getByText(appConfig.appName)).toBeInTheDocument();
+  });
+
+  it('has the correct CSS classes for styling', () => {
+    renderFooter();
+    const footer = screen.getByRole('contentinfo');
+    expect(footer).toHaveClass('bg-white');
+    expect(footer).toHaveClass('dark:bg-gray-800');
+    expect(footer).toHaveClass('border-t');
+  });
+
+  it('is responsive with appropriate padding', () => {
+    renderFooter();
+    const footer = screen.getByRole('contentinfo');
+    expect(footer).toHaveClass('px-4');
+    expect(footer).toHaveClass('py-3');
+    expect(footer).toHaveClass('sm:px-6');
+  });
+});

client/src/test/hooks/useFormValidation.test.js

@@ -0,0 +1,191 @@
+import { describe, it, expect, vi } from 'vitest';
+import { renderHook, act } from '@testing-library/react';
+import { useFormValidation } from '../../hooks/useFormValidation';
+
+describe('useFormValidation Hook', () => {
+  const initialValues = {
+    name: '',
+    email: '',
+    password: ''
+  };
+
+  const validationRules = {
+    name: {
+      required: true,
+      requiredMessage: 'Name is required',
+      validator: (value) => value.length >= 3,
+      message: 'Name must be at least 3 characters'
+    },
+    email: {
+      required: true,
+      requiredMessage: 'Email is required',
+      validator: (value) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value),
+      message: 'Please enter a valid email address'
+    },
+    password: {
+      required: true,
+      requiredMessage: 'Password is required',
+      validator: (value) => value.length >= 8,
+      message: 'Password must be at least 8 characters'
+    }
+  };
+
+  const onSubmit = vi.fn();
+
+  it('should initialize with the provided values', () => {
+    const { result } = renderHook(() => 
+      useFormValidation(initialValues, validationRules, onSubmit)
+    );
+
+    expect(result.current.values).toEqual(initialValues);
+    expect(result.current.errors).toEqual({});
+    expect(result.current.touched).toEqual({});
+    expect(result.current.isSubmitting).toBe(false);
+  });
+
+  it('should update values when handleChange is called', () => {
+    const { result } = renderHook(() => 
+      useFormValidation(initialValues, validationRules, onSubmit)
+    );
+
+    act(() => {
+      result.current.handleChange({
+        target: { name: 'name', value: 'John Doe' }
+      });
+    });
+
+    expect(result.current.values.name).toBe('John Doe');
+  });
+
+  it('should mark field as touched when handleBlur is called', () => {
+    const { result } = renderHook(() => 
+      useFormValidation(initialValues, validationRules, onSubmit)
+    );
+
+    act(() => {
+      result.current.handleBlur({
+        target: { name: 'name' }
+      });
+    });
+
+    expect(result.current.touched.name).toBe(true);
+  });
+
+  it('should validate required fields', () => {
+    const { result } = renderHook(() => 
+      useFormValidation(initialValues, validationRules, onSubmit)
+    );
+
+    // Trigger validation by attempting to submit
+    act(() => {
+      result.current.handleSubmit({ preventDefault: vi.fn() });
+    });
+
+    expect(result.current.errors.name).toBe('Name is required');
+    expect(result.current.errors.email).toBe('Email is required');
+    expect(result.current.errors.password).toBe('Password is required');
+  });
+
+  it('should validate field format when values are provided', () => {
+    const { result } = renderHook(() => 
+      useFormValidation(
+        { ...initialValues, name: 'Jo', email: 'invalid-email', password: 'short' },
+        validationRules,
+        onSubmit
+      )
+    );
+
+    // Trigger validation by attempting to submit
+    act(() => {
+      result.current.handleSubmit({ preventDefault: vi.fn() });
+    });
+
+    expect(result.current.errors.name).toBe('Name must be at least 3 characters');
+    expect(result.current.errors.email).toBe('Please enter a valid email address');
+    expect(result.current.errors.password).toBe('Password must be at least 8 characters');
+  });
+
+  it('should call onSubmit when form is valid', async () => {
+    const validValues = {
+      name: 'John Doe',
+      email: 'john@example.com',
+      password: 'password123'
+    };
+
+    const { result } = renderHook(() => 
+      useFormValidation(validValues, validationRules, onSubmit)
+    );
+
+    await act(async () => {
+      await result.current.handleSubmit({ preventDefault: vi.fn() });
+    });
+
+    expect(onSubmit).toHaveBeenCalledWith(validValues);
+  });
+
+  it('should set isSubmitting during form submission', async () => {
+    // Create a delayed onSubmit function
+    const delayedOnSubmit = vi.fn().mockImplementation(() => 
+      new Promise(resolve => setTimeout(resolve, 100))
+    );
+
+    const validValues = {
+      name: 'John Doe',
+      email: 'john@example.com',
+      password: 'password123'
+    };
+
+    const { result } = renderHook(() => 
+      useFormValidation(validValues, validationRules, delayedOnSubmit)
+    );
+
+    let submissionPromise;
+    
+    act(() => {
+      submissionPromise = result.current.handleSubmit({ preventDefault: vi.fn() });
+    });
+
+    // Check that isSubmitting is true during submission
+    expect(result.current.isSubmitting).toBe(true);
+
+    // Wait for submission to complete
+    await act(async () => {
+      await submissionPromise;
+    });
+
+    // Check that isSubmitting is false after submission
+    expect(result.current.isSubmitting).toBe(false);
+  });
+
+  it('should reset the form when resetForm is called', () => {
+    const { result } = renderHook(() => 
+      useFormValidation(
+        { ...initialValues, name: 'John Doe' },
+        validationRules,
+        onSubmit
+      )
+    );
+
+    // First, make some changes
+    act(() => {
+      result.current.handleChange({
+        target: { name: 'email', value: 'john@example.com' }
+      });
+      
+      result.current.handleBlur({
+        target: { name: 'name' }
+      });
+    });
+
+    // Then reset the form
+    act(() => {
+      result.current.resetForm();
+    });
+
+    // Check that everything is reset
+    expect(result.current.values).toEqual(initialValues);
+    expect(result.current.errors).toEqual({});
+    expect(result.current.touched).toEqual({});
+    expect(result.current.isSubmitting).toBe(false);
+  });
+});

client/src/test/hooks/useInactivityTimer.test.js

@@ -0,0 +1,108 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { renderHook, act } from '@testing-library/react';
+import { useInactivityTimer } from '../../hooks/useInactivityTimer';
+
+// Mock the window events
+const mockAddEventListener = vi.fn();
+const mockRemoveEventListener = vi.fn();
+
+// Save original methods
+const originalAddEventListener = window.addEventListener;
+const originalRemoveEventListener = window.removeEventListener;
+
+describe('useInactivityTimer Hook', () => {
+  beforeEach(() => {
+    // Mock the window methods
+    window.addEventListener = mockAddEventListener;
+    window.removeEventListener = mockRemoveEventListener;
+    
+    // Reset mocks before each test
+    vi.clearAllMocks();
+    
+    // Mock Date.now to control time
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    // Restore original methods
+    window.addEventListener = originalAddEventListener;
+    window.removeEventListener = originalRemoveEventListener;
+    
+    // Restore real timers
+    vi.useRealTimers();
+  });
+
+  it('should set up event listeners on mount', () => {
+    const onTimeout = vi.fn();
+    const timeoutMinutes = 30;
+    
+    renderHook(() => useInactivityTimer(onTimeout, timeoutMinutes));
+    
+    // Check that event listeners were added for all activity events
+    expect(mockAddEventListener).toHaveBeenCalledWith('mousemove', expect.any(Function));
+    expect(mockAddEventListener).toHaveBeenCalledWith('mousedown', expect.any(Function));
+    expect(mockAddEventListener).toHaveBeenCalledWith('keypress', expect.any(Function));
+    expect(mockAddEventListener).toHaveBeenCalledWith('touchstart', expect.any(Function));
+    expect(mockAddEventListener).toHaveBeenCalledWith('scroll', expect.any(Function));
+  });
+
+  it('should clean up event listeners on unmount', () => {
+    const onTimeout = vi.fn();
+    const timeoutMinutes = 30;
+    
+    const { unmount } = renderHook(() => useInactivityTimer(onTimeout, timeoutMinutes));
+    
+    // Unmount the hook
+    unmount();
+    
+    // Check that event listeners were removed
+    expect(mockRemoveEventListener).toHaveBeenCalledWith('mousemove', expect.any(Function));
+    expect(mockRemoveEventListener).toHaveBeenCalledWith('mousedown', expect.any(Function));
+    expect(mockRemoveEventListener).toHaveBeenCalledWith('keypress', expect.any(Function));
+    expect(mockRemoveEventListener).toHaveBeenCalledWith('touchstart', expect.any(Function));
+    expect(mockRemoveEventListener).toHaveBeenCalledWith('scroll', expect.any(Function));
+  });
+
+  it('should call onTimeout after the specified timeout period', () => {
+    const onTimeout = vi.fn();
+    const timeoutMinutes = 30;
+    
+    renderHook(() => useInactivityTimer(onTimeout, timeoutMinutes));
+    
+    // Fast-forward time past the timeout
+    vi.advanceTimersByTime(timeoutMinutes * 60 * 1000 + 1000);
+    
+    // Check that onTimeout was called
+    expect(onTimeout).toHaveBeenCalled();
+  });
+
+  it('should reset the timer when activity is detected', () => {
+    const onTimeout = vi.fn();
+    const timeoutMinutes = 30;
+    
+    renderHook(() => useInactivityTimer(onTimeout, timeoutMinutes));
+    
+    // Get the activity handler (first argument of the first call)
+    const activityHandler = mockAddEventListener.mock.calls[0][1];
+    
+    // Fast-forward time halfway through the timeout
+    vi.advanceTimersByTime(timeoutMinutes * 30 * 1000);
+    
+    // Simulate user activity
+    act(() => {
+      activityHandler();
+    });
+    
+    // Fast-forward time halfway through the timeout again
+    vi.advanceTimersByTime(timeoutMinutes * 30 * 1000);
+    
+    // onTimeout should not have been called yet
+    expect(onTimeout).not.toHaveBeenCalled();
+    
+    // Fast-forward time past the full timeout
+    vi.advanceTimersByTime(timeoutMinutes * 30 * 1000 + 1000);
+    
+    // Now onTimeout should have been called
+    expect(onTimeout).toHaveBeenCalled();
+  });
+});