@pie-lib/graphing 2.34.3-next.2 → 2.34.3-next.203

package/src/__tests__/toggle-bar.test.jsx

@@ -1,36 +1,111 @@
-import { shallow } from 'enzyme';
+import { render, screen } from '@pie-lib/test-utils';
+import userEvent from '@testing-library/user-event';
 import React from 'react';
 
 import { ToggleBar } from '../toggle-bar';
 
+// Mock DragProvider to avoid @dnd-kit React version conflicts
+jest.mock('@pie-lib/drag', () => ({
+  DragProvider: ({ children }) => <div data-testid="drag-provider">{children}</div>,
+}));
+
+// Mock Translator to return the key as-is for testing
+jest.mock('@pie-lib/translator', () => ({
+  translator: {
+    t: (key) => {
+      // Extract tool name from key like "graphing.point" -> "point"
+      const parts = key.split('.');
+      return parts[parts.length - 1];
+    },
+  },
+}));
+
 describe('ToggleBar', () => {
-  let w;
   let onChange = jest.fn();
-  const wrapper = (extras) => {
+  let onChangeToolsOrder = jest.fn();
+
+  beforeEach(() => {
+    onChange.mockClear();
+    onChangeToolsOrder.mockClear();
+  });
+
+  const renderComponent = (extras) => {
     const defaults = {
-      classes: {},
       className: 'className',
       onChange,
-      options: ['one', 'two'],
+      onChangeToolsOrder,
+      options: ['point', 'line'],
+      language: 'en',
     };
     const props = { ...defaults, ...extras };
-    return shallow(<ToggleBar {...props} />);
+    return render(<ToggleBar {...props} />);
   };
 
-  describe('snapshot', () => {
-    it('renders', () => {
-      w = wrapper();
-      expect(w).toMatchSnapshot();
+  describe('rendering', () => {
+    it('renders without crashing', () => {
+      const { container } = renderComponent();
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders tool buttons for valid tools', () => {
+      renderComponent({ options: ['point', 'line', 'circle'] });
+      expect(screen.getByText(/point/i)).toBeInTheDocument();
+      expect(screen.getByText(/line/i)).toBeInTheDocument();
+      expect(screen.getByText(/circle/i)).toBeInTheDocument();
+    });
+
+    it('does not render invalid tool options', () => {
+      renderComponent({ options: ['point', 'invalid-tool', 'line'] });
+      expect(screen.getByText(/point/i)).toBeInTheDocument();
+      expect(screen.getByText(/line/i)).toBeInTheDocument();
+      expect(screen.queryByText(/invalid-tool/i)).not.toBeInTheDocument();
+    });
+
+    it('highlights selected tool', () => {
+      const { container } = renderComponent({ selectedToolType: 'line' });
+      const selectedButton = screen.getByText(/line/i).closest('button');
+      expect(selectedButton).toHaveAttribute('value', 'line');
     });
   });
 
-  describe('logic', () => {
-    describe('select', () => {
-      it('calls onChange', () => {
-        w = wrapper();
-        w.instance().select({ target: { textContent: 'two' } });
-        expect(onChange).toHaveBeenLastCalledWith('two');
-      });
+  describe('interactions', () => {
+    it('calls onChange when tool button is clicked', async () => {
+      const user = userEvent.setup();
+      renderComponent({ options: ['point', 'line'] });
+
+      const pointButton = screen.getByText(/point/i).closest('button');
+      await user.click(pointButton);
+
+      expect(onChange).toHaveBeenCalledWith('point');
+    });
+
+    it('calls onChange with selected tool type', async () => {
+      const user = userEvent.setup();
+      renderComponent({ options: ['point', 'line'], selectedToolType: 'point' });
+
+      const lineButton = screen.getByText(/line/i).closest('button');
+      await user.click(lineButton);
+
+      expect(onChange).toHaveBeenCalledWith('line');
+    });
+
+    it('disables buttons when disabled prop is true', () => {
+      renderComponent({ disabled: true, options: ['point', 'line'] });
+
+      const pointButton = screen.getByText(/point/i).closest('button');
+      const lineButton = screen.getByText(/line/i).closest('button');
+
+      expect(pointButton).toBeDisabled();
+      expect(lineButton).toBeDisabled();
+    });
+
+    it('does not call onChange when disabled', () => {
+      renderComponent({ disabled: true, options: ['point'] });
+
+      const pointButton = screen.getByText(/point/i).closest('button');
+      expect(pointButton).toBeDisabled();
+      // Note: Cannot test click on disabled button with pointer-events: none
+      // The disabled state is verified above
     });
   });
 });

package/src/__tests__/tool-menu.test.jsx

@@ -1,29 +1,78 @@
-import { shallow } from 'enzyme';
+import { render, screen } from '@pie-lib/test-utils';
+import userEvent from '@testing-library/user-event';
 import React from 'react';
 
 import ToolMenu from '../tool-menu';
 
+// Mock DragProvider to avoid @dnd-kit React version conflicts
+jest.mock('@pie-lib/drag', () => ({
+  DragProvider: ({ children }) => <div data-testid="drag-provider">{children}</div>,
+}));
+
 describe('ToolMenu', () => {
-  let w;
   let onChange = jest.fn();
-  const tools = ['one', 'two'];
+  let onChangeTools = jest.fn();
+
+  beforeEach(() => {
+    onChange.mockClear();
+    onChangeTools.mockClear();
+  });
 
-  const wrapper = (extras) => {
+  const renderComponent = (extras) => {
     const defaults = {
-      classes: {},
       className: 'className',
       onChange,
-      currentTool: tools[0],
-      tools,
+      onChangeTools,
+      currentToolType: 'point',
+      toolbarTools: ['point', 'line'],
+      language: 'en',
     };
     const props = { ...defaults, ...extras };
-    return shallow(<ToolMenu {...props} />);
+    return render(<ToolMenu {...props} />);
   };
 
-  describe('snapshot', () => {
-    it('renders', () => {
-      w = wrapper();
-      expect(w).toMatchSnapshot();
+  describe('rendering', () => {
+    it('renders without crashing', () => {
+      const { container } = renderComponent();
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders ToggleBar with correct props', () => {
+      renderComponent({ toolbarTools: ['point', 'line', 'circle'] });
+      expect(screen.getByText(/point/i)).toBeInTheDocument();
+      expect(screen.getByText(/line/i)).toBeInTheDocument();
+      expect(screen.getByText(/circle/i)).toBeInTheDocument();
+    });
+
+    it('passes currentToolType to ToggleBar', () => {
+      renderComponent({ currentToolType: 'line' });
+      const selectedButton = screen.getByText(/line/i).closest('button');
+      expect(selectedButton).toBeInTheDocument();
+    });
+  });
+
+  describe('interactions', () => {
+    it('calls onChange when tool is selected', async () => {
+      const user = userEvent.setup();
+      renderComponent();
+
+      const lineButton = screen.getByText(/line/i).closest('button');
+      await user.click(lineButton);
+
+      expect(onChange).toHaveBeenCalledWith('line');
+    });
+
+    it('calls onChangeTools when tools order changes', () => {
+      renderComponent({ draggableTools: true });
+      // Note: Drag-and-drop testing requires more complex setup with @dnd-kit/test-utils
+      // For now, we verify the component renders with draggableTools enabled
+      expect(screen.getByText(/point/i)).toBeInTheDocument();
+    });
+
+    it('disables tools when disabled prop is true', () => {
+      renderComponent({ disabled: true });
+      const pointButton = screen.getByText(/point/i).closest('button');
+      expect(pointButton).toBeDisabled();
     });
   });
 });

package/src/__tests__/undo-redo.test.jsx

@@ -1,25 +1,24 @@
-import { shallow } from 'enzyme';
+import { render } from '@pie-lib/test-utils';
 import React from 'react';
 import UndoRedo from '../undo-redo';
 
 describe('UndoRedo', () => {
-  let w;
   let onUndo = jest.fn();
   let onRedo = jest.fn();
   let onReset = jest.fn();
-  const wrapper = (extras) => {
+  const renderComponent = (extras) => {
     const defaults = {
       onUndo,
       onRedo,
       onReset,
     };
     const props = { ...defaults, ...extras };
-    return shallow(<UndoRedo {...props} />);
+    return render(<UndoRedo {...props} />);
   };
-  describe('snapshot', () => {
-    it('renders', () => {
-      w = wrapper();
-      expect(w).toMatchSnapshot();
+  describe('rendering', () => {
+    it('renders without crashing', () => {
+      const { container } = renderComponent();
+      expect(container.firstChild).toBeInTheDocument();
     });
   });
 });

package/src/__tests__/utils.js

@@ -1,6 +1,9 @@
 export const scaleMock = () => {
   const fn = jest.fn((n) => n);
   fn.invert = jest.fn((n) => n);
+  fn.domain = jest.fn(() => fn);
+  fn.range = jest.fn(() => fn);
+  fn.copy = jest.fn(() => scaleMock());
   return fn;
 };
 

package/src/axis/__tests__/arrow.test.jsx

@@ -1,11 +1,10 @@
-import { shallow } from 'enzyme';
+import { render } from '@pie-lib/test-utils';
 import React from 'react';
 import { Arrow } from '../arrow';
 
 describe('Arrow', () => {
-  let w;
   let onChange = jest.fn();
-  const wrapper = (extras) => {
+  const renderComponent = (extras) => {
     const defaults = {
       classes: {},
       className: 'className',
@@ -16,24 +15,24 @@ describe('Arrow', () => {
       },
     };
     const props = { ...defaults, ...extras };
-    return shallow(<Arrow {...props} />);
+    return render(<Arrow {...props} />);
   };
-  describe('snapshot', () => {
-    it('up', () => {
-      w = wrapper({ direction: 'up' });
-      expect(w).toMatchSnapshot();
+  describe('rendering', () => {
+    it('renders with direction up', () => {
+      const { container } = renderComponent({ direction: 'up' });
+      expect(container.firstChild).toBeInTheDocument();
     });
-    it('down', () => {
-      w = wrapper({ direction: 'down' });
-      expect(w).toMatchSnapshot();
+    it('renders with direction down', () => {
+      const { container } = renderComponent({ direction: 'down' });
+      expect(container.firstChild).toBeInTheDocument();
     });
-    it('left', () => {
-      w = wrapper({ direction: 'left' });
-      expect(w).toMatchSnapshot();
+    it('renders with direction left', () => {
+      const { container } = renderComponent({ direction: 'left' });
+      expect(container.firstChild).toBeInTheDocument();
     });
-    it('right', () => {
-      w = wrapper({ direction: 'right' });
-      expect(w).toMatchSnapshot();
+    it('renders with direction right', () => {
+      const { container } = renderComponent({ direction: 'right' });
+      expect(container.firstChild).toBeInTheDocument();
     });
   });
 });

package/src/axis/__tests__/axes.test.jsx

@@ -1,13 +1,12 @@
-import { shallow } from 'enzyme';
+import { render } from '@pie-lib/test-utils';
 import React from 'react';
 import { graphProps } from '../../__tests__/utils';
 
 import Axes, { RawXAxis, RawYAxis, firstNegativeValue, sharedValues } from '../axes';
 
 describe('RawXAxis', () => {
-  let w;
   let onChange = jest.fn();
-  const wrapper = (extras) => {
+  const renderComponent = (extras) => {
     const defaults = {
       classes: {},
       className: 'className',
@@ -19,22 +18,25 @@ describe('RawXAxis', () => {
         up: true,
         down: true,
       },
+      columnTicksValues: [-1, 0, 1],
+      skipValues: [],
+      distanceFromOriginToFirstNegativeY: 0,
+      dy: 0,
     };
     const props = { ...defaults, ...extras };
-    return shallow(<RawXAxis {...props} />);
+    return render(<RawXAxis {...props} />);
   };
-  describe('snapshot', () => {
-    it('renders', () => {
-      w = wrapper();
-      expect(w).toMatchSnapshot();
+  describe('rendering', () => {
+    it('renders without crashing', () => {
+      const { container } = renderComponent();
+      expect(container.firstChild).toBeInTheDocument();
     });
   });
 });
 
 describe('RawYAxis', () => {
-  let w;
   let onChange = jest.fn();
-  const wrapper = (extras) => {
+  const renderComponent = (extras) => {
     const defaults = {
       classes: {},
       className: 'className',
@@ -46,14 +48,16 @@ describe('RawYAxis', () => {
         up: true,
         down: true,
       },
+      rowTickValues: [-1, 0, 1],
+      skipValues: [],
     };
     const props = { ...defaults, ...extras };
-    return shallow(<RawYAxis {...props} />);
+    return render(<RawYAxis {...props} />);
   };
-  describe('snapshot', () => {
-    it('renders', () => {
-      w = wrapper();
-      expect(w).toMatchSnapshot();
+  describe('rendering', () => {
+    it('renders without crashing', () => {
+      const { container } = renderComponent();
+      expect(container.firstChild).toBeInTheDocument();
     });
   });
 });
@@ -61,11 +65,13 @@ describe('RawYAxis', () => {
 const customScaleMock = (distance) => {
   const fn = jest.fn((n) => n * distance);
   fn.invert = jest.fn((n) => n * distance);
+  fn.domain = jest.fn(() => fn);
+  fn.range = jest.fn(() => fn);
+  fn.copy = jest.fn(() => customScaleMock(distance));
   return fn;
 };
 
-describe.only('Axes', () => {
-  let w;
+describe('Axes', () => {
   let onChange = jest.fn();
 
   const customGraphProps = {
@@ -88,7 +94,7 @@ describe.only('Axes', () => {
     },
   };
 
-  const wrapper = (extras) => {
+  const renderComponent = (extras) => {
     const defaults = {
       classes: {},
       className: 'className',
@@ -97,124 +103,114 @@ describe.only('Axes', () => {
     };
 
     const props = { ...defaults, ...extras };
-    return shallow(<Axes {...props} />);
+    return render(<Axes {...props} />);
   };
-  describe('xValues', () => {
-    it('renders', () => {
-      w = wrapper();
-      const result = w.instance().xValues();
-      expect(result).toEqual({
-        columnTicksValues: expect.arrayContaining([-2, -1, 0, 1, 2]),
-        distanceFromOriginToFirstNegativeX: 150,
-        firstNegativeX: -1,
-      });
+  describe('rendering', () => {
+    it('renders without crashing', () => {
+      const { container } = renderComponent();
+      expect(container.firstChild).toBeInTheDocument();
     });
   });
-  describe('yValues', () => {
-    it('renders', () => {
-      w = wrapper();
-      const result = w.instance().yValues();
-      expect(result).toEqual({
-        rowTickValues: expect.arrayContaining([-2, -1, 0, 1, 2]),
-        distanceFromOriginToFirstNegativeY: 200,
-        firstNegativeY: -1,
-      });
-    });
-  });
-});
-
-describe('firstNegativeValue should return undefiend for undefined interval', () => {
-  const interval = undefined;
-  const result = firstNegativeValue(interval);
-  expect(result).toEqual(undefined);
-});
-
-describe('firstNegativeValue should return undefiend for empty interval', () => {
-  const interval = [];
-  const result = firstNegativeValue(interval);
-  expect(result).toEqual(undefined);
 });
 
-describe('firstNegativeValue should return undefined if there is no negative in interval array', () => {
-  const interval = [1, 5, 7, 4, 5];
-  const result = firstNegativeValue(interval);
-  expect(result).toEqual(undefined);
-});
-
-describe('firstNegativeValue should return first negative number from interval', () => {
-  const interval = [1, 5, 7, -2, 4, 5, -1];
-  const result = firstNegativeValue(interval);
-  expect(result).toEqual(-2);
-});
-
-describe('skipValue should be empty array if firstNegativeValue for one of the axes is undefined', () => {
-  // x
-  const intervalX = [1, 2, 3, 4, 5, 6];
-  const firstNegativeX = firstNegativeValue(intervalX);
-  const distanceFromOriginToFirstNegativeX = -22;
-
-  // y
-  const intervalY = [-1, -2, 1, 2, 3, 4, 5, 6];
-  const firstNegativeY = firstNegativeValue(intervalY);
-  const distanceFromOriginToFirstNegativeY = -22;
+describe('firstNegativeValue', () => {
+  it('should return undefined for undefined interval', () => {
+    const interval = undefined;
+    const result = firstNegativeValue(interval);
+    expect(result).toEqual(undefined);
+  });
 
-  const deltaAllowance = 5;
+  it('should return undefined for empty interval', () => {
+    const interval = [];
+    const result = firstNegativeValue(interval);
+    expect(result).toEqual(undefined);
+  });
 
-  const result = sharedValues(
-    firstNegativeX,
-    firstNegativeY,
-    distanceFromOriginToFirstNegativeX,
-    distanceFromOriginToFirstNegativeY,
-    deltaAllowance,
-  );
+  it('should return undefined if there is no negative in interval array', () => {
+    const interval = [1, 5, 7, 4, 5];
+    const result = firstNegativeValue(interval);
+    expect(result).toEqual(undefined);
+  });
 
-  expect(result).toEqual([]);
+  it('should return first negative number from interval', () => {
+    const interval = [1, 5, 7, -2, 4, 5, -1];
+    const result = firstNegativeValue(interval);
+    expect(result).toEqual(-2);
+  });
 });
 
-describe('skipValue should be empty array if firstNegativeX and firstNegativeY are equal but they do not overlap', () => {
-  // x
-  const intervalX = [-1, -2, 1, 2, 3, 4, 5, 6];
-  const firstNegativeX = firstNegativeValue(intervalX);
-  const distanceFromOriginToFirstNegativeX = -7;
-
-  // y
-  const intervalY = [-1, -2, 1, 2, 3, 4, 5, 6];
-  const firstNegativeY = firstNegativeValue(intervalY);
-  const distanceFromOriginToFirstNegativeY = -22;
-
-  const deltaAllowance = 5;
-
-  const result = sharedValues(
-    firstNegativeX,
-    firstNegativeY,
-    distanceFromOriginToFirstNegativeX,
-    distanceFromOriginToFirstNegativeY,
-    deltaAllowance,
-  );
+describe('sharedValues', () => {
+  it('should be empty array if firstNegativeValue for one of the axes is undefined', () => {
+    // x
+    const intervalX = [1, 2, 3, 4, 5, 6];
+    const firstNegativeX = firstNegativeValue(intervalX);
+    const distanceFromOriginToFirstNegativeX = -22;
+
+    // y
+    const intervalY = [-1, -2, 1, 2, 3, 4, 5, 6];
+    const firstNegativeY = firstNegativeValue(intervalY);
+    const distanceFromOriginToFirstNegativeY = -22;
+
+    const deltaAllowance = 5;
+
+    const result = sharedValues(
+      firstNegativeX,
+      firstNegativeY,
+      distanceFromOriginToFirstNegativeX,
+      distanceFromOriginToFirstNegativeY,
+      deltaAllowance,
+    );
+
+    expect(result).toEqual([]);
+  });
 
-  expect(result).toEqual([]);
-});
+  it('should be empty array if firstNegativeX and firstNegativeY are equal but they do not overlap', () => {
+    // x
+    const intervalX = [-1, -2, 1, 2, 3, 4, 5, 6];
+    const firstNegativeX = firstNegativeValue(intervalX);
+    const distanceFromOriginToFirstNegativeX = -7;
 
-describe('skipValue should be -1 if firstNegativeX and firstNegativeY are equal and they overlap', () => {
-  // x
-  const intervalX = [-1, -2, 1, 2, 3, 4, 5, 6];
-  const firstNegativeX = firstNegativeValue(intervalX);
-  const distanceFromOriginToFirstNegativeX = -20;
+    // y
+    const intervalY = [-1, -2, 1, 2, 3, 4, 5, 6];
+    const firstNegativeY = firstNegativeValue(intervalY);
+    const distanceFromOriginToFirstNegativeY = -22;
 
-  // y
-  const intervalY = [-1, -2, 1, 2, 3, 4, 5, 6];
-  const firstNegativeY = firstNegativeValue(intervalY);
-  const distanceFromOriginToFirstNegativeY = -22;
+    const deltaAllowance = 5;
 
-  const deltaAllowance = 5;
+    const result = sharedValues(
+      firstNegativeX,
+      firstNegativeY,
+      distanceFromOriginToFirstNegativeX,
+      distanceFromOriginToFirstNegativeY,
+      deltaAllowance,
+    );
 
-  const result = sharedValues(
-    firstNegativeX,
-    firstNegativeY,
-    distanceFromOriginToFirstNegativeX,
-    distanceFromOriginToFirstNegativeY,
-    deltaAllowance,
-  );
+    expect(result).toEqual([]);
+  });
 
-  expect(result).toEqual([-1]);
+  it('should be -1 if firstNegativeX and firstNegativeY are equal and they overlap', () => {
+    // x
+    const intervalX = [-1, -2, 1, 2, 3, 4, 5, 6];
+    const firstNegativeX = firstNegativeValue(intervalX);
+    const distanceFromOriginToFirstNegativeX = -20;
+
+    // y
+    const intervalY = [-1, -2, 1, 2, 3, 4, 5, 6];
+    const firstNegativeY = firstNegativeValue(intervalY);
+    const distanceFromOriginToFirstNegativeY = -22;
+
+    const deltaAllowance = 5;
+    const dy = -20; // dy needs to be within the range for the condition to pass
+
+    const result = sharedValues(
+      firstNegativeX,
+      firstNegativeY,
+      distanceFromOriginToFirstNegativeX,
+      distanceFromOriginToFirstNegativeY,
+      deltaAllowance,
+      dy,
+    );
+
+    expect(result).toEqual([-1]);
+  });
 });

package/src/axis/arrow.jsx

@@ -1,20 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import classNames from 'classnames';
-import { withStyles } from '@material-ui/core/styles';
+import { styled } from '@mui/material/styles';
 import { types } from '@pie-lib/plot';
 
-const style = (theme) => ({
-  root: {
-    fill: `var(--arrow-color, ${theme.palette.common.black})`,
-  },
-});
+const StyledPath = styled('path')(({ theme }) => ({
+  fill: `var(--arrow-color, ${theme.palette.common.black})`,
+}));
 
 export class Arrow extends React.Component {
   render() {
-    const { x, y, classes, className, scale } = this.props;
-    const names = classNames(classes.root, className);
+    const { x, y, className, scale } = this.props;
     let direction = this.props.direction || 'left';
 
     const xv = scale.x(x);
@@ -40,7 +36,7 @@ export class Arrow extends React.Component {
       transform = getTransform(xv, yv + 15, 270);
     }
 
-    return <path d="m 0,0 8,-5 0,10 -8,-5" transform={transform} className={names} />;
+    return <StyledPath d="m 0,0 8,-5 0,10 -8,-5" transform={transform} className={className} />;
   }
 }
 
@@ -48,7 +44,6 @@ Arrow.propTypes = {
   y: PropTypes.number,
   x: PropTypes.number,
   direction: PropTypes.oneOf(['left', 'right', 'up', 'down']),
-  classes: PropTypes.object.isRequired,
   className: PropTypes.string,
   scale: types.ScaleType.isRequired,
 };
@@ -59,4 +54,4 @@ Arrow.defaultProps = {
   direction: 'left',
 };
 
-export default withStyles(style)(Arrow);
+export default Arrow;