Question

我正在运行一个简单的测试-在Ionic搜索栏中输入一个值。我无法在茉莉花测试中获得对搜索栏输入字段的引用。

我已经用一个测试页设置了一个简单的Vanilla Ionic 4应用程序。以下测试均失败。

if (result.additionalUserInfo.isNewUser) {
  // this is a new user
}

我不明白为什么？我已经在离子列表上成功编写了其他测试以读取值。我尝试放入计时器，以使组件有时间呈现html。如果我在页面上放置一个简单的HTML输入字段，则可以选择OK。我以为影子DOM在这里可能是相关的，即使当我在浏览器中检查输入字段时，影子DOM也似乎不在影子DOM中，并且标准document.querySelector可以正常工作。

HTML页面

const el: HTMLElement = fixture.nativeElement;
const input = el.querySelector('input');
expect(input).not.toBeNull();  // FAILS 

const bar = el.querySelector('ion-searchbar');
expect(bar.innerHTML).not.toEqual(''); // FAILS
expect(bar.shadowRoot).not.toBeNull();  // FAILS

组件类

// test.page.html
<ion-header>
  <ion-toolbar>
    <ion-title>
      Test Page
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <ion-searchbar></ion-searchbar>
</ion-content>

测试规范

// test.page.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-test',
  templateUrl: './test.page.html',
  styleUrls: ['./test.page.scss'],
})
export class TestPage {
  constructor() { }
}

Answer 1

这已经晚了一年，但是我认为对于其他可能需要它的人来说，这是值得回答的。对于它的价值，我正在运行@ ionic-native / core 4.15和@ angular / core 5.2.11和ionic-angular 3.9.2。

我不知道为什么const input = el.querySelector('input');对您不起作用。以下代码对我有用：

const toolbar = fixture.nativeElement.querySelector('ion-toolbar')
const searchBar = toolbar.querySelector('ion-searchbar');
const input = searchBar.querySelector('input');

或者，您可以使输入的查询更具体：

const input = searchBar.querySelector('div.searchbar-input-container > input.searchbar-input')

我想通过在测试中console.log来查看HTMLElement的结构及其组件实例。当我将其添加到测试中时：

console.log(searchBar);

捕获的测试浏览器中的控制台将输出：

<ion-searchbar class="searchbar searchbar-md searchbar-left-aligned" ng-reflect-placeholder="Besmirch">
    <div class="searchbar-input-container">
        <button class="searchbar-md-cancel button button-md button-clear button-clear-md button-clear-md-dark" clear="" color="dark" ion-button="" mode="md" type="button" ng-reflect-color="dark" ng-reflect-mode="md" ng-reflect-clear=""><span class="button-inner"><ion-icon name="md-arrow-back" role="img" class="icon icon-md" aria-label="arrow back" ng-reflect-name="md-arrow-back"></ion-icon></span>
            <div class="button-effect"></div>
        </button>
        <div class="searchbar-search-icon"></div>
        <input class="searchbar-input" dir="auto" placeholder="Besmirch" type="search" autocomplete="off" autocorrect="off" spellcheck="false">
        <button class="searchbar-clear-icon button button-md button-clear button-clear-md" clear="" ion-button="" type="button" ng-reflect-mode="md" ng-reflect-clear=""><span class="button-inner"></span>
            <div class="button-effect"></div>
        </button>
    </div>
    <button class="searchbar-ios-cancel button button-ios button-clear button-clear-ios" clear="" ion-button="" mode="ios" type="button" ng-reflect-mode="ios" ng-reflect-clear="" tabindex="-1"><span class="button-inner">Cancel</span>
        <div class="button-effect"></div>
    </button>
</ion-searchbar>

在此结构中，我们可以看到输入位于.searchbar-input-container div中。

我无法在茉莉花测试中查询选择离子搜索栏的输入

1 个答案: