How to test Input and mat option inside Mat select in Angula

Question

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