如何为选择更改功能的下拉列表编写单元测试

时间:2021-07-11 06:00:42

标签: angular typescript unit-testing karma-jasmine angular-test

我尝试为下拉列表的选择更改添加单元测试。但我正面临错误。 这是我的 HTML 代码

 <mat-form-field appearance="outline" class="full-width">
                        <mat-label>Year</mat-label>
                        <mat-select id="Mat-select" (selectionChange)="onSelectYear($event.value)" required>
                            <mat-form-field appearance="outline" class="search-field">
                                <mat-icon matPrefix>search</mat-icon>
                                <mat-label>Search</mat-label>
                                <input matInput #searchYear (keyup)="getYear(searchYear.value)" placeholder="Search" />
                                <button mat-button *ngIf="searchYear.value" matSuffix mat-icon-button aria-label="Clear"
                                    (click)="searchYear.value = ''; getYear('')">
                                    <mat-icon>close</mat-icon>
                                </button>
                            </mat-form-field>
                            <mat-option *ngFor="let yearModel of yearModels" [value]="yearModel">
                                {{yearModel.name | titlecase}}
                            </mat-option>
                        </mat-select>
                    </mat-form-field>

Component.spec.ts

     it('onSelectYear have to call on selectionchange', (() => {
    const spy = spyOn(component, 'onSelectYear').and.callThrough();
    expect(spy).not.toHaveBeenCalled();
    const mySelect = fixture.debugElement.query(By.css('Mat-select'));
    mySelect.componentInstance.year_id = 1;
    mySelect.componentInstance.name = '2021';
    expect(spy).toHaveBeenCalledTimes(1);
  }));

但我收到错误“预期的间谍已被调用一次。它被调用了 0 次

0 个答案:

没有答案
相关问题