From 64b8cb192961f51bcff5fbc9111b52b9a197d50b Mon Sep 17 00:00:00 2001 From: literat Date: Sat, 14 Sep 2024 15:25:25 +0200 Subject: [PATCH] Fix(web-react): Use Resize Observer hook with better handling of window object refs #DS-1465 --- packages/web-react/package.json | 4 +- .../__tests__/useResizeHeight.test.tsx | 31 ++++--------- .../components/Collapse/useResizeHeight.ts | 14 ++++-- yarn.lock | 43 ++++++------------- 4 files changed, 32 insertions(+), 60 deletions(-) diff --git a/packages/web-react/package.json b/packages/web-react/package.json index 2ad4dfdfcc..553c888925 100644 --- a/packages/web-react/package.json +++ b/packages/web-react/package.json @@ -21,11 +21,11 @@ "types": "./index.d.ts", "dependencies": { "@floating-ui/react": "^0.26.5", - "@react-hook/resize-observer": "^2.0.0", "classnames": "^2.3.1", "html-dom-parser": "5.0.10", "html-react-parser": "5.1.15", - "react-transition-group": "^4.4.5" + "react-transition-group": "^4.4.5", + "usehooks-ts": "^3.1.0" }, "devDependencies": { "@babel/core": "7.25.2", diff --git a/packages/web-react/src/components/Collapse/__tests__/useResizeHeight.test.tsx b/packages/web-react/src/components/Collapse/__tests__/useResizeHeight.test.tsx index e96f7bc42c..96e5f52d1f 100644 --- a/packages/web-react/src/components/Collapse/__tests__/useResizeHeight.test.tsx +++ b/packages/web-react/src/components/Collapse/__tests__/useResizeHeight.test.tsx @@ -1,35 +1,24 @@ -/* eslint-disable jest/no-commented-out-tests */ -/** - * Disabled because we are unable to simulate and subsequently test the correct behavior of the useResizeObserver hook. - * But we do not want to throw away the know-how about testing that hook in code yet. - * - * More information https://jira.lmc.cz/browse/DS-549 - * - * @todo either we make this test work in https://jira.lmc.cz/browse/DS-549 or replaced it with visual test - */ - -/* import '@testing-library/jest-dom'; import { render } from '@testing-library/react'; -import React from 'react'; -import { ResizeObserver } from '@juggle/resize-observer'; +import React, { useRef } from 'react'; import { useResizeHeight } from '../useResizeHeight'; -jest.spyOn(window, 'requestAnimationFrame').mockImplementation((cb) => cb()); -jest.mock('@juggle/resize-observer'); +jest.spyOn(window, 'requestAnimationFrame').mockImplementation((cb: FrameRequestCallback) => { + return 0; +}); const TestComponent = () => { - const ref = React.useRef(null); + const ref = useRef(null); const height = useResizeHeight(ref); return
{height}
; }; const resize = (height: number) => { - ResizeObserver.mockImplementation((cb) => { + global.ResizeObserver = jest.fn().mockImplementation((cb) => { cb([{ contentRect: { height } }]); - return { observe: jest.fn, disconnect: jest.fn, unobserve: jest.fn }; + return { observe: jest.fn(), disconnect: jest.fn(), unobserve: jest.fn() }; }); const { container } = render(); @@ -37,13 +26,9 @@ const resize = (height: number) => { return container.textContent; }; -describe.skip('useResizeHeight', () => { +describe('useResizeHeight', () => { it('should return simulated height', () => { expect(resize(100)).toBe('100px'); expect(resize(200)).toBe('200px'); }); }); -*/ - -// eslint-disable-next-line jest/no-disabled-tests, jest/expect-expect, @typescript-eslint/no-empty-function -it.skip('skip', () => {}); diff --git a/packages/web-react/src/components/Collapse/useResizeHeight.ts b/packages/web-react/src/components/Collapse/useResizeHeight.ts index ca55857d07..de5afaabe2 100644 --- a/packages/web-react/src/components/Collapse/useResizeHeight.ts +++ b/packages/web-react/src/components/Collapse/useResizeHeight.ts @@ -1,13 +1,19 @@ -import useResizeObserver from '@react-hook/resize-observer'; import { RefObject, useState } from 'react'; +import { useResizeObserver } from 'usehooks-ts'; + +type Size = { + height: number | undefined; +}; export const useResizeHeight = (ref: RefObject): string => { const [height, setHeight] = useState('0px'); - useResizeObserver(ref, (entry: ResizeObserverEntry) => { - const currentHeight = entry.contentRect.height; + const onResize = (size: Size) => { + const currentHeight = size.height; setHeight(`${currentHeight}px`); - }); + }; + + useResizeObserver({ ref, onResize }); return height; }; diff --git a/yarn.lock b/yarn.lock index 27d5b5d6e1..f11b1e35ef 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3718,7 +3718,6 @@ __metadata: "@lmc-eu/spirit-demo": "npm:^0.1.3" "@lmc-eu/spirit-design-tokens": "npm:^2.1.0" "@lmc-eu/spirit-web": "npm:^2.4.0" - "@react-hook/resize-observer": "npm:^2.0.0" "@rollup/plugin-node-resolve": "npm:15.2.3" "@rollup/plugin-terser": "npm:0.4.4" "@testing-library/dom": "npm:10.4.0" @@ -3762,6 +3761,7 @@ __metadata: ts-loader: "npm:9.5.1" ts-node: "npm:10.9.2" typescript: "npm:5.6.2" + usehooks-ts: "npm:^3.1.0" webpack: "npm:5.94.0" webpack-cli: "npm:5.1.4" webpack-merge: "npm:5.10.0" @@ -5489,36 +5489,6 @@ __metadata: languageName: node linkType: hard -"@react-hook/latest@npm:^1.0.2": - version: 1.0.3 - resolution: "@react-hook/latest@npm:1.0.3" - peerDependencies: - react: ">=16.8" - checksum: 10/62fde95d96a696745b0e2588ecfa8fc8cca580414a0fe0cdff3198c18972c2bcd4d4d24502635b35f856199b29c1b493abb8b4b13a15b679f07edfa3640acfe8 - languageName: node - linkType: hard - -"@react-hook/passive-layout-effect@npm:^1.2.0": - version: 1.2.1 - resolution: "@react-hook/passive-layout-effect@npm:1.2.1" - peerDependencies: - react: ">=16.8" - checksum: 10/217cb8aa90fb8e677672319a9a466d7752890cf4357c76df000b207696e9cc717cf2ee88080671cc9dae238a82f92093ab4f61ab2f6032d2a8db958fc7d99b5d - languageName: node - linkType: hard - -"@react-hook/resize-observer@npm:^2.0.0": - version: 2.0.2 - resolution: "@react-hook/resize-observer@npm:2.0.2" - dependencies: - "@react-hook/latest": "npm:^1.0.2" - "@react-hook/passive-layout-effect": "npm:^1.2.0" - peerDependencies: - react: ">=18" - checksum: 10/42c76790b7b79cd7e31aeb64a8e4abc20c0f563bde369a1fc6b8509b51112221d95e707eded30ebf6e366ad17e93e21e6c906de121269954bafd2700ed44e1b0 - languageName: node - linkType: hard - "@rollup/plugin-babel@npm:6.0.4": version: 6.0.4 resolution: "@rollup/plugin-babel@npm:6.0.4" @@ -29113,6 +29083,17 @@ __metadata: languageName: node linkType: hard +"usehooks-ts@npm:^3.1.0": + version: 3.1.0 + resolution: "usehooks-ts@npm:3.1.0" + dependencies: + lodash.debounce: "npm:^4.0.8" + peerDependencies: + react: ^16.8.0 || ^17 || ^18 + checksum: 10/6aef8affd3c053a3040b7421816dab85eb21601c5203496a705bafc32eb973fb519a2b0ddda527962e361d248f3a1c49df130620efe871c8f89e897451ed1cc7 + languageName: node + linkType: hard + "user-home@npm:^2.0.0": version: 2.0.0 resolution: "user-home@npm:2.0.0"