emi-challenge-fe/tests/app/shared/ui/pagination/pagination.spec.ts

import { describe, it, expect, vi, beforeEach } from 'vitest';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { Pagination } from '@app/shared/ui/pagination/pagination';

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

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

    fixture = TestBed.createComponent(Pagination);
    component = fixture.componentInstance;
    fixture.componentRef.setInput('currentPage', 1);
    fixture.componentRef.setInput('totalPages', 5);
    fixture.componentRef.setInput('totalItems', 25);
    fixture.componentRef.setInput('pageSize', 5);
    fixture.detectChanges();
  });

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

  it('should render pagination info', () => {
    const info = fixture.nativeElement.querySelector('.pagination__info');

    expect(info?.textContent).toContain('Showing 1 to 5 of 25 tasks');
  });

  it('should render page buttons', () => {
    const buttons = fixture.nativeElement.querySelectorAll('.pagination__btn--page');

    expect(buttons.length).toBe(5);
  });

  it('should highlight current page', () => {
    const activeBtn = fixture.nativeElement.querySelector('.pagination__btn--active');

    expect(activeBtn?.textContent?.trim()).toBe('1');
  });

  it('should disable previous button on first page', () => {
    const prevBtn = fixture.nativeElement.querySelector('.pagination__btn--prev');

    expect(prevBtn.disabled).toBe(true);
  });

  it('should disable next button on last page', () => {
    fixture.componentRef.setInput('currentPage', 5);
    fixture.detectChanges();

    const nextBtn = fixture.nativeElement.querySelector('.pagination__btn--next');

    expect(nextBtn.disabled).toBe(true);
  });

  it('should emit pageChange on page click', () => {
    const spy = vi.fn();
    component.pageChange.subscribe(spy);

    component.onPageChange(3);

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

  it('should emit pageChange on previous click', () => {
    fixture.componentRef.setInput('currentPage', 3);
    fixture.detectChanges();
    const spy = vi.fn();
    component.pageChange.subscribe(spy);

    component.onPrevious();

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

  it('should emit pageChange on next click', () => {
    const spy = vi.fn();
    component.pageChange.subscribe(spy);

    component.onNext();

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

  it('should not emit for invalid page', () => {
    const spy = vi.fn();
    component.pageChange.subscribe(spy);

    component.onPageChange(0);
    component.onPageChange(6);

    expect(spy).not.toHaveBeenCalled();
  });

  it('should return correct start and end items', () => {
    expect(component.startItem()).toBe(1);
    expect(component.endItem()).toBe(5);
  });

  it('should return correct end item for last page', () => {
    fixture.componentRef.setInput('currentPage', 5);
    fixture.componentRef.setInput('totalItems', 23);
    fixture.detectChanges();

    expect(component.endItem()).toBe(23);
  });

  it('should show ellipsis for many pages', () => {
    fixture.componentRef.setInput('totalPages', 10);
    fixture.componentRef.setInput('currentPage', 5);
    fixture.detectChanges();

    const ellipsis = fixture.nativeElement.querySelectorAll('.pagination__ellipsis');

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