使用賽普拉斯時如何在Angular中模擬或存根函數？

Question

我使用Cypress.io作為Im測試Angular 7應用程序的一部分。 我已經瀏覽了文檔，論壇和博客，但沒有看到在Angular中模擬或存根函數的方法。 我試圖嘲笑員工可觀察。 我需要讓Employee數組包含一個employee對象，以便this.federalTaxesService.loadFederalTaxes()函數。 在生產中，此應用程序從NgRx商店獲取Employee數組，但由於某些原因，在使用賽普拉斯時該商店無法正常工作。

export class EmployeeTaxDetailsContainerComponent implements OnInit, OnDestroy {
  watchEmployee$: Subscription;
  watchFederalTaxes$: Subscription;

  federalTaxes$: Observable<any> = this.federalTaxesService.federalTaxes$;
  employees$: Observable<any> = this.employeesService.employees$;

  federalTaxes: FederalTaxes;
  employeeUuid: string;

  constructor(public employeesService: EmployeesFacade, public federalTaxesService: FederalTaxesFacade) {}

  ngOnInit() {
    this.watchEmployee$ = this.employees$.subscribe((employees: Employee[]) => {
      if (employees && employees.length > 0) {
        this.employeeUuid = employees[0].uuid;
        this.federalTaxesService.loadFederalTaxes(this.employeeUuid);
      }
    });

    this.watchFederalTaxes$ = this.federalTaxes$.subscribe((federalTaxes: FederalTaxes) => {
      if (federalTaxes) {
        this.federalTaxes = federalTaxes;
      }
    });
  }

  ngOnDestroy() {
    if (this.watchFederalTaxes$) {
      this.watchFederalTaxes$.unsubscribe();
    }
    if (this.watchEmployee$) {
      this.watchEmployee$.unsubscribe();
    }
  }
}

Answer 1

我最終沒有嘗試嘲笑Observable。 我的單元測試中涵蓋了大部分代碼。 我真正需要的是讓this.federalTaxes具有一個值，這就是下面的代碼所要做的。

cy.get('.some-ng-element').then(($el) => {
    const el = $el[0].parentElement;
    const win = el.ownerDocument.defaultView;
    const component = win.ng.probe(el).componentInstance;
    component.federalTaxes = { additionalWithholding: 22299, allowances: 1, filingStatus: 'Single' };
});