Невозможно проверить код отправки формы в модульном тесте

Question

Привет. Я пишу тестовый блок для отправки формы.Я пытаюсь проверить форму представить ниже код.Ниже приведена моя форма.

 <form *ngIf="formResetToggle" class="form-horizontal" name="scopesEditorForm" #f="ngForm" novalidate
 (ngSubmit)="f.form.valid && isScopeValid() ? saveScope() : showErrorAlert('Please enter mandatory fields')">
 <input autofocus type="text" id="scopename" name="scopename"/>
 <input type="submit" id="savescope" class="btn btn-primary" value="Add Scope" />
</form>

Ниже приведен мой код модульного теста.

it('add scope', () => {
        let saveScopeButton = fixture.debugElement.nativeElement.querySelector('#savescope');
        scopename = fixture.debugElement.query(By.css('#scopename'));
        scopename.nativeElement.value = "/bmw/v1/s1";
        component.scopeEdit.scopevalue = scopename.name;
        saveScopeButton.click();
        var rows = component.rows;
        expect(rows.length).toBeGreaterThan(0);
        var isScopeNameAdded = rows.filter(
            scope => scope.scopevalue === 'xcxcx');
        if (isScopeNameAdded.length) {
            console.log('add scope unit test case passed');
        }
        {
            console.log("add scope unit test case failed");
        }
    });

Когда выполняется приведенный выше код, выполняется функция showErrorAlert, а функция saveScope не выполняется.Может кто-нибудь помочь мне сделать это работает?Любая помощь будет оценена.Спасибо.

Answer 1

Мы можем ссылаться на форму в вашем компоненте, как показано ниже.

@ViewChild('f')
scopeform: NgForm;

, затем мы можем установить значение поля как component.scopeform.form.controls.scopename.setValue('/bmw/v1/s1');

Теперь ваша форма будет действительна.Вы можете проверить, как показано ниже.

component.scopeform.form.valid

или

component.scopeform.form.status