@pie-lib/graphing 4.0.23 → 4.0.24-beta.1

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

@@ -1,437 +0,0 @@
-import { act, fireEvent, render } from '@pie-lib/test-utils';
-import React from 'react';
-import { coordinates, MarkLabel, position } from '../mark-label';
-import { graphProps as getGraphProps } from './utils';
-
-describe('MarkLabel', () => {
-  let onChange = jest.fn();
-  let inputRef = jest.fn();
-  const renderComponent = (extras) => {
-    const defaults = {
-      classes: {},
-      className: 'className',
-      onChange,
-      inputRef,
-      mark: { x: 1, y: 1 },
-      graphProps: getGraphProps(0, 10, 0, 10),
-    };
-    const props = { ...defaults, ...extras };
-    return render(<MarkLabel {...props} />);
-  };
-  describe('rendering', () => {
-    it('renders without crashing', () => {
-      const { container } = renderComponent();
-      expect(container.firstChild).toBeInTheDocument();
-    });
-    it('renders with different mark position', () => {
-      const { container } = renderComponent({ mark: { x: 10, y: 10 } });
-      expect(container.firstChild).toBeInTheDocument();
-    });
-  });
-});
-
-describe('MarkLabel - editing', () => {
-  let onChange;
-  let onBlur;
-
-  beforeEach(() => {
-    onChange = jest.fn();
-    onBlur = jest.fn();
-  });
-
-  // the label input is the only input MarkLabel renders (react-input-autosize)
-  const input = (container) => container.querySelector('input');
-
-  const renderComponent = (extras) => {
-    const defaults = {
-      onChange,
-      onBlur,
-      inputRef: jest.fn(),
-      mark: { x: 1, y: 1, label: '' },
-      graphProps: getGraphProps(0, 10, 0, 10),
-    };
-    const props = { ...defaults, ...extras };
-    const result = render(<MarkLabel {...props} />);
-
-    return {
-      ...result,
-      input: input(result.container),
-      rerenderWith: (next) => result.rerender(<MarkLabel {...props} {...next} />),
-    };
-  };
-
-  describe('autoFocus', () => {
-    it('focuses the input so a new label can be typed into right away', () => {
-      const { input } = renderComponent({ autoFocus: true });
-
-      expect(document.activeElement).toBe(input);
-    });
-
-    it('leaves the caret at the end of an existing label', () => {
-      const { input } = renderComponent({ autoFocus: true, mark: { x: 1, y: 1, label: 'AB' } });
-
-      expect(document.activeElement).toBe(input);
-      expect(input.selectionStart).toBe(2);
-      expect(input.selectionEnd).toBe(2);
-    });
-
-    it('does not focus the input of an existing label when autoFocus is not set', () => {
-      const { input } = renderComponent({ mark: { x: 1, y: 1, label: 'A' } });
-
-      expect(document.activeElement).not.toBe(input);
-    });
-
-    it('does not focus the input when disabled', () => {
-      const { input } = renderComponent({ autoFocus: true, disabled: true, mark: { x: 1, y: 1, label: 'A' } });
-
-      expect(document.activeElement).not.toBe(input);
-    });
-
-    it('does not focus the input of a disabled mark', () => {
-      const { input } = renderComponent({ autoFocus: true, mark: { x: 1, y: 1, label: 'A', disabled: true } });
-
-      expect(document.activeElement).not.toBe(input);
-    });
-
-    // the focus can go away without this component hearing about it - the input node gets replaced
-    // by a render higher up, so no blur is fired and autoFocus is still on
-    it('takes the focus back on the next render while it is still being edited', () => {
-      const { input, rerenderWith } = renderComponent({ autoFocus: true, mark: { x: 1, y: 1, label: 'A' } });
-
-      expect(document.activeElement).toBe(input);
-
-      input.blur();
-      expect(document.activeElement).not.toBe(input);
-
-      rerenderWith({ mark: { x: 1, y: 1, label: 'A' } });
-
-      expect(document.activeElement).toBe(input);
-    });
-
-    it('leaves the caret where the user put it while the input has the focus', () => {
-      const { input, rerenderWith } = renderComponent({ autoFocus: true, mark: { x: 1, y: 1, label: 'ABC' } });
-
-      input.setSelectionRange(1, 1);
-
-      rerenderWith({ mark: { x: 1, y: 1, label: 'ABC' } });
-
-      expect(document.activeElement).toBe(input);
-      expect(input.selectionStart).toBe(1);
-    });
-
-    it('focuses the input once it is no longer disabled', () => {
-      const { rerenderWith, container } = renderComponent({ autoFocus: true, disabled: true });
-
-      rerenderWith({ disabled: false });
-
-      expect(document.activeElement).toBe(input(container));
-    });
-
-    // the host saves the model with an api call and the model that comes back can replace the
-    // input node - the label has to keep the focus across that remount
-    it('re-focuses the input when it is remounted while being edited', () => {
-      const props = {
-        autoFocus: true,
-        onChange,
-        inputRef: jest.fn(),
-        mark: { x: 1, y: 1, label: 'A' },
-        graphProps: getGraphProps(0, 10, 0, 10),
-      };
-      const { container, rerender } = render(<MarkLabel key="first" {...props} />);
-      const first = input(container);
-
-      expect(document.activeElement).toBe(first);
-
-      rerender(<MarkLabel key="second" {...props} />);
-      const second = input(container);
-
-      expect(second).not.toBe(first);
-      expect(document.activeElement).toBe(second);
-    });
-  });
-
-  // the tool asks for the focus with autoFocus, but its state can be gone before the input renders:
-  // the marks come back from the host asynchronously and can remount the tool. An empty label in
-  // label mode is a label the user has just added, so the input can tell on its own.
-  describe('a label that was just added', () => {
-    it('focuses itself without the tool asking', () => {
-      const { input } = renderComponent({ mark: { x: 1, y: 1, label: '' } });
-
-      expect(document.activeElement).toBe(input);
-    });
-
-    it('focuses itself again when it is remounted before it was typed into', () => {
-      const props = {
-        onChange,
-        onBlur,
-        inputRef: jest.fn(),
-        mark: { x: 1, y: 1, label: '' },
-        graphProps: getGraphProps(0, 10, 0, 10),
-      };
-      const { container, rerender } = render(<MarkLabel key="first" {...props} />);
-      const first = input(container);
-
-      rerender(<MarkLabel key="second" {...props} />);
-      const second = input(container);
-
-      expect(second).not.toBe(first);
-      expect(document.activeElement).toBe(second);
-    });
-
-    it('stops chasing the focus once it has been left', () => {
-      const { input, rerenderWith } = renderComponent({ mark: { x: 1, y: 1, label: '' } });
-
-      expect(document.activeElement).toBe(input);
-
-      input.blur();
-      rerenderWith({ mark: { x: 1, y: 1, label: '' } });
-
-      expect(document.activeElement).not.toBe(input);
-    });
-
-    // outside of label mode the input is disabled, which is how an empty label that was loaded with
-    // the item is told apart from one the user has just added - label mode always starts off
-    // the config draws the background marks into the correct answer graphs as disabled marks
-    it('is not rendered at all while it cannot be edited', () => {
-      const { container } = renderComponent({ disabled: true, mark: { x: 1, y: 1, label: '' } });
-
-      expect(container.querySelector('input')).toBe(null);
-    });
-
-    it('is still rendered uneditable once it has text', () => {
-      const { container } = renderComponent({ disabled: true, mark: { x: 1, y: 1, label: 'A' } });
-
-      expect(container.querySelector('input').value).toBe('A');
-    });
-
-    it('is not focused when label mode is turned on afterwards', () => {
-      const { rerenderWith, container } = renderComponent({ disabled: true, mark: { x: 1, y: 1, label: '' } });
-
-      rerenderWith({ disabled: false });
-
-      expect(input(container)).not.toBe(null);
-      expect(document.activeElement).not.toBe(input(container));
-    });
-
-    it('is not rendered for a disabled mark while it is empty', () => {
-      const { container } = renderComponent({ mark: { x: 1, y: 1, label: '', disabled: true } });
-
-      expect(container.querySelector('input')).toBe(null);
-    });
-
-    // an input sized to its content is 2px wide while it is empty, and chrome paints the caret of
-    // an input inside an svg foreignObject as a hairline that never blinks - so an empty label that
-    // has the focus has to be wide enough to be seen as a box waiting for text
-    it('is wide enough to be seen while it is empty', () => {
-      const { input } = renderComponent({ mark: { x: 1, y: 1, label: '' } });
-
-      expect(parseInt(input.style.width, 10)).toBeGreaterThanOrEqual(30);
-    });
-
-    it('is only as wide as its text once it cannot be edited', () => {
-      const { container } = renderComponent({ disabled: true, mark: { x: 1, y: 1, label: 'A' } });
-
-      expect(parseInt(container.querySelector('input').style.width, 10)).toBeLessThan(30);
-    });
-  });
-
-  describe('syncing mark.label into the input', () => {
-    it('picks up a new mark.label while the input does not have the focus', () => {
-      const { rerenderWith, container } = renderComponent({ mark: { x: 1, y: 1, label: 'A' } });
-
-      rerenderWith({ mark: { x: 1, y: 1, label: 'updated' } });
-
-      expect(input(container).value).toBe('updated');
-    });
-
-    // a mark coming back from an (async) model save can carry an older label - applying it would
-    // wipe out the characters typed in the meantime
-    it('keeps what the user typed while the input has the focus', () => {
-      const { input, rerenderWith } = renderComponent({ autoFocus: true });
-
-      expect(document.activeElement).toBe(input);
-
-      fireEvent.change(input, { target: { value: 'AB' } });
-      expect(input.value).toBe('AB');
-
-      // the host echoes back the label as it was one keystroke ago
-      rerenderWith({ mark: { x: 1, y: 1, label: 'A' } });
-
-      expect(input.value).toBe('AB');
-    });
-  });
-
-  // the characters land at the document's caret, not at the focused node. In the authoring
-  // environment the input ends up focused with no caret anywhere: keypress fires and nothing is
-  // inserted. jsdom never reports a caret either, so this is that state - the focus cycle that
-  // repairs it must not hand the label over to the blur handling.
-  describe('a focused input with no caret', () => {
-    it('is repaired without reporting the label as removed', () => {
-      const { input } = renderComponent({ autoFocus: true, mark: { x: 1, y: 1, label: '' } });
-
-      expect(document.activeElement).toBe(input);
-      expect(onChange).not.toHaveBeenCalled();
-      expect(onBlur).not.toHaveBeenCalled();
-    });
-
-    it('leaves the caret at the end of a label that already has text', () => {
-      const { input } = renderComponent({ autoFocus: true, mark: { x: 1, y: 1, label: 'AB' } });
-
-      expect(document.activeElement).toBe(input);
-      expect(input.selectionStart).toBe(2);
-      expect(onChange).not.toHaveBeenCalled();
-    });
-  });
-
-  // clicking another window, the devtools, or the host moving the focus while it saves the model:
-  // the label is not being left, so it must survive and take the focus back
-  describe('while the window is away', () => {
-    const windowGoesAway = () => window.dispatchEvent(new Event('blur'));
-    const windowComesBack = () => window.dispatchEvent(new Event('focus'));
-
-    it('keeps an empty label instead of reporting it as removed', () => {
-      const { input } = renderComponent({ mark: { x: 1, y: 1, label: '' } });
-
-      windowGoesAway();
-      fireEvent.blur(input);
-
-      expect(onChange).not.toHaveBeenCalled();
-      expect(onBlur).not.toHaveBeenCalled();
-    });
-
-    it('takes the focus back when the window comes back', () => {
-      const { input } = renderComponent({ autoFocus: true, mark: { x: 1, y: 1, label: '' } });
-
-      // the focus is moved to another input rather than with input.blur(): jsdom fires a window
-      // focus event as part of blur(), which is the very thing being tested here
-      const elsewhere = document.createElement('input');
-
-      document.body.appendChild(elsewhere);
-
-      windowGoesAway();
-      elsewhere.focus();
-      expect(document.activeElement).toBe(elsewhere);
-
-      windowComesBack();
-
-      expect(document.activeElement).toBe(input);
-
-      elsewhere.remove();
-    });
-
-    it('still reports a label the user leaves once the window is back', () => {
-      const { input } = renderComponent({ mark: { x: 1, y: 1, label: '' } });
-
-      windowGoesAway();
-      windowComesBack();
-      fireEvent.blur(input);
-
-      expect(onChange).toHaveBeenCalledWith('');
-    });
-  });
-
-  describe('onBlur', () => {
-    it('is called so the tool stops auto focusing the label', () => {
-      const { input } = renderComponent({ autoFocus: true, mark: { x: 1, y: 1, label: 'A' } });
-
-      fireEvent.blur(input);
-
-      expect(onBlur).toHaveBeenCalled();
-    });
-
-    // clicking a button or anything else interactive blurs the label while the debounce is pending
-    it('saves what was typed straight away', () => {
-      const { input } = renderComponent({ mark: { x: 1, y: 1, label: '' } });
-
-      fireEvent.change(input, { target: { value: 'AB' } });
-      fireEvent.blur(input);
-
-      expect(onChange).toHaveBeenCalledWith('AB');
-    });
-
-    it('does not save it twice when the debounce catches up', () => {
-      jest.useFakeTimers();
-      const { input } = renderComponent({ mark: { x: 1, y: 1, label: '' } });
-
-      fireEvent.change(input, { target: { value: 'AB' } });
-      fireEvent.blur(input);
-      act(() => jest.advanceTimersByTime(1000));
-
-      expect(onChange).toHaveBeenCalledTimes(1);
-      expect(onChange).toHaveBeenCalledWith('AB');
-      jest.useRealTimers();
-    });
-
-    it('reports an empty label on blur', () => {
-      const { input } = renderComponent({ mark: { x: 1, y: 1, label: 'A' } });
-
-      fireEvent.change(input, { target: { value: '' } });
-      fireEvent.blur(input);
-
-      expect(onChange).toHaveBeenCalledWith('');
-    });
-  });
-
-  describe('debounce', () => {
-    beforeEach(() => jest.useFakeTimers());
-    afterEach(() => jest.useRealTimers());
-
-    it('does not report the typed label before the debounce delay elapses', () => {
-      const { input } = renderComponent({ autoFocus: true });
-
-      fireEvent.change(input, { target: { value: 'A' } });
-
-      act(() => jest.advanceTimersByTime(499));
-      expect(onChange).not.toHaveBeenCalled();
-
-      act(() => jest.advanceTimersByTime(1));
-      expect(onChange).toHaveBeenCalledWith('A');
-    });
-
-    it('reports the label once for a burst of keystrokes', () => {
-      const { input } = renderComponent({ autoFocus: true });
-
-      fireEvent.change(input, { target: { value: 'A' } });
-      act(() => jest.advanceTimersByTime(300));
-      fireEvent.change(input, { target: { value: 'AB' } });
-      act(() => jest.advanceTimersByTime(300));
-      fireEvent.change(input, { target: { value: 'ABC' } });
-      act(() => jest.advanceTimersByTime(500));
-
-      expect(onChange).toHaveBeenCalledTimes(1);
-      expect(onChange).toHaveBeenCalledWith('ABC');
-    });
-  });
-});
-
-describe('position', () => {
-  const assertPosition = (mark, rect, expected) => {
-    it(`${mark.x},${mark.y} + ${rect.width},${rect.height} => ${expected}`, () => {
-      // we set range.min to a value because in pixels - the greater the Y the lower down on the screen.
-      const graphProps = getGraphProps(0, 12, 12, 0);
-      const result = position(graphProps, mark, rect);
-      expect(result).toEqual(expected);
-    });
-  };
-
-  assertPosition({ x: 0, y: 0 }, { width: 10, height: 10 }, 'top-left');
-  assertPosition({ x: 0, y: 0 }, { width: 1, height: 1 }, 'bottom-right');
-  assertPosition({ x: 0, y: 0 }, { width: 10, height: 0 }, 'bottom-left');
-  assertPosition({ x: 0, y: 0 }, { width: 0, height: 10 }, 'top-right');
-});
-
-describe('coordinates', () => {
-  const assertCoordinates = (mark, rect, pos, expected) => {
-    it(`${mark.x}, ${mark.y} -> ${pos} = ${expected.left}, ${expected.top}`, () => {
-      const result = coordinates(getGraphProps(), mark, rect, pos);
-      expect(result).toEqual(expected);
-    });
-  };
-  assertCoordinates({ x: 0, y: 0 }, { width: 0, height: 0 }, 'top-left', { left: -5, top: -5 });
-  assertCoordinates({ x: 0, y: 0 }, { width: 0, height: 0 }, 'bottom-left', { left: -5, top: 5 });
-  assertCoordinates({ x: 0, y: 0 }, { width: 0, height: 0 }, 'top-right', { left: 5, top: -5 });
-  assertCoordinates({ x: 0, y: 0 }, { width: 0, height: 0 }, 'bottom-right', {
-    left: 5,
-    top: 5,
-  });
-});

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

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

@@ -1,115 +0,0 @@
-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();
-    });
-  });
-});