Форма отправляется без данных в модульный тест

Question

У меня есть форма, в которой используются компоненты из углового материала.Я хочу проверить, что форма отправляется с ожидаемыми данными.Ниже я опубликую упрощенную версию своего кода, но в основном мой тест изменяет значение ввода и имитирует нажатие кнопки отправки.Я смог подтвердить, что входное значение действительно изменилось, и форма отправлена, но проблема в том, что он говорит, что он отправлен с пустым объектом, хотя мое утверждение прошло, что входное значение изменилось.Зачем ему распознавать, что входное значение изменилось, но отправлять форму, как будто это не так?Я новичок в тестировании приложений Angular и провел пару дней, пытаясь понять это без какой-либо удачи.Буду признателен за любую помощь.

Вот версии некоторых из моих узловых модулей:

• угловой 7.2.8
• материал 7.3.3
• карма 4.0.1
• ядро ​​жасмина 3.3.0
• карма-жасмин 2.0.1

component.ts:

export class FormComponent {
  @Input() loading: boolean;
  @Output() update: EventEmitter<Office> = new EventEmitter<Office>();

  saveForm(form: any) {
    const { value, valid } = form;

    if (valid) {
        this.update.emit(value);
    }
  }
}

component.html:

<form *ngIf="!loading" (ngSubmit)="saveForm(form)" #form="ngForm" novalidate>
  <mat-form-field>
    <input
      class="company-name"
      matInput 
      placeholder="Company Name" 
      type="text"
      name="companyName"
      required
      #companyName="ngModel"
      [ngModel]="office?.companyName">
    <mat-error *ngIf="companyName.errors?.required && companyName.dirty">
      Company name is required
    </mat-error>
  </mat-form-field>
 <button
    class="submit-form"
    mat-raised-button 
    type="submit"
    [disabled]="form.invalid"
  >
    Submit
  </button>
</form>

component.spec.ts:

describe('FormComponent', () => {
  let component: FormComponent;
  let fixture: ComponentFixture<FormComponent>;
  let el: DebugElement;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        BrowserAnimationsModule,
        FormsModule,
        MatInputModule,
        OverlayModule,
        StoreModule.forRoot({}),
      ],
      declarations: [FormComponent],
      providers: [Actions, MatSnackBar, Store],
    }).compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(FormComponent);
    component = fixture.componentInstance;
    el = fixture.debugElement;
    component.loading = false;
    fixture.detectChanges();
  });

  it('should submit form when submit button is clicked', () => {
    // Setting input value
    el.query(By.css('input.company-name')).nativeElement.value = 'Test Name';
    fixture.detectChanges();
    // Confirming input value changed
    expect(el.query(By.css('input.company-name')).nativeElement.value).toBe(
      'Test Name',
    );
    // Spying on update method
    spyOn(component.update, 'emit').and.callThrough();
    el.query(By.css('button.submit-form')).nativeElement.click();
    // el.query(By.css('button.submit-form')).triggerEventHandler('click', null);
    expect(component.saveForm).toHaveBeenCalled();
    expect(component.update.emit).toHaveBeenCalledWith({ companyName: 'Test Name' });
  }):
});

Сообщение об ошибке:

Ожидаемый шпионский вызов был вызван с [Object ({companyName: 'Test Name'})], но фактические вызовы были [Object ({})].