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

describe('IconButtonComponent', () => {
  let spectator: Spectator<IconButtonComponent>;
  let component: IconButtonComponent;

  const createComponent = createComponentFactory({
    component: IconButtonComponent,
    declarations: [MockComponent(NgIconComponent)],
  });

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

  test('should have default size and computed sizeClass', () => {
    expect(component.size()).toBe('large');
    expect(component.sizeClass()).toBe('ui-icon-button__large');
  });

  test('should update size and computed sizeClass when size changes', () => {
    spectator.setInput('size', 'medium');
    spectator.detectChanges();
    expect(component.size()).toBe('medium');
    expect(component.sizeClass()).toBe('ui-icon-button__medium');
  });

  test('should have default color and computed colorClass', () => {
    expect(component.color()).toBe('primary');
    expect(component.colorClass()).toBe('ui-icon-button__primary');
  });

  test('should update color and computed colorClass when color changes', () => {
    spectator.setInput('color', 'secondary');
    spectator.detectChanges();
    expect(component.color()).toBe('secondary');
    expect(component.colorClass()).toBe('ui-icon-button__secondary');
  });

  test('should have default pending and tabIndex values', () => {
    expect(component.pending()).toBe(false);
    expect(component.tabIndex()).toBe(0);
  });
});
