import { ComponentFixture, TestBed } from '@angular/core/testing';
import { DropdownComponent } from './dropdown.component';
import {SimpleChange, SimpleChanges} from '@angular/core';
import {AngularMaterialModule} from '../modules/angular-material.module';
import {MatIconTestingModule} from '@angular/material/icon/testing';
import {FormsModule} from '@angular/forms';
import {NoopAnimationsModule} from '@angular/platform-browser/animations';
import {By} from '@angular/platform-browser';
import {DataCardService} from '../api/data-card.service';
import {of} from 'rxjs/internal/observable/of';

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

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ DropdownComponent ],
      imports: [AngularMaterialModule, FormsModule, NoopAnimationsModule],
      providers: [
        {provide: DataCardService, useValue: {isDataCardClosed: of(false)}}
        ]
    })
    .compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(DropdownComponent);
    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('detects mouse hover events', (done) => {
    fixture.whenStable().then(() => {
      const element = fixture.elementRef.nativeElement;
      element.dispatchEvent(new Event('mouseenter'));
      fixture.detectChanges();
      expect(component.hover).toBeTrue();

      element.dispatchEvent(new Event('mouseleave'));
      fixture.detectChanges();
      expect(component.hover).toBeFalse();
      done();
    });
  });

  it('registers as touched on blur', (done) => {
    let touched = false;
    component.registerOnTouched(() => touched = true);
    fixture.whenStable().then(() => {
      const element = fixture.elementRef.nativeElement;
      element.dispatchEvent(new Event('blur'));
      fixture.detectChanges();
      expect(touched).toBeTrue();
      done();
    });
  });

  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('makes ngModel undefined when set to not relevant', () => {
    component.writeValue('test');
    fixture.detectChanges();
    component.notRelevant = true;
    component.ngOnChanges({notRelevant: {currentValue: true, previousValue: undefined} as SimpleChange} as SimpleChanges);
    expect(component.value).toBeUndefined();
  });

  it('re-fills the date when set to not relevant and back again', () => {
    component.writeValue('test');
    fixture.detectChanges();
    component.notRelevant = true;
    component.ngOnChanges({notRelevant: {currentValue: true, previousValue: undefined} as SimpleChange} as SimpleChanges);
    expect(component.value).toBeUndefined();
    component.notRelevant = false;
    component.ngOnChanges({notRelevant: {currentValue: false, previousValue: true} as SimpleChange} as SimpleChanges);
    expect(component.value).toBe('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', () => {
    fixture.debugElement.query(By.css('mat-select')).triggerEventHandler('focus', {});
    fixture.detectChanges();
    expect((component as any).dirtyAble).toBeTrue();
  });
});