From e7d1e94444fc1cffee3b281c4d5aed2b6e01bbb3 Mon Sep 17 00:00:00 2001 From: Jeremy Davis Date: Wed, 19 Oct 2022 15:12:43 +0200 Subject: [NO JIRA] Upgrade d3-zoom and d3-selection --- .../src/main/js/components/charts/BubbleChart.tsx | 8 ++++---- .../components/charts/__tests__/BubbleChart-test.tsx | 19 ++++++++++++------- 2 files changed, 16 insertions(+), 11 deletions(-) (limited to 'server/sonar-web/src/main/js') diff --git a/server/sonar-web/src/main/js/components/charts/BubbleChart.tsx b/server/sonar-web/src/main/js/components/charts/BubbleChart.tsx index bf1f077913f..955d9f62610 100644 --- a/server/sonar-web/src/main/js/components/charts/BubbleChart.tsx +++ b/server/sonar-web/src/main/js/components/charts/BubbleChart.tsx @@ -20,8 +20,8 @@ import classNames from 'classnames'; import { max, min } from 'd3-array'; import { scaleLinear, ScaleLinear } from 'd3-scale'; -import { event, select } from 'd3-selection'; -import { zoom, ZoomBehavior, zoomIdentity } from 'd3-zoom'; +import { select } from 'd3-selection'; +import { D3ZoomEvent, zoom, ZoomBehavior, zoomIdentity } from 'd3-zoom'; import { sortBy, uniq } from 'lodash'; import * as React from 'react'; import { AutoSizer } from 'react-virtualized/dist/commonjs/AutoSizer'; @@ -103,9 +103,9 @@ export default class BubbleChart extends React.PureComponent, State> select(this.node).call(this.zoom as any); }; - zoomed = () => { + zoomed = (event: D3ZoomEvent) => { const { padding } = this.props; - const { x, y, k } = event.transform as { x: number; y: number; k: number }; + const { x, y, k } = event.transform; this.setState({ transform: { x: x + padding[3] * (k - 1), diff --git a/server/sonar-web/src/main/js/components/charts/__tests__/BubbleChart-test.tsx b/server/sonar-web/src/main/js/components/charts/__tests__/BubbleChart-test.tsx index 2ce6a4bc653..91bf26bb3ac 100644 --- a/server/sonar-web/src/main/js/components/charts/__tests__/BubbleChart-test.tsx +++ b/server/sonar-web/src/main/js/components/charts/__tests__/BubbleChart-test.tsx @@ -18,7 +18,7 @@ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ import { select } from 'd3-selection'; -import { zoom } from 'd3-zoom'; +import { D3ZoomEvent, zoom } from 'd3-zoom'; import { shallow } from 'enzyme'; import * as React from 'react'; import { AutoSizer, AutoSizerProps } from 'react-virtualized/dist/commonjs/AutoSizer'; @@ -34,14 +34,15 @@ jest.mock('react-virtualized/dist/commonjs/AutoSizer', () => ({ })); jest.mock('d3-selection', () => ({ - event: { transform: { x: 10, y: 10, k: 20 } }, select: jest.fn().mockReturnValue({ call: jest.fn() }) })); -jest.mock('d3-zoom', () => ({ - ...jest.requireActual('d3-zoom'), - zoom: jest.fn() -})); +jest.mock('d3-zoom', () => { + return { + zoomidentity: { k: 1, tx: 0, ty: 0 }, + zoom: jest.fn() + }; +}); beforeEach(jest.clearAllMocks); @@ -108,7 +109,11 @@ it('should correctly handle zooming', () => { ); // Call zoom event handler. - wrapper.instance().zoomed(); + const mockZoomEvent = { transform: { x: 10, y: 10, k: 20 } } as D3ZoomEvent< + SVGSVGElement, + void + >; + wrapper.instance().zoomed(mockZoomEvent); expect(wrapper.state().transform).toEqual({ x: 105, y: 105, -- cgit v1.2.3