JSFiddle - React, Tailwind, and code Playground
HTML
<input id="fbs" name="fbs" Text="fbs-text" />
<img id="fbs-loading" alt="should-get-replaced-by-success-method" />
JavaScript
(function($) {
unitTest($('#fbs'));
})(jQuery);
function methodUnderTest (c) {
var activityChanges =
jQuery.parseJSON({
'id': c.attr('id'),
'fieldName': c.attr('name'),
'data': c.val()
});
jQuery.ajax({
url: '/Activity/UpdateActivityField',
async: true,
type: 'POST',
success: function (d, ts, jq) { handleSuccess(d, ts, jq); },
error: function (jq, status, error) { handleError(jq, status, error); },
dataType: 'json',
data: activityChanges,
contentType: 'application/json'
});
};
function unitTest (fieldBeingSaved) {
// Arrange
var options,
jsonText = '{"id": "123","fieldName": "fbs", "data": "fbs-text"}',
expectedData = $.parseJSON(jsonText);
$.ajax = function (param) {
options = param;
};
// Act
methodUnderTest (fieldBeingSaved);
options.success(expectedData, null, null);
// Assert //don't have same() method here, just use if-else
if( jQuery('#fbs-loading').attr('alt') == 'modified')
alert('YES! assert that fbs-loading alt attribute has chagned - passed');
else
alert('assert failed (fbs-loading alt attribute did not change)');
};
function handleSuccess (sdata, textStatus, jqXhr) {
console.log('sdata is: ' + sdata + ' and textStatus is:' + textStatus + ' and jq is:' + jqXhr);
jQuery('#' + sdata.fieldName + '-loading').attr('alt', 'modified');
};
function handleError(j, s, e ){
console.log('error, oh no');
};