@pie-lib/graphing-solution-set 4.1.0-beta.8 → 5.0.0-next.20261002094057

package/src/__tests__/bg.test.jsx

@@ -1,250 +0,0 @@
-import React from 'react';
-import { render } from '@pie-lib/test-utils';
-import { select } from 'd3-selection';
-import Bg from '../bg';
-
-jest.mock('d3-selection', () => ({
-  select: jest.fn(),
-  pointer: jest.fn(() => [50, 50]),
-}));
-
-describe('Bg', () => {
-  let defaultProps;
-  let mockRect;
-  let clickHandler;
-
-  beforeEach(() => {
-    clickHandler = null;
-    mockRect = {
-      on: jest.fn((event, handler) => {
-        if (event === 'click') {
-          clickHandler = handler;
-        }
-      }),
-      node: jest.fn(() => ({})),
-    };
-
-    select.mockReturnValue(mockRect);
-
-    defaultProps = {
-      width: 500,
-      height: 400,
-      onClick: jest.fn(),
-      graphProps: {
-        domain: { min: -10, max: 10, step: 1, label: 'x', axisLabel: 'X' },
-        range: { min: -10, max: 10, step: 1, label: 'y', axisLabel: 'Y' },
-        size: { width: 500, height: 400 },
-        scale: {
-          x: {
-            invert: jest.fn((val) => val / 10),
-          },
-          y: {
-            invert: jest.fn((val) => val / 10),
-          },
-        },
-      },
-    };
-  });
-
-  describe('rendering', () => {
-    it('renders without crashing', () => {
-      const { container } = render(<Bg {...defaultProps} />);
-      expect(container).toBeTruthy();
-    });
-
-    it('renders a rect element', () => {
-      const { container } = render(<Bg {...defaultProps} />);
-      const rect = container.querySelector('rect');
-      expect(rect).toBeTruthy();
-    });
-
-    it('applies correct dimensions', () => {
-      const { container } = render(<Bg {...defaultProps} />);
-      const rect = container.querySelector('rect');
-
-      // Width and height should be expanded by padding * 2
-      const padding = 10; // default padding
-      expect(rect.getAttribute('width')).toBe(String(defaultProps.width + padding * 2));
-      expect(rect.getAttribute('height')).toBe(String(defaultProps.height + padding * 2));
-    });
-
-    it('applies correct transform', () => {
-      const { container } = render(<Bg {...defaultProps} />);
-      const rect = container.querySelector('rect');
-      const padding = 10;
-
-      expect(rect.getAttribute('transform')).toBe(`translate(-${padding}, -${padding})`);
-    });
-
-    it('sets fill opacity to make it invisible', () => {
-      const { container } = render(<Bg {...defaultProps} />);
-      const rect = container.querySelector('rect');
-
-      expect(rect.getAttribute('fill-opacity')).toBe('0.0');
-    });
-  });
-
-  describe('componentDidMount', () => {
-    it('attaches click handler to rect', () => {
-      render(<Bg {...defaultProps} />);
-
-      expect(select).toHaveBeenCalled();
-      expect(mockRect.on).toHaveBeenCalledWith('click', expect.any(Function));
-    });
-  });
-
-  describe('getRectPadding', () => {
-    it('returns 10 for normal graphs', () => {
-      const { container } = render(<Bg {...defaultProps} />);
-      const rect = container.querySelector('rect');
-      const padding = 10;
-
-      expect(rect.getAttribute('width')).toBe(String(defaultProps.width + padding * 2));
-    });
-
-    it('returns 6 for graphs with thinner shapes', () => {
-      const props = {
-        ...defaultProps,
-        graphProps: {
-          ...defaultProps.graphProps,
-          domain: { min: -100, max: 100, step: 1, label: 'x', axisLabel: 'X' },
-        },
-      };
-
-      const { container } = render(<Bg {...props} />);
-      const rect = container.querySelector('rect');
-      const padding = 6;
-
-      expect(rect.getAttribute('width')).toBe(String(props.width + padding * 2));
-    });
-  });
-
-  describe('onRectClick', () => {
-    it('calls onClick with snapped coordinates', () => {
-      const { pointer } = require('d3-selection');
-      pointer.mockReturnValue([100, 100]);
-
-      render(<Bg {...defaultProps} />);
-
-      const event = new MouseEvent('click');
-      clickHandler(event);
-
-      expect(defaultProps.onClick).toHaveBeenCalled();
-      const calledWith = defaultProps.onClick.mock.calls[0][0];
-      expect(calledWith).toHaveProperty('x');
-      expect(calledWith).toHaveProperty('y');
-    });
-
-    it('snaps coordinates to nearest tick', () => {
-      const { pointer } = require('d3-selection');
-
-      render(<Bg {...defaultProps} />);
-
-      const event = new MouseEvent('click');
-      clickHandler(event);
-
-      expect(defaultProps.onClick).toHaveBeenCalled();
-      const { x, y } = defaultProps.onClick.mock.calls[0][0];
-
-      expect(Number.isInteger(x) || x.toString().length <= 4).toBe(true);
-      expect(Number.isInteger(y) || y.toString().length <= 4).toBe(true);
-    });
-
-    it('accounts for padding when converting coordinates', () => {
-      const { pointer } = require('d3-selection');
-      const coords = [50, 50];
-      pointer.mockReturnValue(coords);
-
-      render(<Bg {...defaultProps} />);
-
-      const event = new MouseEvent('click');
-      clickHandler(event);
-
-      expect(defaultProps.graphProps.scale.x.invert).toHaveBeenCalled();
-      expect(defaultProps.graphProps.scale.y.invert).toHaveBeenCalled();
-    });
-  });
-
-  describe('shouldComponentUpdate', () => {
-    it('returns true when width changes', () => {
-      const { rerender } = render(<Bg {...defaultProps} />);
-      const newProps = {
-        ...defaultProps,
-        width: 600,
-        graphProps: {
-          ...defaultProps.graphProps,
-          size: { width: 600, height: defaultProps.height },
-        },
-      };
-
-      expect(() => {
-        rerender(<Bg {...newProps} />);
-      }).not.toThrow();
-    });
-
-    it('returns true when height changes', () => {
-      const { rerender } = render(<Bg {...defaultProps} />);
-      const newProps = {
-        ...defaultProps,
-        height: 500,
-        graphProps: {
-          ...defaultProps.graphProps,
-          size: { width: defaultProps.width, height: 500 },
-        },
-      };
-
-      expect(() => {
-        rerender(<Bg {...newProps} />);
-      }).not.toThrow();
-    });
-
-    it('returns true when graphProps domain/range changes', () => {
-      const { rerender } = render(<Bg {...defaultProps} />);
-      const newProps = {
-        ...defaultProps,
-        graphProps: {
-          ...defaultProps.graphProps,
-          domain: { min: -5, max: 5, step: 1, label: 'x', axisLabel: 'X' },
-        },
-      };
-
-      expect(() => {
-        rerender(<Bg {...newProps} />);
-      }).not.toThrow();
-    });
-  });
-
-  describe('edge cases', () => {
-    it('handles zero dimensions', () => {
-      const props = { ...defaultProps, width: 0, height: 0 };
-      const { container } = render(<Bg {...props} />);
-      const rect = container.querySelector('rect');
-
-      expect(rect).toBeTruthy();
-    });
-
-    it('handles large dimensions', () => {
-      const props = { ...defaultProps, width: 10000, height: 10000 };
-      const { container } = render(<Bg {...props} />);
-      const rect = container.querySelector('rect');
-
-      expect(rect).toBeTruthy();
-      expect(rect.getAttribute('width')).toBe('10020');
-      expect(rect.getAttribute('height')).toBe('10020');
-    });
-
-    it('handles negative coordinates in domain/range', () => {
-      const props = {
-        ...defaultProps,
-        graphProps: {
-          ...defaultProps.graphProps,
-          domain: { min: -100, max: -10, step: 1, label: 'x', axisLabel: 'X' },
-          range: { min: -100, max: -10, step: 1, label: 'y', axisLabel: 'Y' },
-        },
-      };
-
-      const { container } = render(<Bg {...props} />);
-      expect(container.querySelector('rect')).toBeTruthy();
-    });
-  });
-});

package/src/__tests__/coordinates-label.test.jsx

@@ -1,243 +0,0 @@
-import React from 'react';
-import { render } from '@pie-lib/test-utils';
-import { CoordinatesLabel, getLabelPosition } from '../coordinates-label';
-
-describe('CoordinatesLabel', () => {
-  let defaultProps;
-  let graphProps;
-
-  beforeEach(() => {
-    graphProps = {
-      domain: { min: -10, max: 10, step: 1, label: 'x', axisLabel: 'X' },
-      range: { min: -10, max: 10, step: 1, label: 'y', axisLabel: 'Y' },
-      scale: {
-        x: jest.fn((val) => (val + 10) * 20),
-        y: jest.fn((val) => (10 - val) * 20),
-      },
-    };
-
-    defaultProps = {
-      x: 5,
-      y: 5,
-      graphProps,
-    };
-  });
-
-  describe('rendering', () => {
-    it('renders without crashing', () => {
-      const { container } = render(<CoordinatesLabel {...defaultProps} />);
-      expect(container).toBeTruthy();
-    });
-
-    it('displays formatted coordinates', () => {
-      const { container } = render(<CoordinatesLabel {...defaultProps} />);
-      const input = container.querySelector('input');
-
-      expect(input.value).toBe('(5, 5)');
-    });
-
-    it('rounds coordinates to 4 decimal places', () => {
-      const props = { ...defaultProps, x: 1.123456, y: 2.987654 };
-      const { container } = render(<CoordinatesLabel {...props} />);
-      const input = container.querySelector('input');
-
-      expect(input.value).toBe('(1.1235, 2.9877)');
-    });
-
-    it('handles integer coordinates', () => {
-      const props = { ...defaultProps, x: 0, y: 0 };
-      const { container } = render(<CoordinatesLabel {...props} />);
-      const input = container.querySelector('input');
-
-      expect(input.value).toBe('(0, 0)');
-    });
-
-    it('handles negative coordinates', () => {
-      const props = { ...defaultProps, x: -3, y: -7 };
-      const { container } = render(<CoordinatesLabel {...props} />);
-      const input = container.querySelector('input');
-
-      expect(input.value).toBe('(-3, -7)');
-    });
-
-    it('renders as an input element', () => {
-      const { container } = render(<CoordinatesLabel {...defaultProps} />);
-      const input = container.querySelector('input');
-
-      expect(input).toBeTruthy();
-      expect(input.tagName).toBe('INPUT');
-    });
-
-    it('applies correct styles', () => {
-      const { container } = render(<CoordinatesLabel {...defaultProps} />);
-      const wrapper = container.firstChild;
-
-      expect(wrapper).toHaveStyle({ position: 'absolute' });
-      expect(wrapper).toHaveStyle({ pointerEvents: 'auto' });
-    });
-  });
-
-  describe('getLabelPosition', () => {
-    it('positions label to the right by default', () => {
-      const position = getLabelPosition(graphProps, 0, 0, 60);
-
-      expect(position.left).toBeGreaterThan(graphProps.scale.x(0));
-      expect(position.top).toBeDefined();
-    });
-
-    it('positions label to the left when near right edge', () => {
-      const x = 9; // Near max
-      const labelLength = 100;
-      const position = getLabelPosition(graphProps, x, 0, labelLength);
-
-      expect(position.left).toBeLessThan(graphProps.scale.x(x));
-    });
-
-    it('adjusts top position for minimum y value', () => {
-      const position = getLabelPosition(graphProps, 0, -10, 60);
-
-      expect(position.top).toBe(graphProps.scale.y(-10) - 16);
-    });
-
-    it('adjusts top position for maximum y value', () => {
-      const position = getLabelPosition(graphProps, 0, 10, 60);
-
-      expect(position.top).toBe(graphProps.scale.y(10) - 0);
-    });
-
-    it('centers label vertically for middle values', () => {
-      const position = getLabelPosition(graphProps, 0, 0, 60);
-
-      expect(position.top).toBe(graphProps.scale.y(0) - 8);
-    });
-
-    it('applies left shift consistently', () => {
-      const leftShift = 10;
-      const labelLength = 60;
-
-      const rightPos = getLabelPosition(graphProps, 0, 0, labelLength);
-      expect(rightPos.left).toBe(graphProps.scale.x(0) + leftShift);
-
-      const leftPos = getLabelPosition(graphProps, 9, 0, labelLength);
-      expect(leftPos.left).toBe(graphProps.scale.x(9) - leftShift - labelLength);
-    });
-  });
-
-  describe('label width calculation', () => {
-    it('calculates width based on label length', () => {
-      const props = { ...defaultProps, x: 1, y: 2 };
-      const { container } = render(<CoordinatesLabel {...props} />);
-      const wrapper = container.firstChild;
-
-      const expectedWidth = 6 * 6;
-      expect(wrapper).toHaveStyle({ width: `${expectedWidth}px` });
-    });
-
-    it('adjusts width for longer coordinates', () => {
-      const props = { ...defaultProps, x: -10.123, y: 10.456 };
-      const { container } = render(<CoordinatesLabel {...props} />);
-      const wrapper = container.firstChild;
-
-      const style = window.getComputedStyle(wrapper);
-      expect(parseInt(style.width)).toBeGreaterThan(42);
-    });
-  });
-
-  describe('edge cases', () => {
-    it('handles very small coordinates', () => {
-      const props = { ...defaultProps, x: 0.0001, y: 0.0002 };
-      const { container } = render(<CoordinatesLabel {...props} />);
-      const input = container.querySelector('input');
-
-      expect(input.value).toContain('(');
-      expect(input.value).toContain(')');
-      expect(input.value).toContain(',');
-    });
-
-    it('handles very large coordinates', () => {
-      const props = { ...defaultProps, x: 999999, y: 888888 };
-      const { container } = render(<CoordinatesLabel {...props} />);
-      const input = container.querySelector('input');
-
-      expect(input.value).toBe('(999999, 888888)');
-    });
-
-    it('handles zero coordinates', () => {
-      const props = { ...defaultProps, x: 0, y: 0 };
-      const { container } = render(<CoordinatesLabel {...props} />);
-      const input = container.querySelector('input');
-
-      expect(input.value).toBe('(0, 0)');
-    });
-
-    it('handles coordinates at domain/range boundaries', () => {
-      const props = { ...defaultProps, x: 10, y: 10 };
-      const { container } = render(<CoordinatesLabel {...props} />);
-      const input = container.querySelector('input');
-
-      expect(input.value).toBe('(10, 10)');
-    });
-
-    it('handles negative boundaries', () => {
-      const props = { ...defaultProps, x: -10, y: -10 };
-      const { container } = render(<CoordinatesLabel {...props} />);
-      const input = container.querySelector('input');
-
-      expect(input.value).toBe('(-10, -10)');
-    });
-  });
-
-  describe('prop types and validation', () => {
-    it('accepts required props', () => {
-      expect(() => {
-        render(<CoordinatesLabel {...defaultProps} />);
-      }).not.toThrow();
-    });
-
-    it('renders with missing optional props', () => {
-      const props = {
-        x: 1,
-        y: 2,
-        graphProps,
-      };
-
-      expect(() => {
-        render(<CoordinatesLabel {...props} />);
-      }).not.toThrow();
-    });
-  });
-
-  describe('updates', () => {
-    it('updates when x coordinate changes', () => {
-      const { container, rerender } = render(<CoordinatesLabel {...defaultProps} />);
-      let input = container.querySelector('input');
-      expect(input.value).toBe('(5, 5)');
-
-      rerender(<CoordinatesLabel {...defaultProps} x={7} />);
-      input = container.querySelector('input');
-      expect(input.value).toBe('(7, 5)');
-    });
-
-    it('updates when y coordinate changes', () => {
-      const { container, rerender } = render(<CoordinatesLabel {...defaultProps} />);
-      let input = container.querySelector('input');
-      expect(input.value).toBe('(5, 5)');
-
-      rerender(<CoordinatesLabel {...defaultProps} y={3} />);
-      input = container.querySelector('input');
-      expect(input.value).toBe('(5, 3)');
-    });
-
-    it('updates position when coordinates change', () => {
-      const { container, rerender } = render(<CoordinatesLabel {...defaultProps} />);
-      const initialStyle = window.getComputedStyle(container.firstChild);
-      const initialLeft = initialStyle.left;
-
-      rerender(<CoordinatesLabel {...defaultProps} x={8} />);
-      const newStyle = window.getComputedStyle(container.firstChild);
-      const newLeft = newStyle.left;
-
-      expect(newLeft).not.toBe(initialLeft);
-    });
-  });
-});

package/src/__tests__/graph-with-controls.test.jsx

@@ -1,184 +0,0 @@
-import { render } from '@pie-lib/test-utils';
-import React from 'react';
-import {
-  filterByValidToolTypes,
-  filterByVisibleToolTypes,
-  getAvailableTool,
-  GraphWithControls,
-  setToolbarAvailability,
-  toolIsAvailable,
-} from '../graph-with-controls';
-import { allTools, line as lineTool, toolsArr } from '../tools';
-
-// Mock DragProvider to avoid @dnd-kit React version conflicts
-jest.mock('@pie-lib/drag', () => ({
-  DragProvider: ({ children }) => <div data-testid="drag-provider">{children}</div>,
-}));
-
-// Mock @dnd-kit/core hooks to avoid DndContext requirement
-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,
-  })),
-}));
-
-// Mock @dnd-kit/utilities for CSS transform
-jest.mock('@dnd-kit/utilities', () => ({
-  CSS: {
-    Transform: {
-      toString: jest.fn((transform) => (transform ? 'translate3d(0, 0, 0)' : '')),
-    },
-  },
-}));
-
-// Mock @dnd-kit/sortable for arrayMove
-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;
-  }),
-}));
-
-const line = {
-  type: 'line',
-  from: { x: 0, y: 0 },
-  to: { x: 1, y: 1 },
-  label: 'Line',
-  building: true,
-};
-
-const polygon = {
-  type: 'polygon',
-  points: [
-    { x: 0, y: 0 },
-    { x: 1, y: 1 },
-    { x: 2, y: 2 },
-  ],
-};
-
-const marks = [line, polygon];
-
-// Pure function tests - keep as-is
-describe('setToolbarAvailability', () => {
-  it('sets `toolbar: true` if tool should be displayed in toolbar - all tools', () => {
-    const result = setToolbarAvailability(allTools);
-    const allTrue = new Array(toolsArr.length).fill(true);
-
-    expect(result.map((r) => r.toolbar)).toEqual(allTrue);
-  });
-
-  it('sets `toolbar: true` if tool should be displayed in toolbar - few tools', () => {
-    const result = setToolbarAvailability(['line', 'polygon']);
-    const allOthersFalse = new Array(toolsArr.length - 2).fill(false);
-
-    expect(result.filter((r) => r.type === 'line' || r.type === 'polygon').map((r) => r.toolbar)).toEqual([true, true]);
-    expect(result.filter((r) => r.type !== 'line' && r.type !== 'polygon').map((r) => r.toolbar)).toEqual(
-      allOthersFalse,
-    );
-  });
-});
-
-describe('toolIsAvailable', () => {
-  const tools = setToolbarAvailability(['line', 'polygon']);
-
-  it('returns true if tool is available', () => {
-    expect(toolIsAvailable(tools, lineTool())).toEqual(true);
-  });
-});
-
-describe('getAvailableTool', () => {
-  it('returns the first available tool in list if there is any', () => {
-    const tools = setToolbarAvailability(['line', 'polygon']);
-
-    expect(getAvailableTool(tools).toolbar).toEqual(true);
-  });
-
-  it('returns undefined list if there is no available tool', () => {
-    const tools = setToolbarAvailability([]);
-
-    expect(getAvailableTool(tools)).toEqual(undefined);
-  });
-});
-
-describe('filterByValidToolTypes', () => {
-  it('filters marks by valid types', () => {
-    const marks = [{ type: 'polygon' }, { type: 'a' }, { type: 'b' }, { type: 'line' }, { type: 'c' }];
-
-    expect(filterByValidToolTypes(marks)).toEqual([{ type: 'polygon' }, { type: 'line' }]);
-  });
-});
-
-describe('filterByVisibleToolTypes', () => {
-  it('filters marks by the types that should be visible', () => {
-    expect(
-      filterByVisibleToolTypes(['line', 'polygon'], [{ type: 'point' }, { type: 'line' }, { type: 'polygon' }]),
-    ).toEqual([{ type: 'line' }, { type: 'polygon' }]);
-
-    expect(filterByVisibleToolTypes(['line'], [{ type: 'point' }, { type: 'line' }, { type: 'circle' }])).toEqual([
-      { type: 'line' },
-    ]);
-
-    expect(filterByVisibleToolTypes(['segment'], [{ type: 'point' }, { type: 'line' }, { type: 'circle' }])).toEqual(
-      [],
-    );
-  });
-});
-
-describe('GraphWithControls', () => {
-  let onChangeMarks = jest.fn();
-
-  beforeEach(() => {
-    onChangeMarks.mockClear();
-  });
-
-  const defaultProps = () => ({
-    axesSettings: { includeArrows: true },
-    className: '',
-    coordinatesOnHover: false,
-    domain: { min: 0, max: 10, step: 1 },
-    labels: { top: 'a', left: 'b', right: 'c', bottom: 'd' },
-    labelModeEnabled: true,
-    marks,
-    onChangeMarks,
-    range: { min: 0, max: 10, step: 1 },
-    size: { width: 500, height: 500 },
-    title: 'Title',
-    toolbarTools: allTools,
-    language: 'en',
-  });
-  const initialProps = defaultProps();
-
-  const renderComponent = (extras) => {
-    const props = { ...initialProps, ...extras };
-    return render(<GraphWithControls {...props} />);
-  };
-
-  describe('rendering', () => {
-    it('renders without crashing', () => {
-      const { container } = renderComponent();
-      expect(container.firstChild).toBeInTheDocument();
-    });
-
-    it('renders Graph component', () => {
-      const { container } = renderComponent();
-      expect(container.querySelector('svg')).toBeInTheDocument();
-    });
-  });
-});