Search

#### Docs

- Guide
  - Overview
  - Setup
  - Learning Angular
  - Architecture
  - Displaying Data
  - User Input
  - Forms
  - Dependency Injection
  - Template Syntax
- Tutorial
  - Introduction
  - 0. The Starter App
  - 1. The Hero Editor
  - 2. Master/Detail
  - 3. Multiple Components
  - 4. Services
  - 5. Routing
  - 6. HTTP
- Advanced
  - Attribute Directives
  - Component Styles
  - Deployment
  - Hierarchical Injectors
  - HTTP Client
  - Lifecycle Hooks
  - Pipes
  - Router
  - Security
  - Structural Directives
  - Testing

#### Components

- Components Gallery

#### Resources

- Cheat Sheet
- Glossary
- FAQ
- Tools
- Community and Support

#### Reference

- Videos
- API Documentation

new_releases We're currently in the progress of migrating this site from Angular version 5.3.1 to 7.0.0. Package versions might be out-of-date or inconsistent! Visit the repo for more info.

# Component Testing: Services (DRAFT) 6.0

If you notice any issues with this page, please report them.

<?code-excerpt path-base=”examples/ng/doc”?>

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:

<?code-excerpt “toh-4/lib/app_component_2.dart (locally provided service)” title?>

      @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:

<?code-excerpt “toh-5/test/heroes_test.dart (rootInjector)” title remove=”Probe” replace=”/injector.factory/rootInjector/g; /rootInjector(?!$)/[!$&!]/g”?>

      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.