@pie-lib/graphing-solution-set 3.1.1-next.0 → 3.2.0-next.0

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

@@ -1,12 +1,16 @@
-import { render } from '@pie-lib/test-utils';
+import { fireEvent, render } from '@pie-lib/test-utils';
 import React from 'react';
 
 import ToolMenu from '../tool-menu';
 
 describe('ToolMenu', () => {
-  let onChange = jest.fn();
+  let onChange;
   const tools = ['one', 'two'];
 
+  beforeEach(() => {
+    onChange = jest.fn();
+  });
+
   const renderComponent = (extras) => {
     const defaults = {
       classes: {},
@@ -16,6 +20,7 @@ describe('ToolMenu', () => {
       tools,
       gssLineData: {
         selectedTool: 'lineA',
+        numberOfLines: 2,
         lineA: { lineType: 'Solid' },
         lineB: { lineType: 'Solid' },
       },
@@ -29,5 +34,420 @@ describe('ToolMenu', () => {
       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__/use-debounce.test.js

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState } from 'react';
 import { useDebounce } from '../use-debounce';
 
 jest.useFakeTimers();

package/src/__tests__/utils.test.js

@@ -63,67 +63,21 @@ describe('utils', () => {
     assertGetTickValues({ min: -0.2, max: 2, step: 0.6 }, [0, 0.6, 1.2, 1.8]);
     assertGetTickValues({ min: -3.4, max: 6.2, step: 1.2 }, [0, -1.2, -2.4, 1.2, 2.4, 3.6, 4.8, 6]);
 
-    assertGetTickValues({ min: 0.6, max: 4.8, step: 0.3 }, [
-      0.6,
-      0.9,
-      1.2,
-      1.5,
-      1.8,
-      2.1,
-      2.4,
-      2.7,
-      3.0,
-      3.3,
-      3.6,
-      3.9,
-      4.2,
-      4.5,
-      4.8,
-    ]);
-    assertGetTickValues({ min: 0.5, max: 4.9, step: 0.3 }, [
-      0.6,
-      0.9,
-      1.2,
-      1.5,
-      1.8,
-      2.1,
-      2.4,
-      2.7,
-      3.0,
-      3.3,
-      3.6,
-      3.9,
-      4.2,
-      4.5,
-      4.8,
-    ]);
-    assertGetTickValues({ min: 0, max: 3, step: 0.125 }, [
-      0,
-      0.125,
-      0.25,
-      0.375,
-      0.5,
-      0.625,
-      0.75,
-      0.875,
-      1,
-      1.125,
-      1.25,
-      1.375,
-      1.5,
-      1.625,
-      1.75,
-      1.875,
-      2,
-      2.125,
-      2.25,
-      2.375,
-      2.5,
-      2.625,
-      2.75,
-      2.875,
-      3,
-    ]);
+    assertGetTickValues(
+      { min: 0.6, max: 4.8, step: 0.3 },
+      [0.6, 0.9, 1.2, 1.5, 1.8, 2.1, 2.4, 2.7, 3.0, 3.3, 3.6, 3.9, 4.2, 4.5, 4.8],
+    );
+    assertGetTickValues(
+      { min: 0.5, max: 4.9, step: 0.3 },
+      [0.6, 0.9, 1.2, 1.5, 1.8, 2.1, 2.4, 2.7, 3.0, 3.3, 3.6, 3.9, 4.2, 4.5, 4.8],
+    );
+    assertGetTickValues(
+      { min: 0, max: 3, step: 0.125 },
+      [
+        0, 0.125, 0.25, 0.375, 0.5, 0.625, 0.75, 0.875, 1, 1.125, 1.25, 1.375, 1.5, 1.625, 1.75, 1.875, 2, 2.125, 2.25,
+        2.375, 2.5, 2.625, 2.75, 2.875, 3,
+      ],
+    );
   });
 
   describe('countWords', () => {

package/src/axis/__tests__/axes.test.jsx

@@ -2,7 +2,7 @@ import { render } from '@pie-lib/test-utils';
 import React from 'react';
 import { graphProps } from '../../__tests__/utils';
 
-import Axes, { RawXAxis, RawYAxis, firstNegativeValue, sharedValues } from '../axes';
+import { firstNegativeValue, RawXAxis, RawYAxis, sharedValues } from '../axes';
 
 describe('RawXAxis', () => {
   let onChange = jest.fn();

package/src/axis/axes.jsx

@@ -4,7 +4,7 @@ import { types } from '@pie-lib/plot';
 import PropTypes from 'prop-types';
 import Arrow from './arrow';
 import { styled } from '@mui/material/styles';
-import { countWords, findLongestWord, amountToIncreaseWidth, getTickValues } from '../utils';
+import { amountToIncreaseWidth, countWords, findLongestWord, getTickValues } from '../utils';
 import { color, Readable } from '@pie-lib/render-ui';
 
 export const AxisPropTypes = {
@@ -92,14 +92,8 @@ export class RawXAxis extends React.Component {
   static defaultProps = AxisDefaultProps;
 
   render() {
-    const {
-      includeArrows,
-      graphProps,
-      columnTicksValues,
-      skipValues,
-      distanceFromOriginToFirstNegativeY,
-      dy,
-    } = this.props;
+    const { includeArrows, graphProps, columnTicksValues, skipValues, distanceFromOriginToFirstNegativeY, dy } =
+      this.props;
     const { scale, domain, size, range } = graphProps || {};
 
     const labelProps = (label) => {
@@ -131,12 +125,8 @@ export class RawXAxis extends React.Component {
           tickValues={columnTicksValues}
           hideZero={!(domain.labelStep || range.labelStep) && domain.min <= 0}
         />
-        {includeArrows && includeArrows.left && (
-          <StyledArrow direction="left" x={domain.min} y={0} scale={scale} />
-        )}
-        {includeArrows && includeArrows.right && (
-          <StyledArrow direction="right" x={domain.max} y={0} scale={scale} />
-        )}
+        {includeArrows && includeArrows.left && <StyledArrow direction="left" x={domain.min} y={0} scale={scale} />}
+        {includeArrows && includeArrows.right && <StyledArrow direction="right" x={domain.max} y={0} scale={scale} />}
         {domain.axisLabel && (
           <foreignObject x={size.width + 17} y={scale.y(0) - 9} width={necessaryWidth} height={20 * necessaryRows}>
             <LabelContainer dangerouslySetInnerHTML={{ __html: domain.axisLabel }} />
@@ -191,12 +181,8 @@ export class RawYAxis extends React.Component {
           tickTextAnchor={'bottom'}
           tickValues={rowTickValues}
         />
-        {includeArrows && includeArrows.down && (
-          <StyledArrow direction="down" x={0} y={range.min} scale={scale} />
-        )}
-        {includeArrows && includeArrows.up && (
-          <StyledArrow direction="up" x={0} y={range.max} scale={scale} />
-        )}
+        {includeArrows && includeArrows.down && <StyledArrow direction="down" x={0} y={range.min} scale={scale} />}
+        {includeArrows && includeArrows.up && <StyledArrow direction="up" x={0} y={range.max} scale={scale} />}
         {range.axisLabel && (
           <foreignObject x={scale.x(0) - necessaryWidth / 2} y={-33} width={necessaryWidth} height="20">
             <Readable false>

package/src/axis/index.js

@@ -1,2 +1,3 @@
 import Axes, { AxisPropTypes } from './axes';
+
 export { Axes, AxisPropTypes };

package/src/bg.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { select, pointer } from 'd3-selection';
+import { pointer, select } from 'd3-selection';
 import { types, utils } from '@pie-lib/plot';
 import { getTickValues, thinnerShapesNeeded } from './utils';