import { createComponentFactory, Spectator } from '@ngneat/spectator';
import { UiIconModule } from '@ui/icon';
import { UiInput, UiInputGroup, UiInputType } from '../../tree';
import { UiFilterInputChipComponent } from './filter-input-chip.component';

describe('UiFilterInputChipComponent', () => {
  let spectator: Spectator<UiFilterInputChipComponent>;
  const createComponent = createComponentFactory({
    component: UiFilterInputChipComponent,
    imports: [UiIconModule],
  });

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

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

  describe('input', () => {
    it('should create an instance of UiInput if value is a plain object', () => {
      spectator.setInput({
        input: { type: UiInputType.NotSet },
      });

      expect(spectator.component.uiInput instanceof UiInput).toBe(true);
    });
  });

  describe('button.ui-filter-chip Element', () => {
    it('should have the text content of uiInput.label', () => {
      spyOnProperty(spectator.component, 'uiInput', 'get').and.returnValue(UiInput.create({ label: 'My Label', type: UiInputType.NotSet }));
      spectator.detectComponentChanges();
      expect(spectator.query('button.ui-filter-chip')).toContainText('My Label');
    });

    it('should have the class selected if uiInput.selected is true', () => {
      spyOnProperty(spectator.component, 'uiInput', 'get').and.returnValue(UiInput.create({ selected: true, type: UiInputType.NotSet }));
      spectator.detectComponentChanges();
      expect(spectator.query('button.ui-filter-chip')).toHaveClass('selected');
    });

    it('should not have the class selected if uiInput.selected is true', () => {
      spyOnProperty(spectator.component, 'uiInput', 'get').and.returnValue(UiInput.create({ selected: false, type: UiInputType.NotSet }));
      spectator.detectComponentChanges();
      expect(spectator.query('button.ui-filter-chip')).not.toHaveClass('selected');
    });

    it('should call uiInput.setSelected(!uiInput.selected) on click', () => {
      spyOnProperty(spectator.component, 'uiInput', 'get').and.returnValue(UiInput.create({ type: UiInputType.NotSet }));
      spyOn(spectator.component.uiInput, 'setSelected');
      spectator.detectComponentChanges();
      spectator.click('button.ui-filter-chip');
      expect(spectator.component.uiInput.setSelected).toHaveBeenCalledWith(!spectator.component.uiInput.selected);
    });
  });

  describe('ui-icon Element', () => {
    it('should not be visible if selected is false', () => {
      spectator.setInput({ input: { type: 0, selected: false } });
      spectator.detectComponentChanges();
      expect(spectator.query('ui-icon')).not.toBeVisible();
    });

    it('should be visible if selected is true', () => {
      spectator.setInput({ input: { type: 0, selected: true } });
      spectator.detectComponentChanges();
      expect(spectator.query('ui-icon')).toBeVisible();
    });
  });
});
