Ionic searchbar search not working on cypress {enter}

user_14390963 0
Viewed 168

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.

ionic-framework cypress
1 Answers

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.

user_169977070
Related