I am facing an issue with a component that queries its content child. Here's the code snippet:
@ContentChild(InputControlDirective, { read: ElementRef })
public inputControl: ElementRef;
To handle this, I have implemented the ngAfterContentInit hook which checks if the inputControl has a value. If not, I throw a custom error.
public ngAfterContentInit(): void {
if (!this.inputControl) {
throw new Error(
'Please provide a InputControlDirective for the field used with the form-input component like <input inputControl>'
);
}
}
Now, I want to mock the inputControl before the ngAfterContentInit hook in order to write unit tests. Here's my current test code:
describe('FormInputComponent', () => {
let component: FormInputComponent;
let fixture: ComponentFixture<FormInputComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [FormInputComponent],
}).compileComponents();
fixture = TestBed.createComponent(FormInputComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
Could someone kindly guide me on how to handle this situation? Is the implementation of the component causing the challenge in writing unit tests?