@pie-lib/graphing 4.0.5-next.30 → 4.0.5-next.34

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

@@ -0,0 +1,146 @@
+import { render, screen } from '@pie-lib/test-utils';
+import userEvent from '@testing-library/user-event';
+import React from 'react';
+
+import { ToggleBar } from '../toggle-bar';
+
+jest.mock('@pie-lib/drag', () => ({
+  DragProvider: ({ children }) => <div data-testid="drag-provider">{children}</div>,
+}));
+
+jest.mock('@dnd-kit/core', () => ({
+  useDraggable: jest.fn(() => ({
+    attributes: {
+      role: 'button',
+      tabIndex: 0,
+    },
+    listeners: {
+      onPointerDown: jest.fn(),
+    },
+    setNodeRef: jest.fn(),
+    transform: null,
+    transition: null,
+    isDragging: false,
+  })),
+  useDroppable: jest.fn(() => ({
+    setNodeRef: jest.fn(),
+    isOver: false,
+    active: null,
+  })),
+}));
+
+jest.mock('@dnd-kit/utilities', () => ({
+  CSS: {
+    Transform: {
+      toString: jest.fn((transform) => (transform ? 'translate3d(0, 0, 0)' : '')),
+    },
+  },
+}));
+
+jest.mock('@dnd-kit/sortable', () => ({
+  arrayMove: jest.fn((array, from, to) => {
+    const newArray = [...array];
+    const [removed] = newArray.splice(from, 1);
+    newArray.splice(to, 0, removed);
+    return newArray;
+  }),
+}));
+
+jest.mock('@pie-lib/translator', () => ({
+  translator: {
+    t: (key) => {
+      const parts = key.split('.');
+      return parts[parts.length - 1];
+    },
+  },
+}));
+
+describe('ToggleBar', () => {
+  let onChange = jest.fn();
+  let onChangeToolsOrder = jest.fn();
+
+  beforeEach(() => {
+    onChange.mockClear();
+    onChangeToolsOrder.mockClear();
+  });
+
+  const renderComponent = (extras) => {
+    const defaults = {
+      className: 'className',
+      onChange,
+      onChangeToolsOrder,
+      options: ['point', 'line'],
+      language: 'en',
+    };
+    const props = { ...defaults, ...extras };
+    return render(<ToggleBar {...props} />);
+  };
+
+  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('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

@@ -0,0 +1,115 @@
+import { render, screen } from '@pie-lib/test-utils';
+import userEvent from '@testing-library/user-event';
+import React from 'react';
+
+import ToolMenu from '../tool-menu';
+
+jest.mock('@pie-lib/drag', () => ({
+  DragProvider: ({ children }) => <div data-testid="drag-provider">{children}</div>,
+}));
+
+jest.mock('@dnd-kit/core', () => ({
+  useDraggable: jest.fn(() => ({
+    attributes: {
+      role: 'button',
+      tabIndex: 0,
+    },
+    listeners: {
+      onPointerDown: jest.fn(),
+    },
+    setNodeRef: jest.fn(),
+    transform: null,
+    transition: null,
+    isDragging: false,
+  })),
+  useDroppable: jest.fn(() => ({
+    setNodeRef: jest.fn(),
+    isOver: false,
+    active: null,
+  })),
+}));
+
+jest.mock('@dnd-kit/utilities', () => ({
+  CSS: {
+    Transform: {
+      toString: jest.fn((transform) => (transform ? 'translate3d(0, 0, 0)' : '')),
+    },
+  },
+}));
+
+jest.mock('@dnd-kit/sortable', () => ({
+  arrayMove: jest.fn((array, from, to) => {
+    const newArray = [...array];
+    const [removed] = newArray.splice(from, 1);
+    newArray.splice(to, 0, removed);
+    return newArray;
+  }),
+}));
+
+describe('ToolMenu', () => {
+  let onChange = jest.fn();
+  let onChangeTools = jest.fn();
+
+  beforeEach(() => {
+    onChange.mockClear();
+    onChangeTools.mockClear();
+  });
+
+  const renderComponent = (extras) => {
+    const defaults = {
+      className: 'className',
+      onChange,
+      onChangeTools,
+      currentToolType: 'point',
+      toolbarTools: ['point', 'line'],
+      language: 'en',
+    };
+    const props = { ...defaults, ...extras };
+    return render(<ToolMenu {...props} />);
+  };
+
+  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

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

package/src/__tests__/use-debounce.test.js

@@ -0,0 +1,21 @@
+import { useState } from 'react';
+import { useDebounce } from '../use-debounce';
+
+jest.useFakeTimers();
+
+jest.mock('react', () => ({
+  useState: jest.fn(),
+  useEffect: jest.fn((fn, deps) => fn()),
+}));
+
+describe('useDebounce', () => {
+  it('..', () => {
+    const debouncedValue = null;
+    const setDebouncedValue = jest.fn();
+
+    useState.mockReturnValue([debouncedValue, setDebouncedValue]);
+    useDebounce('foo', 1000);
+    jest.runAllTimers();
+    expect(setDebouncedValue).toHaveBeenCalledWith('foo');
+  });
+});

package/src/__tests__/utils.js

@@ -0,0 +1,41 @@
+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;
+};
+
+export const graphProps = (dmin = 0, dmax = 1, rmin = 0, rmax = 1) => ({
+  scale: {
+    x: scaleMock(),
+    y: scaleMock(),
+  },
+  snap: {
+    x: jest.fn((n) => n),
+    y: jest.fn((n) => n),
+  },
+  domain: {
+    min: dmin,
+    max: dmax,
+    step: 1,
+  },
+  range: {
+    min: rmin,
+    max: rmax,
+    step: 1,
+  },
+  size: {
+    width: 400,
+    height: 400,
+  },
+});
+
+export const xy = (x, y, index) => {
+  const out = { x, y, index };
+  if (!Number.isFinite(index)) {
+    delete out.index;
+  }
+  return out;
+};

package/src/__tests__/utils.test.js

@@ -0,0 +1,105 @@
+import * as utils from '../utils';
+
+const xy = (x, y) => ({ x, y });
+
+const tick = (isMajor, v) => ({
+  major: isMajor,
+  value: v,
+  x: v,
+});
+
+const major = tick.bind(null, true);
+const minor = tick.bind(null, false);
+
+describe('utils', () => {
+  describe('polygonToArea', () => {
+    const assertPolygon = (points, area) => {
+      it(`converts ${points} -> ${area}`, () => {
+        const result = utils.polygonToArea(points);
+        expect(result).toEqual(area);
+      });
+    };
+    assertPolygon([xy(0, 0), xy(1, 1), xy(1, -1)], {
+      left: 0,
+      top: 1,
+      bottom: -1,
+      right: 1,
+    });
+    assertPolygon([xy(0, 0), xy(3, 0), xy(2, -1), xy(4, -3), xy(1, -4), xy(2, -2)], {
+      left: 0,
+      top: 0,
+      bottom: -4,
+      right: 4,
+    });
+  });
+
+  describe('lineToArea', () => {
+    const assertLine = (from, to, expected) => {
+      it(`${from},${to} => ${expected}`, () => {
+        const result = utils.lineToArea(from, to);
+        expect(result).toEqual(expected);
+      });
+    };
+
+    assertLine(xy(1, 1), xy(2, 2), { left: 1, top: 2, bottom: 1, right: 2 });
+    assertLine(xy(-1, 4), xy(4, -3), {
+      left: -1,
+      top: 4,
+      bottom: -3,
+      right: 4,
+    });
+  });
+
+  describe('getTickValues', () => {
+    const assertGetTickValues = (props, expected) => {
+      it(` => ${expected}`, () => {
+        const result = utils.getTickValues(props);
+        expect(result).toEqual(expected);
+      });
+    };
+
+    assertGetTickValues({ min: 0, max: 10, step: 1 }, [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
+    assertGetTickValues({ min: 0, max: 3, step: 0.5 }, [0, 0.5, 1, 1.5, 2, 2.5, 3]);
+    assertGetTickValues({ min: -0.2, max: 2, step: 0.6 }, [0, 0.6, 1.2, 1.8]);
+    assertGetTickValues({ min: -3.4, max: 6.2, step: 1.2 }, [0, -1.2, -2.4, 1.2, 2.4, 3.6, 4.8, 6]);
+
+    assertGetTickValues(
+      { min: 0.6, max: 4.8, step: 0.3 },
+      [0.6, 0.9, 1.2, 1.5, 1.8, 2.1, 2.4, 2.7, 3.0, 3.3, 3.6, 3.9, 4.2, 4.5, 4.8],
+    );
+    assertGetTickValues(
+      { min: 0.5, max: 4.9, step: 0.3 },
+      [0.6, 0.9, 1.2, 1.5, 1.8, 2.1, 2.4, 2.7, 3.0, 3.3, 3.6, 3.9, 4.2, 4.5, 4.8],
+    );
+    assertGetTickValues(
+      { min: 0, max: 3, step: 0.125 },
+      [
+        0, 0.125, 0.25, 0.375, 0.5, 0.625, 0.75, 0.875, 1, 1.125, 1.25, 1.375, 1.5, 1.625, 1.75, 1.875, 2, 2.125, 2.25,
+        2.375, 2.5, 2.625, 2.75, 2.875, 3,
+      ],
+    );
+  });
+
+  describe('countWords', () => {
+    it('should return 1 if label is undefined', () => {
+      const label = undefined;
+      const result = utils.countWords(label);
+
+      expect(result).toEqual(1);
+    });
+
+    it('should return 1 if label is null', () => {
+      const label = null;
+      const result = utils.countWords(label);
+
+      expect(result).toEqual(1);
+    });
+
+    it('should return 3 if label has 3 words', () => {
+      const label = 'Number of months';
+      const result = utils.countWords(label);
+
+      expect(result).toEqual(3);
+    });
+  });
+});

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

@@ -0,0 +1,38 @@
+import { render } from '@pie-lib/test-utils';
+import React from 'react';
+import { Arrow } from '../arrow';
+
+describe('Arrow', () => {
+  let onChange = jest.fn();
+  const renderComponent = (extras) => {
+    const defaults = {
+      classes: {},
+      className: 'className',
+      onChange,
+      scale: {
+        x: jest.fn((n) => n),
+        y: jest.fn((n) => n),
+      },
+    };
+    const props = { ...defaults, ...extras };
+    return render(<Arrow {...props} />);
+  };
+  describe('rendering', () => {
+    it('renders with direction up', () => {
+      const { container } = renderComponent({ direction: 'up' });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+    it('renders with direction down', () => {
+      const { container } = renderComponent({ direction: 'down' });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+    it('renders with direction left', () => {
+      const { container } = renderComponent({ direction: 'left' });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+    it('renders with direction right', () => {
+      const { container } = renderComponent({ direction: 'right' });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+  });
+});

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

@@ -0,0 +1,216 @@
+import { render } from '@pie-lib/test-utils';
+import React from 'react';
+import { graphProps } from '../../__tests__/utils';
+
+import Axes, { firstNegativeValue, RawXAxis, RawYAxis, sharedValues } from '../axes';
+
+describe('RawXAxis', () => {
+  let onChange = jest.fn();
+  const renderComponent = (extras) => {
+    const defaults = {
+      classes: {},
+      className: 'className',
+      onChange,
+      graphProps: graphProps(),
+      includeArrows: {
+        left: true,
+        right: true,
+        up: true,
+        down: true,
+      },
+      columnTicksValues: [-1, 0, 1],
+      skipValues: [],
+      distanceFromOriginToFirstNegativeY: 0,
+      dy: 0,
+    };
+    const props = { ...defaults, ...extras };
+    return render(<RawXAxis {...props} />);
+  };
+  describe('rendering', () => {
+    it('renders without crashing', () => {
+      const { container } = renderComponent();
+      expect(container.firstChild).toBeInTheDocument();
+    });
+  });
+});
+
+describe('RawYAxis', () => {
+  let onChange = jest.fn();
+  const renderComponent = (extras) => {
+    const defaults = {
+      classes: {},
+      className: 'className',
+      onChange,
+      graphProps: graphProps(),
+      includeArrows: {
+        left: true,
+        right: true,
+        up: true,
+        down: true,
+      },
+      rowTickValues: [-1, 0, 1],
+      skipValues: [],
+    };
+    const props = { ...defaults, ...extras };
+    return render(<RawYAxis {...props} />);
+  };
+  describe('rendering', () => {
+    it('renders without crashing', () => {
+      const { container } = renderComponent();
+      expect(container.firstChild).toBeInTheDocument();
+    });
+  });
+});
+
+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('Axes', () => {
+  let onChange = jest.fn();
+
+  const customGraphProps = {
+    ...graphProps(),
+    domain: {
+      min: -2,
+      max: 2,
+      labelStep: 1,
+      step: 1,
+    },
+    range: {
+      min: -2,
+      max: 2,
+      step: 1,
+      labelStep: 1,
+    },
+    scale: {
+      x: customScaleMock(200),
+      y: customScaleMock(150),
+    },
+  };
+
+  const renderComponent = (extras) => {
+    const defaults = {
+      classes: {},
+      className: 'className',
+      onChange,
+      graphProps: customGraphProps,
+    };
+
+    const props = { ...defaults, ...extras };
+    return render(<Axes {...props} />);
+  };
+  describe('rendering', () => {
+    it('renders without crashing', () => {
+      const { container } = renderComponent();
+      expect(container.firstChild).toBeInTheDocument();
+    });
+  });
+});
+
+describe('firstNegativeValue', () => {
+  it('should return undefined for undefined interval', () => {
+    const interval = undefined;
+    const result = firstNegativeValue(interval);
+    expect(result).toEqual(undefined);
+  });
+
+  it('should return undefined for empty interval', () => {
+    const interval = [];
+    const result = firstNegativeValue(interval);
+    expect(result).toEqual(undefined);
+  });
+
+  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);
+  });
+
+  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('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([]);
+  });
+
+  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;
+
+    // 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([]);
+  });
+
+  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]);
+  });
+});