import { TestBed } from '@angular/core/testing';
import { beforeEach, describe, expect, it } from 'vitest';

import { CartIconComponent } from './cart-icon.component';

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

  function setup(quantity?: number | null, disabled = false) {
    const fixture = TestBed.createComponent(CartIconComponent);
    if (quantity !== undefined) {
      fixture.componentRef.setInput('quantity', quantity);
    }
    fixture.componentRef.setInput('disabled', disabled);
    fixture.detectChanges();

    return {
      fixture,
      element: fixture.nativeElement as HTMLElement,
    };
  }

  it('renders the cart shopping icon', () => {
    const { element } = setup();
    expect(element.querySelector('.fa-cart-shopping')).not.toBeNull();
  });

  it('does not render the badge when quantity is undefined', () => {
    const { element } = setup();
    expect(element.querySelector('[data-testid="cart-badge"]')).toBeNull();
  });

  it('does not render the badge when quantity is 0', () => {
    const { element } = setup(0);
    expect(element.querySelector('[data-testid="cart-badge"]')).toBeNull();
  });

  it('renders the badge with correct quantity when positive', () => {
    const { element } = setup(3);
    const badge = element.querySelector('[data-testid="cart-badge"]');
    expect(badge).not.toBeNull();
    expect(badge?.textContent?.trim()).toBe('3');
  });

  it('disables the button when disabled is true', () => {
    const { element } = setup(3, true);
    const button = element.querySelector('button');
    expect(button?.disabled).toBe(true);
    expect(button?.classList).toContain('cart-icon--disabled');
    expect(element.querySelector('[data-testid="cart-badge"]')).toBeNull();
  });

  it('enables the button when disabled is false', () => {
    const { element } = setup(undefined, false);
    const button = element.querySelector('button');
    expect(button?.disabled).toBe(false);
  });
});