import { ComponentFixture, TestBed } from '@angular/core/testing';

import { ToggleComponent } from './toggle.component';
import {By} from '@angular/platform-browser';

describe('ToggleComponent', () => {
  let component: ToggleComponent;
  let fixture: ComponentFixture<ToggleComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ ToggleComponent ]
    })
    .compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(ToggleComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

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

  it('only registers changes if model has structural changes', () => {
    const onChange = jasmine.createSpy('onChange');
    component.writeValue({someProperty: 'a'});
    component.registerOnChange(onChange);
    component.writeValue({someProperty: 'a'});
    expect(onChange).toHaveBeenCalledTimes(0);
    component.makeDirtyAble();
    component.writeValue({someProperty: 'b'});
    expect(onChange).toHaveBeenCalledTimes(1);
  });

  it('updates inner value when ngModel is updated on the outside', () => {
    component.writeValue('tis but a test');
    expect(component.innerModel).toEqual('tis but a test');
  });

  it('does not register a change on the first value set', () => {
    // This is to avoid issues where values initialized from an async call will mark the form as dirty
    const mock = {
      onChange: (whatever: any) => undefined
    };
    const onChange = spyOn(mock, 'onChange');
    component.registerOnChange(onChange);
    component.writeValue('whatever');
    expect(onChange).not.toHaveBeenCalled();
    component.makeDirtyAble();
    component.writeValue('even more whatever');
    expect(onChange).toHaveBeenCalledWith('even more whatever');
  });

  it('becomes dirtyable when clicked', () => {
    component.options = [{label : '1', value: 1}, {label: '2', value: 2}];
    fixture.detectChanges();
    fixture.debugElement.query(By.css('.option')).triggerEventHandler('click', {});
    fixture.detectChanges();
    expect((component as any).dirtyAble).toBeTrue();
  });
});