Не удается установить значение ввода, когда я использую атрибут updateOn с элементом управления формой

Question

Я тестирую с помощью https://testing-library.com/

Вот моя реактивная форма:

this.createForm = this.formBuilder.group({
 'Id': new FormControl({ value: 0, disabled: true }, [Validators.required]),
 'Name': new FormControl('', { validators: [ValidationService.required, ValidationService.SubsystemMxLenght, ValidationService.SubsystemPatternMatch], updateOn: 'blur' }),
'UpdatedByName': new FormControl({ value: this.appUserName, disabled: true }, []),
 'UpdatedDate': new FormControl({ value: '', disabled: true }, [])

});

из рекомендации библиотеки я устанавливаю значение для формирования поля следующим образом:

component.input(component.getByTestId('form-create-name-field-1'), {
        target: {
            value: data.Name /* value not setting since we use updateOn value, so it's null */
        }
    });

    component.input(component.getByTestId('form-create-name-field-2'), {
        target: {
            value: data.UpdatedByName
        }
    });

В котором я не могу установить значение с помощью Name, Если я удалю параметр updateOn: 'blur'- от формы, он устанавливает. как это исправить? в чем проблема с моей формой в противном случае?

кто-нибудь поможет мне, пожалуйста?

ОБНОВЛЕНИЕ: функция компонента:

onCreateFormSubmit() {

 this.ssCreated.emit(created);

}

тестирование обоих onCreateFormSubmit а также ssCreated - но ssCreated не работает:

файл спецификации:

test('Testing add Subsystem operation', async () => {

    const data = {
        Id: 2,
        Name: 'subsystem2',
        IsDeletePossible: true,
        CreatedBy: '',
        CreatedDate: new Date(),
        UpdatedBy: '',
        UpdatedDate: new Date(),
        UpdatedByName: 'test value',
        CreatedByName: ''
    } as ModelSubSystem;

    const ssCreated = jest.fn();

    const component = await render(SubSystemComponent, {
        schemas: [CUSTOM_ELEMENTS_SCHEMA],
        imports: [
            HttpClientTestingModule,
            FormsModule,
            ReactiveFormsModule,
            StoreModule.forRoot({}, { runtimeChecks: { strictStateImmutability: true, strictActionImmutability: true } }),
            StoreModule.forFeature('pfservice', reducer),
            EffectsModule.forRoot([]),
            EffectsModule.forFeature([EffectsSubSystem])
        ],
        componentProperties: {
            onCreateFormSubmit: jest.fn(),
            ssCreated: {
                emit: data
            } as any,
        }

    });

    const componentInstance = component.fixture.componentInstance;


    /*
     *   Testing the form by DOM.
     */

    const createButton = component.getByTestId('btn-addRow');
    component.click(createButton);
    component.fixture.detectChanges();
    // status changes because of click on button
    expect(componentInstance.crud.isCreate).toBeTruthy();

    component.fixture.detectChanges();
    // onclick submit should not called, becasue of empty input

    component.input(component.getByTestId('form-create-name-field-0'), {
        target: {
            value: data.Id
        }
    });

    component.input(component.getByTestId('form-create-name-field-1'), {
        target: {
            value: data.Name
        }
    });


    component.blur(component.getByTestId('form-create-name-field-1'));

    component.input(component.getByTestId('form-create-name-field-2'), {
        target: {
            value: data.UpdatedByName
        }
    });

    const submit = component.getAllByTestId('form-create-btn')[0];

    component.click(submit);

    component.fixture.detectChanges();
    const name = componentInstance.createForm.controls['Name'];
    const updatedByName = componentInstance.createForm.controls['UpdatedByName'];
    expect(name.value).toEqual(data.Name);
    expect(name.errors).toBeFalsy();
    expect(updatedByName.value).toEqual(data.UpdatedByName);
    expect(componentInstance.onCreateFormSubmit).toBeCalled(); //works

    // console.log(componentInstance.createForm.getRawValue());
    console.log(data);

    expect(ssCreated).toHaveBeenCalledWith(data); //not works

});

Answer 1

updateOne срабатывает только тогда, когда ввод размыт, поэтому вам нужно будет сделать:

component.input(component.getByTestId('form-create-name-field-1'), {
        target: {
            value: data.Name
        }
    });

// this line here
component.blur(component.getByTestId('form-create-name-field-1'));

Я создал пример здесь https://github.com/testing-library/angular-testing-library/commit/6989a66cfe2d0dfb66dcbb9566bf122307edca6c