diff --git a/public/app/features/alerting/unified/components/rules/state-history/LokiStateHistory.test.tsx b/public/app/features/alerting/unified/components/rules/state-history/LokiStateHistory.test.tsx index 415e4f6897b..ad963bc2333 100644 --- a/public/app/features/alerting/unified/components/rules/state-history/LokiStateHistory.test.tsx +++ b/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', () => diff --git a/public/test/jest-setup.ts b/public/test/jest-setup.ts index d419cb4697c..f625756bc8b 100644 --- a/public/test/jest-setup.ts +++ b/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 {