@pie-lib/graphing-solution-set 4.0.4-next.30 → 4.0.4-next.34

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

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

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

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

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