Инъекция фиктивных сервисов с помощью @testing-library/angular

Question

Я пытаюсь проверить угловой компонент, используя @testing-library/angular от Кента С. Доддса. Мой компонент зависит от службы Angular. В документации API нет информации о том, как внедрить фиктивный сервис для предоставления фиктивных данных для моего модульного теста.

    export class ItemCounterComponent implements OnInit {
  public availableTodoCount: number;

  constructor(private todoProviderService: TodoProviderService) {
    this.todoProviderService.getTodos().subscribe(todos => {
      this.availableTodoCount = todos.filter(todo => !todo.completed).length;
    });
  }

  ngOnInit() {
  }

}

    describe('ItemCounterComponent', () => {

  it('shows the count correctly', async () => {
    const { getByText } = await render(ItemCounterComponent, { componentProperties: { availableTodoCount: 5 } });

    expect (getByText('5 items left'));
  });
});
````````````

Answer 1

Ты можешь использовать providers для предоставления услуги (как вы можете сделать с TestBed)

const component = await render(AppComponent, {
    providers: [
      {
        provide: TodoProviderService,
        useValue: { getTodos: ... },
      },
    ],
  });

Дополнительные примеры: https://github.com/testing-library/angular-testing-library/tree/master/src/app/examples