使用抽象 class 依赖项测试 Angular 服务的问题

Question

I have a service, which requires a dependency to another service, which in turns requires dependencies on two abstract classes.

(ThemeConfigService -> (SettingsService -> SettingsLoader, NavigationLoader))

I have gotten so far as to have the test fail because it cannot find the methods exposed via the abstract classes (not a function exception).

I'm not sure how I would get passed this, various searches online have not proved very helpful.

Here is the theme configuration service for which I'm trying to flesh out a test " theme-config.service.ts "

@Injectable({
  providedIn: 'root'
})
export class ThemeConfigService {

  constructor(
    private platform: Platform,
    private router: Router,
    private settings: SettingsService
  ) {
    // code removed for brevity
  }
}

Here is the service being tested " settings.service.ts "

@Injectable()
export class SettingsService {

  constructor(public settingsLoader: SettingsLoader,
              public navigationLoader: NavigationLoader) { }

  public settings(): Observable<any> {
    return this.settingsLoader.retrieveSettings();
  }

  public navigation(): Observable<any> {
    return this.navigationLoader.retrieveNavigation();
  }
}

Here is the SettingsLoader class, the NavigationLoader looks exactly the same. They have to be separate classes from a design perspective:

export abstract class SettingsLoader {
    abstract retrieveSettings(): Observable<any>;
}

My unit test looks something like this:

describe('ThemeConfigService', () => {
  let service: ThemeConfigService;
  let router: Router;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [
        RouterTestingModule.withRoutes([])
      ],
      providers: [
        Platform,
        SettingsService,
        SettingsLoader,
        NavigationLoader
      ]
    });

    router = TestBed.inject(Router);
    service = TestBed.inject(ThemeConfigService);
  });

  it('should be created', async(inject([Platform, Router, SettingsService, SettingsLoader, NavigationLoader],
    (platform: Platform, router: Router, settings: SettingsService, settingsLoader: SettingsLoader, navigationLoader: NavigationLoader) => {

    expect(service).toBeTruthy();
  })));
});

The error returned by Karma is:

TypeError: this.settingsLoader.retrieveSettings is not a function
which to me proves that it cannot resolve the abstract classes.

For that reasons have I gone ahead and created something like this:

export class SettingsFakeLoader extends SettingsLoader {
    retrieveSettings(): Observable<any> {
        return of({});
    }
}

And tried changing the injection of the SettingsLoader and NavigationLoader classes with these, then Karma responds with:

NullInjectorError: R3InjectorError(DynamicTestModule)[ThemeConfigService -> SettingsService -> SettingsLoader -> SettingsLoader]: 
  NullInjectorError: No provider for SettingsLoader!

The amended beforeEach for the theme-config.service.spec.ts file:

beforeEach(() => {
    TestBed.configureTestingModule({
        imports: [
        RouterModule,
        RouterTestingModule.withRoutes([])
        ],
        providers: [
        Platform,
        SettingsService,
        SettingsFakeLoader,
        NavigationFakeLoader
        ]
    });

    router = TestBed.inject(Router);
    service = TestBed.inject(ThemeConfigService);
});

Usually, I would not try and test something I perceive to be this complex. Maybe I'm just not seeing the 'solution'.

Any help would be much appreciated, as I'll have a similar scenario to resolve later down the line of this application's development.

Answer 1

I went the instantiation route, instead of relying on the dependency injection. This might not be a viable solution, and would still like an answer on the original question from someone with a better approach.

The updated describe for the theme-config.service.spe.ts file:

describe('ThemeConfigService', () => {
  let service: ThemeConfigService;
  let sLoader: SettingsLoader;
  let nLoader: NavigationLoader;
  let sService: SettingsService;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [
        RouterTestingModule.withRoutes([])
      ],
      providers: [
        ThemeConfigService,
        SettingsService,
        SettingsLoader,
        NavigationLoader
      ]
    });

    let platform = TestBed.inject(Platform);
    let router = TestBed.inject(Router);

    sLoader = new SettingsFakeLoader();
    nLoader = new NavigationFakeLoader();

    sService = new SettingsService(sLoader, nLoader);
    service = new ThemeConfigService(platform, router, sService);
  });

  it('should be created', () => {
    expect(service).toBeTruthy();
  });
});

Answer 2

There's a good example of what you're trying to do in the Angular testing documentation :

beforeEach(() => {
  // stub UserService for test purposes
  userServiceStub = {
    isLoggedIn: true,
    user: { name: 'Test User' },
  };

  TestBed.configureTestingModule({
     declarations: [ WelcomeComponent ],
     providers: [ { provide: UserService, useValue: userServiceStub } ],
     // ^^^^^^ Note use of `useValue` ^^^^^^
  });

  fixture = TestBed.createComponent(WelcomeComponent);
  comp    = fixture.componentInstance;

  // UserService from the root injector
  userService = TestBed.inject(UserService);

  //  get the "welcome" element by CSS selector (e.g., by class name)
  el = fixture.nativeElement.querySelector('.welcome');
});

You can make an instance of any class that implements your Service's public API, then provide that instance with useValue when configuring the test module. Calling TestBed.inject(UserService) will pass that value to the constructor of your dependent Service.

In your case, you can use jasmine.createSpyObj<SettingsLoader>("SettingsLoader", ["retrieveSettings"]) to create an instance that implements the SettingsLoader API, then pass it to providers as useValue . Now, TestBed.inject(ThemeConfigService) will call the real SettingsService constructor, passing it the spy object you created, then call the ThemeConfigService constructor, passing it the resulting SettingsService instance.

It's probably a good idea to switch to this model instead of the one in your answer, because if in future you eg update your Platform to depend on SettingsService , you'd suddenly find yourself in a situation where part of your code is using DI ( platform and router are created with inject(...) ) but part of it isn't (you're new -ing SettingsService and ThemeConfigService yourself). Better to configure DI properly up front, and allow the injector to create all instances for you.

Answer 3

Here I will develop a little Coderer answer - where instead useValue I use useClass

TestBed.configureTestingModule({
  declarations: [...],
  imports: [...],
  providers: [
    { provide: SettingsLoader, useClass: SettingsFakeLoader },
    ...
  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})

So the pattern is: add to providers section following service

{ provide: AbstractService, useClass: FakeService }

(where FakeService class is implementation of AbstractService class)