stencilJS @Element содержит тестовый блок, всегда оцениваемый как false - PullRequest
Новая
       79

stencilJS @Element содержит тестовый блок, всегда оцениваемый как false

0 голосов
/ 12 октября 2019

Для компонента dropdown единичный тестовый пример для закрытия / не закрытия раскрывающегося списка при щелчке снаружи / внутри компонента всегда оценивается как ложное. 

@Element() element: HTMLElement;
@Prop() isExpanded: boolean = false;

@Listen('click', { target: 'window' })
  onWindowClickListener(e: Event) {
    const isNode = e.target as HTMLElement;
    const isOurs = isNode && this.element.contains(e.target as Node);
    if (!isOurs) {
      this.isExpanded = false;
    } 
  }

Test Case Code - 

describe('window click', () => {
    let page;
    beforeEach(async () => {
        page = await newSpecPage({
            components: [SelectComponent],
            html: `<orxe-select></orxe-select>`
        });
    });

    it('listen window click', async() => {
        let target;
        page.root.shadowRoot.addEventListener('click', (e) => {
            target = e.target;
        });

        page.root.shadowRoot.querySelector('.orxe-select').click();
        page.rootInstance.onWindowClickListener({target});
    });

render function code

render() {
    return (
      <div id="orxe-select-container">
        <div class="orxe-select" onClick={this.toggleIsExpanded.bind(this)}>
          <span class="orxe-select-span" ref={(el) => this.selectElement = el as HTMLInputElement}>Select</span>
          <svg width="15" height="10" viewBox="-2.5 -5 75 60" preserveAspectRatio="none">
            <path d="M0,0 l35,50 l35,-50" fill="black" stroke="black" stroke-linecap="round" stroke-width="5" />
          </svg>
        </div>
        <div class={this.isExpanded ? 'orxe-search-container' : null}>
          <div class="orxe-search-input-div">
            {(this.isExpanded && this.search)
              ? this.enableSearch()
              : null
            }
          </div>
          <div class="orxe-select-option">
            {(this.isExpanded)
              ? this.loadOptions()
              : null
            }
          </div>
        </div>
      </div>
    )
  }

Существует два компонента, один из которых является родительским компонентом выбора, а другой - для параметров selectOptionComponent. Я вызываю родительский метод прослушивания кликов, передавая поддельный целевой элемент. Однако условие isNode && this.element.contains(e.target as Node); всегда оценивается как ложное, даже если целевой элемент является элементом, присутствующим в компоненте.

...