Я не могу запросить выбор ввода ion-searchbar в тестах Жасмин - PullRequest
Новая
       14

Я не могу запросить выбор ввода ion-searchbar в тестах Жасмин

0 голосов
/ 03 февраля 2019

Я запускаю простой тест - введите значение в строку поиска Ionic.Я не могу получить ссылку на поле ввода в строке поиска в моих тестах с жасмином.

Я настроил простое ванильное приложение Ionic 4 с одной тестовой страницей.Все следующие тесты не пройдены. 

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

Я не понимаю, почему?Я успешно написал другие тесты в списках Ionic для чтения значений.Я попытался вставить таймеры, чтобы дать компоненту время для рендеринга HTML.Если я добавлю простое поле ввода HTML на страницу, оно будет выбрано ОК.Я подумал, что теневой DOM может быть уместен здесь, даже когда я проверяю поле ввода в браузере, он, кажется, не находится в теневом DOM, и стандартный document.querySelector работает просто отлично.

HTML-страница

// 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() { }
}

Тестовые характеристики 

// 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
  });

});
...