Writing unit test for mat-autocomplete that filters customers

Question

I am writing unit test for angular app, precisely angular6. I have mat-autocomplete in the code, all I want to test is the user filtered based on the input I type in the input box. I was inspired by the post enter link description here.

Here is the code snippet of spec file

  it('should filter customer',async () => {
    fixture.detectChanges();
    let toggleButton = fixture.debugElement.query(By.css('input'));
    console.log(toggleButton.nativeElement);

    toggleButton.nativeElement.dispatchEvent(new Event('focusin'));
    toggleButton.nativeElement.value = "xyz";
    toggleButton.nativeElement.dispatchEvent(new Event('input'));
    fixture.detectChanges();
    await fixture.whenStable();
    fixture.detectChanges();

    const matOptions = document.querySelectorAll('mat-option');
    expect(matOptions.length).toBe(1); //test fails

  })


  <mat-form-field >
     <input id="inputCustomer" matInput [matAutocomplete]="auto"  [formControl]="customerFilterControl">
     <mat-autocomplete panelWidth ="450px" #auto="matAutocomplete" [displayWith] = "displayFn" style="width:750px;">
         <mat-option  *ngFor="let customer of filteredOptions | async" [value] ="customer.AccountID + '('+ customer.AccountName + ')'" (onSelectionChange)="onCustomerChange(customer)">
         {{customer.AccountID}} ({{customer.AccountName}})
        </mat-option>
     </mat-autocomplete>
  </mat-form-field>

**typescript.ts**
    this.filteredOptions = this.customerFilterControl.valueChanges.pipe(
      startWith(''),
      map(value => this._filter(value))
    );  


  _filter(value:any):any[] {
    const filterValue = value.toLowerCase();
    return this.customers.filter(function (option) {
      if(option.AccountID.includes(filterValue) || option.AccountName.includes(filterValue)) {
        return option;
       }
    });
  }

If I define `customers` array then your test works for me – yurzui Nov 27 '19 at 19:47 — yurzui, Nov 27 '19 at 19:47

Athanasios Kataras · Answer 1 · 2019-11-25T18:38:18.443

0

You seem to be missing initializing your options

  it('should filter customer',async () => {
    // Prepare the data
    const option1 = {AccountID: 1, AccountName: 'AccountName1'};
    const option2 = {AccountID: 2, AccountName: 'xyz'}
    // Prepare the data source
    fixture.component.filteredOptions = of([option1,option2])
    fixture.detectChanges();
    let toggleButton = let toggleButton = fixture.debugElement.query(By.css('#inputCustomer'));
    console.log(toggleButton.nativeElement);

    toggleButton.nativeElement.dispatchEvent(new Event('focusin'));
    toggleButton.nativeElement.value = "xyz";
    toggleButton.nativeElement.dispatchEvent(new Event('input'));
    fixture.detectChanges();
    await fixture.whenStable();
    fixture.component._filter("xyz");
    fixture.detectChanges();

    const matOptions = document.querySelectorAll('mat-option');
    expect(matOptions.length).toBe(1); //test fails

  })

This way your component will have some values to select from when you add the autocomplete values.

Bear in mind that you should use the of operator (let me know if it works as I have not tested it) for the async pipe to work.

edited Nov 25 '19 at 18:38

answered Nov 25 '19 at 17:30

Athanasios Kataras

25,191
4
32
61

Hi Athanasios Kataras, filteredOptions: Observable; I am new to rxjs it shows error here – karansys Nov 25 '19 at 17:35
expect(matOptions.length).toBe(1); fails because Expected 2 to be 1. – karansys Nov 25 '19 at 17:38
this is the data I passed const option1 = {AccountID: 'abc', AccountName: 'AccountName1'}; const option2 = {AccountID: 'xyz', AccountName: 'xyz'} – karansys Nov 25 '19 at 17:41
Ok, now you at least have the data in place but they are not filtered. I'll try to figure this out. – Athanasios Kataras Nov 25 '19 at 17:43
I have updated my question with more info, I have given typescript filter method – karansys Nov 25 '19 at 17:43
Is there a chance you have another input in your component? – Athanasios Kataras Nov 25 '19 at 17:51
I have only one input – karansys Nov 25 '19 at 17:51
even so, try with let toggleButton = let toggleButton = fixture.debugElement.query(By.css('#inputCustomer')); – Athanasios Kataras Nov 25 '19 at 17:52
somehow the value is not being set to input element so tried component.customerFilterControl.setValue("xyz"); and toggleButton.nativeElement.value = "xyz"; either case test failed – karansys Nov 25 '19 at 17:57
Try removing the last fixture.detectChanges(); – Athanasios Kataras Nov 25 '19 at 18:00
Sorry earlier I ran the test without expect still it is the same issue – karansys Nov 25 '19 at 18:01
I removed these lines from your ans last fixture.detectChanges(); from your ans – karansys Nov 25 '19 at 18:04
Hi Athanasios Kataras, this might be key, this is the how option is selection, I type something in the input box, this filters values and shows as drop down and I select one of the value from drop down list – karansys Nov 25 '19 at 18:27
Just for a sanity check, can you modify with a fixture.component._filter("xyz"); as I did in the example. I think that your code for filtering is not firing. – Athanasios Kataras Nov 25 '19 at 18:39
And after that, try in your test `fixture.component.customerFilterControl.setValue("xyz")` to see if it works. – Athanasios Kataras Nov 25 '19 at 18:41
It didn't change the result – karansys Nov 25 '19 at 18:57

Writing unit test for mat-autocomplete that filters customers

1 Answers1