How to mock an interface with ngMocks?

[vglaeser]

Hey,

is there a way to mock an interface using ngMocks?

For example, I use an interface which declares some methods to communicate with a server. Depending on the use-case, different classes (implementing the interface) are injected, like:

providers: [ { provide: ApiService, useClass: ApiServiceImpl1 } ]

When I use

MockProvider(ApiService)

the created mock will be empty, i.e. there are no mocks for methods or fields declared by the interface.

I found the following workaround but it's rather inconvenient:

providers: [
    MockProvider(ApiServiceImpl1),
    { provide: ApiService, useExisting: ApiServiceImpl1 }
]

However, this way I have to reference classes in my test that are not required by the tested service/component which typically only knows the interface.
Especially, when I use external libraries which only exports the interface or when I need to mock an interface which does not represent a service, this approach leads to bloated and less maintainable code.

Is there an easier way of mocking of an interface?

Thanks in advance

[satanTime]

Hi @vglaeser,

ng-mocks helps to mock classes and to create a mock instance of their type. However, interfaces are a different topic and ng-mocks doesn't have anything to help here.

If both ApiService and ApiServiceImpl1 are classes, then it's possible to do with double mocking:

• mock ApiService
• expand the mock with a mock of ApiServiceImpl1

@NgModule({
  providers: [
    MockProvider(ApiService, MockService(ApiServiceImpl1, {
      // ... overrides here if needed
    })),
  ],
})
class TargetModule {}

[vglaeser]

Hey, thanks for your fast reply.
At least, this is quite more compact than I did before.

Are there any plans to implement mocking-functionality for interfaces in future?