feat: refactor performSync to use $.ajax for improved error handling and prevent global AJAX events

js/sync.js

@@ -75,9 +75,15 @@ export async function performSync(exam_details, URLS) {
 
   try {
     const response = await new Promise((resolve, reject) => {
-      $.post(URLS.exam_submit_url, json, null, "json")
+      $.ajax({
-        .done(resolve)
+        type: "POST",
-        .fail(reject);
+        url: URLS.exam_submit_url,
+        data: json,
+        dataType: "json",
+        global: false, // Prevents triggering global ajaxStart / ajaxStop spinners
+        success: resolve,
+        error: reject,
+      });
     });
 
     if (response && response.success) {

tests/sync.test.js

@@ -27,22 +27,11 @@ globalThis.Dexie = class {
   }
 };
 
-// Define mock jQuery $.post
+// Define mock jQuery $.ajax
-const mockPostDone = jest.fn();
+const mockAjax = jest.fn();
-const mockPostFail = jest.fn();
-const mockPost = jest.fn(() => ({
-  done: (cb) => {
-    mockPostDone(cb);
-    return {
-      fail: (failCb) => {
-        mockPostFail(failCb);
-      }
-    };
-  }
-}));
 
 globalThis.$ = {
-  post: mockPost,
+  ajax: mockAjax,
 };
 
 // Mock DOM elements
@@ -100,8 +89,10 @@ describe("RTS Sync Unit Tests", () => {
       })
     });
 
-    mockPostDone.mockImplementation((cb) => {
+    mockAjax.mockImplementation((options) => {
-      cb({ success: true });
+      if (options.success) {
+        options.success({ success: true });
+      }
     });
 
     mockTransaction.mockImplementation(async (mode, tables, cb) => {
@@ -115,13 +106,16 @@ describe("RTS Sync Unit Tests", () => {
       cid: examDetails.cid,
       eid: examDetails.eid,
     });
-    expect(mockPost).toHaveBeenCalledWith(
+    expect(mockAjax).toHaveBeenCalledWith(
-      URLS.exam_submit_url,
       expect.objectContaining({
-        in_progress: "true",
+        type: "POST",
-      }),
+        url: URLS.exam_submit_url,
-      null,
+        dataType: "json",
-      "json"
+        global: false,
+        data: expect.objectContaining({
+          in_progress: "true",
+        }),
+      })
     );
   });
 });