Fix legend size

src/component/Legend.tsx

@@ -95,18 +95,18 @@ export class Legend extends PureComponent<Props, State> {
 
   public getBBox() {
     if (this.wrapperNode && this.wrapperNode.getBoundingClientRect) {
-      return this.wrapperNode.getBoundingClientRect();
+      const box = this.wrapperNode.getBoundingClientRect();
+      box.height = this.wrapperNode.offsetHeight;
+      box.width = this.wrapperNode.offsetWidth;
+      return box;
     }
-
     return null;
   }
 
   private updateBBox() {
     const { onBBoxUpdate } = this.props;
-
-    if (this.wrapperNode && this.wrapperNode.getBoundingClientRect) {
-      const box = this.wrapperNode.getBoundingClientRect();
-
+    const box = this.getBBox();
+    if (box) {
       if (
         Math.abs(box.width - this.lastBoundingBox.width) > EPS ||
         Math.abs(box.height - this.lastBoundingBox.height) > EPS

test/component/Legend.spec.tsx

@@ -2,8 +2,18 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { vi } from 'vitest';
 import { Legend, LineChart, Line } from '../../src';
+import { mockGetBoundingClientRect, mockHTMLElementProperty } from '../helper/elementMockHelper';
 
 describe('<Legend />', () => {
+  const mockRect = {
+    width: 300,
+    height: 30,
+  };
+  const scale = 2;
+  beforeAll(() => mockGetBoundingClientRect(mockRect));
+  beforeAll(() => mockHTMLElementProperty('offsetHeight', mockRect.height * scale));
+  beforeAll(() => mockHTMLElementProperty('offsetWidth', mockRect.width * scale));
+
   const data = [
     { value: 'Apple', color: '#ff7300' },
     { value: 'Samsung', color: '#bb7300' },
@@ -111,4 +121,10 @@ describe('<Legend />', () => {
         'Ex: <Bar name="Name of my Data"/>',
     );
   });
+  test('it should get the correct BBox when scale', () => {
+    const handleUpdate = vi.fn();
+    render(<Legend height={30} width={300} onBBoxUpdate={handleUpdate} />);
+    expect(handleUpdate.mock.calls[0][0].height).toEqual(mockRect.height * scale);
+    expect(handleUpdate.mock.calls[0][0].width).toEqual(mockRect.width * scale);
+  });
 });

test/helper/elementMockHelper.ts

@@ -0,0 +1,34 @@
+/**
+ * getBoundingClientRect always returns 0 in jsdom, we can't test for actual returned string size
+ * Execution order matters
+ * https://github.com/jsdom/jsdom/issues/1590#issuecomment-578350151
+ *
+ * @param rect overrides getBoundingClientRect return value in the mock. jsdom by design returns all zeroes
+ * @returns cleanup function, convenient for beforeAll or beforeEach
+ */
+export function mockGetBoundingClientRect(rect: Partial<DOMRect>) {
+  const original = Element.prototype.getBoundingClientRect;
+  Element.prototype.getBoundingClientRect = () => ({
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0,
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    toJSON: () => '{}',
+    ...rect,
+  });
+  return function cleanup() {
+    Element.prototype.getBoundingClientRect = original;
+  };
+}
+
+export function mockHTMLElementProperty(name: string, value: number) {
+  const original = Object.getOwnPropertyDescriptor(HTMLElement.prototype, name);
+  Object.defineProperty(HTMLElement.prototype, name, { configurable: true, value });
+  return function cleanup() {
+    Object.defineProperty(HTMLElement.prototype, name, original);
+  };
+}