78 lines
2.3 KiB
TypeScript
78 lines
2.3 KiB
TypeScript
|
import { describe, it, expect } from 'vitest';
|
||
|
|
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||
|
|
import { TaskStateBadge } from '@app/features/tasks/ui/task-state-badge/task-state-badge';
|
||
|
|
|
||
|
|
describe('TaskStateBadge', () => {
|
||
|
|
let component: TaskStateBadge;
|
||
|
|
let fixture: ComponentFixture<TaskStateBadge>;
|
||
|
|
|
||
|
|
beforeEach(async () => {
|
||
|
|
await TestBed.configureTestingModule({
|
||
|
|
imports: [TaskStateBadge],
|
||
|
|
}).compileComponents();
|
||
|
|
|
||
|
|
fixture = TestBed.createComponent(TaskStateBadge);
|
||
|
|
component = fixture.componentInstance;
|
||
|
|
fixture.componentRef.setInput('state', 'new');
|
||
|
|
fixture.detectChanges();
|
||
|
|
});
|
||
|
|
|
||
|
|
it('should create', () => {
|
||
|
|
expect(component).toBeTruthy();
|
||
|
|
});
|
||
|
|
|
||
|
|
it('should render span with role status', () => {
|
||
|
|
const span = fixture.nativeElement.querySelector('.state-badge');
|
||
|
|
|
||
|
|
expect(span).toBeTruthy();
|
||
|
|
expect(span.getAttribute('role')).toBe('status');
|
||
|
|
});
|
||
|
|
|
||
|
|
it('should show New label for new state', () => {
|
||
|
|
fixture.componentRef.setInput('state', 'new');
|
||
|
|
fixture.detectChanges();
|
||
|
|
|
||
|
|
expect(component.stateLabel).toBe('New');
|
||
|
|
expect(fixture.nativeElement.textContent).toContain('New');
|
||
|
|
});
|
||
|
|
|
||
|
|
it('should show Active label for active state', () => {
|
||
|
|
fixture.componentRef.setInput('state', 'active');
|
||
|
|
fixture.detectChanges();
|
||
|
|
|
||
|
|
expect(component.stateLabel).toBe('Active');
|
||
|
|
});
|
||
|
|
|
||
|
|
it('should show Resolved label for resolved state', () => {
|
||
|
|
fixture.componentRef.setInput('state', 'resolved');
|
||
|
|
fixture.detectChanges();
|
||
|
|
|
||
|
|
expect(component.stateLabel).toBe('Resolved');
|
||
|
|
});
|
||
|
|
|
||
|
|
it('should show Closed label for closed state', () => {
|
||
|
|
fixture.componentRef.setInput('state', 'closed');
|
||
|
|
fixture.detectChanges();
|
||
|
|
|
||
|
|
expect(component.stateLabel).toBe('Closed');
|
||
|
|
});
|
||
|
|
|
||
|
|
it('should apply state-specific class', () => {
|
||
|
|
fixture.componentRef.setInput('state', 'active');
|
||
|
|
fixture.detectChanges();
|
||
|
|
|
||
|
|
const span = fixture.nativeElement.querySelector('.state-badge');
|
||
|
|
|
||
|
|
expect(span.classList.contains('state-badge--active')).toBe(true);
|
||
|
|
});
|
||
|
|
|
||
|
|
it('should have aria-label with state', () => {
|
||
|
|
fixture.componentRef.setInput('state', 'resolved');
|
||
|
|
fixture.detectChanges();
|
||
|
|
|
||
|
|
const span = fixture.nativeElement.querySelector('.state-badge');
|
||
|
|
|
||
|
|
expect(span.getAttribute('aria-label')).toBe('Task state: Resolved');
|
||
|
|
});
|
||
|
|
});
|