import { describe, it, expect } from 'vitest';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { provideRouter } from '@angular/router';
import { NotFound } from '@app/shared/ui/not-found/not-found';

describe('NotFound', () => {
  let component: NotFound;
  let fixture: ComponentFixture<NotFound>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [NotFound],
      providers: [provideRouter([])],
    }).compileComponents();

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

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

  it('should render 404 code', () => {
    const code = fixture.nativeElement.querySelector('.not-found__code');

    expect(code?.textContent).toContain('404');
  });

  it('should render title', () => {
    const title = fixture.nativeElement.querySelector('.not-found__title');

    expect(title?.textContent).toContain('Page not found');
  });

  it('should render description', () => {
    const description = fixture.nativeElement.querySelector('.not-found__description');

    expect(description?.textContent).toContain("doesn't exist");
  });

  it('should render link to tasks', () => {
    const link = fixture.nativeElement.querySelector('a');

    expect(link).toBeTruthy();
    expect(link.getAttribute('routerLink')).toBe('/tasks');
    expect(link.textContent).toContain('Go to Tasks');
  });

  it('should have section with aria-label', () => {
    const section = fixture.nativeElement.querySelector('section');

    expect(section.getAttribute('aria-label')).toBe('Page not found');
  });
});