emi-challenge-fe/tests/app/features/tasks/ui/task-board-column/task-board-column.spec.ts

import { describe, it, expect } from 'vitest';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { TaskBoardColumn } from '@app/features/tasks/ui/task-board-column/task-board-column';
import { TaskBuilder } from '@tests/builders/task.builder';

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

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

    fixture = TestBed.createComponent(TaskBoardColumn);
    component = fixture.componentInstance;
    fixture.componentRef.setInput('state', 'new');
    fixture.componentRef.setInput('title', 'New Tasks');
    fixture.componentRef.setInput('tasks', []);
    fixture.detectChanges();
  });

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

  it('should render column title', () => {
    const title = fixture.nativeElement.querySelector('.board-column__title');

    expect(title?.textContent).toContain('New Tasks');
  });

  it('should render task count', () => {
    fixture.componentRef.setInput('tasks', TaskBuilder.buildMany(3));
    fixture.detectChanges();

    const count = fixture.nativeElement.querySelector('.board-column__count');

    expect(count?.textContent).toContain('3');
  });

  it('should render empty state when no tasks', () => {
    const empty = fixture.nativeElement.querySelector('.board-column__empty');

    expect(empty).toBeTruthy();
    expect(empty.textContent).toContain('No tasks');
  });

  it('should render task cards', () => {
    const tasks = TaskBuilder.buildMany(2);
    fixture.componentRef.setInput('tasks', tasks);
    fixture.detectChanges();

    const cards = fixture.nativeElement.querySelectorAll('.board-column__card');

    expect(cards.length).toBe(2);
  });

  it('should render task title in card', () => {
    const tasks = [new TaskBuilder().withTitle('My Task').build()];
    fixture.componentRef.setInput('tasks', tasks);
    fixture.detectChanges();

    const cardTitle = fixture.nativeElement.querySelector('.board-column__card-title');

    expect(cardTitle?.textContent).toContain('My Task');
  });

  it('should return state class', () => {
    fixture.componentRef.setInput('state', 'active');

    expect(component.stateClass).toBe('board-column--active');
  });

  it('should emit view event', () => {
    const task = new TaskBuilder().build();
    const spy = vi.fn();
    component.view.subscribe(spy);

    component.onView(task);

    expect(spy).toHaveBeenCalledWith(task);
  });

  it('should emit edit event', () => {
    const task = new TaskBuilder().build();
    const spy = vi.fn();
    component.edit.subscribe(spy);

    component.onEdit(task);

    expect(spy).toHaveBeenCalledWith(task);
  });

  it('should emit delete event', () => {
    const task = new TaskBuilder().build();
    const spy = vi.fn();
    component.delete.subscribe(spy);

    component.onDelete(task);

    expect(spy).toHaveBeenCalledWith(task);
  });

  it('should emit add event', () => {
    const spy = vi.fn();
    component.add.subscribe(spy);

    component.onAdd();

    expect(spy).toHaveBeenCalledOnce();
  });
});