Whenever you hover over it, this appears - my popup:
This is what the html looks like before we add the popover to the DOM:
<span
tariff-popover="popover.car2go.airport"
class="ng-isolate-scope">
<span ng-transclude="">
<span class="ng-binding ng-scope">
Airport Fee
</span>
</span>
<span
popover-placement="right"
uib-popover-html="text"
popover-trigger="mouseenter"
class="fa fa-info-circle">
</span>
</span>
This is what happens after the popover shows up:
<span
tariff-popover="popover.car2go.airport"
class="ng-isolate-scope">
<span ng-transclude="">
<span class="ng-binding ng-scope">
Airport Fee
</span>
</span>
<span
popover-placement="right"
uib-popover-html="text"
popover-trigger="mouseenter"
class="fa fa-info-circle">
</span>
<div
tooltip-animation-class="fade"
uib-tooltip-classes=""
ng-class="{ in: isOpen() }"
uib-popover-html-popup=""
title=""
content-exp="contentExp()"
placement="right"
popup-class=""
animation="animation"
is-open="isOpen"
origin-scope="origScope"
style="visibility: visible; display: block; top: -41px; left: 108.984px;" class="ng-isolate-scope right fade popover in">
<div class="arrow">
</div>
<div class="popover-inner">
<!-- ngIf: title -->
<div class="popover-content ng-binding" ng-bind-html="contentExp()">
4,90€ for all rides to and from the airport
</div>
</div>
</div>
</span>
I aim to verify that the text isn't empty by testing it. In my test, I confirm the presence of a string such as
4,90€ for all rides to and from the airportIn Protractor configuration, here's the portion with the regex to validate non-empty elements along with the waiting time set before the validation:
params: {
regexNotEmpty: '^(?!\s*$).+',
sleepTimeout: 1000
},
Here is how my Protractor test goes:
describe('car2go test all input fields and checkboxes', function() {
beforeEach(function() {
browser.get('http://localhost:9999/#/car2go');
browser.waitForAngular();
});
it('should show the popover-content upon mouseover', function() {
var path = 'span[tariff-popover="popover.car2go.airport"]';
var pathIcon = path + ' > .fa.fa-info-circle';
var pathPopover = path + ' > .popover.ng-isolate-scope.right.fade.in';
var popoverIcon = element(by.css(pathIcon));
browser.actions().mouseMove(popoverIcon).perform();
var popover = element(by.css(pathPopover));
expect(popover.isDisplayed()).toBeTruthy();
browser.sleep(browser.params.sleepTimeout);
expect(popover.getText()).toMatch(browser.params.regexNotEmpty);
});
});
I hover over the i icon and ensure the popover displays correctly. All good till now. However, after waiting for 1 second for the popover to load completely, I check if it contains any content.
The downside to this method is its effectiveness in Chrome but not Firefox due to the latter's slower nature. Is there a way for the test to resemble a promise? Can Protractor delay for around 5 seconds and prompt a failure indication if no text is detected?