How to write unit test case for submitting form with drop-down box list in Angular?

Question

Hi I am writing uni test for submitting form which contains two drop-down box lists with submit button. This form is modal. When clicking on one button I am opening modal and populating drop-down with values. After user selects some value user can submit the form. I am writing unit test case for this functionality. Below is my form.

 <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>

Below is the function called when the form is submitted.

 savePermission(userrolevalue, scopevalue) {

  }

I am trying to write unit test case for select some values in drop-down box list and submit. Below is my unit test case.

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

When the above test runs, method savePermission will be called but parameters will be empty. May I know my Is values are not set to my drop-down box list? If values were set then it userrolevalue, scopevalue should get some values. Can someone correct me to make the above code works? Any help would be greatly appreciated. Thank you.

Answer 1

Instead of testing the click, directly test the function. Your job is to test your code, not to test if Angular works correctly when you click on items.

This would give something like this

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

  component.savePermission(roleMock, scopeMock);

  // Here you make your expects
});

If you don't know how to test or what to test, please give the code of your submit function so that I can point you in the right direction.