実際の AJAX 呼び出しをモック/テストできるjQueryライブラリを使用しています。MockAjax
私のアプリケーションでは、AJAX リクエストのライブ アプリ バージョンを使用でき、AJAX リクエストMockAjaxをインターセプトしてモック レスポンスで応答します。
私はまた、M<ockJson似ている別のライブラリを使用していますが、代わりにモック JSON 応答を生成できます。
両方のライブラリを一緒に使用して、私のアプリケーションは AJAX リクエストを行います。 MockAjaxAJAX リクエストをキャッチし、ランダムなレスポンスをMockJson生成して返します。JSON
私の過去のプロジェクトでは、これは今日まで問題なくうまく機能していました...
アプリケーションがかなりうまく機能するようになったので、今度は JavaScript をより構造化されたバージョンに再構築することにしました。(DOM イベント、タスクなどをコードのセクションに入れる)。
これが私の問題の始まりです....
私の新しいコードでは、
- 私のアプリはAJAXリクエストを行います。
MockAjaxリクエストをキャッチしAJAXます。MockJsonJSON応答を取得するために呼び出されます- エラーこれはすべてがうまくいかないところです...
この最後のステップで、元の呼び出し関数JSONに応答を返す必要があります。それは単にそうではありません！AJAXSuccess
コンソールにエラーや何も表示されません。alert()私は AJAX 呼び出し関数に単純な関数を設定しましたsuccess()が、アラートをトリガーすることすらできません!
ある種のスコープの問題があるかどうか、または問題が何であるかはわかりません。私のアプリがフラットだったとき、グローバル ルート レベルのすべての変数と関数は、アプリの構造をまったく持たずに...すべて機能していました。すべてをオブジェクトなどに移動するとすぐに....MockAjax応答をReal Ajax応答に返さないというこの1つの問題を除いて、すべて機能します!
アプリ コードの 95% を削除し、このサンプルの問題を実行するための最小限のコードだけで再構築しました。問題のデモはこちら... http://jsbin.com/vugeki/1/edit?js
アプリの流れ:
projectTaskModal.init();ページの読み込み時に実行されますThis fires off projectTaskModal.mockAjax.init();MockAjaxとMockJsonコードを設定します- 次に、リクエスト
projectTaskModal.task.openTaskModal(projectTaskModal.cache.taskId);を実行する実行されますAJAX AJAX POST Requestに送信されます/gettaskeventsMockAjaxに送信されたリクエストをキャッチします/gettaskeventsMockAjax次に、呼び出して応答MockJsonを生成します。その関数を呼び出すと、JSON 応答がコンソールに出力されるので、それが生成されていることがわかります。JSONprojectTaskModal.mockAjax.generateTaskEventsJson();- 私の
MockAjaxコードでvar taskeventsは、応答を保持し、JSONこれに設定します...this.responseText = taskevents;``this.responseTextI believe is what is supposed to be returned to the Applications originalAJAX` 呼び出し。ここに問題があるようです！最初に要求した元の AJAX コードに応答を返していないようです!
これはある種のスコープの問題でしょうか?
var projectTaskModal = {
cache: {
taskId: 1,
projectId: '12345',
},
init: function() {
projectTaskModal.mockAjax.init();
//console.log(projectTaskModal.mockAjax.init.generateTaskEventsJson());
projectTaskModal.task.openTaskModal(projectTaskModal.cache.taskId);
},
task: {
openTaskModal: function(taskId) {
// Load Task Events/Comments Panel from AJAX Request
projectTaskModal.task.loadTaskEventsPanel(taskId);
},
/**
* Load Task Events/Comments from backend Database JSON
* @param {string} jsonServerEndpoint URL for AJAX to Request
* @return {string} Generated HTML of all Task Events built from JSON
*/
loadTaskEventsPanel: function(taskId) {
// Request Task Events and Comments using AJAX Request to Server
$.ajax({
type: 'POST',
contentType: 'application/json; charset=utf-8',
dataType: 'json',
url: '/gettaskevents',
data: {
action: 'load-task-events',
task_id: projectTaskModal.cache.taskId
},
success: function(data) {
alert('TESTING AJAX SUCCESS CALLBACK WAS CALLED!');
console.log('function loadTaskEventsPanel(taskId) DATA: ');
console.log(data);
// Parse JSON data
var taskEventsJson = data;
var task_events = taskEventsJson.task_events;
// Loop over each Task Event record returned
$.each(task_events, function(i, event) {
console.log('commentID: ' + event.commentId);
console.log('create_at DateTime: ' + event.created_at);
});
}
});
},
},
mockAjax: {
init: function(){
// Adding the @EVENT_TYPE keyword for MockJSON Template Usage
$.mockJSON.data.EVENT_TYPE = [
'Comment Created',
'Task Status Changed',
'Task Completed'
];
// Mock AJAX response for AJAX request to /gettaskevents
$.mockjax({
url: '/gettaskevents',
contentType: 'text/json',
responseTime: 2900, // Simulate a network latency of 750ms
response: function(settings) {
console.log('mockJax POST to /gettaskevents :');
//console.log(settings);
//DEBUG('Get Task Events JSON', settings.data);
if(settings.data.value == 'err') {
alert('MockAjax Error');
this.status = 500;
this.responseText = 'Validation error!';
} else {
alert('MockAjax Success');
//var taskevents = generateTaskEventsJson();
var taskevents = projectTaskModal.mockAjax.generateTaskEventsJson();
this.responseText = taskevents;
console.log(taskevents);
}
}
});
},
// Generate Mock JSON Response to load fake Task Evewnt/Comments JSON for Mock AJAX request
//var generateTaskEventsJson = function () {
generateTaskEventsJson: function() {
var mockTaskJson = $.mockJSON.generateFromTemplate({
"task_events|10-14" : [{
"commentId|+1" : 100000000,
"projectId|+1" : 100000000,
"taskId|+1" : 100000000,
"userId|+1" : 100000000,
"created_at" : "@DATE_YYYY-@DATE_MM-@DATE_DD",
"event_type" : "@EVENT_TYPE",
"userName" : "@MALE_FIRST_NAME @LAST_NAME",
"description" : "@LOREM_IPSUM @LOREM_IPSUM"
}]
});
//DEBUG('Generate Mock Task Events JSON', mockTaskJson.task_events);
//console.log(mockTaskJson.task_events);
//return mockTaskJson.task_events;
return mockTaskJson;
}
},
};
$(function() {
projectTaskModal.init();
});