import { createHostFactory, SpectatorHost } from '@ngneat/spectator/jest';
import { ListboxItemDirective } from './listbox-item.directive';
import { CdkOption } from '@angular/cdk/listbox';
import { Component } from '@angular/core';
import { ListboxDirective } from './listbox.directive';

@Component({
  selector: 'ui-test-host',
  template: `
    <div uiListbox>
      <button uiListboxItem>Item</button>
    </div>
  `,
  imports: [ListboxDirective, ListboxItemDirective],
})
class TestHostComponent {}

describe('ListboxItemDirective', () => {
  let spectator: SpectatorHost<TestHostComponent>;
  const createHost = createHostFactory(TestHostComponent);

  beforeEach(() => {
    spectator = createHost('<ui-test-host></ui-test-host>');
  });

  it('should create an instance', () => {
    expect(spectator.query(ListboxItemDirective)).toBeTruthy();
  });

  it('should have the ui-listbox-item class', () => {
    expect(spectator.query('[uiListboxItem]')).toHaveClass('ui-listbox-item');
  });

  it('should have CdkOption applied', () => {
    const cdkOptionInstance = spectator.query(CdkOption);

    expect(cdkOptionInstance).toBeTruthy();
  });
});
