Chore: Make ResizeObserver test mock only emit if an element is being observed (#96770)

* Chore: Make ResizeObserver test mock only emit if an element is being observed

* update test that relied on old mock behaviour

public/app/features/alerting/unified/components/rules/state-history/LokiStateHistory.test.tsx

@@ -20,6 +20,19 @@ jest.mock('react-virtualized-auto-sizer', () => {
     });
 });
 
+// Mock useMeasure from LogTimelineViewer > TimelineChart > GraphNG > VizLayout
+// so it always renders the chart
+jest.mock('react-use', () => {
+  const reactUse = jest.requireActual('react-use');
+  return {
+    ...reactUse,
+    useMeasure: () => {
+      const setRef = () => {};
+      return [setRef, { height: 300, width: 500 }];
+    },
+  };
+});
+
 beforeAll(() => {
   server.use(
     http.get('/api/v1/rules/history', () =>

public/test/jest-setup.ts

@@ -90,34 +90,52 @@ throwUnhandledRejections();
 
 // Used by useMeasure
 global.ResizeObserver = class ResizeObserver {
+  static #observationEntry: ResizeObserverEntry = {
+    contentRect: {
+      x: 1,
+      y: 2,
+      width: 500,
+      height: 500,
+      top: 100,
+      bottom: 0,
+      left: 100,
+      right: 0,
+    },
+    target: {
+      // Needed for react-virtual to work in tests
+      getAttribute: () => 1,
+    },
+  } as unknown as ResizeObserverEntry;
+
+  #isObserving = false;
+  #callback: ResizeObserverCallback;
+
   constructor(callback: ResizeObserverCallback) {
+    this.#callback = callback;
+  }
+
+  #emitObservation() {
     setTimeout(() => {
-      callback(
-        [
-          {
-            contentRect: {
-              x: 1,
-              y: 2,
-              width: 500,
-              height: 500,
-              top: 100,
-              bottom: 0,
-              left: 100,
-              right: 0,
-            },
-            target: {
-              // Needed for react-virtual to work in tests
-              getAttribute: () => 1,
-            },
-          } as unknown as ResizeObserverEntry,
-        ],
-        this
-      );
+      if (!this.#isObserving) {
+        return;
+      }
+
+      this.#callback([ResizeObserver.#observationEntry], this);
     });
   }
-  observe() {}
-  disconnect() {}
-  unobserve() {}
+
+  observe() {
+    this.#isObserving = true;
+    this.#emitObservation();
+  }
+
+  disconnect() {
+    this.#isObserving = false;
+  }
+
+  unobserve() {
+    this.#isObserving = false;
+  }
 };
 
 global.BroadcastChannel = class BroadcastChannel {