Feature Request: Support EnvironmentProviders in provide and HttpInterceptorFn exemple

[kekel87]

Hi, it's been a while! 😄 How are you?

Describe the feature or problem you'd like to solve

I'm trying to test an HttpInterceptorFn. There isn't much official Angular documentation on this, and there are no examples on your site.

I found something interesting thanks to this article:

MockBuilder()
  .provide(provideHttpClient(withInterceptors([myInterceptor])))
  .provide(provideHttpClientTesting())

The issue is that provideHttpClient returns an EnvironmentProviders, and provide only accepts Provider.

Proposed solution

It would be helpful to check if provide can accept EnvironmentProviders and update the typing.

In the meantime, this works:

MockBuilder()
  .provide(provideHttpClient(withInterceptors([myInterceptor])) as unknown as Provider)
  .provide(provideHttpClientTesting())

Additional context

Here's a complete example in case you want to add it to your documentation:

// my.interceptor.ts
export const myInterceptor: HttpInterceptorFn = <D = unknown>(request: HttpRequest<Response<D>>, next: HttpHandlerFn) => {
  return next(request);
};


// my.interceptor.spec.ts
describe('myInterceptor', () => {
  let client: HttpClient;
  let httpMock: HttpTestingController;

  beforeEach(() =>
    MockBuilder()
      .provide(provideHttpClient(withInterceptors([myInterceptor])) as unknown as Provider)
      .provide(provideHttpClientTesting())
  );

  beforeEach(() => {
    client = ngMocks.findInstance(HttpClient);
    httpMock = ngMocks.findInstance(HttpTestingController);
  });

  it('should blablabla', () => {
    client
      .get('/test')
      .pipe(first())
      .subscribe((response) => {
        expect(response).toEqual('data');
      });

    const req = httpMock.expectOne('/test');

    req.flush('data');
    httpMock.verify();
  });
});

Have a great day. ❤️

[satanTime]

Hi @kekel87,

thanks for noting about that. The support will be released with the next version.

[satanTime]

v14.12.0 has been released and contains a fix for the issue. Feel free to reopen the issue or to submit a new one if you meet any problems.