From cde171dca5e06c4ed953dd009aba541364548919 Mon Sep 17 00:00:00 2001 From: Lukasz Mierzwa Date: Mon, 23 Feb 2026 09:53:18 +0000 Subject: [PATCH] fix(ui): bump some deps --- ui/package-lock.json | 24 +++++++++++++----------- ui/package.json | 7 +++++-- ui/src/Components/NavBar/index.test.tsx | 18 +++++++++++++++--- ui/src/__fixtures__/PressKey.ts | 23 +++++++++-------------- ui/src/setupTests.ts | 5 +++-- 5 files changed, 45 insertions(+), 32 deletions(-) diff --git a/ui/package-lock.json b/ui/package-lock.json index 2715e6ed5..79836f8b4 100644 --- a/ui/package-lock.json +++ b/ui/package-lock.json @@ -40,8 +40,8 @@ "react-cool-dimensions": "3.0.1", "react-day-picker": "8.10.1", "react-dom": "17.0.2", - "react-hotkeys-hook": "4.4.1", - "react-idle-timer": "4.6.4", + "react-hotkeys-hook": "5.2.0", + "react-idle-timer": "5.7.2", "react-intersection-observer": "10.0.3", "react-json-pretty": "2.2.0", "react-linkify": "0.2.2", @@ -11580,22 +11580,24 @@ } }, "node_modules/react-hotkeys-hook": { - "version": "4.4.1", - "resolved": "https://registry.npmjs.org/react-hotkeys-hook/-/react-hotkeys-hook-4.4.1.tgz", - "integrity": "sha512-sClBMBioFEgFGYLTWWRKvhxcCx1DRznd+wkFHwQZspnRBkHTgruKIHptlK/U/2DPX8BhHoRGzpMVWUXMmdZlmw==", + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/react-hotkeys-hook/-/react-hotkeys-hook-5.2.0.tgz", + "integrity": "sha512-6hhPHVuofG8De4yU3jr8Q4EjHsxEnob5I1Dag+OxgDRXX1oARHbmURreXyo2CDTYyz0POmFqdBlW6eAa0MwNLw==", "license": "MIT", + "workspaces": [ + "packages/*" + ], "peerDependencies": { - "react": ">=16.8.1", - "react-dom": ">=16.8.1" + "react": ">=16.8.0", + "react-dom": ">=16.8.0" } }, "node_modules/react-idle-timer": { - "version": "4.6.4", - "resolved": "https://registry.npmjs.org/react-idle-timer/-/react-idle-timer-4.6.4.tgz", - "integrity": "sha512-iq61dPud8fgj7l1KOJEY5pyiD532fW0KcIe/5XUe/0lB/4Vytoy4tZBlLGSiYodPzKxTL6HyKoOmG6tyzjD7OQ==", + "version": "5.7.2", + "resolved": "https://registry.npmjs.org/react-idle-timer/-/react-idle-timer-5.7.2.tgz", + "integrity": "sha512-+BaPfc7XEUU5JFkwZCx6fO1bLVK+RBlFH+iY4X34urvIzZiZINP6v2orePx3E6pAztJGE7t4DzvL7if2SL/0GQ==", "license": "MIT", "peerDependencies": { - "prop-types": ">=15", "react": ">=16", "react-dom": ">=16" } diff --git a/ui/package.json b/ui/package.json index bae58dba2..88badc9bf 100644 --- a/ui/package.json +++ b/ui/package.json @@ -36,8 +36,8 @@ "react-cool-dimensions": "3.0.1", "react-day-picker": "8.10.1", "react-dom": "17.0.2", - "react-hotkeys-hook": "4.4.1", - "react-idle-timer": "4.6.4", + "react-hotkeys-hook": "5.2.0", + "react-idle-timer": "5.7.2", "react-intersection-observer": "10.0.3", "react-json-pretty": "2.2.0", "react-linkify": "0.2.2", @@ -107,6 +107,9 @@ ], "preset": "ts-jest/presets/js-with-ts", "testEnvironment": "jest-environment-jsdom", + "transformIgnorePatterns": [ + "node_modules/(?!(react-hotkeys-hook|react-idle-timer)/)" + ], "moduleNameMapper": { "\\.(css|less|scss)$": "identity-obj-proxy" }, diff --git a/ui/src/Components/NavBar/index.test.tsx b/ui/src/Components/NavBar/index.test.tsx index 8a91a7fbf..581b63b31 100644 --- a/ui/src/Components/NavBar/index.test.tsx +++ b/ui/src/Components/NavBar/index.test.tsx @@ -4,6 +4,8 @@ import { render, screen } from "@testing-library/react"; import fetchMock from "fetch-mock"; +import { useIdleTimer } from "react-idle-timer"; + import { MockThemeContext } from "__fixtures__/Theme"; import { EmptyAPIResponse } from "__fixtures__/Fetch"; import { AlertStore } from "Stores/AlertStore"; @@ -12,15 +14,24 @@ import { SilenceFormStore } from "Stores/SilenceFormStore"; import { ThemeContext } from "Components/Theme"; import NavBar from "."; +jest.mock("react-idle-timer"); + let alertStore: AlertStore; let settingsStore: Settings; let silenceFormStore: SilenceFormStore; let resizeCallback: (val: any) => void; +let idleTimerCallbacks: { onIdle?: () => void; onActive?: () => void }; declare let global: any; beforeEach(() => { jest.useFakeTimers(); + idleTimerCallbacks = {}; + (useIdleTimer as jest.Mock).mockImplementation((options) => { + idleTimerCallbacks.onIdle = options.onIdle; + idleTimerCallbacks.onActive = options.onActive; + return { pause: jest.fn(), reset: jest.fn() }; + }); global.ResizeObserver = jest.fn((cb) => { resizeCallback = cb; return { @@ -91,12 +102,12 @@ const renderNavbar = (fixedTop?: boolean) => { describe("", () => { it("sets isIdle to true after idle timeout", () => { - // Verifies that react-idle-timer triggers onIdle callback after timeout period + // Verifies that onIdle callback from react-idle-timer sets isIdle to true renderNavbar(); expect(alertStore.ui.isIdle).toBe(false); act(() => { - jest.advanceTimersByTime(1000 * 60 * 3 + 1000); + idleTimerCallbacks.onIdle?.(); }); expect(alertStore.ui.isIdle).toBe(true); @@ -110,7 +121,8 @@ describe("", () => { expect(container.querySelector(".invisible")).not.toBeInTheDocument(); act(() => { - jest.advanceTimersByTime(1000 * 60 * 3 + 1000); + idleTimerCallbacks.onIdle?.(); + jest.advanceTimersByTime(1000); }); expect(alertStore.ui.isIdle).toBe(true); diff --git a/ui/src/__fixtures__/PressKey.ts b/ui/src/__fixtures__/PressKey.ts index b651522be..1bbb9c6da 100644 --- a/ui/src/__fixtures__/PressKey.ts +++ b/ui/src/__fixtures__/PressKey.ts @@ -2,20 +2,15 @@ import { act } from "react-dom/test-utils"; function PressKey(key: string, code: number): void { act(() => { - document.dispatchEvent( - new KeyboardEvent("keydown", { - key: key, - keyCode: code, - which: code, - } as KeyboardEventInit), - ); - document.dispatchEvent( - new KeyboardEvent("keyup", { - key: key, - keyCode: code, - which: code, - } as KeyboardEventInit), - ); + const eventInit = { + key: key, + code: key, + keyCode: code, + which: code, + bubbles: true, + } as KeyboardEventInit; + document.dispatchEvent(new KeyboardEvent("keydown", eventInit)); + document.dispatchEvent(new KeyboardEvent("keyup", eventInit)); }); } diff --git a/ui/src/setupTests.ts b/ui/src/setupTests.ts index 5db1369fc..6827ad555 100644 --- a/ui/src/setupTests.ts +++ b/ui/src/setupTests.ts @@ -4,8 +4,7 @@ import "@testing-library/jest-dom"; import { useInView } from "react-intersection-observer"; -// react-idle-timer >= 4.6.0 -import "regenerator-runtime/runtime"; +import { createMocks as createIdleTimerMocks } from "react-idle-timer"; import { configure } from "mobx"; @@ -14,6 +13,8 @@ import { FetchRetryConfig } from "Common/Fetch"; import { useFetchGetMock } from "__fixtures__/useFetchGet"; import { useFetchGet } from "Hooks/useFetchGet"; +createIdleTimerMocks(); + configure({ enforceActions: "always", //computedRequiresReaction: true,