import { DebugElement } from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { ReactiveFormsModule, FormGroup, AbstractControl } from '@angular/forms';
import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
import { TextMaskModule } from 'angular2-text-mask';
import { BoletoValidatorComponent } from './boleto-validator.component';
import { TouchHelperService } from '@app/shared/_services/touch-helper.service';
import { Boleto2Service } from '@app/boleto/services/boleto2.service';
import { ApiService } from '@app/shared/_services/api.service';
import { JwtService } from '@app/shared/_services/jwt.service';
import { Observable, Subscriber } from 'rxjs';

export const submitMock = (type: string) => Observable.create((observer$: Subscriber<any>) => {
  if (type == 'error') {
    observer$.error(new Error('Internal Server Error'));
  } else if (type == 'success') {
    observer$.next({
      codigo: 200,
      dados: {
        Banco: 'XPTO',
        IdValidacao: 'xxxxxx',
        IsCartaoCredito: false,
        IsConsorcio: false,
        LinhaDigitavel: '62390001172100004672843846528412477770000352984',
        Validade: '22/01/2019',
        Valor: 'R$ 3.529,84'
      },
      mensagem: null
    });
  }
  observer$.complete();
});

describe('Component: BoletoValidatorComponent', () => {
  let fixture: ComponentFixture<BoletoValidatorComponent>;
  let boletoValidator: BoletoValidatorComponent;
  let debugElement: DebugElement;
  let formBoleto: FormGroup;
  let barcodeInput: AbstractControl;

  // setup
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [ ReactiveFormsModule, TextMaskModule, HttpClientTestingModule ],
      declarations: [ BoletoValidatorComponent ],
      providers: [ Boleto2Service, ApiService, JwtService, TouchHelperService ]
    });

    fixture = TestBed.createComponent(BoletoValidatorComponent);
    boletoValidator = fixture.componentInstance;
    debugElement = fixture.debugElement;

    fixture.detectChanges();

    // set some elements
    formBoleto = boletoValidator.formBoleto;
    barcodeInput = formBoleto.get('barcode');
  }));

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

  it('should the button is blocked if do not fill the barcode input', () => {
    const button = debugElement.query(By.css('.form__btn')).nativeElement;
    barcodeInput.setValue('');
    fixture.detectChanges();
    expect(button.disabled).toBeTruthy();
  });

  it('should the button is enable if fill the barcode input', () => {
    const button = debugElement.query(By.css('.form__btn')).nativeElement;
    barcodeInput.setValue('Linha Digitável');
    fixture.detectChanges();
    expect(button.disabled).toBeFalsy();
  });

  it('should get error message if the boleto format it was invalid on form submission', () => {
    barcodeInput.setValue('62390001172100004602514710550295174790000029519');
    boletoValidator.submit(new Event(''));
    fixture.detectChanges();

    expect(boletoValidator.errorMessage).toEqual('Boleto inválido, por favor verifique a digitação!');
  });

  it('should hide invalid format error message when typing', () => {

    // force the error message to appear
    barcodeInput.setValue('62390001172100004602514710550295174790000029519');
    boletoValidator.submit(new Event(''));
    fixture.detectChanges();

    // hide message when user typing
    const inputElement = debugElement.query(By.css('.form__input'));
    inputElement.triggerEventHandler('input', { target: inputElement.nativeElement });

    fixture.detectChanges();
    fixture.whenStable().then(() => {
      expect(boletoValidator.errorMessage).toBeUndefined();
    });
  });

  it('should get error message when the barcode input is already filled and empty', () => {
    const inputElement = debugElement.query(By.css('.form__input'));

    inputElement.triggerEventHandler('input', { target: inputElement.nativeElement });
    fixture.detectChanges();

    expect(boletoValidator.errorMessage).toEqual('Insirá o código de barras do boleto.');
  });

  it('should show the error element when has error message', () => {
    boletoValidator.errorMessage = 'Testing';
    fixture.detectChanges();
    expect(debugElement.query(By.css('.error-msg')).nativeElement).not.toBeNull();
  });

  it('should call submit method when user submit the form', () => {
    const submitSpy = spyOn(boletoValidator, 'submit');
    debugElement.query(By.css('.boleto-validator__form')).triggerEventHandler('ngSubmit', null);
    expect(submitSpy).toHaveBeenCalledTimes(1);
  });

  it('should change the icon when get ERROR from server', () => {
    const $icon = debugElement.query(By.css('.icon-boleto')).nativeElement;
    submitMock('error').subscribe(null,
      error => {
        boletoValidator.errorMessage = 'Error Message';
        fixture.detectChanges();
        fixture.whenStable().then(() => {
          expect($icon.classList.contains('icon-boleto--valid')).toBeFalsy();
          expect($icon.classList.contains('icon-boleto--invalid')).toBeTruthy();
        });
      }
    );
  });

  it('should change the icon when get SUCCESS from server', () => {
    const $icon = debugElement.query(By.css('.icon-boleto')).nativeElement;
    submitMock('success').subscribe(
      success => {
        boletoValidator.boletoData = success.dados;

        fixture.detectChanges();
        fixture.whenStable().then(() => {
          expect($icon.classList.contains('icon-boleto--invalid')).toBeFalsy();
          expect($icon.classList.contains('icon-boleto--valid')).toBeTruthy();
        });
      }
    );
  });

  it('should render success message when server returns success', () => {
    submitMock('success').subscribe(
      success => {
        boletoValidator.boletoData = success.dados;
        fixture.detectChanges();
        fixture.whenStable().then(() =>
          expect(debugElement.query(By.css('.form__success-info')).nativeElement).not.toBeNull()
        );
      }
    );
  });
});