test: add test cases

src/app/components/contact-form/contact-form.spec.ts

@@ -3,6 +3,8 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ContactForm } from './contact-form';
 import { STRINGS_INJECTOR } from '../../app.config';
 import { strings } from '../../strings';
+import { By } from '@angular/platform-browser';
+import { ContactDTO } from '../../models/ContactDTO';
 
 describe('ContactForm', () => {
   let component: ContactForm;
@@ -12,8 +14,7 @@ describe('ContactForm', () => {
     await TestBed.configureTestingModule({
       imports: [ContactForm],
       providers: [{ provide: STRINGS_INJECTOR, useValue: strings }],
-    })
+    }).compileComponents();
-    .compileComponents();
 
     TestBed.inject(STRINGS_INJECTOR);
     fixture = TestBed.createComponent(ContactForm);
@@ -24,4 +25,48 @@ describe('ContactForm', () => {
   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();
+  });
 });