Facing issue in cypress when Input with autocus and blur in StencilJS

2 years ago

#40614

MogerCS

I am facing issue with cypress in my project. I am having an input which is appear on click of search icon and disappear on blue event of the input.

I am writing cypress test to check my functionality, here I am facing a problem whenever I type in input with cypress .type() method but it is firing blur event of the input every time.

Once blur event is fired my input ill disappear from the DOM. It will works fine if I remove autofocus from input.

Please can someone help me to write proper cypress test for my use case. Thank you.

component.ts

export class SearchTable {
  private searchInput: HTMLInputElement;
  @State() isSearchOpen: boolean = false;
  
  
  private handleClickSearch = () => {
    this.isSearch = !this.isSearch;
    setTimeout(() => {
      this.searchInput.focus();
    })
  }
  
  handleBlur = () => {
    console.log('blur event called!!!')
    this.isSearch = !this.isSearch;
  }
  
  render() {
  
    return (
      <div slot="right-panel" data-test-id={`${this.dataTestId}-right-panel-slot`}>
            {this.isSearch ?
              <input data-test-id="input-search" onBlur={this.handleBlur} ref={el => (this.searchInput = el as HTMLInputElement)}/> :
              <icon-component onClick={this.handleClickSearch} dataTestId={`${this.dataTestId}-search-icon`} icon="search" />
            }
          </div>
    )
  }

cypress test

it.only("check search functionality with empty data", () => {

    cy.getSearchSection()

      .find("icon-component").click()

      .getSearchSection()

      .findAllByTestId(`input-search`)

      .type('volume4444')

      .wait(600)

      .should('have.value', 'volume4444');

  });

cypress

shadow-dom

stenciljs

0 Answers

Your Answer

Posts

Questions

Blogs

Jobs