I cannot querySelect input of ion-searchbar in Jasmine tests - ionic-framework

Question

I'm running a simple test - enter a value into an Ionic search bar.
I cannot get a reference to the search bar input field in my jasmine tests.
I've set up a simple vanilla Ionic 4 app with a single test page.
The following tests all fail.
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
I don't understand why?
I've written other tests successfully on Ionic lists to read values.
I tried putting in timers to give the component time to render the html.
If I put a simple HTML input field on the page it is picked up OK.
I thought the shadow DOM might be relevant here even though when I inspect the input field in the browser it doesn't seem to be in the shadow DOM, and the standard document.querySelector works just fine.
HTML Page
// 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>
Component Class
// test.page.ts
import { Component } from '#angular/core';
#Component({
selector: 'app-test',
templateUrl: './test.page.html',
styleUrls: ['./test.page.scss'],
})
export class TestPage {
constructor() { }
}
Test Spec
// test.page.spec.ts
import { CUSTOM_ELEMENTS_SCHEMA } from '#angular/core';
import { async, ComponentFixture, TestBed } from '#angular/core/testing';
import { TestPage } from './test.page';
describe('TestPage', () => {
let component: TestPage;
let fixture: ComponentFixture<TestPage>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ TestPage ],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(TestPage);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
it('should have a searchbar', () => {
const el: HTMLElement = fixture.nativeElement;
const bar = el.querySelector('ion-searchbar');
fixture.detectChanges();
expect(bar).not.toBeNull(); // PASSES
// adding some checks to see what is going on
expect(bar.children.length).toBeGreaterThan(0); // FAILS
expect(bar.innerHTML).not.toEqual(''); // FAILS
expect(bar.shadowRoot).not.toBeNull(); // FAILS
});
it('should have an input field', () => {
const el: HTMLElement = fixture.nativeElement;
const input = el.querySelector('input');
expect(input).not.toBeNull(); // FAILS
});
});

Answer 1

This is over a year late, but I think it's worth answering for others who might need it. For what it's worth, I'm running #ionic-native/core 4.15 with #angular/core 5.2.11 and ionic-angular 3.9.2.
I don't know why const input = el.querySelector('input'); isn't working for you. The following code works for me:
const toolbar = fixture.nativeElement.querySelector('ion-toolbar')
const searchBar = toolbar.querySelector('ion-searchbar');
const input = searchBar.querySelector('input');
Alternatively, you can make your query for the input more specific:
const input = searchBar.querySelector('div.searchbar-input-container > input.searchbar-input')
I like to look at the structure of HTMLElements and their component instances by console.loging them in the test. When I add this to my test:
console.log(searchBar);
The console in the captured test browser will output:
<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>
In this structure, we can see the input is in the .searchbar-input-container div.