Как проверить с помощью Protractor, что отображается MD-подсказка AngularJS - PullRequest
Новая
       16

Как проверить с помощью Protractor, что отображается MD-подсказка AngularJS

0 голосов
/ 10 января 2019

Имеется иконка с подсказкой со следующим шаблоном: 

<md-icon class="message-icon" md-svg-icon="message">
  <md-tooltip md-direction="top">
    <div class="tooltip-row">
      My tooltip text
    </div>
  </md-tooltip>
</md-icon>

Я хотел бы проверить с помощью Транспортир , что при наведении курсора мыши на значок отображается md-tooltip и текст соответствует My tooltip text.

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

<div class="md-panel-outer-wrapper">
  <md-tooltip md-direction="top" class="ng-isolate-scope md-panel _md-panel-offscreen">
    <div class="tooltip-row ng-binding">Some random note</div>
  </md-tooltip>
</div>

В свете этого я написал следующий тест: 

describe('message icon', () => {
  it('should display a tooltip when the mouse is hovering the icon', () => {
    const messageIcon = $('.message-icon');
    browser.actions().mouseMove(messageIcon).perform().then(() => {
      const tooltip = $('.md-panel-outer-wrapper');
      browser
        .wait(protractor.ExpectedConditions.visibilityOf(tooltip), 5000, 'Expected tooltip to appear')
        .then(() => {
           expect(tooltip.getText()).toBe('My tooltip text');
        });
    });
  });
});

К сожалению, этот тест завершается неудачно, и каждый раз выполняется другое сообщение об ошибке:

  • Сбой: элемент не найден с помощью локатора: By (селектор css, .md-panel-external-wrapper)
  • Failed: Ожидается всплывающая подсказка. Тайм-аут ожидания через 5005 мс

Установив тайм-аут на 10 секунд, я также получаю дополнительную ошибку:

  • Ошибка: время ожидания - асинхронный обратный вызов не был вызван в течение времени ожидания, указанного в jasmine.DEFAULT_TIMEOUT_INTERVAL.

Кто-нибудь знает, как правильно написать такой тест?

EDIT:

Добавление соответствующих devDependencies: 

{
    "jasmine-core": "~2.6.2",
    "jasmine-reporters": "^2.3.0",
    "jasmine-spec-reporter": "~4.1.0",
    "protractor": "~5.3.0",
    "protractor-console": "~3.0.0",
    "protractor-jasmine2-screenshot-reporter": "~0.5.0",
}

Ответы [ 2 ]

0 голосов
/ 11 января 2019

Всплывающие подсказки могут быть хитрыми и могут быть трудными для проверки теста. Вот две вещи, которые я бы предложил попробовать:

(1) После вашего первого наведения попробуйте вызвать его легким движением мыши. У меня нет объяснения, почему он не будет отображаться в первый раз, но я столкнулся с тем же с подсказкой, и это помогло.

(2) Если вы по-прежнему получаете No element found ошибок, добавьте ожидание presenceOf перед visibilityOf (или объедините их, используя and): 

    browser.actions().mouseMove(messageIcon).perform().then(() => {
        // perform another mousemove to try and trigger tooltip
        browser.actions().mouseMove({x: 5, y: 5}).perform();
        const tooltip = $('.md-panel-outer-wrapper');
        // wait for present AND visible
        const EC = protractor.ExpectedConditions;
        const visible = EC.visibilityOf(tooltip);
        const present = EC.presenceOf(tooltip);
        browser.wait(EC.and(present, visible), 5000, 'Expected tooltip to appear').then(() => {
            expect(tooltip.getText()).toEqual('My tooltip text');
        });
    });
0 голосов
/ 10 января 2019

Подсказка имеет тип ElementFinder, поэтому вам нужно изменить ожидаемое значение:

expect(tooltip.getText()).toBe('My tooltip text');

EDIT: 

describe('message icon', () => {
  it('should display a tooltip when the mouse is hovering the icon', () => {
    const messageIcon = $('.message-icon');
    browser.actions().mouseMove(messageIcon).perform().then(() => {
      const tooltip = $('.md-panel-outer-wrapper');
      browser.wait(protractor.ExpectedConditions.visibilityOf(tooltip), 5000, 'Expected tooltip to appear').then(() => {
        expect(tooltip.getText()).to.eventually.equals.('My tooltip text');
      });

    });
  });
});

getText() возвращает обещание, поэтому вам следует использовать lib-chai-as-обещанную lib

...