[#449] added debounce for websocket updates (#476)

* [#449] added debounce for websocket updates

* [#449] changed behavior to have disableable debounce + changed debounced messages data storage to be handled by websocket Gate

__test__/features/websocket/utils/notificationStorm.test.tsx

@@ -0,0 +1,131 @@
+import type { AppDispatch, RootState } from "@/app/store";
+import { store } from "@/app/store";
+import { refreshCalendarWithSyncToken } from "@/features/Calendars/services";
+import { getDisplayedCalendarRange } from "@/utils";
+import { updateCalendars } from "@/websocket/messaging/updateCalendars";
+
+jest.mock("@/features/Calendars/services", () => ({
+  refreshCalendarWithSyncToken: jest.fn(),
+}));
+
+jest.mock("@/utils", () => ({
+  getDisplayedCalendarRange: jest.fn(),
+  findCalendarById: jest.requireActual("@/utils").findCalendarById,
+}));
+
+jest.mock("@/app/store", () => ({
+  store: {
+    getState: jest.fn(),
+  },
+}));
+
+jest.useFakeTimers();
+const mockDispatch = jest.fn();
+const mockRange = {
+  start: new Date("2025-01-15T10:00:00Z"),
+  end: new Date("2025-01-16T10:00:00Z"),
+};
+const mockState = {
+  calendars: {
+    list: {
+      "cal1/entry1": { id: "cal1/entry1", name: "Calendar 1", syncToken: 1 },
+      "cal2/entry2": { id: "cal2/entry2", name: "Calendar 2", syncToken: 1 },
+      "cal/A": { id: "cal/A", name: "Cal A", syncToken: 1 },
+      "cal/B": { id: "cal/B", name: "Cal B", syncToken: 1 },
+      "cal/C": { id: "cal/C", name: "Cal C", syncToken: 1 },
+    },
+    templist: {},
+  },
+} as unknown as RootState;
+const mockAccumulators: {
+  calendarsToRefresh: Map<string, any>;
+  calendarsToHide: Set<string>;
+  debouncedUpdateFn?: (dispatch: AppDispatch) => void;
+  currentDebouncePeriod?: number;
+} = {
+  calendarsToRefresh: new Map<string, any>(),
+  calendarsToHide: new Set(),
+  currentDebouncePeriod: 0,
+  debouncedUpdateFn: undefined,
+};
+
+describe("websocket messages storm", () => {
+  beforeEach(() => {
+    (refreshCalendarWithSyncToken as unknown as jest.Mock).mockClear();
+    jest.clearAllMocks();
+    jest.clearAllTimers();
+    jest.resetModules();
+    (getDisplayedCalendarRange as jest.Mock).mockReturnValue(mockRange);
+    (store.getState as jest.Mock).mockReturnValue(mockState);
+    (window as any).WS_DEBOUNCE_PERIOD_MS = 500;
+    mockAccumulators.calendarsToRefresh = new Map<string, any>();
+    mockAccumulators.calendarsToHide = new Set();
+    mockAccumulators.currentDebouncePeriod = 0;
+    mockAccumulators.debouncedUpdateFn = undefined;
+  });
+  it("debounces calendar updates during message storm", () => {
+    const mockMessage = {
+      "/calendars/cal1/entry1": {
+        syncToken: "ldsk",
+      },
+    };
+
+    for (let i = 0; i < 50; i++) {
+      updateCalendars(mockMessage, mockDispatch, mockAccumulators);
+    }
+
+    // Dispatch called once because of leading edge
+    expect(refreshCalendarWithSyncToken).toHaveBeenCalledTimes(1);
+
+    // Trailing edge
+    jest.advanceTimersByTime(500);
+
+    // only one call for the last message + leading edge message
+    expect(refreshCalendarWithSyncToken).toHaveBeenCalledTimes(2);
+  });
+
+  it("debounces calendar updates during message storm with multiple updates", () => {
+    // Send a storm with mixed messages
+    for (let i = 0; i < 50; i++) {
+      if (i % 3 === 0)
+        updateCalendars(
+          { "/calendars/cal/A": { syncToken: "ldskfjsld" + i } },
+          mockDispatch,
+          mockAccumulators
+        );
+      else if (i % 3 === 1)
+        updateCalendars(
+          { "/calendars/cal/B": { syncToken: "ldskfjsld" + i } },
+          mockDispatch,
+          mockAccumulators
+        );
+      else
+        updateCalendars(
+          { "/calendars/cal/C": { syncToken: "ldskfjsld" + i } },
+          mockDispatch,
+          mockAccumulators
+        );
+    }
+
+    // Dispatch called once because of leading edge
+    expect(refreshCalendarWithSyncToken).toHaveBeenCalledTimes(1);
+
+    // Trailing edge
+    jest.advanceTimersByTime(500);
+
+    // Trailing edge updates once per calendar + the original leading edge
+    expect(refreshCalendarWithSyncToken).toHaveBeenCalledTimes(4);
+  });
+
+  it("executes immediately when debounce is disabled", () => {
+    (window as any).WS_DEBOUNCE_PERIOD_MS = 0;
+
+    updateCalendars(
+      { "/calendars/cal1/entry1": { syncToken: "abc" } },
+      mockDispatch,
+      mockAccumulators
+    );
+
+    expect(refreshCalendarWithSyncToken).toHaveBeenCalledTimes(1);
+  });
+});

__test__/features/websocket/utils/updateCalendars.test.tsx

@@ -1,4 +1,4 @@
-import { RootState, store } from "@/app/store";
+import { AppDispatch, RootState, store } from "@/app/store";
 import { refreshCalendarWithSyncToken } from "@/features/Calendars/services/refreshCalendar";
 import { getDisplayedCalendarRange } from "@/utils/CalendarRangeManager";
 import { updateCalendars } from "@/websocket/messaging/updateCalendars";
@@ -29,23 +29,38 @@ describe("updateCalendars", () => {
       templist: {},
     },
   } as unknown as RootState;
+  const mockAccumulators: {
+    calendarsToRefresh: Map<string, any>;
+    calendarsToHide: Set<string>;
+    debouncedUpdateFn?: (dispatch: AppDispatch) => void;
+    currentDebouncePeriod?: number;
+  } = {
+    calendarsToRefresh: new Map<string, any>(),
+    calendarsToHide: new Set(),
+    currentDebouncePeriod: 0,
+    debouncedUpdateFn: jest.fn(),
+  };
 
   beforeEach(() => {
     jest.clearAllMocks();
     mockDispatch = jest.fn();
     (getDisplayedCalendarRange as jest.Mock).mockReturnValue(mockRange);
     (store.getState as jest.Mock).mockReturnValue(mockState);
+    mockAccumulators.calendarsToRefresh = new Map<string, any>();
+    mockAccumulators.calendarsToHide = new Set();
+    mockAccumulators.currentDebouncePeriod = 0;
+    mockAccumulators.debouncedUpdateFn = jest.fn();
   });
 
   it("should not dispatch for non-object messages", () => {
-    updateCalendars(null, mockDispatch);
-    updateCalendars("string", mockDispatch);
-    updateCalendars(123, mockDispatch);
+    updateCalendars(null, mockDispatch, mockAccumulators);
+    updateCalendars("string", mockDispatch, mockAccumulators);
+    updateCalendars(123, mockDispatch, mockAccumulators);
 
     expect(refreshCalendarWithSyncToken).not.toHaveBeenCalled();
   });
 
-  it("should dispatch for registered calendars", () => {
+  it("should dispatch for registered calendars", async () => {
     const message = {
       [WS_INBOUND_EVENTS.CLIENT_REGISTERED]: [
         "/calendars/cal1/entry1",
@@ -53,19 +68,22 @@ describe("updateCalendars", () => {
       ],
     };
 
-    updateCalendars(message, mockDispatch);
+    updateCalendars(message, mockDispatch, mockAccumulators);
 
-    expect(refreshCalendarWithSyncToken).toHaveBeenCalledTimes(2);
+    await waitFor(() =>
+      expect(refreshCalendarWithSyncToken).toHaveBeenCalledTimes(2)
+    );
   });
 
-  it("should dispatch for calendar path updates", () => {
+  it("should dispatch for calendar path updates", async () => {
     const message = {
       "/calendars/cal1/entry1": { updated: true },
     };
 
-    updateCalendars(message, mockDispatch);
-
-    expect(refreshCalendarWithSyncToken).toHaveBeenCalled();
+    updateCalendars(message, mockDispatch, mockAccumulators);
+    await waitFor(() =>
+      expect(refreshCalendarWithSyncToken).toHaveBeenCalled()
+    );
     expect(refreshCalendarWithSyncToken).toHaveBeenCalledWith({
       calendar: mockState.calendars.list["cal1/entry1"],
       calType: undefined,
@@ -73,14 +91,13 @@ describe("updateCalendars", () => {
     });
   });
 
-  it("should use current displayed calendar range", () => {
+  it("should use displayed calendar range", async () => {
     const message = {
       "/calendars/cal1/entry1": {},
     };
 
-    updateCalendars(message, mockDispatch);
-
-    expect(getDisplayedCalendarRange).toHaveBeenCalled();
+    updateCalendars(message, mockDispatch, mockAccumulators);
+    await waitFor(() => expect(getDisplayedCalendarRange).toHaveBeenCalled());
   });
 
   it("should handle temp calendars", async () => {
@@ -103,7 +120,7 @@ describe("updateCalendars", () => {
       "/calendars/temp1/entry1": {},
     };
 
-    updateCalendars(message, mockDispatch);
+    updateCalendars(message, mockDispatch, mockAccumulators);
 
     await waitFor(() =>
       expect(refreshCalendarWithSyncToken).toHaveBeenCalledWith({
@@ -120,7 +137,7 @@ describe("updateCalendars", () => {
       "not-a-path": {},
     };
 
-    updateCalendars(message, mockDispatch);
+    updateCalendars(message, mockDispatch, mockAccumulators);
 
     expect(refreshCalendarWithSyncToken).not.toHaveBeenCalled();
   });