import { createHostFactory, SpectatorHost } from '@ngneat/spectator/jest';
import { CheckboxComponent, CheckboxAppearance } from './checkbox.component';
import { MockComponent } from 'ng-mocks';
import { NgIconComponent } from '@ng-icons/core';

describe('CheckboxComponent', () => {
  let spectator: SpectatorHost<CheckboxComponent>;
  const createHost = createHostFactory({
    component: CheckboxComponent,
    declarations: [MockComponent(NgIconComponent)],
    template: `<ui-checkbox [appearance]="appearance"><input type="checkbox" />></ui-checkbox>`,
  });

  beforeEach(() => {
    spectator = createHost(undefined, {
      hostProps: {
        appearance: CheckboxAppearance.Checkbox,
      },
    });
  });

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

  it('should use default appearance as Checkbox', () => {
    // Assert default appearance value and computed class
    expect(spectator.component.appearance()).toEqual(CheckboxAppearance.Checkbox);
    expect(spectator.component.appearanceClass()).toEqual('ui-checkbox__checkbox');
  });

  it('should compute bullet class when appearance is set to Bullet', () => {
    // Act: update appearance signal to Bullet
    spectator.setHostInput('appearance', CheckboxAppearance.Bullet);

    // Assert updated appearance & computed class
    expect(spectator.component.appearance()).toEqual(CheckboxAppearance.Bullet);
    expect(spectator.component.appearanceClass()).toEqual('ui-checkbox__bullet');
  });

  it('should render checkbox input element', () => {
    // Arrange & Act
    const checkbox = spectator.query('input[type="checkbox"]');

    // Assert
    expect(checkbox).toBeTruthy();
    expect(checkbox).toHaveAttribute('type', 'checkbox');
  });
});
