@pie-lib/charting 7.0.4-next.31 → 7.0.4-next.36

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

@@ -0,0 +1,532 @@
+import React from 'react';
+import { fireEvent, render, waitFor } from '@testing-library/react';
+import { createTheme, ThemeProvider } from '@mui/material/styles';
+import ConfigureChartPanel, { resetValues } from '../chart-setup';
+
+jest.mock('../chart-type', () => {
+  return function ChartType({ value, onChange }) {
+    return (
+      <select data-testid="chart-type-select" value={value} onChange={onChange}>
+        <option value="bar">Bar</option>
+        <option value="line">Line</option>
+        <option value="linePlot">Line Plot</option>
+        <option value="dotPlot">Dot Plot</option>
+      </select>
+    );
+  };
+});
+
+jest.mock('@pie-lib/config-ui', () => ({
+  NumberTextFieldCustom: ({ label, value, onChange, ...props }) => (
+    <input
+      data-testid={`number-field-${label.toLowerCase().replace(/\s+/g, '-')}`}
+      type="number"
+      value={value}
+      onChange={(e) => onChange(e, parseFloat(e.target.value) || 0)}
+      aria-label={label}
+      {...props}
+    />
+  ),
+  AlertDialog: ({ open, title, text, onClose, onConfirm }) =>
+    open ? (
+      <div data-testid="alert-dialog">
+        <h2>{title}</h2>
+        <p>{text}</p>
+        <button data-testid="alert-cancel" onClick={onClose}>
+          Cancel
+        </button>
+        <button data-testid="alert-confirm" onClick={onConfirm}>
+          Confirm
+        </button>
+      </div>
+    ) : null,
+}));
+
+let theme;
+
+beforeAll(() => {
+  theme = createTheme();
+});
+
+describe('resetValues', () => {
+  let data;
+  let range;
+  let model;
+  let onChange;
+
+  beforeEach(() => {
+    range = { min: 0, max: 10, step: 1 };
+    data = [{ value: 2 }, { value: 11 }, { value: 5.5 }, { value: 2.0000000001 }, { value: 2.9999999999 }];
+    model = { someField: 'someValue', data };
+    onChange = jest.fn();
+  });
+
+  it('should reset values greater than range.max to zero', () => {
+    resetValues(data, true, range, onChange, model);
+    expect(data[1].value).toBe(0);
+  });
+
+  it('should reset values that are not multiples of range.step to zero', () => {
+    resetValues(data, true, range, onChange, model);
+    expect(data[2].value).toBe(0);
+  });
+
+  it('should not reset values that are within range and multiples of range.step', () => {
+    resetValues(data, true, range, onChange, model);
+    expect(data[0].value).toBe(2);
+  });
+
+  it('should not reset floating point values that are close to multiples of range.step', () => {
+    resetValues(data, true, range, onChange, model);
+    expect(data[3].value).toBe(2.0000000001);
+    expect(data[4].value).toBe(2.9999999999);
+  });
+
+  it('should not call onChange when updateModel is false', () => {
+    resetValues(data, false, range, onChange, model);
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it('should handle null or undefined data array', () => {
+    expect(() => resetValues(null, true, range, onChange, model)).not.toThrow();
+    expect(() => resetValues(undefined, true, range, onChange, model)).not.toThrow();
+  });
+
+  it('should handle empty data array', () => {
+    resetValues([], true, range, onChange, model);
+    expect(onChange).toHaveBeenCalledWith({ ...model, data: [] });
+  });
+
+  it('should reset multiple invalid values', () => {
+    const multiData = [{ value: 11 }, { value: 12 }, { value: 5.5 }, { value: 3.7 }];
+    resetValues(multiData, true, range, onChange, { ...model, data: multiData });
+    expect(multiData.every((d) => d.value === 0)).toBe(true);
+  });
+
+  it('should handle decimal step values', () => {
+    const decimalRange = { min: 0, max: 10, step: 0.5 };
+    const decimalData = [{ value: 1.5 }, { value: 2.3 }, { value: 3.0 }];
+    resetValues(decimalData, true, decimalRange, onChange, model);
+    expect(decimalData[0].value).toBe(1.5);
+    expect(decimalData[1].value).toBe(0);
+    expect(decimalData[2].value).toBe(3.0);
+  });
+});
+
+describe('ConfigureChartPanel', () => {
+  const defaultModel = {
+    chartType: 'bar',
+    range: { min: 0, max: 10, step: 1, labelStep: 1 },
+    graph: { width: 400, height: 500 },
+    data: [{ value: 5 }],
+    correctAnswer: { data: [{ value: 3 }] },
+    changeInteractiveEnabled: true,
+    changeEditableEnabled: true,
+  };
+
+  const defaultProps = {
+    model: defaultModel,
+    onChange: jest.fn(),
+    chartDimensions: {
+      showInConfigPanel: true,
+      width: { min: 50, max: 700, step: 20 },
+      height: { min: 400, max: 700, step: 20 },
+    },
+    gridValues: { range: { min: 0, max: 10000 } },
+    labelValues: { range: { min: 0, max: 10000 } },
+    studentNewCategoryDefaultLabel: { label: 'Category' },
+    availableChartTypes: {},
+    chartTypeLabel: 'Chart Type',
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  const renderComponent = (extras = {}) => {
+    const props = { ...defaultProps, ...extras };
+    return render(
+      <ThemeProvider theme={theme}>
+        <ConfigureChartPanel {...props} />
+      </ThemeProvider>,
+    );
+  };
+
+  describe('rendering', () => {
+    it('should render without crashing', () => {
+      const { container } = renderComponent();
+      expect(container).toBeInTheDocument();
+    });
+
+    it('should render "Configure Chart" title', () => {
+      const { getByText } = renderComponent();
+      expect(getByText('Configure Chart')).toBeInTheDocument();
+    });
+
+    it('should render chart type selector', () => {
+      const { getByTestId } = renderComponent();
+      expect(getByTestId('chart-type-select')).toBeInTheDocument();
+    });
+
+    it('should render max value field', () => {
+      const { getByLabelText } = renderComponent();
+      expect(getByLabelText('Max Value')).toBeInTheDocument();
+    });
+
+    it('should render grid interval field for non-plot charts', () => {
+      const { getByLabelText } = renderComponent({
+        model: { ...defaultModel, chartType: 'bar' },
+      });
+      expect(getByLabelText('Grid Interval')).toBeInTheDocument();
+    });
+
+    it('should render label interval field for non-plot charts', () => {
+      const { getByLabelText } = renderComponent({
+        model: { ...defaultModel, chartType: 'bar' },
+      });
+      expect(getByLabelText('Label Interval')).toBeInTheDocument();
+    });
+
+    it('should not render step config for plot charts', () => {
+      const { queryByLabelText } = renderComponent({
+        model: { ...defaultModel, chartType: 'linePlot' },
+      });
+      expect(queryByLabelText('Grid Interval')).not.toBeInTheDocument();
+      expect(queryByLabelText('Label Interval')).not.toBeInTheDocument();
+    });
+
+    it('should render dimensions section when showInConfigPanel is true', () => {
+      const { getByText } = renderComponent({
+        chartDimensions: {
+          showInConfigPanel: true,
+          width: { min: 50, max: 700, step: 20 },
+          height: { min: 400, max: 700, step: 20 },
+        },
+      });
+      expect(getByText('Dimensions(px)')).toBeInTheDocument();
+    });
+
+    it('should not render dimensions section when showInConfigPanel is false', () => {
+      const { queryByText } = renderComponent({
+        chartDimensions: {
+          showInConfigPanel: false,
+          width: { min: 50, max: 700, step: 20 },
+          height: { min: 400, max: 700, step: 20 },
+        },
+      });
+      expect(queryByText('Dimensions(px)')).not.toBeInTheDocument();
+    });
+
+    it('should render width field when dimensions are shown', () => {
+      const { getByLabelText } = renderComponent();
+      expect(getByLabelText('Width')).toBeInTheDocument();
+    });
+
+    it('should render height field when dimensions are shown', () => {
+      const { getByLabelText } = renderComponent();
+      expect(getByLabelText('Height')).toBeInTheDocument();
+    });
+
+    it('should display width constraints', () => {
+      const { getByText } = renderComponent();
+      expect(getByText('Min 50, Max 700')).toBeInTheDocument();
+    });
+
+    it('should display height constraints', () => {
+      const { getAllByText } = renderComponent();
+      const constraints = getAllByText('Min 400, Max 700');
+      expect(constraints.length).toBeGreaterThan(0);
+    });
+  });
+
+  describe('chart type changes', () => {
+    it('should call onChange when chart type is changed to non-plot', () => {
+      const onChange = jest.fn();
+      const { getByTestId } = renderComponent({ onChange });
+
+      fireEvent.change(getByTestId('chart-type-select'), { target: { value: 'line' } });
+
+      expect(onChange).toHaveBeenCalled();
+    });
+
+    it('should show warning when switching to plot with invalid config', async () => {
+      const { getByTestId, getByText } = renderComponent({
+        model: { ...defaultModel, range: { max: 20, step: 2, labelStep: 2 } },
+      });
+
+      fireEvent.change(getByTestId('chart-type-select'), { target: { value: 'linePlot' } });
+
+      await waitFor(() => {
+        expect(getByText('Warning')).toBeInTheDocument();
+      });
+    });
+
+    it('should allow switching to plot with valid config', () => {
+      const onChange = jest.fn();
+      const { getByTestId } = renderComponent({
+        onChange,
+        model: { ...defaultModel, range: { max: 10, step: 1, labelStep: 1 } },
+      });
+
+      fireEvent.change(getByTestId('chart-type-select'), { target: { value: 'dotPlot' } });
+
+      expect(onChange).toHaveBeenCalledWith(
+        expect.objectContaining({
+          chartType: 'dotPlot',
+        }),
+      );
+    });
+  });
+
+  describe('range changes', () => {
+    it('should update max value', () => {
+      const onChange = jest.fn();
+      const { getByLabelText } = renderComponent({ onChange });
+
+      const maxInput = getByLabelText('Max Value');
+      fireEvent.change(maxInput, { target: { value: '15' } });
+
+      expect(onChange).toHaveBeenCalled();
+    });
+
+    it('should update step value', () => {
+      const onChange = jest.fn();
+      const { getByLabelText } = renderComponent({ onChange });
+
+      const stepInput = getByLabelText('Grid Interval');
+      fireEvent.change(stepInput, { target: { value: '2' } });
+
+      expect(onChange).toHaveBeenCalled();
+    });
+
+    it('should update label step value', () => {
+      const onChange = jest.fn();
+      const { getByLabelText } = renderComponent({ onChange });
+
+      const labelStepInput = getByLabelText('Label Interval');
+      fireEvent.change(labelStepInput, { target: { value: '2' } });
+
+      expect(onChange).toHaveBeenCalled();
+    });
+
+    it('should show alert when changing max causes data to be out of range', async () => {
+      const onChange = jest.fn();
+      const { getByLabelText, queryByTestId } = renderComponent({
+        onChange,
+        model: {
+          ...defaultModel,
+          range: { min: 0, max: 10, step: 1, labelStep: 1 },
+          data: [{ value: 8 }],
+          correctAnswer: { data: [] },
+        },
+      });
+
+      const maxInput = getByLabelText('Max Value');
+      fireEvent.change(maxInput, { target: { value: '5' } });
+
+      await waitFor(() => {
+        expect(onChange).toHaveBeenCalled();
+      });
+    });
+
+    it('should show alert when changing step causes data to be out of range', async () => {
+      const onChange = jest.fn();
+      const { getByLabelText } = renderComponent({
+        onChange,
+        model: {
+          ...defaultModel,
+          range: { min: 0, max: 10, step: 1, labelStep: 1 },
+          data: [{ value: 5 }],
+          correctAnswer: { data: [] },
+        },
+      });
+
+      const stepInput = getByLabelText('Grid Interval');
+      fireEvent.change(stepInput, { target: { value: '3' } });
+
+      await waitFor(() => {
+        expect(onChange).toHaveBeenCalled();
+      });
+    });
+  });
+
+  describe('dimensions changes', () => {
+    it('should update width', () => {
+      const onChange = jest.fn();
+      const { getByLabelText } = renderComponent({ onChange });
+
+      const widthInput = getByLabelText('Width');
+      fireEvent.change(widthInput, { target: { value: '500' } });
+
+      expect(onChange).toHaveBeenCalledWith(
+        expect.objectContaining({
+          graph: expect.objectContaining({ width: 500 }),
+        }),
+      );
+    });
+
+    it('should update height', () => {
+      const onChange = jest.fn();
+      const { getByLabelText } = renderComponent({ onChange });
+
+      const heightInput = getByLabelText('Height');
+      fireEvent.change(heightInput, { target: { value: '600' } });
+
+      expect(onChange).toHaveBeenCalledWith(
+        expect.objectContaining({
+          graph: expect.objectContaining({ height: 600 }),
+        }),
+      );
+    });
+  });
+
+  describe('alert dialog', () => {
+    it('should reset range on cancel', async () => {
+      const onChange = jest.fn();
+      const { getByLabelText, queryByTestId } = renderComponent({
+        onChange,
+        model: {
+          ...defaultModel,
+          range: { min: 0, max: 10, step: 1, labelStep: 1 },
+          data: [{ value: 8 }],
+          correctAnswer: { data: [] },
+        },
+      });
+
+      const maxInput = getByLabelText('Max Value');
+
+      const event = { target: maxInput };
+      fireEvent.change(maxInput, { target: { value: '5' } });
+
+      await waitFor(
+        () => {
+          const dialog = queryByTestId('alert-dialog');
+          if (dialog) {
+            fireEvent.click(queryByTestId('alert-cancel'));
+          }
+        },
+        { timeout: 100 },
+      ).catch(() => {});
+
+      expect(onChange).toHaveBeenCalled();
+    });
+
+    it('should apply changes and reset data on confirm', async () => {
+      const onChange = jest.fn();
+      const { getByLabelText, queryByTestId } = renderComponent({
+        onChange,
+        model: {
+          ...defaultModel,
+          range: { min: 0, max: 10, step: 1, labelStep: 1 },
+          data: [{ value: 8 }],
+          correctAnswer: { data: [] },
+        },
+      });
+
+      const maxInput = getByLabelText('Max Value');
+      fireEvent.change(maxInput, { target: { value: '5' } });
+
+      await waitFor(
+        () => {
+          const dialog = queryByTestId('alert-dialog');
+          if (dialog) {
+            fireEvent.click(queryByTestId('alert-confirm'));
+          }
+        },
+        { timeout: 100 },
+      ).catch(() => {});
+
+      expect(onChange).toHaveBeenCalled();
+    });
+  });
+
+  describe('edge cases', () => {
+    it('should handle missing chartDimensions', () => {
+      const { container } = renderComponent({ chartDimensions: undefined });
+      expect(container).toBeInTheDocument();
+    });
+
+    it('should handle missing gridValues', () => {
+      const { container } = renderComponent({ gridValues: undefined });
+      expect(container).toBeInTheDocument();
+    });
+
+    it('should handle missing labelValues', () => {
+      const { container } = renderComponent({ labelValues: undefined });
+      expect(container).toBeInTheDocument();
+    });
+
+    it('should handle empty model data', () => {
+      const { container } = renderComponent({
+        model: {
+          ...defaultModel,
+          data: [],
+          correctAnswer: { data: [] },
+        },
+      });
+      expect(container).toBeInTheDocument();
+    });
+
+    it('should handle empty range object', () => {
+      const { container } = renderComponent({
+        model: {
+          ...defaultModel,
+          range: {},
+        },
+      });
+      expect(container).toBeInTheDocument();
+    });
+
+    it('should apply width constraints correctly', () => {
+      const { container } = renderComponent({
+        chartDimensions: {
+          showInConfigPanel: true,
+          width: { min: 100, max: 600, step: 50 },
+          height: { min: 400, max: 700, step: 20 },
+        },
+      });
+      expect(container).toBeInTheDocument();
+    });
+
+    it('should apply height constraints correctly', () => {
+      const { container } = renderComponent({
+        chartDimensions: {
+          showInConfigPanel: true,
+          width: { min: 50, max: 700, step: 20 },
+          height: { min: 450, max: 650, step: 30 },
+        },
+      });
+      expect(container).toBeInTheDocument();
+    });
+
+    it('should handle very small step values', () => {
+      const { container } = renderComponent({
+        chartDimensions: {
+          showInConfigPanel: true,
+          width: { min: 50, max: 700, step: 0.5 },
+          height: { min: 400, max: 700, step: 0.5 },
+        },
+      });
+      expect(container).toBeInTheDocument();
+    });
+  });
+
+  describe('useEffect lifecycle', () => {
+    it('should call onChange on mount', () => {
+      const onChange = jest.fn();
+      renderComponent({ onChange });
+
+      expect(onChange).toHaveBeenCalled();
+    });
+
+    it('should set category default label on mount', () => {
+      const onChange = jest.fn();
+      renderComponent({
+        onChange,
+        studentNewCategoryDefaultLabel: { label: 'Test Category' },
+      });
+
+      expect(onChange).toHaveBeenCalled();
+    });
+  });
+});

package/src/__tests__/chart-type.test.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { render } from '@pie-lib/test-utils';
+import ChartType from '../chart-type';
+
+describe('ChartType', () => {
+  let props;
+  const onChange = jest.fn();
+
+  beforeEach(() => {
+    props = {
+      classes: {},
+      value: 'bar',
+      onChange,
+    };
+  });
+
+  describe('rendering', () => {
+    it('renders chart type selector', () => {
+      const { container } = render(<ChartType {...props} />);
+      expect(container.firstChild).toBeInTheDocument();
+    });
+  });
+});

package/src/__tests__/chart.test.jsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import { render } from '@pie-lib/test-utils';
+import { Chart } from '../chart';
+import { createBandScale, graphProps } from './utils';
+
+describe('ChartAxes', () => {
+  let onDataChange = jest.fn();
+
+  const renderComponent = (extras) => {
+    const defaults = {
+      classes: {},
+      onDataChange,
+      className: 'className',
+      graphProps: graphProps(),
+      xBand: createBandScale(['a', 'b', 'c'], [0, 100]),
+      charts: [
+        {
+          type: 'bar',
+          Component: () => <div />,
+        },
+      ],
+      chartType: 'bar',
+      domain: {},
+      range: {
+        min: 0,
+        max: 10,
+      },
+      size: {
+        width: 100,
+        height: 100,
+      },
+      data: [],
+    };
+    const props = { ...defaults, ...extras };
+    return render(<Chart {...props} />);
+  };
+
+  describe('rendering', () => {
+    it('renders chart container', () => {
+      const { container } = renderComponent();
+      expect(container.firstChild).toBeInTheDocument();
+      expect(container.querySelector('svg')).toBeInTheDocument();
+    });
+
+    it('renders chart with default size', () => {
+      const { container } = renderComponent();
+      const svg = container.querySelector('svg');
+      expect(svg).toBeInTheDocument();
+      expect(svg).toHaveAttribute('width', '240');
+      expect(svg).toHaveAttribute('height', '240');
+    });
+
+    it('renders chart when size is not defined', () => {
+      const { container } = renderComponent({ size: undefined });
+      expect(container.firstChild).toBeInTheDocument();
+      const svg = container.querySelector('svg');
+      expect(svg).toBeInTheDocument();
+    });
+
+    it('renders chart without chartType property', () => {
+      const { container } = renderComponent({ chartType: null });
+      expect(container.firstChild).toBeInTheDocument();
+      expect(container.querySelector('svg')).toBeInTheDocument();
+    });
+
+    it('renders chart without chartType and charts properties', () => {
+      const { container } = renderComponent({ chartType: null, charts: null });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders chart without chartType property and empty charts property', () => {
+      const { container } = renderComponent({ chartType: null, charts: [] });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders chart with chartType property and empty charts property', () => {
+      const { container } = renderComponent({ charts: [] });
+      expect(container.firstChild).toBeInTheDocument();
+      expect(container.querySelector('svg')).toBeInTheDocument();
+    });
+  });
+
+  // Note: changeData, getChart, and deleteCategory are internal implementation details.
+  // In RTL philosophy, we test user-visible behavior rather than implementation.
+  // These methods would be tested indirectly through user interactions that trigger them.
+});

package/src/__tests__/grid.test.jsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { render } from '@pie-lib/test-utils';
+import { Grid } from '../grid';
+import { createBandScale, graphProps } from './utils';
+
+describe('Grid', () => {
+  const renderComponent = (extras) => {
+    const defaults = {
+      classes: {},
+      className: 'className',
+      graphProps: graphProps(),
+      xBand: createBandScale(['a', 'b', 'c'], [0, 400]),
+    };
+    const props = { ...defaults, ...extras };
+    return render(
+      <svg>
+        <Grid {...props} />
+      </svg>,
+    );
+  };
+
+  describe('rendering', () => {
+    it('renders grid container', () => {
+      const { container } = renderComponent();
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders grid with SVG group', () => {
+      const { container } = renderComponent();
+      const svg = container.querySelector('svg');
+      expect(svg).toBeInTheDocument();
+      // Grid renders a <g> element (StyledGridGroup)
+      const gridGroup = container.querySelector('g');
+      expect(gridGroup).toBeInTheDocument();
+    });
+  });
+});