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

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

@@ -0,0 +1,243 @@
+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

@@ -0,0 +1,198 @@
+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, point as pointTool, toolsArr } from '../tools';
+
+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;
+  }),
+}));
+
+const point = {
+  type: 'point',
+  x: 2,
+  y: 2,
+  label: 'Point',
+  showLabel: true,
+};
+
+const line = {
+  type: 'line',
+  from: { x: 0, y: 0 },
+  to: { x: 1, y: 1 },
+  label: 'Line',
+};
+
+const circle = {
+  type: 'circle',
+  edge: { x: 0, y: 0 },
+  root: { x: 2, y: 2 },
+};
+
+const marks = [point, line, circle];
+
+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', 'circle']);
+    const allOthersFalse = new Array(toolsArr.length - 2).fill(false);
+
+    expect(result.filter((r) => r.type === 'line' || r.type === 'circle').map((r) => r.toolbar)).toEqual([true, true]);
+    expect(result.filter((r) => r.type !== 'line' && r.type !== 'circle').map((r) => r.toolbar)).toEqual(
+      allOthersFalse,
+    );
+  });
+});
+
+describe('toolIsAvailable', () => {
+  const tools = setToolbarAvailability(['line', 'circle']);
+
+  it('returns true if tool is available', () => {
+    expect(toolIsAvailable(tools, lineTool())).toEqual(true);
+  });
+
+  it('returns false if tool is not available', () => {
+    expect(toolIsAvailable(tools, pointTool())).toEqual(false);
+  });
+});
+
+describe('getAvailableTool', () => {
+  it('returns the first available tool in list if there is any', () => {
+    const tools = setToolbarAvailability(['line', 'circle']);
+
+    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: 'point' }, { type: 'a' }, { type: 'b' }, { type: 'line' }, { type: 'c' }];
+
+    expect(filterByValidToolTypes(marks)).toEqual([{ type: 'point' }, { type: 'line' }]);
+  });
+});
+
+describe('filterByVisibleToolTypes', () => {
+  it('filters marks by the types that should be visible', () => {
+    expect(
+      filterByVisibleToolTypes(['line', 'circle'], [{ type: 'point' }, { type: 'line' }, { type: 'circle' }]),
+    ).toEqual([{ type: 'line' }, { type: 'circle' }]);
+
+    expect(
+      filterByVisibleToolTypes(['line', 'circle', 'point'], [{ type: 'point' }, { type: 'line' }, { type: 'circle' }]),
+    ).toEqual([{ type: 'point' }, { type: 'line' }, { type: 'circle' }]);
+
+    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 },
+    backgroundMarks: [point, line, circle],
+    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 ToolMenu with toolbar tools', () => {
+      const { container } = renderComponent({ toolbarTools: ['point', 'line'] });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders Graph component', () => {
+      const { container } = renderComponent();
+      expect(container.querySelector('svg')).toBeInTheDocument();
+    });
+  });
+});