Angular e2e Testacular Test: How To Tell Visibility?

Question

Question

Has anyone successfully tested if a Bootstrap Modal is displayed when a button is clicked?

Details

I am writing a Testacular test that checks to see if a Bootstrap modal is displayed when a button is clicked. The problem is that the call to css('display') returns 'none' even though I can see that the window pops up and is visible.

I'm wondering if there's something kooky going on with the Bootstrap Modal that duplicates a block of html then displays that with a different id. I certainly hope not!

Code

The scenario

describe('e2e', function() {

  beforeEach(function() {
    browser().navigateTo('/chessClub/');
  });


  it('should display editor when add member button clicked', function() {
    expect(element('title').text()).toBe("Chess Club");

      expect(element('#myModal').css('display')).toBe('none'); //as expected, it is none
              //click the button to show the modal
      element('#addMemberButton','Add Member Button').click();

              //this 2nd expect still return 'none'
      expect(element('#myModal').css('display')).toBe('block');

  });

});

test output

Chrome 25.0 e2e should display editor when add member button clicked FAILED
    expect element '#myModal' get css 'display' toBe "block"
    /Users/jgordon/learning/chessClub/web-app/test/e2e/scenarios.js:17:4: expected "block" but was "none"

html

<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">{{editorLabel}}</h3>
    </div>
    <div class="modal-body">
        <form>
            <label>
                Name
            </label>
                <input type="text" ng-model="editedMember.name" placeholder="John Doe">
            <label>
                Grade
            </label>
                <input type="text" ng-model="editedMember.grade">
            <label>
                Ladder Position
            </label>
                <input type="text" ng-model="editedMember.ladderPosition">
        </form>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
        <button class="btn btn-primary" ng-click="saveMember()">Save changes</button>
    </div>
</div>

Answer 1

One way, though a bit hacky is to use the :visible selector and count how many matches there are

expect(element('#someElement:visible').count()).toBe(1);

Source

Answer 2

I ended up just needing to call sleep(1) on the test. I guess the code that shows the modal wasn't as fast as the test was at checking the style.