@pie-lib/graphing 4.1.0-beta.7 → 5.0.0-next.36

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

@@ -1,645 +0,0 @@
-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__/grid.test.jsx

@@ -1,22 +0,0 @@
-import React from 'react';
-import { render } from '@pie-lib/test-utils';
-import { Grid } from '../grid';
-import { graphProps } from './utils';
-
-describe('Grid', () => {
-  const renderComponent = (extras) => {
-    const defaults = {
-      classes: {},
-      className: 'className',
-      graphProps: graphProps(),
-    };
-    const props = { ...defaults, ...extras };
-    return render(<Grid {...props} />);
-  };
-  describe('rendering', () => {
-    it('renders without crashing', () => {
-      const { container } = renderComponent();
-      expect(container.firstChild).toBeInTheDocument();
-    });
-  });
-});