将FormGroup作为@Input传递的Angular单元测试

// my-component.component.ts
import { Component, Input } from '@angular/core';
import { FormGroup } from '@angular/forms';

@Component({
  selector: 'app-my-component',
  template: `<div *ngIf="formGroup">{{ formGroup.value | json }}</div>`
})
export class MyComponent {
  @Input() formGroup: FormGroup;
}

// my-component.component.spec.ts
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ReactiveFormsModule } from '@angular/forms';
import { MyComponent } from './my-component.component';

describe('MyComponent', () => {
  let component: MyComponent;
  let fixture: ComponentFixture<MyComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ MyComponent ],
      imports: [ ReactiveFormsModule ]
    })
    .compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(MyComponent);
    component = fixture.componentInstance;
    const formGroup = new FormGroup({
      username: new FormControl('testUser'),
      email: new FormControl('test@example.com')
    });
    component.formGroup = formGroup;
    fixture.detectChanges();
  });

  it('should display form group values', () => {
    const element = fixture.nativeElement.querySelector('div');
    expect(element.textContent).toContain('{"username":"testUser","email":"test@example.com"}');
  });
});

// parent.component.ts
import { Component } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-parent',
  template: `<app-my-component [formGroup]="formGroup"></app-my-component>`
})
export class ParentComponent {
  formGroup: FormGroup;

  constructor(private fb: FormBuilder) {
    this.formGroup = this.fb.group({
      username: [''],
      email: ['']
    });
  }
}

<!-- my-component.component.html -->
<div *ngIf="formGroup">{{ formGroup.value | json }}</div>