Mock post request is not replaced when post request occurred.

[minoseah629]

using jquery 3.1.1

So I have a post request on my system under test.

Below snippet is my creating on my mock post request.

In the attached screenshot, you could see the post request is attempted instead of being replaced by the mock request I created.

I have used only gets up to this point.

Additionally, I have used mock requests to use json in this format.

function getCriteriaPanelData1() {
    $.mockjax({
        type: 'post',
        contentType: "json",
        url: getCriteriaData,
        responseText: [{"Data":[{"Id":3,"Description":"Assignment Availability Code","IsGlobal":true,"IsActive":true,"AssignmentTeamId":null},{"Id":4,"Description":"Assignment Availability Code Expiration Date","IsGlobal":true,"IsActive":false,"AssignmentTeamId":null},{"Id":5,"Description":"Assignment Block Code","IsGlobal":true,"IsActive":true,"AssignmentTeamId":null},{"Id":6,"Description":"Assignment Block Code Expiration Date","IsGlobal":true,"IsActive":false,"AssignmentTeamId":null},{"Id":7,"Description":"Date Arrived Station","IsGlobal":true,"IsActive":true,"AssignmentTeamId":null},{"Id":1,"Description":"DEROS","IsGlobal":true,"IsActive":true,"AssignmentTeamId":null},{"Id":8,"Description":"Grade","IsGlobal":true,"IsActive":true,"AssignmentTeamId":null},{"Id":10,"Description":"Officer Core","IsGlobal":true,"IsActive":true,"AssignmentTeamId":null},{"Id":9,"Description":"RDTM Code","IsGlobal":true,"IsActive":true,"AssignmentTeamId":null},{"Id":2,"Description":"Record Status","IsGlobal":true,"IsActive":true,"AssignmentTeamId":null}],"Total":10,"Aggregates":null}]
    });
}

[jakerella]

Hi! Thanks for submitted an issue. I would need to see the other code around this, including your test, the source code making the Ajax call, and the value of the getCriteriaData variable you are using for the "url". In most cases, this happens because of a typo in the URL or something else mismatched.

[minoseah629]

var getCriteriaData = "/MyVector/VmlEligibilityCriteria/GetVmlEligibilityCriteria";

the library making the ajax request is an external library called kendo ui.

after reviewing their github, here is where I think they make the ajax request for my use of their library: https://github.com/telerik/kendo-ui-core/blob/f7f7568a830dbe56259ecc9762c06f6881085ff0/src/kendo.data.js#L1836

the open source version of this library use your library: https://github.com/telerik/kendo-ui-core/blob/master/tests/data/datasource/read.js

[travstone]

Hi, I've used Mockjax with Kendo before; generally didn't have any problems with it. That second link you provided is for the unit-testing of the kendo dataSource; I'm not sure how that applies here.

@jakerella is right, we'd need to see a bit more about the context of your code to know exactly what's going on, but I do have one question: At what point during the execution of your code does the function getCriteriaPanelData1() get called? If I recall correctly, you need to define your mocks so they become initialized before Kendo attaches itself onto jQuery; otherwise Kendo doesn't see them (I think).

Trav

[minoseah629]

@travstone, i mentioned kendo-ui uses this library as a kudos and I was simply unaware of this fact before today.

without getting too much into the weeds of my app's code. I did a screencast. after click the vml Eligibility Critieria link, I should get a kendo grid to appear.

https://www.screencast.com/t/LhJOe3WzooJj

var getCriteriaData = "/MyVector/VmlEligibilityCriteria/GetVmlEligibilityCriteria";
//kendo grid
var panelResponse = `<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title">Configure VML Eligibility Criteria</h4>
</div>
<div class="modal-body">
<div class="row">
    <div id="vmlEligibleCriteriaGridApp" class="col-md-12"
         data-url='`+getCriteriaData+`'
         data-update-isactive-url="/MyVector/VmlEligibilityCriteria/UpdateVmlEligibilityCriteriaIsActive"
         data-update-isglobal-url="/MyVector/VmlEligibilityCriteria/UpdateVmlEligibilityCriteriaIsGlobal">
        <div id="vmlEligibleCriteriaGrid" data-role="grid" data-bind="source: criteria, events:{dataBound:onDataBound}"
             data-scrollable="true" data-resizeable="false" data-sortable="true" data-groupable="false"
             data-pageable="{messages: {display: '{0} to {1} of {2} Criteria', empty: 'No Criteria to Display'}, refresh: true, pageSizes: [10, 25, 50, 100]}"
             data-filterable="false"
             data-columns='[
                {"field": "Id", "title": "", "hidden": true, "width": 30},
                {"field": "Description", "title": "Eligibility Criteria", "width": 300},
                {"field": "IsGlobal", "title": "Global", "width": 60,
                 "headerAttributes": {"style": "text-align: center;"},
                 "template": kendo.template($("#templateIsGlobal").html())},
                {"field": "IsActive", "title": "Active", "width": 60,
                 "headerAttributes": {"style": "text-align: center;"},
                 "template": kendo.template($("#templateIsActive").html())}]'>
        </div>
    </div>
</div>
</div>
<div class="modal-footer">
<div style="display: inline-block; float: right;">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
<script id="templateIsGlobal" type="text/x-kendo-template">
<div class="text-center">
    <i class="fa fa-check text-success" data-bind="visible: isGlobalAndIsAssignmentTeam"></i>
    <input data-role="switch" type="checkbox" data-off-label="No" data-on-label="Yes" data-bind="value: IsGlobal, visible: isNotAssignmentTeam, events: { change: isGlobalChanged }" />
</div>
</script>
<script id="templateIsActive" type="text/x-kendo-template">
<div class="text-center">
    <input data-role="switch" type="checkbox" data-off-label="No" data-on-label="Yes" data-bind="value: IsActive, events: { change: isActiveChanged }" />
</div>
</script>
`;
function configureVmlEligibilityCriteriaPanelLink() {
    $.mockjax({
        url: configureVmlEligibilityCriteriaPanelURL,
        responseText: panelResponse
    });
}
it("should Criteria Grid appear after click configureVmlEligibilityCriteriaPanelLink", function () {
            configureVmlEligibilityCriteriaPanelLink();
            getCriteriaPanelData1();
            AssignmentManagerAdminModule.Initialize();
            expect($("#vmlEligibilityCriteriaModalContent").children().length).toBe(0);
            var link = $("#configureVmlEligibilityCriteriaPanelLink");
            link.click();
            pending();
            return soon().then(function () {
                console.log($.mockjax.handlers());

            });
        });

[jakerella]

Hey! Sorry for the delay, this dropped off my radar. I still don't see how your original snippet relates to this code in the second comment. In the latest comment you are mocking out a GET request (because you don't specify the type, but in the original comment you mock out a POST request... Did you end up figuring this out? Is it still an issue?

[minoseah629]

This is still an issue. Did you check out my screencast link to a video that should show alittle more information?

[jakerella]

I really don't know what to tell you here. You're a couple layers up from the Ajax call itself, which means it's tricky. If you know that that line in Kendo is where the call is made, then I'd go in there and log out the options being passed to $.ajax() and then compare them with the Mockjax handler you set up. My guess is that the URL doesn't actually match, maybe they add something on the end? Or they prefix the host? Not sure.

[sanderdewilde]

I have been implementing mockjax for my Kendo application today.

During the loading of my application, I include jQuery which defines the global $ object. Then I include mockjax, which attaches itself to this $ object.

Next, I include Kendo. It took me a while to figure this out, but Kendo defines its own jQuery, available as kendo.jQuery. This instance has no attached mockjax instance. As Kendo data source objects use this kendo.jQuery instance, ajax calls are not mocked, while calls you create yourself using $.ajax are.

I solved this by creating a mockjax instance on this kendo.jQuery instance as well, and I add my requests to mock to both instances.

[jakerella]

Glad you figured a way around this!