app.component.spec.ts

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { FormsModule } from '@angular/forms';
import { of, Subject } from 'rxjs';

import { AppComponent } from './app.component';

/**
 * App Component Test Suite
 * 
 * This test suite tests the main AppComponent functionality including:
 * - Component initialization
 * - Template rendering
 * - Router outlet integration
 * - Styling and layout
 * - Year display
 * 
 * Test Coverage:
 * - Component creation and initialization
 * - Template elements and structure
 * - Dynamic content (current year)
 * - Router integration
 */
describe('AppComponent', () => {
  let component: AppComponent;
  let fixture: ComponentFixture<AppComponent>;

  /**
   * Setup Test Environment
   * 
   * Configures the TestBed with necessary imports and creates component instance.
   */
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [
        AppComponent,
        RouterTestingModule,
        FormsModule
      ]
    }).compileComponents();

    fixture = TestBed.createComponent(AppComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  /**
   * Component Initialization Tests
   */
  describe('Component Initialization', () => {
    it('should create the app', () => {
      expect(component).toBeTruthy();
    });

    it('should initialize with current year', () => {
      const currentYear = new Date().getFullYear();
      expect(component.currentYear).toBe(currentYear);
    });

    it('should have correct component selector', () => {
      const compiled = fixture.nativeElement;
      expect(compiled.querySelector('app-root')).toBeTruthy();
    });
  });

  /**
   * Template Rendering Tests
   */
  describe('Template Rendering', () => {
    it('should render app container', () => {
      const compiled = fixture.nativeElement;
      const appContainer = compiled.querySelector('.app-container');
      
      expect(appContainer).toBeTruthy();
    });

    it('should render header section', () => {
      const compiled = fixture.nativeElement;
      const header = compiled.querySelector('.app-header');
      
      expect(header).toBeTruthy();
    });

    it('should render main content area', () => {
      const compiled = fixture.nativeElement;
      const main = compiled.querySelector('.app-main');
      
      expect(main).toBeTruthy();
    });

    it('should render footer section', () => {
      const compiled = fixture.nativeElement;
      const footer = compiled.querySelector('.app-footer');
      
      expect(footer).toBeTruthy();
    });

    it('should render router outlet', () => {
      const compiled = fixture.nativeElement;
      const routerOutlet = compiled.querySelector('router-outlet');
      
      expect(routerOutlet).toBeTruthy();
    });
  });

  /**
   * Content Display Tests
   */
  describe('Content Display', () => {
    it('should display app title', () => {
      const compiled = fixture.nativeElement;
      const title = compiled.querySelector('.app-title');
      
      expect(title).toBeTruthy();
      expect(title.textContent).toContain('Todue');
    });

    it('should display app icon', () => {
      const compiled = fixture.nativeElement;
      const icon = compiled.querySelector('.app-icon');
      
      expect(icon).toBeTruthy();
      expect(icon.textContent).toContain('📝');
    });

    it('should display app subtitle', () => {
      const compiled = fixture.nativeElement;
      const subtitle = compiled.querySelector('.app-subtitle');
      
      expect(subtitle).toBeTruthy();
      expect(subtitle.textContent).toContain('Your Personal Todo Notes Manager');
    });

    it('should display current year in footer', () => {
      const compiled = fixture.nativeElement;
      const yearElement = compiled.querySelector('.footer-year');
      const currentYear = new Date().getFullYear().toString();
      
      expect(yearElement).toBeTruthy();
      expect(yearElement.textContent).toContain(currentYear);
    });

    it('should display footer text', () => {
      const compiled = fixture.nativeElement;
      const footerText = compiled.querySelector('.footer-text');
      
      expect(footerText).toBeTruthy();
      expect(footerText.textContent).toContain('Built with Angular 20 & TypeScript');
    });
  });

  /**
   * Layout Structure Tests
   */
  describe('Layout Structure', () => {
    it('should have proper container structure', () => {
      const compiled = fixture.nativeElement;
      const container = compiled.querySelector('.container');
      
      expect(container).toBeTruthy();
    });

    it('should have proper header structure', () => {
      const compiled = fixture.nativeElement;
      const headerContainer = compiled.querySelector('.app-header .container');
      
      expect(headerContainer).toBeTruthy();
    });

    it('should have proper main structure', () => {
      const compiled = fixture.nativeElement;
      const mainContainer = compiled.querySelector('.app-main .container');
      
      expect(mainContainer).toBeTruthy();
    });

    it('should have proper footer structure', () => {
      const compiled = fixture.nativeElement;
      const footerContainer = compiled.querySelector('.app-footer .container');
      
      expect(footerContainer).toBeTruthy();
    });
  });

  /**
   * CSS Class Tests
   */
  describe('CSS Classes', () => {
    it('should apply correct CSS classes to elements', () => {
      const compiled = fixture.nativeElement;
      
      expect(compiled.querySelector('.app-container')).toBeTruthy();
      expect(compiled.querySelector('.app-header')).toBeTruthy();
      expect(compiled.querySelector('.app-main')).toBeTruthy();
      expect(compiled.querySelector('.app-footer')).toBeTruthy();
      expect(compiled.querySelector('.app-title')).toBeTruthy();
      expect(compiled.querySelector('.app-icon')).toBeTruthy();
      expect(compiled.querySelector('.app-subtitle')).toBeTruthy();
      expect(compiled.querySelector('.footer-text')).toBeTruthy();
      expect(compiled.querySelector('.footer-year')).toBeTruthy();
    });
  });

  /**
   * Dynamic Content Tests
   */
  describe('Dynamic Content', () => {
    it('should update year when component is re-initialized', () => {
      // Mock a different year
      const mockDate = new Date('2025-01-01');
      spyOn(window, 'Date').and.returnValue(mockDate as any);
      
      // Create new component instance
      const newFixture = TestBed.createComponent(AppComponent);
      const newComponent = newFixture.componentInstance;
      
      expect(newComponent.currentYear).toBe(2025);
    });

    it('should maintain year consistency across renders', () => {
      const initialYear = component.currentYear;
      
      // Trigger change detection
      fixture.detectChanges();
      
      expect(component.currentYear).toBe(initialYear);
    });
  });

  /**
   * Responsive Design Tests
   */
  describe('Responsive Design', () => {
    it('should have responsive CSS classes', () => {
      const compiled = fixture.nativeElement;
      const styles = window.getComputedStyle(compiled.querySelector('.app-container'));
      
      // Check if flexbox is applied
      expect(styles.display).toBe('flex');
      expect(styles.flexDirection).toBe('column');
    });

    it('should have proper min-height for full viewport', () => {
      const compiled = fixture.nativeElement;
      const styles = window.getComputedStyle(compiled.querySelector('.app-container'));
      
      expect(styles.minHeight).toBe('100vh');
    });
  });

  /**
   * Accessibility Tests
   */
  describe('Accessibility', () => {
    it('should have proper heading structure', () => {
      const compiled = fixture.nativeElement;
      const h1 = compiled.querySelector('h1');
      
      expect(h1).toBeTruthy();
      expect(h1.textContent).toContain('Todue');
    });

    it('should have semantic HTML elements', () => {
      const compiled = fixture.nativeElement;
      
      expect(compiled.querySelector('header')).toBeTruthy();
      expect(compiled.querySelector('main')).toBeTruthy();
      expect(compiled.querySelector('footer')).toBeTruthy();
    });

    it('should have proper text content for screen readers', () => {
      const compiled = fixture.nativeElement;
      const subtitle = compiled.querySelector('.app-subtitle');
      
      expect(subtitle.textContent).toContain('Your Personal Todo Notes Manager');
    });
  });

  /**
   * Integration Tests
   */
  describe('Integration', () => {
    it('should work with router testing module', () => {
      const compiled = fixture.nativeElement;
      const routerOutlet = compiled.querySelector('router-outlet');
      
      expect(routerOutlet).toBeTruthy();
    });

    it('should maintain component state across change detection cycles', () => {
      const initialYear = component.currentYear;
      
      // Trigger multiple change detection cycles
      fixture.detectChanges();
      fixture.detectChanges();
      fixture.detectChanges();
      
      expect(component.currentYear).toBe(initialYear);
    });
  });

  /**
   * Performance Tests
   */
  describe('Performance', () => {
    it('should render quickly', () => {
      const startTime = performance.now();
      
      fixture.detectChanges();
      
      const endTime = performance.now();
      const renderTime = endTime - startTime;
      
      // Should render in less than 100ms
      expect(renderTime).toBeLessThan(100);
    });

    it('should not cause memory leaks', () => {
      const initialMemory = (performance as any).memory?.usedJSHeapSize || 0;
      
      // Create and destroy multiple component instances
      for (let i = 0; i < 10; i++) {
        const testFixture = TestBed.createComponent(AppComponent);
        testFixture.destroy();
      }
      
      const finalMemory = (performance as any).memory?.usedJSHeapSize || 0;
      
      // Memory usage should not increase significantly
      if (initialMemory > 0 && finalMemory > 0) {
        expect(finalMemory - initialMemory).toBeLessThan(1000000); // Less than 1MB increase
      }
    });
  });

  /**
   * Edge Cases Tests
   */
  describe('Edge Cases', () => {
    it('should handle component creation in different time zones', () => {
      // Mock different timezone
      const originalDate = Date;
      const mockDate = class extends Date {
        constructor(...args: any[]) {
          if (args.length === 0) {
            super('2024-12-31T23:59:59Z');
          } else {
            super(...args);
          }
        }
      };
      
      (global as any).Date = mockDate;
      
      const testFixture = TestBed.createComponent(AppComponent);
      const testComponent = testFixture.componentInstance;
      
      expect(testComponent.currentYear).toBe(2024);
      
      // Restore original Date
      (global as any).Date = originalDate;
    });

    it('should handle rapid change detection cycles', () => {
      const initialYear = component.currentYear;
      
      // Trigger rapid change detection
      for (let i = 0; i < 100; i++) {
        fixture.detectChanges();
      }
      
      expect(component.currentYear).toBe(initialYear);
    });
  });
});