twitter-bootstrap - 禁用 Jasmine 测试的 Bootstrap 转换

Question

我正在尝试编写一个 Jasmine 测试来覆盖 Twitter Boostrap 模态对话框。当调试器行被注释掉时，测试失败。当调试器暂停处理时它会通过，我继续。我相信 Bootstrap 模态中的转换导致了这个问题，因为在我调用 expect 时模态对话框还没有在 DOM 中。

如何在测试期间禁用转换？

谢谢

describe("test dialog", function(){
    it("when cancel button is clicked", function() {
        spyOn(MyTestObj, 'myMethod')

        $("#cancelButton").click();

        debugger;

        expect($(".bootbox-body")).toHaveText("Are you sure you want to cancel?")

        $('.modal-footer button[data-bb-handler="Yes"]').click();

        expect(MyTestObj.myMethod).toHaveBeenCalledWith("123")
    })
})

谢谢 Jarred，您的解决方案效果很好!这是我的工作测试:

    describe("test dialog", function(){
        it("when cancel button is clicked", function() {
            spyOn(MyTestObj, 'myMethod')

            $("#cancelButton").click();

            waitsFor(function() {
                return $(".bootbox-body").is(":visible");
            }, "Element did not show up", 1000);

            runs(function () {
                expect($(".bootbox-body")).toHaveText("Are you sure you want to cancel?")
                $('.modal-footer button[data-bb-handler="Yes"]').click();

                expect(MyTestObj.myMethod).toHaveBeenCalledWith("123")
            })
        })      
    })

Answer 1

您可以使用 waitsFor Jasmine 方法后跟 runs块( https://github.com/pivotal/jasmine/wiki/Asynchronous-specs#waitsforfunction-optional-message-optional-timeout ):

$('.modal-footer button[data-bb-handler="Yes"]').click();



waitsFor(function() {
 return $(".bootbox-body").is(":visible");
}, "Element did not show up", 1000);

runs(function () {
 expect(MyTestObj.myMethod).toHaveBeenCalledWith("123")
})