Как написать тестовый блок для отправки формы с раскрывающимся списком в Angular?

Question

Привет! Я пишу универсальный тест для отправки формы, который содержит два раскрывающихся списка с кнопкой отправки.Эта форма является модальной.При нажатии на одну кнопку я открываю модальное и заполняю раскрывающийся список значениями.После того, как пользователь выберет какое-то значение, пользователь может отправить форму.Я пишу тестовый блок для этой функциональности.Ниже приведена моя форма.

 <form *ngIf="formResetToggle" class="form-horizontal" name="permissionEditorForm" #f="ngForm" novalidate
                              (ngSubmit)="f.form.valid && isPermissionValid(selectedUserRole.value,selectedScopeName.value) ? savePermission(selectedUserRole.value,selectedScopeName.value) : showErrorAlert('Please enter mandatory fields')">

                            <div>
                                <label>User Role</label>
                                <div ng-class="{'valid':userrole.$valid}">
                                    <select #selectedUserRole  id="userrole" autofocus name='userrole' class="form-control" [(ngModel)]='userrole' required>
                                        <option value="">--Select User Role--</option>
                                        <option *ngFor="let userrole of userroles; let i = index" [value]="userrole.userroleid" >
                                            {{userrole.username}}
                                        </option>
                                    </select>
                                    <span *ngIf="(f.submitted && !userrole.valid && !userrole) || (!userrole.valid && userrole.dirty)" class="errorMessage">
                                        <i class="abb_icon_16 ui_error_circle1 erroricon"></i>  User Role Required!
                                    </span>
                                </div>
                            </div>
                            <div>
                                <label>Scope Name</label>
                                <div>

                                    <select #selectedScopeName  autofocus name='scopename' class="form-control" [(ngModel)]='scopename' required>
                                        <option value="">--Select Scope Name--</option>
                                        <option *ngFor="let scope of scopes; let i=index" [value]="scope.scopeid" >
                                            {{scope.scopevalue}}
                                        </option>
                                    </select>
                                    <span *ngIf="(f.submitted && !scopename.valid && !scopename) || (!scopename.valid && scopename.dirty)" class="errorMessage">
                                        <i class="abb_icon_16 ui_error_circle1 erroricon"></i>   Scope Name Required!
                                    </span>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" (click)="permissionmapModal.hide()" class="btn btn-default" data-dismiss="modal">Cancel</button>
                                <button type="submit" id="savePermission" class="btn btn-primary">Add Permisson</button>
                            </div>
                            <div class="clearfix"></div>
                        </form>

Ниже приведена функция, вызываемая при отправке формы.

 savePermission(userrolevalue, scopevalue) {

  }

Я пытаюсь написать пример модульного теста для выбора некоторых значений в раскрывающемся списке.список и отправить.Ниже приведен мой пример модульного теста.

 it('add permission', () => {
   component.permissionform.form.controls.scopename.setValue('/bmw/v1/s1');
   component.permissionform.form.controls.userrole.setValue('subscriber');
   let savePermissionButton = 
   fixture.debugElement.nativeElement.querySelector('#savePermission');
   component.permissionform.form.valid;
   savePermissionButton.click();
 }

Когда вышеупомянутый тест запустится, будет вызван метод savePermission, но параметры будут пустыми.Могу ли я узнать, что мои значения Is не установлены в раскрывающемся списке?Если значения были установлены, то это userrolevalue, scopevalue должен получить некоторые значения.Может кто-нибудь поправить меня, чтобы приведенный выше код работал?Любая помощь будет принята с благодарностью.Спасибо.

Answer 1

Вместо того, чтобы проверять щелчок, непосредственно протестируйте функцию.Ваша задача - проверить ваш код , а не проверить, работает ли Angular правильно, когда вы нажимаете на элементы .

Это даст что-то вроде этого

it('should submit the form', () => {
  const roleMock = {}; // Mock your value here
  const scopeMock = {}; // Same thing

  component.savePermission(roleMock, scopeMock);

  // Here you make your expects
});

Если вы не знаете, как тестировать или что тестировать, пожалуйста, дайте код вашей функции отправки, чтобы я мог указать вам направильное направление.