Based on the very first example in https://angular.io/guide/reactive-forms, I create the following dumb component:
@Component({
selector: 'app-name-editor',
templateUrl: './name-editor.component.html',
styleUrls: ['./name-editor.component.css']
})
export class NameEditorComponent {
name = new FormControl('');
@Output('submitted') submitted = new EventEmitter<string>();
onSubmit() { this.submitted.emit(this.name.value); }
}
... for which I would like to write a unit test that will validate that a value is submitted. This uses a TestHost as suggested in the https://angular.io/guide/testing#component-inside-a-test-host :
@Component({
template: `
<app-name-editor (submitted)=onSubmit($event)>
</app-name-editor>
`})
class TestHostComponent {
submitted: string;
onSubmit(data: string) { this.submitted = data; }
}
describe('NameEditorComponent', () => {
let testHost: TestHostComponent;
let fixture: ComponentFixture<TestHostComponent>;
let editorDebugElt: DebugElement;
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [ NameEditorComponent, TestHostComponent ]
});
fixture = TestBed.createComponent(TestHostComponent);
testHost = fixture.componentInstance;
editorDebugElt = fixture.debugElement.query(By.directive(NameEditorComponent));
fixture.detectChanges();
});
it('should capture data', () => {
const compiled = fixture.debugElement.nativeElement;
const nameInput = compiled.querySelector('input[type="text"]');
expect(nameInput).toBeTruthy();
nameInput.value = 'This is a test';
fixture.detectChanges();
// Find submit button
const submitInput = compiled.querySelector('input[type="submit"]');
expect(submitInput).toBeTruthy();
// Trigger click action
expect(testHost.submitted).toBeFalsy();
submitInput.click();
// Submitted
expect(testHost.submitted).toBe('This is a test');
});
});
The test fails but I cannot see why. The input is populated with the value as shown below the test result. Any help would be very much appreciated.
The reason why the form submits a blank value is because reactive forms are asynchronous.
Editing the form and submitting immediately afterwards will submit a blank form as the edit is occurring asynchronously. The test now passes by adding a wait time of 500ms but it would be nice to know how to avoid the wait though:
// Wait for asynchronous update on reactive form to happen
setTimeout(() => {
// Trigger click action
expect(testHost.submitted).toBeFalsy();
submitInput.click();
// Submitted
expect(testHost.submitted).toBe('This is a test');
}, 500);