我有两个测试相互造成副作用。我理解为什么我要替换在第二个测试中内部调用的 jQuery 内置函数。然而，我不明白的是为什么测试交替通过和失败。

This question is similar但是，我没有直接在 qunit-fixture div 上做任何事情。

这是我的测试

test('always passing test', function() { // Always passes
    var panelId = '#PanelMyTab';

    var event = {};
    var ui = {
        tab: {
            name: 'MyTab',
        },
        panel: panelId,
    };

    $('<div id="' + panelId + '">')
        .append('<a href="#" class="export">Test</a>')
        .append('<a href="#" class="showForm">Show Form</a>')
        .appendTo('#qunit-fixture');

    jQuery.fn.on = function(event, callback) {
        ok(this.selector == panelId + ' .export', 'Setting export click event');
        equal(callback, tickets.search.getReport, 'Callback being set');
    };

    loadTab(event, ui);
});

test('alternately passing and failing', function() { // Alternates between passing and failing on page refresh
    expect(5);

    var testUrl = 'test';
    $('<div class="ui-tabs-panel">')
        .append('<a href="'+ testUrl + '" id="getReport">Get Report</a>')
        .append('<form action="notest" target="" class="ticketSearch"></form>')
        .appendTo('#qunit-fixture');

    // Setup form mocking
    $('form.ticketSearch').submit(function() {
        var urlPattern = new RegExp(testUrl + '$');
        ok(urlPattern.test($(this).prop('action')), 'Form action set to link href');
        equal($(this).prop('target'), '_blank', 'Open form on a new page');
    });

    var event = {
        target: 'a#getReport',
    };

    var result = getReport(event);

    var form = $('form.ticketSearch');

    ok(/notest$/.test($(form).prop('action')), 'Making sure action is not replaced');
    equal($(form).prop('target'), '', 'Making sure that target is not replaced');

    ok(false === result, 'click event returns false to not refresh page');
});

测试将开始通过，但当我刷新时，它们将在通过和失败之间交替。

为什么会这样？即使将 GET 参数添加到 url 也会在页面上产生相同的行为。

在失败的情况下，测试失败是因为内部 jQuery 在设置 submit() 处理程序时调用 .on()。但是为什么在那种情况下测试并不总是失败呢？浏览器在做什么以在页面刷新期间保留状态？

更新:

这是被测试的代码:

var tickets = function() {
    var self = {
        loadTab: function(event, ui) {
            $(panel).find('.export').button().on('click', this.getReport);
        },

        search: {
            getReport: function(event) {
                var button = event.target;
                var form = $(button).closest('div.ui-tabs-panel').find('form.ticketSearch').clone(true);

                $(form).prop('action', $(button).prop('href'));
                $(form).prop('target', '_blank');

                $(form).submit();

                return false;
            }
        }
    };

    return self;
}();

最佳答案

我修改了@Ben 的fiddle将您的代码包含在您的两个测试中。我修改了您的一些代码以使其正常运行。当您点击运行按钮时，所有测试都会通过。当您再次按下运行按钮时，第二个测试(“交替通过和失败”)将失败——这基本上是在模拟您的原始问题。

问题是您的第一个测试(“始终通过测试”)通过将 jQuery.fn.on 函数替换为重写函数来改变全局状态。因此，当测试按顺序运行时，第二个测试(“交替通过和失败”)使用不正确的重写 jQuery.fn.on 函数并失败。 每个单元测试都应将全局状态返回到其测试前状态，以便其他测试可以基于相同的假设运行。

它在通过和失败之间交替的原因是在引擎盖下 QUnit 总是首先运行失败的测试(它通过 cookie 或本地存储以某种方式记住这一点，我不太确定)。当它首先运行失败的测试时，第二个测试在第一个之前运行；结果，第二个测试获得了 jQuery 的原生 on 函数并起作用。当您第三次运行它时，测试将按其“原始”顺序运行，第二次测试将使用覆盖的 on 函数并失败。

这是工作 fiddle .我在测试后通过缓存原始 var jQueryOn = jQuery.fn.on; 函数并将其重置为通过以下方式结束测试:jQuery.fn.on = jQueryOn;。您可能可以改用 QUnit 模块的 teardown() 方法更好地实现它。

可以查看https://github.com/jquery/qunit/issues/74了解更多信息。

关于javascript - Qunit 测试在页面刷新时在通过和失败之间交替，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16800739/