portfolio/app/__tests__/components/ActivityFeed.test.tsx

import '@testing-library/jest-dom';

/**
 * Unit tests for ActivityFeed NaN handling
 * 
 * This test suite validates that the ActivityFeed component correctly handles
 * NaN and numeric values in gaming and custom activity data to prevent
 * "Received NaN for the children attribute" React errors.
 */
describe('ActivityFeed NaN Handling', () => {
  describe('Gaming activity rendering logic', () => {
    // Helper function to simulate getSafeGamingText behavior
    const getSafeGamingText = (details: string | number | undefined, state: string | number | undefined, fallback: string): string => {
      if (typeof details === 'string' && details.trim().length > 0) return details;
      if (typeof state === 'string' && state.trim().length > 0) return state;
      if (typeof details === 'number' && !isNaN(details)) return String(details);
      if (typeof state === 'number' && !isNaN(state)) return String(state);
      return fallback;
    };

    it('should safely handle NaN in gaming.details', () => {
      const result = getSafeGamingText(NaN, 'Playing', 'Playing...');
      expect(result).toBe('Playing'); // Should fall through NaN to state
      expect(result).not.toBe(NaN);
      expect(typeof result).toBe('string');
    });

    it('should safely handle NaN in both gaming.details and gaming.state', () => {
      const result = getSafeGamingText(NaN, NaN, 'Playing...');
      expect(result).toBe('Playing...'); // Should use fallback
      expect(typeof result).toBe('string');
    });

    it('should prioritize string details over numeric state', () => {
      const result = getSafeGamingText('Details text', 42, 'Playing...');
      expect(result).toBe('Details text'); // String details takes precedence
      expect(typeof result).toBe('string');
    });

    it('should prioritize string state over numeric details', () => {
      const result = getSafeGamingText(42, 'State text', 'Playing...');
      expect(result).toBe('State text'); // String state takes precedence over numeric details
      expect(typeof result).toBe('string');
    });

    it('should convert valid numeric details to string', () => {
      const result = getSafeGamingText(42, undefined, 'Playing...');
      expect(result).toBe('42');
      expect(typeof result).toBe('string');
    });

    it('should handle empty strings correctly', () => {
      const result1 = getSafeGamingText('', 'Playing', 'Playing...');
      expect(result1).toBe('Playing'); // Empty string should fall through to state
      
      const result2 = getSafeGamingText('  ', 'Playing', 'Playing...');
      expect(result2).toBe('Playing'); // Whitespace-only should fall through to state
    });

    it('should convert gaming.name to string safely', () => {
      const validName = String('Test Game');
      expect(validName).toBe('Test Game');
      expect(typeof validName).toBe('string');

      // In the actual code, we use String(data.gaming.name || '')
      // If data.gaming.name is NaN, (NaN || '') evaluates to '' because NaN is falsy
      const nanValue = NaN;
      const nanName = String(nanValue || '');
      expect(nanName).toBe(''); // NaN is falsy, so it falls back to ''
      expect(typeof nanName).toBe('string');
    });
  });

  describe('Custom activities progress handling', () => {
    it('should only render progress bar when progress is a valid number', () => {
      const validProgress = 75;
      const shouldRender = validProgress !== undefined && 
                           typeof validProgress === 'number' && 
                           !isNaN(validProgress);
      expect(shouldRender).toBe(true);
    });

    it('should not render progress bar when progress is NaN', () => {
      const invalidProgress = NaN;
      const shouldRender = invalidProgress !== undefined && 
                           typeof invalidProgress === 'number' && 
                           !isNaN(invalidProgress);
      expect(shouldRender).toBe(false);
    });

    it('should not render progress bar when progress is undefined', () => {
      const undefinedProgress = undefined;
      const shouldRender = undefinedProgress !== undefined && 
                           typeof undefinedProgress === 'number' && 
                           !isNaN(undefinedProgress);
      expect(shouldRender).toBe(false);
    });
  });

  describe('Custom activities dynamic field rendering', () => {
    it('should safely convert valid numeric values to string', () => {
      const value = 42;
      const shouldRender = typeof value === 'string' || 
                          (typeof value === 'number' && !isNaN(value));
      
      expect(shouldRender).toBe(true);
      
      if (shouldRender) {
        const stringValue = String(value);
        expect(stringValue).toBe('42');
        expect(typeof stringValue).toBe('string');
      }
    });

    it('should not render NaN values', () => {
      const value = NaN;
      const shouldRender = typeof value === 'string' || 
                          (typeof value === 'number' && !isNaN(value));
      
      expect(shouldRender).toBe(false);
    });

    it('should render valid string values', () => {
      const value = 'Test String';
      const shouldRender = typeof value === 'string' || 
                          (typeof value === 'number' && !isNaN(value));
      
      expect(shouldRender).toBe(true);
      
      if (shouldRender) {
        const stringValue = String(value);
        expect(stringValue).toBe('Test String');
        expect(typeof stringValue).toBe('string');
      }
    });

    it('should render zero as a valid numeric value', () => {
      const value = 0;
      const shouldRender = typeof value === 'string' || 
                          (typeof value === 'number' && !isNaN(value));
      
      expect(shouldRender).toBe(true);
      
      if (shouldRender) {
        const stringValue = String(value);
        expect(stringValue).toBe('0');
        expect(typeof stringValue).toBe('string');
      }
    });
  });
});