import { createComponentFactory, Spectator } from '@ngneat/spectator/jest';
import { ButtonComponent } from './button.component';
import { MockComponent } from 'ng-mocks';
import { NgIconComponent } from '@ng-icons/core';

describe('ButtonComponent', () => {
  let spectator: Spectator<ButtonComponent>;
  const createComponent = createComponentFactory({
    component: ButtonComponent,
    declarations: [MockComponent(NgIconComponent)],
  });

  beforeEach(() => {
    spectator = createComponent();
  });

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

  it('should have default classes and tabIndex set', () => {
    const host = spectator.element;
    expect(host.classList).toContain('ui-button');
    expect(host.classList).toContain('ui-button__medium');
    expect(host.classList).toContain('ui-button__primary');
    expect(host.getAttribute('tabindex')).toBe('0');
  });

  it('should update size class when size input changes', () => {
    // Update the size signal from its default value ('medium') to 'large'
    spectator.setInput('size', 'large');
    spectator.detectChanges();

    const host = spectator.element;
    expect(host.classList).toContain('ui-button__large');
    // Ensure previous size class is no longer present
    expect(host.classList).not.toContain('ui-button__medium');
  });

  it('should update color class when color input changes', () => {
    // Update the color signal from its default value ('primary') to 'secondary'
    spectator.setInput('color', 'secondary');
    spectator.detectChanges();

    const host = spectator.element;
    expect(host.classList).toContain('ui-button__secondary');
    // Ensure previous color class is no longer present
    expect(host.classList).not.toContain('ui-button__primary');
  });

  it('should update pending class when pending input changes', () => {
    // Update the pending signal from its default value (false) to true
    spectator.setInput('pending', true);
    spectator.detectChanges();

    const host = spectator.element;
    expect(host.classList).toContain('ui-button__pending');
    // Ensure the pending class is removed when set back to false
    spectator.setInput('pending', false);
    spectator.detectChanges();
    expect(host.classList).not.toContain('ui-button__pending');
  });
});
