JSFiddle - React, Tailwind, and code Playground

by NickJosevski

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,
        expectedData = jQuery.parseJSON({
            'id': 'fbs',
            'fieldName': 'fbs',
            'data': 'fbs-text'
        });

    jQuery.ajax = function (param) {
        options = param;
    };

    // Act
    methodUnderTest (fieldBeingSaved);
    
    options.success({
        sdata: expectedData,
        textStatus: 'is-this-data-arriving',
        jqXhr: 123
    });

    // Assert //don't have same() method here, just use if-else
    if( jQuery('#fbs-loading').attr('src') == '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) {
    //problem is here this success method never gets the data
    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 ){
    alert('error, oh no');
};