How do I test loaded data into a reactive form with Jasmine in Angular 6?

Question

I have an Angular 6 app that loads data into a Reactive Form from a store object using ngrx . I am trying to unit test this but seems like no matter what I change my form object always has blank values for the properties I am assigning.

Here is my code:

HTML

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

Component

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));
}

spec file

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);
    }
}

The test always fails saying the value in the form is nothing. Anyone know what I am doing wrong? Thanks!

Answer 1

here is the assignation in details:

First create the mock values for the form, access to your form and assign the value then you need to trigger change detection on the component and finally test the value of the input.

I haven't test this code yet, but I think is really close about what are you trying to do.

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);
}


}