JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://code.jquery.com/qunit/git/qunit.css">
<script src="http://code.jquery.com/qunit/git/qunit.js"></script>
<h1 id="qunit-header">Unit Tests</h1>
<h2 id="qunit-banner"></h2>
<div id="qunit-testrunner-toolbar"></div>
<ol id="qunit-tests"></ol>
<div id="qunit-fixture"></div>
<div id="PanelMyTab"></div>
JavaScript
var tickets = function() {
var panelId = '#PanelMyTab';
var self = {
loadTab: function(event, ui) {
$(panelId).find('.export').on('click', this.search.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;
}();
test('always passing test', function() { // Always passes
var jQueryOn = jQuery.fn.on;
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');
};
tickets.loadTab(event, ui);
jQuery.fn.on = jQueryOn;
});
test('alertnately 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...