Testing Angular Components with Children using Jest

@Component({
  selector: 'app-parent',
  template: `
    <div>
      <h1>Parent Component</h1>
      <app-child [value]="parentValue"></app-child>
    </div>
  `,
})
export class ParentComponent {
  parentValue = 'Parent Value';
}

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ParentComponent } from './parent.component';
import { Component, Input } from '@angular/core';
import { By } from '@angular/platform-browser';

// Child component mock
@Component({
  selector: 'app-child',
  template: '<div>{{ value }}</div>'
})
class MockChildComponent {
  @Input() value: string = '';
}

describe('ParentComponent', () => {
  let parentComponent: ParentComponent;
  let fixture: ComponentFixture<ParentComponent>;
  let childComponent: MockChildComponent;

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [ParentComponent, MockChildComponent] // Use mock instead of real child
    });
    fixture = TestBed.createComponent(ParentComponent);
    parentComponent = fixture.componentInstance;
    childComponent = fixture.debugElement.query(By.directive(MockChildComponent)).componentInstance as MockChildComponent;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(parentComponent).toBeTruthy();
  });

  it('should pass the correct value to child component', () => {
    expect(childComponent.value).toBe('Parent Value');
  });

  it('should update child component when parent value changes', () => {
    parentComponent.parentValue = 'New Value';
    fixture.detectChanges();

    expect(childComponent.value).toEqual('New Value');
  });

});