Component Testing: Services (DRAFT) 6.0
- Component testing
- Running component tests
-
Writing component tests
- Basics: pubspec config, test API fundamentals
- Page objects: field annotation, initialization, and more
- Simulating user action: click, type, clear
- Services: local, external, mock, real
@Input()and@Output()- Routing components
- Appendices - coming soon
Components make use of services to accomplish tasks such as accessing and persisting data. Your main choice, when testing a component that uses services, will be to decide whether or not to mock the service. This page illustrates how to do both.
Using real, locally provided services
The AppComponent from part 4 of the tutorial declares its need for a
HeroService by including the service in the @Component provider list:
toh-4/lib/app_component.dart (locally provided service)
@Component(
selector: 'my-app',
// ···
providers: [ClassProvider(HeroService)],
)
class AppComponent implements OnInit {
List<Hero> heroes = <Hero>[];
final HeroService _heroService;
AppComponent(this._heroService);
// ···
}No special measures are necessary to test AppComponent with a
(real) HeroService. For components under test, such locally provided
services are instatiated, as usual, thanks to Angular’s
dependency injection subsystem.
Component-external services: mock or real
When testing a component that expects a service, you need to supply the
NgTestBed with a root injector factory. The provider list of the generated
injector factory can contain both real and mock services, as shown here:
toh-5/test/heroes_test.dart (rootInjector)
import 'package:angular_tour_of_heroes/src/hero_list_component.template.dart'
as ng;
// ···
import 'heroes_test.template.dart' as self;
// ···
@GenerateInjector([
ClassProvider(HeroService),
ClassProvider(Router, useClass: MockRouter),
])
final InjectorFactory rootInjector = self.rootInjector$Injector;
void main() {
final testBed = NgTestBed<HeroListComponent>(
ng.HeroListComponentNgFactory,
rootInjector: rootInjector,
);
// ···
}See Component Testing: Routing Components for details concerning the use of mock routers.
Mocking locally provided services
Mock locally provided services (to the component under test) in the same way as
for component-external services: add the requisite mock providers to the
NgTestBed before instantiating the fixture.