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

package/src/__tests__/grid-setup.test.jsx

@@ -0,0 +1,645 @@
+import React from 'react';
+import { fireEvent, render, waitFor } from '@pie-lib/test-utils';
+import GridSetup from '../grid-setup';
+
+const mockOnChange = jest.fn();
+const mockOnChangeView = jest.fn();
+
+const defaultProps = {
+  domain: {
+    min: -5,
+    max: 5,
+    step: 1,
+    labelStep: 1,
+    axisLabel: 'x',
+  },
+  range: {
+    min: -5,
+    max: 5,
+    step: 1,
+    labelStep: 1,
+    axisLabel: 'y',
+  },
+  size: {
+    width: 480,
+    height: 480,
+  },
+  sizeConstraints: {
+    min: 300,
+    max: 900,
+    step: 10,
+  },
+  includeAxes: true,
+  standardGrid: false,
+  displayedFields: {
+    axisLabel: { enabled: true, label: 'Axis Label' },
+    min: { enabled: true, label: 'Min' },
+    max: { enabled: true, label: 'Max' },
+    step: { enabled: true, label: 'Interval' },
+    labelStep: { enabled: true, label: 'Label Interval' },
+    dimensionsEnabled: true,
+    includeAxesEnabled: true,
+    standardGridEnabled: true,
+  },
+  gridValues: {
+    domain: [1, 2, 5, 10],
+    range: [1, 2, 5, 10],
+  },
+  labelValues: {
+    domain: [0, 1, 2],
+    range: [0, 1, 2],
+  },
+  onChange: mockOnChange,
+  onChangeView: mockOnChangeView,
+};
+
+describe('GridSetup', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('rendering', () => {
+    it('renders without crashing', () => {
+      const { container } = render(<GridSetup {...defaultProps} />);
+      expect(container).toBeTruthy();
+    });
+
+    it('renders accordion with title', () => {
+      const { getByText } = render(<GridSetup {...defaultProps} />);
+      expect(getByText('Customize Grid Setup')).toBeTruthy();
+    });
+
+    it('renders Include axes toggle when enabled', () => {
+      const { getByText } = render(<GridSetup {...defaultProps} />);
+      expect(getByText('Include axes and labels?')).toBeTruthy();
+    });
+
+    it('does not render Include axes toggle when disabled', () => {
+      const props = {
+        ...defaultProps,
+        displayedFields: {
+          ...defaultProps.displayedFields,
+          includeAxesEnabled: false,
+        },
+      };
+      const { queryByText } = render(<GridSetup {...props} />);
+      expect(queryByText('Include axes and labels?')).toBeFalsy();
+    });
+
+    it('renders standard grid toggle when enabled', () => {
+      const { getByText } = render(<GridSetup {...defaultProps} />);
+      expect(getByText('Constrain to standard coordinate grid?')).toBeTruthy();
+    });
+
+    it('does not render standard grid toggle when disabled', () => {
+      const props = {
+        ...defaultProps,
+        displayedFields: {
+          ...defaultProps.displayedFields,
+          standardGridEnabled: false,
+        },
+      };
+      const { queryByText } = render(<GridSetup {...props} />);
+      expect(queryByText('Constrain to standard coordinate grid?')).toBeFalsy();
+    });
+
+    it('renders dimensions section when enabled', () => {
+      const { getByText } = render(<GridSetup {...defaultProps} />);
+      expect(getByText('Dimensions(px)')).toBeTruthy();
+      expect(getByText(/Min 300, Max 900/)).toBeTruthy();
+    });
+
+    it('does not render dimensions section when disabled', () => {
+      const props = {
+        ...defaultProps,
+        displayedFields: {
+          ...defaultProps.displayedFields,
+          dimensionsEnabled: false,
+        },
+      };
+      const { queryByText } = render(<GridSetup {...props} />);
+      expect(queryByText('Dimensions(px)')).toBeFalsy();
+    });
+  });
+
+  describe('axes configuration', () => {
+    it('renders axis headers when includeAxes is true', () => {
+      const { container } = render(<GridSetup {...defaultProps} />);
+      const xAxisHeader = container.querySelector('i');
+      expect(xAxisHeader?.textContent).toBe('x');
+    });
+
+    it('renders min/max fields when enabled', () => {
+      const { getAllByLabelText } = render(<GridSetup {...defaultProps} />);
+      const minFields = getAllByLabelText('Min');
+      const maxFields = getAllByLabelText('Max');
+      expect(minFields.length).toBe(2); // domain and range
+      expect(maxFields.length).toBe(2); // domain and range
+    });
+
+    it('does not render min/max fields when disabled', () => {
+      const props = {
+        ...defaultProps,
+        displayedFields: {
+          ...defaultProps.displayedFields,
+          min: { enabled: false },
+          max: { enabled: false },
+        },
+      };
+      const { queryByLabelText } = render(<GridSetup {...props} />);
+      expect(queryByLabelText('Min')).toBeFalsy();
+      expect(queryByLabelText('Max')).toBeFalsy();
+    });
+
+    it('renders axis label fields when enabled', () => {
+      const { getAllByText } = render(<GridSetup {...defaultProps} />);
+      const axisLabelFields = getAllByText('Axis Label');
+      expect(axisLabelFields.length).toBe(2); // domain and range
+    });
+
+    it('does not render axis label fields when disabled', () => {
+      const props = {
+        ...defaultProps,
+        displayedFields: {
+          ...defaultProps.displayedFields,
+          axisLabel: { enabled: false },
+        },
+      };
+      const { queryByText } = render(<GridSetup {...props} />);
+      expect(queryByText('Axis Label')).toBeFalsy();
+    });
+
+    it('renders step and labelStep fields when enabled', () => {
+      const { getAllByLabelText } = render(<GridSetup {...defaultProps} />);
+      const intervalFields = getAllByLabelText('Interval');
+      const labelIntervalFields = getAllByLabelText('Label Interval');
+      expect(intervalFields.length).toBe(2); // domain and range
+      expect(labelIntervalFields.length).toBe(2); // domain and range
+    });
+
+    it('does not render step fields when disabled', () => {
+      const props = {
+        ...defaultProps,
+        displayedFields: {
+          ...defaultProps.displayedFields,
+          step: { enabled: false },
+        },
+      };
+      const { queryByLabelText } = render(<GridSetup {...props} />);
+      expect(queryByLabelText('Interval')).toBeFalsy();
+    });
+
+    it('does not render labelStep fields when disabled', () => {
+      const props = {
+        ...defaultProps,
+        displayedFields: {
+          ...defaultProps.displayedFields,
+          labelStep: { enabled: false },
+        },
+      };
+      const { queryByLabelText } = render(<GridSetup {...props} />);
+      expect(queryByLabelText('Label Interval')).toBeFalsy();
+    });
+
+    it('displays axis visibility hint when min/max enabled', () => {
+      const { getByText } = render(<GridSetup {...defaultProps} />);
+      expect(
+        getByText('If you want the axis to be visible, use a zero or negative Min Value, and a positive Max Value'),
+      ).toBeTruthy();
+    });
+
+    it('displays unnumbered gridlines hint when labelStep enabled', () => {
+      const { getByText } = render(<GridSetup {...defaultProps} />);
+      expect(getByText('For unnumbered gridlines, enter a label interval of 0')).toBeTruthy();
+    });
+  });
+
+  describe('gridlines configuration', () => {
+    it('renders gridlines config when includeAxes is false', () => {
+      const props = {
+        ...defaultProps,
+        includeAxes: false,
+      };
+      const { getByLabelText } = render(<GridSetup {...props} />);
+      expect(getByLabelText('Number of Vertical Gridlines')).toBeTruthy();
+      expect(getByLabelText('Number of Horizontal Gridlines')).toBeTruthy();
+    });
+
+    it('does not render axes config when includeAxes is false', () => {
+      const props = {
+        ...defaultProps,
+        includeAxes: false,
+      };
+      const { queryByText } = render(<GridSetup {...props} />);
+      expect(queryByText('Axis Label')).toBeFalsy();
+    });
+
+    it('does not render gridlines config when max is disabled', () => {
+      const props = {
+        ...defaultProps,
+        includeAxes: false,
+        displayedFields: {
+          ...defaultProps.displayedFields,
+          max: { enabled: false },
+        },
+      };
+      const { queryByLabelText } = render(<GridSetup {...props} />);
+      expect(queryByLabelText('Number of Vertical Gridlines')).toBeFalsy();
+      expect(queryByLabelText('Number of Horizontal Gridlines')).toBeFalsy();
+    });
+  });
+
+  describe('user interactions', () => {
+    it('calls onChange when includeAxes toggle is clicked', () => {
+      const { container } = render(<GridSetup {...defaultProps} />);
+      const toggleInput = container.querySelector('input[type="checkbox"]');
+
+      fireEvent.click(toggleInput);
+
+      expect(mockOnChange).toHaveBeenCalledWith(
+        expect.objectContaining({
+          includeAxes: false,
+        }),
+      );
+    });
+
+    it('calls onChange with proper config when includeAxes is disabled', () => {
+      const { container } = render(<GridSetup {...defaultProps} />);
+      const toggleInput = container.querySelector('input[type="checkbox"]');
+
+      fireEvent.click(toggleInput);
+
+      expect(mockOnChange).toHaveBeenCalledWith(
+        expect.objectContaining({
+          includeAxes: false,
+          domain: expect.objectContaining({
+            min: 1,
+            max: 5,
+            step: 1,
+            labelStep: 0,
+          }),
+          range: expect.objectContaining({
+            min: 1,
+            max: 5,
+            step: 1,
+            labelStep: 0,
+          }),
+        }),
+      );
+    });
+
+    it('calls onChange with proper config when includeAxes is enabled', () => {
+      const props = {
+        ...defaultProps,
+        includeAxes: false,
+      };
+      const { container } = render(<GridSetup {...props} />);
+      const toggleInputs = container.querySelectorAll('input[type="checkbox"]');
+      const includeAxesToggle = toggleInputs[0]; // First toggle is includeAxes
+
+      fireEvent.click(includeAxesToggle);
+
+      expect(mockOnChange).toHaveBeenCalledWith(
+        expect.objectContaining({
+          includeAxes: true,
+          domain: expect.objectContaining({
+            labelStep: 1,
+          }),
+          range: expect.objectContaining({
+            labelStep: 1,
+          }),
+        }),
+      );
+    });
+
+    it('calls onChange when standardGrid toggle is clicked', () => {
+      const { container } = render(<GridSetup {...defaultProps} />);
+      const toggleInputs = container.querySelectorAll('input[type="checkbox"]');
+      const standardGridToggle = toggleInputs[1]; // Second toggle is standardGrid
+
+      fireEvent.click(standardGridToggle);
+
+      expect(mockOnChange).toHaveBeenCalledWith(
+        expect.objectContaining({
+          standardGrid: true,
+          graph: expect.objectContaining({
+            width: 480,
+            height: 480,
+          }),
+        }),
+      );
+    });
+
+    it('calls onChange when width is changed', async () => {
+      const { getAllByLabelText } = render(<GridSetup {...defaultProps} />);
+      const widthInput = getAllByLabelText('Width')[0];
+
+      fireEvent.change(widthInput, { target: { value: '500' } });
+      fireEvent.blur(widthInput);
+
+      await waitFor(() => {
+        expect(mockOnChange).toHaveBeenCalledWith(
+          expect.objectContaining({
+            graph: expect.objectContaining({
+              width: 500,
+            }),
+          }),
+        );
+      });
+    });
+
+    it('calls onChange when height is changed', async () => {
+      const { getAllByLabelText } = render(<GridSetup {...defaultProps} />);
+      const heightInput = getAllByLabelText('Height')[0];
+
+      fireEvent.change(heightInput, { target: { value: '520' } });
+      fireEvent.blur(heightInput);
+
+      await waitFor(() => {
+        expect(mockOnChange).toHaveBeenCalledWith(
+          expect.objectContaining({
+            graph: expect.objectContaining({
+              height: 520,
+            }),
+          }),
+        );
+      });
+    });
+
+    it('updates both width and height when standardGrid is true', async () => {
+      const props = {
+        ...defaultProps,
+        standardGrid: true,
+      };
+      const { getAllByLabelText } = render(<GridSetup {...props} />);
+      const widthInput = getAllByLabelText('Width')[0];
+
+      fireEvent.change(widthInput, { target: { value: '600' } });
+      fireEvent.blur(widthInput);
+
+      await waitFor(() => {
+        expect(mockOnChange).toHaveBeenCalledWith(
+          expect.objectContaining({
+            graph: expect.objectContaining({
+              width: 600,
+              height: 600,
+            }),
+          }),
+        );
+      });
+    });
+
+    it('calls onChange when domain min is changed', async () => {
+      const { getAllByLabelText } = render(<GridSetup {...defaultProps} />);
+      const minInputs = getAllByLabelText('Min');
+      const domainMinInput = minInputs[0];
+
+      fireEvent.change(domainMinInput, { target: { value: '-10' } });
+      fireEvent.blur(domainMinInput);
+
+      await waitFor(() => {
+        expect(mockOnChange).toHaveBeenCalledWith(
+          expect.objectContaining({
+            domain: expect.objectContaining({
+              min: -10,
+            }),
+          }),
+        );
+      });
+    });
+
+    it('calls onChange when domain max is changed', async () => {
+      const { getAllByLabelText } = render(<GridSetup {...defaultProps} />);
+      const maxInputs = getAllByLabelText('Max');
+      const domainMaxInput = maxInputs[0];
+
+      fireEvent.change(domainMaxInput, { target: { value: '10' } });
+      fireEvent.blur(domainMaxInput);
+
+      await waitFor(() => {
+        expect(mockOnChange).toHaveBeenCalledWith(
+          expect.objectContaining({
+            domain: expect.objectContaining({
+              max: 10,
+            }),
+          }),
+        );
+      });
+    });
+
+    it('calls onChange when range min is changed', async () => {
+      const { getAllByLabelText } = render(<GridSetup {...defaultProps} />);
+      const minInputs = getAllByLabelText('Min');
+      const rangeMinInput = minInputs[1];
+
+      fireEvent.change(rangeMinInput, { target: { value: '-8' } });
+      fireEvent.blur(rangeMinInput);
+
+      await waitFor(() => {
+        expect(mockOnChange).toHaveBeenCalledWith(
+          expect.objectContaining({
+            range: expect.objectContaining({
+              min: -8,
+            }),
+          }),
+        );
+      });
+    });
+
+    it('calls onChange when range max is changed', async () => {
+      const { getAllByLabelText } = render(<GridSetup {...defaultProps} />);
+      const maxInputs = getAllByLabelText('Max');
+      const rangeMaxInput = maxInputs[1];
+
+      fireEvent.change(rangeMaxInput, { target: { value: '12' } });
+      fireEvent.blur(rangeMaxInput);
+
+      await waitFor(() => {
+        expect(mockOnChange).toHaveBeenCalledWith(
+          expect.objectContaining({
+            range: expect.objectContaining({
+              max: 12,
+            }),
+          }),
+        );
+      });
+    });
+
+    it('updates both domain and range when standardGrid is true and domain changes', async () => {
+      const props = {
+        ...defaultProps,
+        standardGrid: true,
+      };
+      const { getAllByLabelText } = render(<GridSetup {...props} />);
+      const minInputs = getAllByLabelText('Min');
+      const domainMinInput = minInputs[0];
+
+      fireEvent.change(domainMinInput, { target: { value: '-15' } });
+      fireEvent.blur(domainMinInput);
+
+      await waitFor(() => {
+        expect(mockOnChange).toHaveBeenCalledWith(
+          expect.objectContaining({
+            domain: expect.objectContaining({
+              min: -15,
+            }),
+            range: expect.objectContaining({
+              min: -15,
+            }),
+          }),
+        );
+      });
+    });
+
+    it('does not update range when domain axisLabel changes with standardGrid', async () => {
+      const props = {
+        ...defaultProps,
+        standardGrid: true,
+      };
+      const { container } = render(<GridSetup {...props} />);
+
+      // EditableHTML change is harder to trigger, but we can test the handler directly
+      // by verifying the range doesn't get the axisLabel value from domain
+      const axisLabelInputs = container.querySelectorAll('[contenteditable="true"]');
+
+      if (axisLabelInputs.length > 0) {
+        fireEvent.input(axisLabelInputs[0], { target: { innerHTML: 'X-Axis' } });
+
+        await waitFor(() => {
+          if (mockOnChange.mock.calls.length > 0) {
+            const lastCall = mockOnChange.mock.calls[mockOnChange.mock.calls.length - 1][0];
+            // range.axisLabel should not be 'X-Axis', it should keep its original value
+            expect(lastCall.range?.axisLabel).not.toBe('X-Axis');
+          }
+        });
+      }
+    });
+
+    it('calls onChangeView when accordion is toggled', () => {
+      const { container } = render(<GridSetup {...defaultProps} />);
+      const accordionSummary = container.querySelector('[aria-expanded]');
+
+      fireEvent.click(accordionSummary);
+
+      expect(mockOnChangeView).toHaveBeenCalled();
+    });
+  });
+
+  describe('disabled states', () => {
+    it('disables range fields when standardGrid is true', () => {
+      const props = {
+        ...defaultProps,
+        standardGrid: true,
+      };
+      const { getAllByLabelText } = render(<GridSetup {...props} />);
+      const minInputs = getAllByLabelText('Min');
+      const rangeMinInput = minInputs[1];
+
+      expect(rangeMinInput).toBeDisabled();
+    });
+
+    it('disables height field when standardGrid is true', () => {
+      const props = {
+        ...defaultProps,
+        standardGrid: true,
+      };
+      const { getAllByLabelText } = render(<GridSetup {...props} />);
+      const heightInput = getAllByLabelText('Height')[0];
+
+      expect(heightInput).toBeDisabled();
+    });
+
+    it('disables horizontal gridlines field when standardGrid is true and includeAxes is false', () => {
+      const props = {
+        ...defaultProps,
+        includeAxes: false,
+        standardGrid: true,
+      };
+      const { getByLabelText } = render(<GridSetup {...props} />);
+      const horizontalGridlinesInput = getByLabelText('Number of Horizontal Gridlines');
+
+      expect(horizontalGridlinesInput).toBeDisabled();
+    });
+  });
+
+  describe('GridConfig component', () => {
+    it('renders step field when enabled', () => {
+      const { getAllByLabelText } = render(<GridSetup {...defaultProps} />);
+      const intervalFields = getAllByLabelText('Interval');
+      expect(intervalFields.length).toBeGreaterThan(0);
+    });
+
+    it('renders labelStep field when enabled', () => {
+      const { getAllByLabelText } = render(<GridSetup {...defaultProps} />);
+      const labelIntervalFields = getAllByLabelText('Label Interval');
+      expect(labelIntervalFields.length).toBeGreaterThan(0);
+    });
+
+    it('does not render when both step and labelStep are disabled', () => {
+      const props = {
+        ...defaultProps,
+        displayedFields: {
+          ...defaultProps.displayedFields,
+          step: { enabled: false },
+          labelStep: { enabled: false },
+        },
+      };
+      const { queryByLabelText } = render(<GridSetup {...props} />);
+      expect(queryByLabelText('Interval')).toBeFalsy();
+      expect(queryByLabelText('Label Interval')).toBeFalsy();
+    });
+  });
+
+  describe('AxisConfig component', () => {
+    it('renders x-axis header', () => {
+      const { container } = render(<GridSetup {...defaultProps} />);
+      const headers = container.querySelectorAll('i');
+      const xAxisHeader = Array.from(headers).find((h) => h.textContent === 'x');
+      expect(xAxisHeader).toBeTruthy();
+    });
+
+    it('renders y-axis header', () => {
+      const { container } = render(<GridSetup {...defaultProps} />);
+      const headers = container.querySelectorAll('i');
+      const yAxisHeader = Array.from(headers).find((h) => h.textContent === 'y');
+      expect(yAxisHeader).toBeTruthy();
+    });
+
+    it('does not render headers when all fields are disabled', () => {
+      const props = {
+        ...defaultProps,
+        displayedFields: {
+          ...defaultProps.displayedFields,
+          min: { enabled: false },
+          max: { enabled: false },
+          axisLabel: { enabled: false },
+          step: { enabled: false },
+          labelStep: { enabled: false },
+        },
+      };
+      const { container } = render(<GridSetup {...props} />);
+      const headers = container.querySelectorAll('i');
+      const axisHeaders = Array.from(headers).filter((h) => h.textContent === 'x' || h.textContent === 'y');
+      expect(axisHeaders.length).toBe(0);
+    });
+  });
+
+  describe('Accordion behavior', () => {
+    it('renders with correct transition props', () => {
+      const { container } = render(<GridSetup {...defaultProps} />);
+      const accordion = container.querySelector('.MuiAccordion-root');
+      expect(accordion).toBeTruthy();
+    });
+
+    it('expands and collapses accordion', () => {
+      const { container } = render(<GridSetup {...defaultProps} />);
+      const accordionSummary = container.querySelector('[aria-expanded]');
+
+      expect(accordionSummary.getAttribute('aria-expanded')).toBe('false');
+
+      fireEvent.click(accordionSummary);
+
+      expect(mockOnChangeView).toHaveBeenCalled();
+    });
+  });
+});

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

@@ -1,6 +1,6 @@
 import { render } from '@pie-lib/test-utils';
 import React from 'react';
-import { MarkLabel, position, coordinates } from '../mark-label';
+import { coordinates, MarkLabel, position } from '../mark-label';
 import { graphProps as getGraphProps } from './utils';
 
 describe('MarkLabel', () => {