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');
- });
测试将从通过开始,但是当我刷新时,它们将在通过和失败之间交替.
为什么会发生这种情况?甚至在URL中添加GET参数会导致页面上的相同行为.
在失败的情况下,测试失败,因为内部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;
- }();
解决方法
问题是您的第一个测试(“always passing test”)通过用重写的替换jQuery.fn.on函数来改变全局状态.因此,当测试按顺序运行时,第二个测试(“交替传递和失败”)使用不正确的覆盖jQuery.fn.on函数并失败.每个单元测试应将全局状态恢复到其预测状态,以便其他测试可以基于相同的假设运行.
在通过和失败之间交替的原因是,在引擎盖下,QUnit始终首先运行失败的测试(它通过cookie或本地存储记住这一点,我不完全确定).首先运行失败的测试时,第二个测试运行在第一个测试之前;因此,第二个测试获取jQuery的本机功能和工作.当您第三次运行它时,测试将以“原始”顺序运行,第二个测试将使用覆盖的功能并失败.
这是fiddle的工作.我通过缓存原始的var jQueryOn = jQuery.fn.on添加了测试后的“un-override”on函数的修复.在测试结束时通过以下功能重新设置它:jQuery.fn.on = jQueryOn ;.您可以更好地使用QUnit的模块teardown()方法来实现.
您可以查看https://github.com/jquery/qunit/issues/74了解更多信息.