Reports

Your NG0201: No provider found for _HttpClient error is a classic dependency chain issue! 🔍

The problem: Your StructuredSearchService needs HttpClient, but Spectator's mockProvider() doesn't handle transitive dependencies automatically.

Here's how @halverscheid-fiae.de/angular-testing-factory solves this:

❌ Your Current Pain:

// Spectator setup hell with dependency chain issues
const createService = createServiceFactory({
  service: SearchService,
  providers: [
    provideHttpClient(),           // ← Unnecessary complexity
    provideHttpClientTesting(),    // ← More boilerplate
    mockProvider(SimpleSearchService, {
      simpleSearch: () => of({ items: [] }),
    }),
    mockProvider(StructuredSearchService, {
      structuredSearch: () => of({ items: [] }),
    }),
    // Still fails because HttpClient dependency chain is broken! 💥
  ],
});

✅ With angular-testing-factory:

import { createServiceFactory } from '@ngneat/spectator/jest';
import { provideHttpClientMock, createCustomServiceProviderMock } from '@halverscheid-fiae.de/angular-testing-factory';

const createService = createServiceFactory({
  service: SearchService,
  providers: [
    // 🎯 One-line HttpClient mock that handles ALL dependency chains
    provideHttpClientMock(),
    
    // 🛡️ Type-safe service mocks with compile-time validation
    createCustomServiceProviderMock(SimpleSearchService, {
      simpleSearch: jest.fn(() => of({ items: [] }))
    } satisfies jest.Mocked<Partial<SimpleSearchService>>),
    
    createCustomServiceProviderMock(StructuredSearchService, {
      structuredSearch: jest.fn(() => of({ items: [] }))
    } satisfies jest.Mocked<Partial<StructuredSearchService>>),
  ],
});

🎯 Why it works:

Dependency Chain Resolution - provideHttpClientMock() provides HttpClient for ALL dependent services
Generated Service Compatible - Works with NX/OpenAPI generated services out-of-the-box
Type-Safe Mocking - Compile-time validation prevents mock drift
Spectator Compatible - Drop-in replacement for your existing setup

🚀 Alternative: Ultra-Simple Setup

// For quick setup, mock everything at once:
const createService = createServiceFactory({
  service: SearchService,
  providers: provideAngularCoreMocks({
    httpClient: true,  // ← Handles all HttpClient needs
  }),
});

// Then override specific methods in your tests:
beforeEach(() => {
  const httpMock = spectator.inject(HttpClient);
  jest.spyOn(httpMock, 'get').mockReturnValue(of({ items: [] }));
});

📊 Installation:

npm install --save-dev @halverscheid-fiae.de/angular-testing-factory

Result: No more NG0201 errors, clean dependency resolution, type-safe mocks! 🎉

🛡️ Bonus - Debug Dependency Issues:

// If you still have provider issues, use the debug helper:
import { TEST_DATA } from '@halverscheid-fiae.de/angular-testing-factory';

beforeEach(() => {
  console.log('Available providers:', spectator.inject(Injector));
  // Helps identify missing dependencies
});

P.S. - Your NX + generated services struggle is exactly why I added the createCustomServiceProviderMock function! 😅

Hope this saves you from the NG0201 nightmare! 🎯

🛡️ Bonus: Compile-time Safety

// TypeScript catches mock inconsistencies at compile-time!
const provideMyServiceMock = createServiceProviderFactory(MyService, {
  registerUser: jest.fn(() => of(mockResponse)),
  // ↑ TypeScript validates this matches your real service
} satisfies jest.Mocked<Partial<MyService>>);

🚀 Installation & Quick Start:

npm install --save-dev @halverscheid-fiae.de/angular-testing-factory

// Replace your entire beforeEach setup with:
import { provideHttpClientMock } from '@halverscheid-fiae.de/angular-testing-factory';

TestBed.configureTestingModule({
  providers: [provideHttpClientMock()]
});

P.S. - Your 6 hours of frustration inspired this exact use case in the library! 😅

Shared Information

🎯 More Examples:

Router Mock: provideRouterMock()
ActivatedRoute Mock: provideActivatedRouteMock({ params: of({ id: '1' }) })
FormBuilder Mock: provideFormBuilderMock()
Complete Setup: provideAngularCoreMocks({ httpClient: true, router: true })

🚀 Installation:

npm install --save-dev @halverscheid-fiae.de/angular-testing-factory

The goal is simple: Write tests, not mock configuration. �

Meta Information:

Target Audience: Angular developers struggling with Jest mocking
Value Proposition: Dramatic reduction in mock setup complexity
Call to Action: Install package and try the simple examples
Authority Building: Shows understanding of real developer pain points
Community Value: Provides concrete solution to a common problem

Expected Outcomes:

✅ High Engagement (upvotes, replies)
✅ NPM Package Downloads (direct conversion)
✅ Community Recognition (problem solver reputation)
✅ Library Adoption (developers trying the solution)
✅ Authority Building (expertise in Angular testing)

79761976