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

import { ContactForm } from './contact-form';
import { strings } from '../../strings';
import { By } from '@angular/platform-browser';
import { ContactDTO } from '../../models/ContactDTO';
import { LanguageManager } from '../../services/language-manager';

describe('ContactForm', () => {
  let component: ContactForm;
  let fixture: ComponentFixture<ContactForm>;
  let languageManager: jasmine.SpyObj<LanguageManager>;

  beforeEach(async () => {
    languageManager = jasmine.createSpyObj(LanguageManager.name, [], {
      strings: strings.en,
      selectedLanguage$: () => 'en',
    });

    await TestBed.configureTestingModule({
      imports: [ContactForm],
      providers: [{ provide: LanguageManager, useValue: languageManager }],
    }).compileComponents();

    fixture = TestBed.createComponent(ContactForm);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

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

  it('should handle submit', () => {
    const NAME_MOCK = 'Gabriel';
    const COMPANY_MOCK = 'Gabilandia';
    const PHONE_MOCK = '+5491123873991';
    const emitSpy = spyOn(component.contact, 'emit');
    const nameInput = fixture.debugElement
      .query(By.css('[formControlName="name"]'))
      .query(By.css('input'));
    const companyInput = fixture.debugElement
      .query(By.css('[formControlName="company"]'))
      .query(By.css('input'));
    const phoneInput = fixture.debugElement
      .query(By.css('[formControlName="phone"]'))
      .query(By.css('input'));
    nameInput.triggerEventHandler('input', { target: { value: NAME_MOCK } });
    companyInput.triggerEventHandler('input', { target: { value: COMPANY_MOCK } });
    phoneInput.triggerEventHandler('input', { target: { value: PHONE_MOCK } });
    const submitBtn = fixture.debugElement.query(By.css('app-squared-btn')).query(By.css('button'));
    (<HTMLButtonElement>submitBtn.nativeElement).click();
    expect(emitSpy).toHaveBeenCalledWith(
      new ContactDTO(undefined, NAME_MOCK, COMPANY_MOCK, PHONE_MOCK)
    );
  });

  it('should not call handleSubmit if any field is null', () => {
    const NAME_MOCK = 'Gabriel';
    const COMPANY_MOCK = 'Gabilandia';
    // Phone is null
    const emitSpy = spyOn(component.contact, 'emit');
    const nameInput = fixture.debugElement
      .query(By.css('[formControlName="name"]'))
      .query(By.css('input'));
    const companyInput = fixture.debugElement
      .query(By.css('[formControlName="company"]'))
      .query(By.css('input'));

    nameInput.triggerEventHandler('input', { target: { value: NAME_MOCK } });
    companyInput.triggerEventHandler('input', { target: { value: COMPANY_MOCK } });

    const submitBtn = fixture.debugElement.query(By.css('app-squared-btn')).query(By.css('button'));
    (<HTMLButtonElement>submitBtn.nativeElement).click();
    expect(emitSpy).not.toHaveBeenCalled();
  });
});