app.component.spec.ts

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ErrorHandler, provideZonelessChangeDetection } from '@angular/core';
import { provideRouter, Router } from '@angular/router';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { provideHttpClient } from '@angular/common/http';
import { provideHttpClientTesting, HttpTestingController } from '@angular/common/http/testing';
import { BreakpointObserver, BreakpointState } from '@angular/cdk/layout';
import { of } from 'rxjs';
import { AppComponent } from './app.component';
import { GlobalErrorHandler } from './error/global-error-handler';
import { API_BASE_URL } from './tokens';

describe('AppComponent', () => {
    let fixture: ComponentFixture<AppComponent>;
    let component: AppComponent;
    let httpTesting: HttpTestingController;

    beforeEach(async () => {
        localStorage.clear();
        await TestBed.configureTestingModule({
            imports: [AppComponent, NoopAnimationsModule],
            providers: [
                provideZonelessChangeDetection(),
                provideRouter([]),
                provideHttpClient(),
                provideHttpClientTesting(),
                { provide: ErrorHandler, useClass: GlobalErrorHandler },
                { provide: API_BASE_URL, useValue: '/api' },
            ],
        }).compileComponents();

        fixture = TestBed.createComponent(AppComponent);
        component = fixture.componentInstance;
        httpTesting = TestBed.inject(HttpTestingController);

        // Flush initial MetricsStore requests
        httpTesting.match('/api/metrics').forEach(req => req.flush({
            totalRequests: 0, averageDuration: 0, cacheHitRate: 0, successRate: 0,
        }));
        httpTesting.match('/api/health').forEach(req => req.flush({
            status: 'healthy', version: '0.0.0',
        }));

        await fixture.whenStable();
    });

    afterEach(() => {
        httpTesting.match(() => true).forEach(req => req.flush({}));
        httpTesting.verify();
        localStorage.clear();
    });

    it('should create', () => {
        expect(component).toBeTruthy();
    });

    it('should have 11 navigation items', () => {
        expect(component.navItems.length).toBe(11);
    });

    it('should include Home nav item', () => {
        const home = component.navItems.find(i => i.path === '/');
        expect(home).toBeTruthy();
        expect(home!.label).toBe('Home');
        expect(home!.icon).toBe('home');
    });

    it('should include Compiler nav item', () => {
        const compiler = component.navItems.find(i => i.path === '/compiler');
        expect(compiler).toBeTruthy();
        expect(compiler!.label).toBe('Compiler');
    });

    it('should include Admin nav item', () => {
        const admin = component.navItems.find(i => i.path === '/admin');
        expect(admin).toBeTruthy();
        expect(admin!.label).toBe('Admin');
    });

    it('should start with sidenav closed (desktop uses horizontal nav tabs)', () => {
        expect(component.sidenavOpen()).toBe(false);
    });

    it('should toggle sidenav', () => {
        expect(component.sidenavOpen()).toBe(false);
        component.toggleSidenav();
        expect(component.sidenavOpen()).toBe(true);
        component.toggleSidenav();
        expect(component.sidenavOpen()).toBe(false);
    });

    it('should default isMobile to false', () => {
        // In jsdom, BreakpointObserver resolves to non-mobile
        expect(component.isMobile()).toBe(false);
    });

    it('should expose theme service', () => {
        expect(component.themeService).toBeTruthy();
        expect(component.themeService.isDark()).toBe(false);
    });

    it('should render the toolbar title', async () => {
        await fixture.whenStable();
        const el: HTMLElement = fixture.nativeElement;
        expect(el.querySelector('.toolbar-title')?.textContent).toContain('Bloqr');
    });

    it('should render the main content area with role=main', async () => {
        await fixture.whenStable();
        const main = fixture.nativeElement.querySelector('[role="main"]');
        expect(main).toBeTruthy();
        expect(main.getAttribute('aria-label')).toBe('Main content');
    });

    it('should NOT render menu button in desktop viewport (isMobile is false)', async () => {
        await fixture.whenStable();
        const menuBtn = fixture.nativeElement.querySelector('button[aria-label="Toggle navigation"]');
        expect(menuBtn).toBeNull();
    });
});

describe('AppComponent (mobile viewport)', () => {
    let fixture: ComponentFixture<AppComponent>;
    let httpTesting: HttpTestingController;

    beforeEach(async () => {
        localStorage.clear();
        await TestBed.configureTestingModule({
            imports: [AppComponent, NoopAnimationsModule],
            providers: [
                provideZonelessChangeDetection(),
                // Provide a non-root route so we can navigate away from `/` to reveal the app shell.
                provideRouter([{ path: 'compiler', component: AppComponent }]),
                provideHttpClient(),
                provideHttpClientTesting(),
                { provide: ErrorHandler, useClass: GlobalErrorHandler },
                { provide: API_BASE_URL, useValue: '/api' },
                {
                    provide: BreakpointObserver,
                    useValue: { observe: () => of({ matches: true } as BreakpointState) },
                },
            ],
        }).compileComponents();

        fixture = TestBed.createComponent(AppComponent);
        httpTesting = TestBed.inject(HttpTestingController);

        httpTesting.match('/api/metrics').forEach(req => req.flush({
            totalRequests: 0, averageDuration: 0, cacheHitRate: 0, successRate: 0,
        }));
        httpTesting.match('/api/health').forEach(req => req.flush({
            status: 'healthy', version: '0.0.0',
        }));

        await fixture.whenStable();
    });

    afterEach(() => {
        httpTesting.match(() => true).forEach(req => req.flush({}));
        httpTesting.verify();
        localStorage.clear();
    });

    it('should render menu button with aria-label on non-landing routes', async () => {
        // The app shell hamburger is only shown on non-landing-page routes.
        // Navigate away from `/` to make isLandingPage() = false and reveal the shell header.
        const router = TestBed.inject(Router);
        await router.navigate(['/compiler']);
        await fixture.whenStable();
        fixture.detectChanges();
        const menuBtn = fixture.nativeElement.querySelector('button[aria-label="Toggle navigation"]');
        expect(menuBtn).toBeTruthy();
    });
});