如何测试具有表单控件的组件作为 @Input()

Question

我有两个组成部分。我在父组件中声明了一个带有表单控件的表单。我将此表单传递给子组件。

父组件：

this.partyDetailsForm = new FormGroup({
  partySymbol: new FormControl('', []),
  partyFullName: new FormControl('', Validators.compose([Validators.required,
  CustomValidator.nameValidator])),
  partyAbbreviation: new FormControl('', Validators.compose([Validators.required,
  CustomValidator.nameValidator]))
});

Html:

现在我正在尝试在子组件中测试表单..但它不会出现...

我如何测试它

这个错误来了

PhantomJS 2.1.1 (Windows 8.0.0) PartyDetailsComponent 应该创建失败 [INFO] 类型错误：undefined 不是对象

Answer 1

 I got this answer...

 I am declaring the form in the parent so the form is not available in the 
 child component so that exception is coming...


The solution is we have to declare a form and pass it to the child component 
in spec file @Component...  like this  

 describe('CustomComponent', () => {
 // let component: CustomComponent;
// let fixture: ComponentFixture<CustomComponent>;
let component: TestHostComponent;
let fixture: ComponentFixture<TestHostComponent>;

 beforeEach(async(() => {
  TestBed.configureTestingModule({
  declarations: [CustomComponent, TestHostComponent],
  imports: [FormsModule, ReactiveFormsModule, RouterTestingModule, 
 HttpModule],
  })
  .compileComponents();
 }));

  beforeEach(() => {
   fixture = TestBed.createComponent(TestHostComponent);
   component = fixture.componentInstance;
   fixture.detectChanges();
 });
 it('should create', () => {
   expect(component).toBeTruthy();
 });

  @Component({
   selector: `host-component`,
   template: `    <app-custom [fieldOneName]="'test'" [color]="'red'" 
   [formName]="custom_Form" [fieldOneDefaultMessage]="'enterUserName'" 
   [firstFieldType]="'text'"
   [fieldOneInvalidMessage]=" 'Person name Start with Alphabeat' " 
   [fieldOneMandatoryMessage]="'Person Name is Mandatory'"
   [label]="'test'" [required]="true">
   </app-custom> `
  })
 class TestHostComponent {
  custom_Form: FormGroup
   ngOnInit(){
    this.custom_Form = new FormGroup({
     test: new FormControl('', Validators.compose([Validators.required,
    CustomValidator.emailValidator]))
   });
 }

} });

如何测试具有表单控件的组件作为 @Input()

how to test a component that having a form with form controls as @Input()

angular4-forms