import { describe, it, expect, beforeEach } from 'vitest';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { PrioLabelComponent } from './prio-label.component';

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

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

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

  describe('Component Setup and Initialization', () => {
    it('should create', () => {
      expect(component).toBeTruthy();
    });

    it('should have default priority as 1', () => {
      expect(component.priority()).toBe(1);
    });

    it('should accept priority 2', () => {
      fixture.componentRef.setInput('priority', 2);
      fixture.detectChanges();
      expect(component.priority()).toBe(2);
    });

    it('should have correct CSS class for priority 1', () => {
      expect(component.priorityClass()).toBe('ui-prio-label--1');
    });

    it('should have correct CSS class for priority 2', () => {
      fixture.componentRef.setInput('priority', 2);
      fixture.detectChanges();
      expect(component.priorityClass()).toBe('ui-prio-label--2');
    });
  });

  describe('Template Rendering', () => {
    it('should display content with priority 1 classes', () => {
      const hostElement = fixture.debugElement.nativeElement;
      expect(hostElement.classList.contains('ui-prio-label')).toBe(true);
      expect(hostElement.classList.contains('ui-prio-label--1')).toBe(true);
    });

    it('should display content with priority 2 classes', () => {
      fixture.componentRef.setInput('priority', 2);
      fixture.detectChanges();

      const hostElement = fixture.debugElement.nativeElement;
      expect(hostElement.classList.contains('ui-prio-label')).toBe(true);
      expect(hostElement.classList.contains('ui-prio-label--2')).toBe(true);
    });

    it('should update classes when priority changes', () => {
      const hostElement = fixture.debugElement.nativeElement;

      expect(hostElement.classList.contains('ui-prio-label--1')).toBe(true);
      expect(hostElement.classList.contains('ui-prio-label--2')).toBe(false);

      fixture.componentRef.setInput('priority', 2);
      fixture.detectChanges();

      expect(hostElement.classList.contains('ui-prio-label--1')).toBe(false);
      expect(hostElement.classList.contains('ui-prio-label--2')).toBe(true);
    });
  });

  describe('Component Structure', () => {
    it('should have proper host class binding', () => {
      const hostElement = fixture.debugElement.nativeElement;
      expect(hostElement.classList.contains('ui-prio-label')).toBe(true);
    });

    it('should have E2E testing attributes', () => {
      const hostElement = fixture.debugElement.nativeElement;
      expect(hostElement.getAttribute('data-what')).toBe('prio-label');
      expect(hostElement.getAttribute('data-which')).toBe('priority-1');
    });

    it('should have correct data-which for different priorities', () => {
      const hostElement = fixture.debugElement.nativeElement;

      expect(hostElement.getAttribute('data-which')).toBe('priority-1');

      fixture.componentRef.setInput('priority', 2);
      fixture.detectChanges();
      expect(hostElement.getAttribute('data-which')).toBe('priority-2');
    });

    it('should have accessibility role', () => {
      const hostElement = fixture.debugElement.nativeElement;
      expect(hostElement.getAttribute('role')).toBe('status');
    });
  });
});
