Unit-testing for values ​​set by async in ngOnInit () function of angular component

I am trying to unit-test an array that is set from an async service in the ngOnInit () function of my component.

export class DashboardComponent implements OnInit {
  todos: Todo[] = [];

  constructor(public todoService: TodoService) {}

  ngOnInit(): void {
    this.todoService.getTodos()
      .then(todos => this.todos = todos.slice(1, 5));
  }
}

      

        
        
        
      

    

When I try to test it with a function like this:

  it('should load four todos for dashboard', function(done) {
    expect(component.todos.length).toEqual(4);
  });

      

        
        
        
      

    

I am getting an error that 0 is not equal to 4 because the promise has not yet been resolved. The only way I could get this to work was to make the service public and run the dirty code like this:

  it('should load four todos for dashboard', function(done) {
    var todos = component.todoService.getTodos();
    todos.then(x => {
      expect(x.length).toEqual(6);
      expect(component.todos.length).toEqual(4)
    });
    done();
  });

      

        
        
        
      

    

But I'm sure this is a better and cleaner way to do it, so any suggestions for improvement are appreciated!

Edit 1: After dbandstra's hint pointing in the right direction, I came up with this code:

describe('DashboardComponent', () => {
  beforeEach( async(() => {
    TestBed.configureTestingModule({
      declarations: [
        DashboardComponent, EmptyComponent,
        RouterLinkStubDirective, RouterOutletStubComponent
      ],
      providers: [{provide: TodoService, useClass: FakeTodoService}]
    })
      .overrideComponent(TodoSearchComponent, EmptyComponent)
      .compileComponents()
      .then(() => {
        fixture = TestBed.createComponent(DashboardComponent);
        comp    = fixture.componentInstance;
      });
  }));

  beforeEach(() => {
    // TodoService actually injected into the component
    let todoService = fixture.debugElement.injector.get(TodoService);

    let spy = spyOn(todoService, 'getTodos')
      .and.returnValue(Promise.resolve(todos));

    // trigger initial data binding
    fixture.detectChanges();
  });

  it('should load four todos for dashboard', () => {
    fixture.whenStable().then(() => { // wait for async getTodos
      fixture.detectChanges();        // update view with todos
      expect(comp.todos.length).toEqual(4);
    });
  })
});

      

        
        
        
      

    

It works like a charm, thanks!

Edit 2: I also got it to work with the suggested solution from this StackOverflow question by making a synchronous fake service like this:

class TodoServiceMock{
  private data: Todo[];

  getTodos() {
    let todos = [ ...insert fake data here... ];
    this.data = todos;
    return this;
  }

  then(callback) {
    callback(this.data);
  }
}