twitter-bootstrap - Angular e2e 睾丸测试 : How To Tell Visibility?

Question

问题

有没有人成功测试过单击按钮时是否显示 Bootstrap 模式？

详情

我正在编写一个 Testacular 测试，检查单击按钮时是否显示 Bootstrap 模式。问题是对 css('display') 的调用返回 'none'即使我可以看到窗口弹出并且可见。

我想知道 Bootstrap Modal 是否发生了一些奇怪的事情，它复制了一个 html block ，然后用不同的 id 显示它。我当然希望不会!

代码

情景

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');

  });

});

测试输出

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

一种方法，虽然有点 hacky 是使用 :visible选择器并计算有多少匹配项

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

Source