reactbin/ui/src/app/app.component.spec.ts

import { TestBed } from '@angular/core/testing';
import { AppComponent } from './app.component';
import { provideRouter, Router } from '@angular/router';
import { routes } from './app.routes';
import { AuthService } from './auth/auth.service';

describe('AppComponent', () => {
  let authSpy: jasmine.SpyObj<AuthService>;

  beforeEach(async () => {
    authSpy = jasmine.createSpyObj('AuthService', ['isAuthenticated', 'logout']);

    await TestBed.configureTestingModule({
      imports: [AppComponent],
      providers: [
        provideRouter(routes),
        { provide: AuthService, useValue: authSpy },
      ],
    }).compileComponents();
  });

  it('should create the app', () => {
    authSpy.isAuthenticated.and.returnValue(false);
    const fixture = TestBed.createComponent(AppComponent);
    expect(fixture.componentInstance).toBeTruthy();
  });

  it('should have title reactbin-ui', () => {
    authSpy.isAuthenticated.and.returnValue(false);
    const fixture = TestBed.createComponent(AppComponent);
    expect(fixture.componentInstance.title).toEqual('reactbin-ui');
  });

  it('header is present when authenticated', () => {
    authSpy.isAuthenticated.and.returnValue(true);
    const fixture = TestBed.createComponent(AppComponent);
    fixture.detectChanges();
    const header = (fixture.nativeElement as HTMLElement).querySelector('header.app-header');
    expect(header).not.toBeNull();
  });

  it('header is present when not authenticated', () => {
    authSpy.isAuthenticated.and.returnValue(false);
    const fixture = TestBed.createComponent(AppComponent);
    fixture.detectChanges();
    const header = (fixture.nativeElement as HTMLElement).querySelector('header.app-header');
    expect(header).not.toBeNull();
  });

  it('sign-out button is visible when authenticated', () => {
    authSpy.isAuthenticated.and.returnValue(true);
    const fixture = TestBed.createComponent(AppComponent);
    fixture.detectChanges();
    const btn = (fixture.nativeElement as HTMLElement).querySelector('.logout-btn');
    expect(btn).not.toBeNull();
  });

  it('sign-out button is absent when not authenticated', () => {
    authSpy.isAuthenticated.and.returnValue(false);
    const fixture = TestBed.createComponent(AppComponent);
    fixture.detectChanges();
    const btn = (fixture.nativeElement as HTMLElement).querySelector('.logout-btn');
    expect(btn).toBeNull();
  });

  it('onLogout calls auth.logout and navigates to / (grid)', () => {
    authSpy.isAuthenticated.and.returnValue(true);
    const fixture = TestBed.createComponent(AppComponent);
    fixture.detectChanges();
    const router = TestBed.inject(Router);
    spyOn(router, 'navigate');
    fixture.componentInstance.onLogout();
    expect(authSpy.logout).toHaveBeenCalled();
    expect(router.navigate).toHaveBeenCalledWith(['/']);
  });

  it('header app-name is a link to /', () => {
    authSpy.isAuthenticated.and.returnValue(false);
    const fixture = TestBed.createComponent(AppComponent);
    fixture.detectChanges();
    const link = (fixture.nativeElement as HTMLElement).querySelector('a.app-name') as HTMLAnchorElement;
    expect(link).not.toBeNull();
    expect(link.getAttribute('href')).toBe('/');
  });

  it('renders app-toast element', () => {
    authSpy.isAuthenticated.and.returnValue(false);
    const fixture = TestBed.createComponent(AppComponent);
    fixture.detectChanges();
    const toast = (fixture.nativeElement as HTMLElement).querySelector('app-toast');
    expect(toast).not.toBeNull();
  });

  it('header height is 48px', () => {
    authSpy.isAuthenticated.and.returnValue(true);
    const fixture = TestBed.createComponent(AppComponent);
    fixture.detectChanges();
    const header = (fixture.nativeElement as HTMLElement).querySelector('header.app-header') as HTMLElement;
    // The CSS declares height: 48px; we verify the class is applied correctly via the element presence
    // (actual computed styles require a real browser/DOM environment)
    expect(header.classList.contains('app-header')).toBeTrue();
  });
});