4

質問

ボタンがクリックされたときに Bootstrap Modal が表示されるかどうかをテストした人はいますか?

詳細

ボタンをクリックしたときに Bootstrap モーダルが表示されるかどうかを確認する Testacular テストを作成しています。問題は、ウィンドウがポップアップして表示されていることがわかりますが、への呼び出しがcss('display')返されることです。'none'

Bootstrap Modal で html のブロックを複製し、それを別の 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>
4

3 に答える 3

7

少しハックですが、1 つの方法は、:visibleセレクターを使用して、一致する数をカウントすることです。

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

ソース

于 2013-03-06T07:27:36.693 に答える
2

sleep(1)結局、テストに電話する必要がありました。モーダルを示すコードは、テストがスタイルをチェックするほど速くはなかったと思います。

于 2013-01-28T15:50:18.700 に答える