Skip to content

Instantly share code, notes, and snippets.

@rctay

rctay/my-component.html

Last active Dec 19, 2018
Embed
What would you like to do?
Testing handlers and their bindings
<form [formGroup]="teamFormGroup" id="team-details__form">
<input matInput placeholder="Team Name" name="teamName" formControlName="teamName">
<button type="submit" mat-raised-button
(click)="onSaveChangesClicked()"
id="details__save-changes"
color="primary">save changes
</button>
</form>
describe('MyComponent', () => {
describe('Save Changes button', () => {
it('should be present', () => {
expect(fh.findByCss('#details__save-changes')).toBeTruthy();
});
describe('(click)', () => {
it('should delegate to onSaveChangesClicked()', () => {
const spy = jasmine.createSpy('Save Changes click handler');
component.onSaveChangesClicked = () => spy();
fh.findByCss('#details__save-changes').nativeElement.click();
expect(spy).toHaveBeenCalled();
});
});
});
describe('onSaveChangesClicked()', () => {
it('should call service', () => {
component.teamFormGroup.get('teamName').setValue('an updated name');
component.onSaveChangesClicked();
expect(teamDetailsServiceSpies.update).toHaveBeenCalledWith({
name: 'an updated name',
});
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment