Ionic searchbar search not working on cypress {enter}-CodePudding

I have an Ionic 6 app and I'm testing it with cypress 9.3.1.

In my app I'm using an ion-searchbar like this:

<ion-searchbar *ngIf="showSearchbar" [value]="search" (search)="searchQuestions($event)"
                     placeholder="{{'components.search.placeholder' | translate}}">

The searchQuestions method looks like this:

  public searchQuestions(event): void {
    console.log('test');
    this.triggerSearch.emit(event.target.value);
  }

When I test it manually everything works fine, but when I execute the cypress code like this:

cy.get('.searchbar-input')
    .type('test1'   '{leftArrow}{del}{enter}'   'test');

the input field is filled with testtest, so the {leftArrow}{del} is working, but the console.log from searchQuestions is not executed and the event is not emitted

EDIT: When I use (keyup.enter)="searchQuestions($event)" instead of (search)="searchQuestions($event)" it seems to work fine. But I guess replacing it would be problematic for native apps and keeping both might cause problems.

CodePudding user response：

The app or the Ionic framework is adding an event handler to trigger the search event, but Cypress doesn't know about it.

In the .type() command it issues keyboard events only, which is why (keyup.enter)="searchQuestions($event)" fires but (search)="searchQuestions($event)" does not.

The first thing to try is

cy.get('.searchbar-input')
  .type('test1'   '{leftArrow}{del}{enter}'   'test')
  .trigger('search')

Also try triggering other events like .trigger('change') and .trigger('input').

The other thing that might cause it is the {enter} in the middle of the typed string.

Try .type('test1' '{leftArrow}{del}' 'test' '{enter}') - this seems more like the pattern a user would use.