Test if <span> is visible with ng-show attribute

Question

In my view I need to test if ng-show="showMsgRoundDownToHours" makes a span visible. This is the view:

<div class="highlight">
    ...     
    <span class="MsgRoundDownToHours" ng-show="showMsgRoundDownToHours">
       {{msgRoundDownToHours}}
    </span><br>
    ...
</div>

This is my Protractor Test for that scenario:

describe('c2g test', function() {
  ...
  var showMsgRoundDownToHours = element(by.css('.MsgRoundDownToHours'));
  ...
  // 10km and 229 minutes)
  it('10km, 229 minutes', function() {
    ...
    expect(showMsgRoundDownToHours).toBe(false);
    ...
  });
});

I don't know how to select that particular span. I've tried making the span a div, but this breaks the layout. I've tried assigning it a css class MsgRoundDownToHours, but this makes my console explode with errors. Is there any other way to select that span? I'm happy to do css modifications as well.

Answer 1

Find the element and check the visibility using isDisplayed():

expect(element(by.css('span.MsgRoundDownToHours')).isDisplayed()).toBe(true);