Angular 单元测试： Function 未被调用

Question

I am trying to unit test my service and cannot seem to get it working. The concept is that when setEmployees() is called with an empty array, the service fetches employees from the server.

Service

  setEmployees( employees : Employee[] ) {
    console.log("Setting employees...", employees)
    if (employees && employees.length) {
      this.employees.next(employees)
      this.storage.set('employees', employees);
    } else {
      this.getEmployees().subscribe()
    }
  }

  getEmployees() {
    console.log("getting employees...")
    let url = `${this.base_url}/employees`;
    return this.http.get<Employee[]>(url).pipe(
      tap(employees => {
        console.log("got em", employees)
        this.setEmployees(employees)
        this.storage.set('employees', employees)
      })
    )
  }

  returnEmployees() : IEmployee[] {
    return Object.assign([], this.employees.getValue())
  }

Test

it('should set employees correctly', fakeAsync(() => {
  let dummy = [{id: 1, name: 'Jeremy'}, {id: 2, name: 'Paige'}]
  spyOn(employeeService, 'getEmployees').and.returnValue(of(dummy));
  employeeService.setEmployees([]);
  tick();
  expect(employeeService.returnEmployees()).toEqual(dummy)
}))

Test Response

Expected $.length = 0 to equal 2.
Expected $[0] = undefined to equal Object({ id: 1, name: 'Jeremy' }).
Expected $[1] = undefined to equal Object({ id: 2, name: 'Paige' }).

It's also worth noting that the console.log() statements don't occur in the expected order. When running this test I see the following in the console:

getting employees...
Setting employees... []

...when I would've expected to see:

Setting employees... []
getting employees...
got em [{id: 1, name: 'Jeremy'}, {id: 2, name: 'Paige'}]
Setting employees... [{id: 1, name: 'Jeremy'}, {id: 2, name: 'Paige'}]

Clearly something isn't firing as expected but I'm not sure where the issue lies.

Answer 1

There are a few catches with the test of async functions, your snipped seems susceptible to some of them... I would suggest a more standard usage of Observables. And using ReplaySubject to keep the latest employee Array value in the service. Something Like:

service:

employees$ = new ReplaySubject<Employee[]>(); 

setEmployees( employees : Employee[] ) {
  if (employees && employees.length) {
    this.employees$.next(employees)
  } else {
    this.getEmployees()
  }
}

getEmployees() {
  let url = `${this.base_url}/employees`;
  this.http.get<Employee[]>(url).pipe(take(1))
      .subscribe(employees => this.employees$.next(employees))
}

your test:

it('should set employees correctly', done => { // the 'done' helper function ensures necessary async callbacks are waited for
  let dummy = [{id: 1, name: 'Jeremy'}, {id: 2, name: 'Paige'}]

  employeeService.setEmployees(dummy)

  employeeService.employees$.subscribe(employees => {
    expect(employees).toEqual(dummy) // you might want to do a better element comparison here
    done()
  })
}))