I have been experimenting with integrating test codes into my Angular project.
Within the PostFormComponent, there are input bindings and an output event emitter.
@Component({
selector: 'app-post-form',
templateUrl: './post-form.component.html',
styleUrls: ['./post-form.component.css']
})
export class PostFormComponent implements OnInit, OnDestroy {
@Input() post: Post = { title: '', content: '' };
@Output() saved: EventEmitter<boolean> = new EventEmitter<boolean>();
sub: Subscription;
constructor(private postService: PostService) {}
submit() {
const _body = { title: this.post.title, content: this.post.content };
if (this.post.id) {
this.postService.updatePost(this.post.id, _body).subscribe(
data => {
this.saved.emit(true);
},
error => {
this.saved.emit(false);
}
);
} else {
this.postService.savePost(_body).subscribe(
data => {
this.saved.emit(true);
},
error => {
this.saved.emit(false);
}
);
}
}
ngOnInit() {
console.log('calling ngOnInit::PostFormComponent...');
}
ngOnDestroy() {
console.log('calling ngOnDestroy::PostFormComponent...');
if (this.sub) {
this.sub.unsubscribe();
}
}
}
The component's template:
<form id="form" #f="ngForm" name="form" class="form" (ngSubmit)="submit()">
<p>
<mat-form-field fxFlex>
<input matInput
id="title"
name="title"
#title="ngModel"
[(ngModel)]="post.title"
required/>
<mat-error align="start" *ngIf="title.hasError('required')">
Post Title is required
</mat-error>
</mat-form-field>
</p>
<p>
<mat-form-field fxFlex>
<textarea matInput
#content="ngModel"
name="content"
id="content"
[(ngModel)]="post.content"
rows="8"
required
minlength="10">
</textarea>
<mat-error align="start" *ngIf="content.hasError('required')">
Post Content is required
</mat-error>
<mat-error align="start" *ngIf="content.hasError('minlength')">
At least 10 chars
</mat-error>
</mat-form-field>
</p>
<p>
<button mat-button mat-raised-button color="primary" type="submit" [disabled]="f.invalid || f.pending"> {{'save'}}</button>
</p>
</form>
In my attempt to incorporate tests for this component, I encountered an issue.
describe('Component: PostFormComponent(input & output)', () => {
let component: PostFormComponent;
let fixture: ComponentFixture<PostFormComponent>;
let componentDe: DebugElement;
let savePostSpy: jasmine.Spy;
// Create a fake service object with spies
const postServiceSpy = jasmine.createSpyObj('PostService', [
'savePost',
'updatePost'
]);
beforeEach(() => {
TestBed.configureTestingModule({
imports: [BrowserAnimationsModule, SharedModule],
declarations: [PostFormComponent],
// provide the component-under-test and dependent service
providers: [
// { provide: ComponentFixtureAutoDetect, useValue: true },
{ provide: PostService, useValue: postServiceSpy }
]
}).compileComponents();
fixture = TestBed.createComponent(PostFormComponent);
component = fixture.componentInstance;
componentDe = fixture.debugElement;
fixture.detectChanges();
});
it('should raise `saved` event when the form is submitted (triggerEventHandler)', fakeAsync(() => {
const formData = { title: 'Test title', content: 'Test content' };
// trigger initial data binding
component.post = formData;
let saved = false;
savePostSpy = postServiceSpy.savePost
.withArgs(formData)
.and.returnValue(of({}));
// Make the spy return a synchronous Observable with the test data
component.saved.subscribe((data: boolean) => (saved = data));
// componentDe.triggerEventHandler('submit', null);
component.submit();
tick();
fixture.detectChanges();
expect(saved).toBeTruthy();
expect(savePostSpy.calls.count()).toBe(1, 'savePost called');
}));
});
An observation I made was that using
componentDe.triggerEventHandler('submit', null)component.submit() worked without issues.