Portfolio/src/app/app.spec.ts

import { TestBed } from '@angular/core/testing';
import { provideRouter } from '@angular/router';
import { App } from './app';
import { routes } from './app.routes';
import { SITE_CONTENT } from './core/content/content.token';
import { SITE_CONTENT_DATA } from './core/content/site-content';

describe('App', () => {
  beforeEach(async () => {
    vi.spyOn(HTMLCanvasElement.prototype, 'getContext').mockReturnValue(null);

    await TestBed.configureTestingModule({
      imports: [App],
      providers: [provideRouter(routes), { provide: SITE_CONTENT, useValue: SITE_CONTENT_DATA }],
    }).compileComponents();
  });

  afterEach(() => {
    vi.restoreAllMocks();
  });

  it('should create the shell', async () => {
    const fixture = TestBed.createComponent(App);
    await fixture.whenStable();
    expect(fixture.componentInstance).toBeTruthy();
  });

  it('should render an accessible application shell', async () => {
    const fixture = TestBed.createComponent(App);
    await fixture.whenStable();
    const compiled = fixture.nativeElement as HTMLElement;

    const focusable = compiled.querySelectorAll(
      'a[href], button:not([disabled]), [tabindex]:not([tabindex="-1"])',
    );
    const firstFocusable = focusable.item(0);

    expect(firstFocusable).toBeTruthy();
    expect(firstFocusable.getAttribute('href')).toBe('#main-content');
    expect(firstFocusable.classList.contains('skip-link')).toBe(true);
    expect(compiled.querySelector('main#main-content')).toBeTruthy();
    expect(compiled.querySelector('nav[aria-label]')).toBeTruthy();
    expect(compiled.querySelector('a.language-switch[hreflang]')).toBeTruthy();
    expect(compiled.querySelector('footer')).toBeTruthy();
  });
});