how do I mock or stub a function in Angular when using Cypress?

Question

Im using Cypress.io as part of the way that Im testing an Angular 7 app. I've combed through the docs, forums and blogs, but I dont see a way to mock or stub a function in Angular. Im trying to mock the employee Observable. I need to have the Employee array contain an employee object so that this.federalTaxesService.loadFederalTaxes() function is called. In production, this app gets the Employee array from the NgRx store, but the store is not working correctly when using Cypress for some reason.

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();
    }
  }
}

user372225 · Accepted Answer · 2019-07-25 21:31:06Z

2

I didnt end up trying to mock the Observable. Most of that code is covered in my unit tests. What I really needed was to have this.federalTaxes have a value, which is what the code below does.

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

edited Jul 25, 2019 at 21:31

answered Jul 22, 2019 at 16:01

user372225

8512 gold badges10 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ash McConnell Over a year ago

Thanks it was very useful for us! In our case we just needed const el = $el[0] rather than the parent element

Chi Over a year ago

Does this way trigger the change detection? I tried to modify a component property, but it didn't trigger the change detection

Collectives™ on Stack Overflow

how do I mock or stub a function in Angular when using Cypress?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related