Protector translator tests in Angular: how to check a variable in an area without ng-bind and ng-model?

Question

how to check a variable in an area without ng-bind and ng-model?

<span ng-if="user.code === 'YELLOW'">
    <span class="glyphicons glyphicons-circle-remove text-danger"></span> Yellow
</span>
<span ng-if="user.code === 'GREEN'">
    <span class="glyphicons glyphicons-circle-exclamation-mark text-warning"></span> Green
</span>

I would like to check user.code with protractor

With ng-bind and ng-model it does not work

browser.expect(element(by.binding('user.code')).getText()).to.eventually.equal('');

or

browser.expect(element(by.model('user.code')).getAttribute('value')).to.eventually.equal('');

Mistake:

NoSuchElementError: No element found using locator: by.binding("user.code")
NoSuchElementError: No element found using locator: by.model("user.code")

Answer 1

You should not test this material in the protractor. You must write your tests from a user perspective.

However, if you want to check what you use evaluate. Get a reference to the DOM element, and then call the evaluation:

// Choose a DOM element bound to a scope that contains the value you
// want to test
expect($('span').evaluate('user.code')).toBe('some value');

http://www.protractortest.org/#/api?view=ElementArrayFinder.prototype.evaluate

Answer 2

First decision

CSS.

$('.glyphicons-circle-remove').isPresent(); // For user.code == 'YELLOW'
$('.glyphicons-circle-exclamation-mark').isPresent(); // For user.code == 'GREEN'

ng-if

$('[ng-if="user.code === \'YELLOW\'"]').isPresent(); // For user.code == 'YELLOW'
$('[ng-if="user.code === \'GREEN\'"]').isPresent(); // For user.code == 'GREEN'

ng-if. , .

:  .isPresent(), ng-if DOM. ng-show, .isDisplayed() ( ).