I have the following below code in my Html file :
Product.html
<mat-select id="selectProduct" placeholder="Product" multiple [(ngModel)]="request.selectedProductIds" #productModel="ngModel" disableOptionCentering (openedChange)="openedChange($event,'productFilterText')" panelClass="contnetPanel" #demo> <input id="txtFilterProduct" [(ngModel)]="productFilterText" class="mat-select-filterbox" placeholder="Search Product" autocomplete="off" (keyup)="filterProducts($event.target.value)" /> <div class="matOptionList"> <mat-option #matOption *ngFor="let pfoduct of masterData.product" [value]="product.id" (click)="onproductClick(matOption,product)">{{product.name}}</mat-option> </div> </mat-select>
I want to write Unit test case in Angular for input element inside mat-select element in .ts file like below:
it('open the product dropDown', async(() => { componentFixture.detectChanges(); spyOn(searchComponent, 'filterProducts'); let input = componentFixture.debugElement.query(By.css('#txtFilterProduct')); input.triggerEventHandler('keyup', null); componentFixture.detectChanges(); expect(searchComponent.filterProducts).toHaveBeenCalled(); expect(searchComponent.filterProducts).toHaveBeenCalledTimes(1); }));
I am getting the error: calling triggerEventHandler on undefined. Similarly it is giving the same error for mat-option.
Please suggest or tell how we can do unit test for input and mat-option inside mat-select for dropdown