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

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

@@ -1,66 +0,0 @@
-import { 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('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: -10, top: -10 });
-  assertCoordinates({ x: 0, y: 0 }, { width: 0, height: 0 }, 'bottom-left', { left: -10, top: 10 });
-  assertCoordinates({ x: 0, y: 0 }, { width: 0, height: 0 }, 'top-right', { left: 10, top: -10 });
-  assertCoordinates({ x: 0, y: 0 }, { width: 0, height: 0 }, 'bottom-right', {
-    left: 10,
-    top: 10,
-  });
-});

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

@@ -1,106 +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';
-
-// 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;
-  }),
-}));
-
-// 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 onChange = jest.fn();
-
-  beforeEach(() => {
-    onChange.mockClear();
-  });
-
-  const renderComponent = (extras) => {
-    const defaults = {
-      className: 'className',
-      onChange,
-      options: ['line', 'polygon'],
-      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: ['line', 'polygon'] });
-      expect(screen.getByText(/line/i)).toBeInTheDocument();
-      expect(screen.getByText(/polygon/i)).toBeInTheDocument();
-    });
-  });
-
-  describe('interactions', () => {
-    it('calls onChange when tool button is clicked', async () => {
-      const user = userEvent.setup();
-      renderComponent({ options: ['line', 'polygon'] });
-
-      const lineButton = screen.getByText(/line/i).closest('button');
-      await user.click(lineButton);
-
-      expect(onChange).toHaveBeenCalledWith('line');
-    });
-  });
-});

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

@@ -1,453 +0,0 @@
-import { fireEvent, render } from '@pie-lib/test-utils';
-import React from 'react';
-
-import ToolMenu from '../tool-menu';
-
-describe('ToolMenu', () => {
-  let onChange;
-  const tools = ['one', 'two'];
-
-  beforeEach(() => {
-    onChange = jest.fn();
-  });
-
-  const renderComponent = (extras) => {
-    const defaults = {
-      classes: {},
-      className: 'className',
-      onChange,
-      currentTool: tools[0],
-      tools,
-      gssLineData: {
-        selectedTool: 'lineA',
-        numberOfLines: 2,
-        lineA: { lineType: 'Solid' },
-        lineB: { lineType: 'Solid' },
-      },
-    };
-    const props = { ...defaults, ...extras };
-    return render(<ToolMenu {...props} />);
-  };
-
-  describe('rendering', () => {
-    it('renders without crashing', () => {
-      const { container } = renderComponent();
-      expect(container.firstChild).toBeInTheDocument();
-    });
-
-    it('renders Line A radio button', () => {
-      const { getByText } = renderComponent();
-      expect(getByText('Line A')).toBeInTheDocument();
-    });
-
-    it('renders Line B radio button when numberOfLines is 2', () => {
-      const { getByText } = renderComponent();
-      expect(getByText('Line B')).toBeInTheDocument();
-    });
-
-    it('does not render Line B radio button when numberOfLines is 1', () => {
-      const { queryByText } = renderComponent({
-        gssLineData: {
-          selectedTool: 'lineA',
-          numberOfLines: 1,
-          lineA: { lineType: 'Solid' },
-          lineB: { lineType: 'Solid' },
-        },
-      });
-      expect(queryByText('Line B')).not.toBeInTheDocument();
-    });
-
-    it('renders Solution Set radio button', () => {
-      const { getByText } = renderComponent();
-      expect(getByText('Solution Set')).toBeInTheDocument();
-    });
-
-    it('renders Solid and Dashed buttons for Line A', () => {
-      const { getAllByText } = renderComponent();
-      const solidButtons = getAllByText(/Solid/);
-      const dashedButtons = getAllByText(/Dashed/);
-      expect(solidButtons.length).toBeGreaterThan(0);
-      expect(dashedButtons.length).toBeGreaterThan(0);
-    });
-
-    it('shows checkmark on selected line type for Line A', () => {
-      const { getAllByText } = renderComponent({
-        gssLineData: {
-          selectedTool: 'lineA',
-          numberOfLines: 2,
-          lineA: { lineType: 'Solid' },
-          lineB: { lineType: 'Dashed' },
-        },
-      });
-      const solidButtons = getAllByText(/✔ Solid/);
-      expect(solidButtons.length).toBeGreaterThan(0);
-    });
-
-    it('disables all controls when disabled prop is true', () => {
-      const { getAllByRole } = renderComponent({ disabled: true });
-      const radios = getAllByRole('radio');
-      const buttons = getAllByRole('button');
-
-      radios.forEach((radio) => {
-        expect(radio).toBeDisabled();
-      });
-
-      buttons.forEach((button) => {
-        expect(button).toBeDisabled();
-      });
-    });
-  });
-
-  describe('onChangeRadioValue', () => {
-    it('calls onChange with updated selectedTool when lineA radio is clicked', () => {
-      const { getAllByRole } = renderComponent({
-        gssLineData: {
-          selectedTool: 'solutionSet',
-          numberOfLines: 2,
-          lineA: { lineType: 'Solid' },
-          lineB: { lineType: 'Solid' },
-        },
-      });
-
-      const radios = getAllByRole('radio');
-      const lineARadio = radios.find((r) => r.value === 'lineA');
-
-      fireEvent.click(lineARadio);
-
-      expect(onChange).toHaveBeenCalledTimes(1);
-      const [updatedData, oldSelectedTool] = onChange.mock.calls[0];
-      expect(updatedData.selectedTool).toBe('lineA');
-      expect(oldSelectedTool).toBe('solutionSet');
-    });
-
-    it('calls onChange with updated selectedTool when lineB radio is clicked', () => {
-      const { getAllByRole } = renderComponent({
-        gssLineData: {
-          selectedTool: 'lineA',
-          numberOfLines: 2,
-          lineA: { lineType: 'Solid' },
-          lineB: { lineType: 'Solid' },
-        },
-      });
-
-      const radios = getAllByRole('radio');
-      const lineBRadio = radios.find((r) => r.value === 'lineB');
-
-      fireEvent.click(lineBRadio);
-
-      expect(onChange).toHaveBeenCalledTimes(1);
-      const [updatedData, oldSelectedTool] = onChange.mock.calls[0];
-      expect(updatedData.selectedTool).toBe('lineB');
-      expect(oldSelectedTool).toBe('lineA');
-    });
-
-    it('calls onChange with updated selectedTool when solutionSet radio is clicked', () => {
-      const { getAllByRole } = renderComponent({
-        gssLineData: {
-          selectedTool: 'lineA',
-          numberOfLines: 2,
-          lineA: { lineType: 'Solid' },
-          lineB: { lineType: 'Solid' },
-        },
-      });
-
-      const radios = getAllByRole('radio');
-      const solutionSetRadio = radios.find((r) => r.value === 'solutionSet');
-
-      fireEvent.click(solutionSetRadio);
-
-      expect(onChange).toHaveBeenCalledTimes(1);
-      const [updatedData, oldSelectedTool] = onChange.mock.calls[0];
-      expect(updatedData.selectedTool).toBe('solutionSet');
-      expect(oldSelectedTool).toBe('lineA');
-    });
-
-    it('preserves other gssLineData properties when changing selectedTool', () => {
-      const { getAllByRole } = renderComponent({
-        gssLineData: {
-          selectedTool: 'lineA',
-          numberOfLines: 2,
-          lineA: { lineType: 'Dashed' },
-          lineB: { lineType: 'Solid' },
-        },
-      });
-
-      const radios = getAllByRole('radio');
-      const lineBRadio = radios.find((r) => r.value === 'lineB');
-
-      fireEvent.click(lineBRadio);
-
-      const [updatedData] = onChange.mock.calls[0];
-      expect(updatedData.lineA.lineType).toBe('Dashed');
-      expect(updatedData.lineB.lineType).toBe('Solid');
-      expect(updatedData.numberOfLines).toBe(2);
-    });
-
-    it('does not call onChange when disabled', () => {
-      const { getAllByRole } = renderComponent({
-        disabled: true,
-        gssLineData: {
-          selectedTool: 'lineA',
-          numberOfLines: 2,
-          lineA: { lineType: 'Solid' },
-          lineB: { lineType: 'Solid' },
-        },
-      });
-
-      const radios = getAllByRole('radio');
-      const lineBRadio = radios.find((r) => r.value === 'lineB');
-
-      // Disabled radios should not fire change events
-      expect(lineBRadio).toBeDisabled();
-    });
-  });
-
-  describe('lineTypeChange', () => {
-    it('calls onChange with updated lineType for Line A when Solid button is clicked', () => {
-      const { getAllByText } = renderComponent({
-        gssLineData: {
-          selectedTool: 'lineA',
-          numberOfLines: 2,
-          lineA: { lineType: 'Dashed' },
-          lineB: { lineType: 'Solid' },
-        },
-      });
-
-      const solidButtons = getAllByText(/Solid/);
-      // First solid button should be for Line A
-      fireEvent.click(solidButtons[0]);
-
-      expect(onChange).toHaveBeenCalledTimes(1);
-      const [updatedData, oldSelectedTool] = onChange.mock.calls[0];
-      expect(updatedData.lineA.lineType).toBe('Solid');
-      expect(oldSelectedTool).toBe('lineA');
-    });
-
-    it('calls onChange with updated lineType for Line A when Dashed button is clicked', () => {
-      const { getAllByText } = renderComponent({
-        gssLineData: {
-          selectedTool: 'lineA',
-          numberOfLines: 2,
-          lineA: { lineType: 'Solid' },
-          lineB: { lineType: 'Solid' },
-        },
-      });
-
-      const dashedButtons = getAllByText(/Dashed/);
-      // First dashed button should be for Line A
-      fireEvent.click(dashedButtons[0]);
-
-      expect(onChange).toHaveBeenCalledTimes(1);
-      const [updatedData, oldSelectedTool] = onChange.mock.calls[0];
-      expect(updatedData.lineA.lineType).toBe('Dashed');
-      expect(oldSelectedTool).toBe('lineA');
-    });
-
-    it('calls onChange with updated lineType for Line B when Solid button is clicked', () => {
-      const { getAllByText } = renderComponent({
-        gssLineData: {
-          selectedTool: 'lineB',
-          numberOfLines: 2,
-          lineA: { lineType: 'Solid' },
-          lineB: { lineType: 'Dashed' },
-        },
-      });
-
-      const solidButtons = getAllByText(/Solid/);
-      // Second solid button should be for Line B
-      fireEvent.click(solidButtons[1]);
-
-      expect(onChange).toHaveBeenCalledTimes(1);
-      const [updatedData, oldSelectedTool] = onChange.mock.calls[0];
-      expect(updatedData.lineB.lineType).toBe('Solid');
-      expect(oldSelectedTool).toBe('lineB');
-    });
-
-    it('calls onChange with updated lineType for Line B when Dashed button is clicked', () => {
-      const { getAllByText } = renderComponent({
-        gssLineData: {
-          selectedTool: 'lineB',
-          numberOfLines: 2,
-          lineA: { lineType: 'Solid' },
-          lineB: { lineType: 'Solid' },
-        },
-      });
-
-      const dashedButtons = getAllByText(/Dashed/);
-      // Second dashed button should be for Line B
-      fireEvent.click(dashedButtons[1]);
-
-      expect(onChange).toHaveBeenCalledTimes(1);
-      const [updatedData, oldSelectedTool] = onChange.mock.calls[0];
-      expect(updatedData.lineB.lineType).toBe('Dashed');
-      expect(oldSelectedTool).toBe('lineB');
-    });
-
-    it('preserves other line properties when changing Line A lineType', () => {
-      const { getAllByText } = renderComponent({
-        gssLineData: {
-          selectedTool: 'lineA',
-          numberOfLines: 2,
-          lineA: { lineType: 'Solid' },
-          lineB: { lineType: 'Dashed' },
-        },
-      });
-
-      const dashedButtons = getAllByText(/Dashed/);
-      fireEvent.click(dashedButtons[0]);
-
-      const [updatedData] = onChange.mock.calls[0];
-      expect(updatedData.lineA.lineType).toBe('Dashed');
-      expect(updatedData.lineB.lineType).toBe('Dashed');
-      expect(updatedData.selectedTool).toBe('lineA');
-      expect(updatedData.numberOfLines).toBe(2);
-    });
-
-    it('preserves other line properties when changing Line B lineType', () => {
-      const { getAllByText } = renderComponent({
-        gssLineData: {
-          selectedTool: 'lineB',
-          numberOfLines: 2,
-          lineA: { lineType: 'Dashed' },
-          lineB: { lineType: 'Solid' },
-        },
-      });
-
-      const dashedButtons = getAllByText(/Dashed/);
-      fireEvent.click(dashedButtons[1]);
-
-      const [updatedData] = onChange.mock.calls[0];
-      expect(updatedData.lineA.lineType).toBe('Dashed');
-      expect(updatedData.lineB.lineType).toBe('Dashed');
-      expect(updatedData.selectedTool).toBe('lineB');
-      expect(updatedData.numberOfLines).toBe(2);
-    });
-
-    it('handles multiple line type changes correctly', () => {
-      const { getAllByText } = renderComponent({
-        gssLineData: {
-          selectedTool: 'lineA',
-          numberOfLines: 2,
-          lineA: { lineType: 'Solid' },
-          lineB: { lineType: 'Solid' },
-        },
-      });
-
-      // Change Line A to Dashed
-      let dashedButtons = getAllByText(/Dashed/);
-      fireEvent.click(dashedButtons[0]);
-
-      expect(onChange).toHaveBeenCalledTimes(1);
-      let [updatedData] = onChange.mock.calls[0];
-      expect(updatedData.lineA.lineType).toBe('Dashed');
-
-      // Change Line B to Dashed
-      dashedButtons = getAllByText(/Dashed/);
-      fireEvent.click(dashedButtons[1]);
-
-      expect(onChange).toHaveBeenCalledTimes(2);
-      [updatedData] = onChange.mock.calls[1];
-      expect(updatedData.lineB.lineType).toBe('Dashed');
-    });
-
-    it('does not call onChange when line type button is disabled', () => {
-      const { getAllByRole } = renderComponent({
-        disabled: true,
-        gssLineData: {
-          selectedTool: 'lineA',
-          numberOfLines: 2,
-          lineA: { lineType: 'Solid' },
-          lineB: { lineType: 'Solid' },
-        },
-      });
-
-      const buttons = getAllByRole('button');
-
-      buttons.forEach((button) => {
-        expect(button).toBeDisabled();
-      });
-    });
-
-    it('maintains correct state when clicking same line type that is already selected', () => {
-      const { getAllByText } = renderComponent({
-        gssLineData: {
-          selectedTool: 'lineA',
-          numberOfLines: 2,
-          lineA: { lineType: 'Solid' },
-          lineB: { lineType: 'Solid' },
-        },
-      });
-
-      const solidButtons = getAllByText(/Solid/);
-      fireEvent.click(solidButtons[0]); // Click Solid when already Solid
-
-      expect(onChange).toHaveBeenCalledTimes(1);
-      const [updatedData] = onChange.mock.calls[0];
-      expect(updatedData.lineA.lineType).toBe('Solid');
-    });
-  });
-
-  describe('integration tests', () => {
-    it('allows switching selected tool and changing line type in sequence', () => {
-      const { getAllByRole, getAllByText } = renderComponent({
-        gssLineData: {
-          selectedTool: 'lineA',
-          numberOfLines: 2,
-          lineA: { lineType: 'Solid' },
-          lineB: { lineType: 'Solid' },
-        },
-      });
-
-      // Switch to Line B
-      const radios = getAllByRole('radio');
-      const lineBRadio = radios.find((r) => r.value === 'lineB');
-      fireEvent.click(lineBRadio);
-
-      expect(onChange).toHaveBeenCalledTimes(1);
-      let [updatedData] = onChange.mock.calls[0];
-      expect(updatedData.selectedTool).toBe('lineB');
-
-      // Change Line B to Dashed
-      const dashedButtons = getAllByText(/Dashed/);
-      fireEvent.click(dashedButtons[1]);
-
-      expect(onChange).toHaveBeenCalledTimes(2);
-      [updatedData] = onChange.mock.calls[1];
-      expect(updatedData.lineB.lineType).toBe('Dashed');
-    });
-
-    it('handles complete workflow of switching between all tools and changing line types', () => {
-      const { getAllByRole, getAllByText } = renderComponent({
-        gssLineData: {
-          selectedTool: 'lineA',
-          numberOfLines: 2,
-          lineA: { lineType: 'Solid' },
-          lineB: { lineType: 'Solid' },
-        },
-      });
-
-      // Change Line A to Dashed
-      let dashedButtons = getAllByText(/Dashed/);
-      fireEvent.click(dashedButtons[0]);
-      expect(onChange.mock.calls[0][0].lineA.lineType).toBe('Dashed');
-
-      // Switch to Line B
-      const radios = getAllByRole('radio');
-      const lineBRadio = radios.find((r) => r.value === 'lineB');
-      fireEvent.click(lineBRadio);
-      expect(onChange.mock.calls[1][0].selectedTool).toBe('lineB');
-
-      // Change Line B to Dashed
-      dashedButtons = getAllByText(/Dashed/);
-      fireEvent.click(dashedButtons[1]);
-      expect(onChange.mock.calls[2][0].lineB.lineType).toBe('Dashed');
-
-      // Switch to Solution Set
-      const solutionSetRadio = radios.find((r) => r.value === 'solutionSet');
-      fireEvent.click(solutionSetRadio);
-      expect(onChange.mock.calls[3][0].selectedTool).toBe('solutionSet');
-
-      expect(onChange).toHaveBeenCalledTimes(4);
-    });
-  });
-});

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

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

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