Testing handlers and their bindings

my-component.html

<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>

my-component.spec.ts

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',
      });
    });
  });