Bootstrap Tooltip - вызов QuerySelector для всплывающей подсказки из теста Jasmine / Karma возвращает значение NULL - PullRequest
Новая
       17

Bootstrap Tooltip - вызов QuerySelector для всплывающей подсказки из теста Jasmine / Karma возвращает значение NULL

0 голосов
/ 04 октября 2018

Я пишу тестовый пример Jasmine / Karma, в котором, если пользователь наводит указатель мыши на элемент с текстом всплывающей подсказки, появляется всплывающая подсказка, но я, кажется, застрял.

Предположим, чтоУ меня есть этот элемент HTML с функциональностью для всплывающей подсказки, которая появляется при наведении на нее курсора благодаря Bootstrap: 

<span id="testToolTipSpan" data-toggle="tooltip" data-placement="left" ngbTooltip="Test tooltip">Tooltip Span</span>

Этот диапазон находится в файле HTML компонента Angular.

Когда яНаведите указатель мыши на промежуток, слева от него появится «Подсказка для теста» в виде всплывающей подсказки.

Это то, что Bootstrap генерирует и помещает в DOM по умолчанию: 

<div class="tooltip show bs-tooltip-left" role="tooltip">
  <div class="arrow"></div>
  <div class="tooltip-inner">
    Test tooltip
  </div>
</div>

По какой-то причине, если у меня, например, этот тестовый пример написан с использованием Jasmine: 

/*
  Assume the following:
  - Angular component is called testPage declared as ComponentFixture<TestPageComponent>.
  - rootElementOfComponent is assigned testPage.nativeElement.
  - rootDebugElementOfComponent is assigned testPage.debugElement
*/


it ('should show \"Test tooltip\" on hovering over the tooltip span ', () => {

  // Fire a mouse hover event.
  rootDebugElementOfComponent.query(By.css('#testToolTipSpan')).nativeElement.dispatchEvent(new MouseEvent('mouseover'));

  // Check for the hover event.
  testPage.detectChanges();

  testPage.whenStable().then(() => {

    // Pick up the tooltip element that's displayed on the page.
    testPage.detectChanges();

    // Check if the tool tip is defined and has the required event.
    expect(rootElementOfComponent.querySelector('.tooltip.show.bs-tooltip-left')).toBeDefined();
    expect(rootElementOfComponent.querySelector('.tooltip.show.bs-tooltip-left').innerText).toBe('Test tooltip');
    expect(rootDebugElementOfComponent.query(By.css('.tooltip.show.bs-tooltip-left')).nativeElement.innerText).toBe('Test tooltip');
  });
});

при запуске тестового примера, я получаю эту ошибку в консоли в Chrome: 

context.js:1972 Unhandled Promise rejection: Cannot read property 'innerText' of null ; Zone: ProxyZone ; Task: Promise.then ; Value: TypeError: Cannot read property 'innerText' of null
    at :9876/_karma_webpack_/webpack:/src/app/<anonymous directory>
    at ZoneDelegate.webpackJsonp../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone.js:388)
    at ProxyZoneSpec.webpackJsonp../node_modules/zone.js/dist/zone-testing.js.ProxyZoneSpec.onInvoke (:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-testing.js:239)
    at ZoneDelegate.webpackJsonp../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone.js:387)
    at Zone.webpackJsonp../node_modules/zone.js/dist/zone.js.Zone.run (:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone.js:138)
    at :9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone.js:858
    at ZoneDelegate.webpackJsonp../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone.js:421)
    at ProxyZoneSpec.webpackJsonp../node_modules/zone.js/dist/zone-testing.js.ProxyZoneSpec.onInvokeTask (:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-testing.js:263)
    at ZoneDelegate.webpackJsonp../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone.js:420)
    at Zone.webpackJsonp../node_modules/zone.js/dist/zone.js.Zone.runTask (:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone.js:188) TypeError: Cannot read property 'innerText' of null
    at http://localhost:9876/_karma_webpack_/webpack:/src/app/<anonymous directory>
    at ZoneDelegate.webpackJsonp../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone.js:388:1)
    at ProxyZoneSpec.webpackJsonp../node_modules/zone.js/dist/zone-testing.js.ProxyZoneSpec.onInvoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-testing.js:239:1)
    at ZoneDelegate.webpackJsonp../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone.js:387:1)
    at Zone.webpackJsonp../node_modules/zone.js/dist/zone.js.Zone.run (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone.js:138:1)
    at http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone.js:858:1
    at ZoneDelegate.webpackJsonp../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone.js:421:1)
    at ProxyZoneSpec.webpackJsonp../node_modules/zone.js/dist/zone-testing.js.ProxyZoneSpec.onInvokeTask (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-testing.js:263:1)
    at ZoneDelegate.webpackJsonp../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone.js:420:1)
    at Zone.webpackJsonp../node_modules/zone.js/dist/zone.js.Zone.runTask (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone.js:188:1)

По сути, rootElementOfComponent.querySelector ('. Tooltip.show.bs-tooltip-left') и rootDebugElementOfComponent.query (By.css ('. Tooltip.show.bs-tooltip-left'))возвращая ноль.

Если я вместо этого вызываю rootElementOfComponent.querySelector ('# testToolTipSpan'), он возвращает сам исходный элемент span.

Я прочитал несколько вопросов StackOverflow и провел исследование сам, но не нашел ничего о выбореЭлемент подсказки начальной загрузки, который появляется только тогда, когда пользователь наводит курсор на элемент, который вызывает всплывающую подсказку.Один источник предполагает, что мой набор тестов не связан с документом, но из моих экспериментов я не думаю, что это является причиной проблемы.Другой источник был связан с элементами, состоящими из двух или более классов, и с тем, как их выбирать, где в аргументе для querySelector не должно быть пробелов;вместо этого между именами классов должен быть период.

...