作者热门文章
- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
我了解错误的根源,我正在测试的组件需要将 FormGroup
传递到它的 @Input() 表单:FormGroup
。我只是不知道如何在测试此组件时传入一个。
当我调用 fixture.detectChanges()
时,我的每个函数之前都发生了错误,因此必须在该点之前传入表单
我当前的代码获取的错误组未定义:
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import {
ReactiveFormsModule,
FormsModule,
Validators,
FormBuilder
} from '@angular/forms';
import { StaticComponent } from '../../firewall/static/static.component';
describe('StaticComponent', () => {
let component: StaticComponent;
let fixture: ComponentFixture<StaticComponent>;
beforeEach(
async(() => {
TestBed.configureTestingModule({
declarations: [
StaticComponent
],
imports: [
CommonModule,
ReactiveFormsModule,
FormsModule
],
providers: [
NetworkService,
NetworkValidator,
HostNameValidator,
NotificationsService
]
}).compileComponents();
})
);
beforeEach(() => {
fixture = TestBed.createComponent(StaticComponent);
component = fixture.componentInstance;
component.ruleForm = FormBuilder.group({
chain: ['chain', Validators.required],
ip: [
'',
Validators.required,
this.networkValidator.validateNetwork('ip')
],
action: ['action', Validators.required]
});
fixture.detectChanges();
});
fit('should be created', () => {
expect(component).toBeTruthy();
});
});
如何在测试期间将预制表单传递给组件的@Input?我似乎无法正确提供 FormBuilder
最佳答案
这是我为您制定的测试组件规范。请注意我添加的模拟 FormBuilder
以及我在规范中提供它的方式。
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { TestingComponent } from './testing.component';
import { FormBuilder, Validators } from '@angular/forms';
describe('TestingComponent', () => {
let component: TestingComponent;
let fixture: ComponentFixture<TestingComponent>;
const formBuilder: FormBuilder = new FormBuilder();
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ TestingComponent ],
providers: [ { provide: FormBuilder, useValue: formBuilder } ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(TestingComponent);
component = fixture.componentInstance;
component.ruleForm = formBuilder.group({
chain: ['chain', Validators.required],
ip: [
'',
Validators.required
],
action: ['action', Validators.required]
});
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
这是我的测试组件,以备不时之需。
import { Component, OnInit } from '@angular/core';
import { FormBuilder } from '@angular/forms';
import { FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-testing',
templateUrl: './testing.component.html',
styleUrls: ['./testing.component.css']
})
export class TestingComponent implements OnInit {
ruleForm: FormGroup = new FormGroup({});
constructor(private formBuilder: FormBuilder) { }
ngOnInit() {
this.ruleForm = this.formBuilder.group({
chain: ['chain', Validators.required],
ip: [
'',
Validators.required
],
action: ['action', Validators.required]
});
}
}
关于angular - Karma formGroup 需要一个 FormGroup 实例。请传一个进来,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48670402/
我是一名优秀的程序员,十分优秀!