Injecting Mock Service Subclasses within Component Test Beds

import { TestBed } from '@angular/core/testing';
import { ProfileComponent } from './profile.component';
import { UserDataService } from './user-data.service';
 
class MockUserDataService extends UserDataService {
  override fetchUserPermissions(): string[] {
    return ['READ', 'WRITE'];
  }
}
 
describe('ProfileComponent DI Hierarchy', () => {
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [ProfileComponent],
      providers: [{ provide: UserDataService, useClass: MockUserDataService }]
    }).compileComponents();
  });
 
  it('instantiates the component with overridden service behavior', () => {
    const fixture = TestBed.createComponent(ProfileComponent);
    expect(fixture.componentInstance).toBeTruthy();
  });
});