Javascript 如何使用Angular 6中的Jasmine将加载的数据测试为反应形式？

我有一个Angular 6应用程序，它使用ngrx从存储对象将数据加载到一个反应式表单中。我试图对此进行单元测试，但似乎无论我做什么更改，我的表单对象的属性值始终为空

这是我的密码：

HTML

<form [formGroup]="myForm" novalidate>
    <input id="name" formControlName="name" />
    <input id="age" formControlName="age" />
</form>

组件

export interface MyObject {
    name: string;
    age: string;
}

export class MyObjectComponent {
    myObject: MyObject;
    myForm: FormGroup;

    constructor(private fb: FormBuilder, private store: Store<fromStore.State>) { }

    ngOnInit() {
        this.myForm = this.fb.group({
            name: [null, [Validators.required]],
            age: [null, [Validators.required]]
        });
        this.store.select(fromStore.getMyObject).subscribe(x => this.myForm.patchValue(x));
}

导出接口MyObject{
名称：字符串；
年龄：弦；
}
导出类MyObjectComponent{
myObject:myObject；
myForm:FormGroup；
构造函数（私有fb:FormBuilder，私有存储：存储）{}
恩戈尼尼特（）{
this.myForm=this.fb.group({
名称：[null，[Validators.required]]，
年龄：[null，[验证器.必需]]
});
this.store.select（fromStore.getMyObject.subscribe）（x=>this.myForm.patchValue（x））；
}

规范文件

describe('MyObjectComponent', () => {
    let component: MyObjectComponent;
    let fixture: ComponentFixture<MyObjectComponent>;
    let store: Store<fromStore.State>;
    let initialStateL MyObject;
    let el: DebugElement;

    beforeEach(async(() => {
        initialState = {
            name: 'My Name',
            age: 55
        };
        TestBed.configureTestingModule({
            imports: [
                FormsModule,
                ReactiveFormsModule,
                HttpClientModule,
                StoreModule.forRoot({}),
                StoreModule.forFeature('my-object', reducer)
            ],
            declarations: [MyObjectComponent],
            providers: []
        })
        .compileComponents().then(() => {
            fixture = TestBed.createComponent(MyObjectComponent);
            component = fixture.componentInstance;
            el = fixture.debugElement;
            spyOn(store, 'dispatch').and.callThrough();
            fixture.detectChanges();
        });
    }));

    it('should patch values into form', async(() => {
        expect(component.myForm.controls.age.value).toBe(55);
    }
}

description（'MyObjectComponent'，（）=>{
let分量：MyObjectComponent；
let夹具：组件夹具；
让店：店；
让initialStateL MyObject；
设el:DebugElement；
beforeach（异步（（）=>{
初始状态={
姓名：'我的名字'，
年龄:55
};
TestBed.configureTestingModule({
进口：[
FormsModule，
反应形式模块，
HttpClientModule，
StoreModule.forRoot（{}），
StoreModule.forFeature（'my-object'，reducer）
],
声明：[MyObjectComponent]，
提供者：[]
})
.compileComponents（）。然后（（）=>{
fixture=TestBed.createComponent（MyObjectComponent）；
组件=fixture.componentInstance；
el=夹具。调试元件；
spyOn（存储，'dispatch'）。和.callThrough（）；
fixture.detectChanges（）；
});
}));
它（'should patch value to form'，async（（）=>{
expect（component.myForm.controls.age.value）.toBe（55）；
}
}

---

测试总是失败，表示表单中的值为零。有人知道我做错了什么吗？谢谢！

以下是详细的分配：

首先为表单创建模拟值，访问表单并分配值，然后需要触发组件上的更改检测，最后测试输入值

我还没有测试这段代码，但我认为它非常接近您要做的事情

describe('MyObjectComponent', () => {

// Rest of code...

it('should patch values into form', async(() => {
    // Mock value
    const mock_age_value = 55;

    fixture = TestBed.createComponent(DualityAccordionTabComponent);
    const compiled = fixture.componentInstance;

    // Value assignation
    compiled.myForm.patchValue({
       age: mock_age_value
    });

    // Trigger change detection
    fixture.detectChanges();

    expect(component.myForm.controls.age.value).toBe(55);
}


}

---

以下是详细的分配：

首先为表单创建模拟值，访问表单并分配值，然后需要触发组件上的更改检测，最后测试输入值

我还没有测试这段代码，但我认为它非常接近您要做的事情

describe('MyObjectComponent', () => {

// Rest of code...

it('should patch values into form', async(() => {
    // Mock value
    const mock_age_value = 55;

    fixture = TestBed.createComponent(DualityAccordionTabComponent);
    const compiled = fixture.componentInstance;

    // Value assignation
    compiled.myForm.patchValue({
       age: mock_age_value
    });

    // Trigger change detection
    fixture.detectChanges();

    expect(component.myForm.controls.age.value).toBe(55);
}


}

---

因为“值”而导致该错误未定义，initialState从未分配给窗体。@Danny908，但如何将初始状态分配给模拟存储？我看过一些文章，这些文章创建了自己的模拟存储类，用减速机映射传入，或直接使用

store.forRoot

。您好，我在下面给您更多详细信息。您之所以会遇到此错误，是因为“价值"未定义，initialState从未分配给表单。@Danny908，但如何将初始状态分配给模拟存储？我看过一些文章，这些文章创建了自己的模拟存储类，用减速机映射传递它，或者直接使用

store.forRoot

。您好，我在下面给您留下了更多详细信息，所以您谈到了runnin直接存储。尝试运行“compiled.ngOnInit（）”直接在您的测试上，然后触发更改检测，这应该让工作感谢您的响应！如果我想模拟存储并将数据从模拟存储加载到表单中，然后从那里进行测试，该怎么办？我是否需要模拟表单数据？最好是在单元测试中正确地测试存储并将数据转储到表单中。您还提到了直接运行Store。请尝试运行“compiled.ngOnInit（）直接在您的测试上，然后触发更改检测，这应该让工作感谢您的响应！如果我想模拟存储并将数据从模拟存储加载到表单中，然后从那里进行测试，该怎么办？我是否需要模拟表单数据？最好是在单元测试中正确地测试存储并将数据转储到表单中。