如何在角度 6 单元测试中依赖注入接口

Question

One of the service dependency injects an interface in the constructor. I wonder, how I can dependency injects the interface in the unit test?

Exported interface:

export interface MobilePlatform {
  onClick(): void;
  onPageFinished(router: Router): void;
  onPageStart(): void;
  sendClose(): void;
  tts(text: String): void;
}

Service injects the interface in the constructor

constructor(private platform: MobilePlatform, private router: Router) {}

How I can inject this interface in the angular unit test?

describe('MobileActions', () => {
  let actions: MobileActions;
  let platform: MobilePlatform;

  beforeEach(() => {

    TestBed.configureTestingModule({
      providers: [
        MobileActions,
        { provide: MobilePlatform, useClass: MockMobilePlatform },
        { provide: Router, useClass: MockRouter }
      ]
    });

    actions = TestBed.get(MobileActions);
    platform = TestBed.get(MockMobilePlatform);
  });

  it('should create actions', () => {
    expect(actions).toBeTruthy();
    expect(platform).toBeTruthy();
  });
});

Seems this kind of inject failed.

Answer 1

You can't, since an interface is a contract that does not get transpiled to an actual class function. In order to create a testable representation of such interface in the Angular injector, you will want to create a typed injection token:

Somewhere in your MobilePlatform models file:

export const MOBILE_PLATFORM = new InjectionToken<MobilePlatform>('mobilePlatform');

Then in your service constructor:

constructor( @Inject(MOBILE_PLATFORM) private platform: MobilePlatform, private router: Router ) {}

Finally, in the providers array of your testing module:

{ provide: MOBILE_PLATFORM, useClass: MockMobilePlatform },

Answer 2

I couldn't achieve this using TestBed, instead I use mock classes like this

class MobilePlatformMockClass implements MobilePlatform {
    // implement interface mock functions
}

describe('MobileActions', () => {
  let actions: MobileActions;
  let platform: MobilePlatform;

  beforeEach(() => {
    const mobilePlatformMock = new MobilePlatformMockClass();
    const routerMock = { navigate: () => {} };
    actions = new MobileActions(mobilePlatformMock, routerMock)
  });

  it('should create actions', () => {
    expect(actions).toBeTruthy();
  });
});