@pie-lib/graphing 4.0.22 → 4.0.24-beta.1

package/src/container/__tests__/index.test.jsx

@@ -1,319 +0,0 @@
-import React from 'react';
-import { render, waitFor } from '@pie-lib/test-utils';
-import Root, { GraphContainer } from '../index';
-import { changeMarks } from '../actions';
-
-jest.mock('../../graph-with-controls', () => {
-  return function GraphWithControls({ marks, onChangeMarks, onUndo, onRedo, onReset, disabled }) {
-    return (
-      <div data-testid="graph-with-controls">
-        <div data-testid="marks-count">{marks?.length || 0}</div>
-        {disabled && <div data-testid="disabled-indicator">Disabled</div>}
-        <button data-testid="change-marks" onClick={() => onChangeMarks && onChangeMarks([{ id: 1 }])}>
-          Change
-        </button>
-        <button data-testid="undo" onClick={onUndo}>
-          Undo
-        </button>
-        <button data-testid="redo" onClick={onRedo}>
-          Redo
-        </button>
-        <button data-testid="reset" onClick={onReset}>
-          Reset
-        </button>
-      </div>
-    );
-  };
-});
-
-jest.mock('@pie-lib/drag', () => ({
-  DragProvider: ({ children }) => <div data-testid="drag-provider">{children}</div>,
-}));
-
-describe('Container Root Component', () => {
-  const defaultProps = {
-    marks: [],
-    onChangeMarks: jest.fn(),
-  };
-
-  const renderComponent = (props = {}) => {
-    return render(<Root {...defaultProps} {...props} />);
-  };
-
-  describe('rendering', () => {
-    it('renders without crashing', () => {
-      const { container } = renderComponent();
-      expect(container).toBeInTheDocument();
-    });
-
-    it('renders GraphWithControls', () => {
-      const { getByTestId } = renderComponent();
-      expect(getByTestId('graph-with-controls')).toBeInTheDocument();
-    });
-
-    it('renders with Provider when no correctness set', () => {
-      const { container } = renderComponent({ marks: [{ id: 1, type: 'point' }] });
-      expect(container.querySelector('[data-testid="graph-with-controls"]')).toBeInTheDocument();
-    });
-
-    it('renders directly when correctness is set', () => {
-      const marks = [{ id: 1, type: 'point', correctness: { value: 'correct' } }];
-      const { getByTestId } = renderComponent({ marks });
-
-      expect(getByTestId('graph-with-controls')).toBeInTheDocument();
-      expect(getByTestId('disabled-indicator')).toBeInTheDocument();
-    });
-
-    it('passes marks to GraphWithControls', () => {
-      const marks = [{ id: 1 }, { id: 2 }];
-      const { getByTestId } = renderComponent({ marks });
-      expect(getByTestId('marks-count')).toHaveTextContent('2');
-    });
-  });
-
-  describe('Redux store', () => {
-    it('creates Redux store on mount', () => {
-      const component = new Root({ marks: [], onChangeMarks: jest.fn() });
-      expect(component.store).toBeDefined();
-      expect(typeof component.store.getState).toBe('function');
-      expect(typeof component.store.dispatch).toBe('function');
-    });
-
-    it('initializes store with marks from props', () => {
-      const marks = [{ id: 1, type: 'point' }];
-      const component = new Root({ marks, onChangeMarks: jest.fn() });
-
-      const state = component.store.getState();
-      expect(state.marks.present).toEqual(marks);
-    });
-
-    it('initializes store with empty marks', () => {
-      const component = new Root({ marks: [], onChangeMarks: jest.fn() });
-
-      const state = component.store.getState();
-      expect(state.marks.present).toEqual([]);
-    });
-
-    it('subscribes to store changes', async () => {
-      const onChangeMarks = jest.fn();
-      const component = new Root({ marks: [], onChangeMarks });
-
-      const newMarks = [{ id: 1 }];
-      component.store.dispatch(changeMarks(newMarks));
-
-      await waitFor(() => {
-        expect(onChangeMarks).toHaveBeenCalledWith(newMarks);
-      });
-    });
-  });
-
-  describe('componentDidUpdate', () => {
-    it('updates store when marks prop changes', () => {
-      const onChangeMarks = jest.fn();
-      const { rerender } = render(<Root marks={[]} onChangeMarks={onChangeMarks} />);
-
-      const newMarks = [{ id: 1, type: 'point' }];
-      rerender(<Root marks={newMarks} onChangeMarks={onChangeMarks} />);
-
-      expect(onChangeMarks).not.toHaveBeenCalled();
-    });
-
-    it('does not update when marks are equal', () => {
-      const marks = [{ id: 1, type: 'point' }];
-      const onChangeMarks = jest.fn();
-      const { rerender } = render(<Root marks={marks} onChangeMarks={onChangeMarks} />);
-
-      onChangeMarks.mockClear();
-
-      rerender(<Root marks={marks} onChangeMarks={onChangeMarks} />);
-
-      expect(onChangeMarks).not.toHaveBeenCalled();
-    });
-
-    it('handles marks changing from empty to non-empty', () => {
-      const onChangeMarks = jest.fn();
-      const { rerender } = render(<Root marks={[]} onChangeMarks={onChangeMarks} />);
-
-      const newMarks = [{ id: 1 }];
-
-      expect(() => {
-        rerender(<Root marks={newMarks} onChangeMarks={onChangeMarks} />);
-      }).not.toThrow();
-    });
-
-    it('handles marks changing from non-empty to empty', () => {
-      const onChangeMarks = jest.fn();
-      const { rerender } = render(<Root marks={[{ id: 1 }]} onChangeMarks={onChangeMarks} />);
-
-      expect(() => {
-        rerender(<Root marks={[]} onChangeMarks={onChangeMarks} />);
-      }).not.toThrow();
-    });
-  });
-
-  describe('onStoreChange', () => {
-    it('calls onChangeMarks when store state changes', async () => {
-      const onChangeMarks = jest.fn();
-      const component = new Root({ marks: [], onChangeMarks });
-
-      const newMarks = [{ id: 1, type: 'point' }];
-      component.store.dispatch(changeMarks(newMarks));
-
-      await waitFor(() => {
-        expect(onChangeMarks).toHaveBeenCalledWith(newMarks);
-      });
-    });
-
-    it('does not call onChangeMarks when marks are equal', () => {
-      const marks = [{ id: 1, type: 'point' }];
-      const onChangeMarks = jest.fn();
-      const component = new Root({ marks, onChangeMarks });
-
-      onChangeMarks.mockClear();
-
-      component.store.dispatch(changeMarks(marks));
-
-      expect(onChangeMarks).not.toHaveBeenCalled();
-    });
-
-    it('handles multiple store changes', async () => {
-      const onChangeMarks = jest.fn();
-      const component = new Root({ marks: [], onChangeMarks });
-
-      component.store.dispatch(changeMarks([{ id: 1 }]));
-      component.store.dispatch(changeMarks([{ id: 2 }]));
-      component.store.dispatch(changeMarks([{ id: 3 }]));
-
-      await waitFor(() => {
-        expect(onChangeMarks).toHaveBeenCalledTimes(3);
-      });
-    });
-  });
-
-  describe('correctness handling', () => {
-    it('disables when any mark has correctness', () => {
-      const marks = [
-        { id: 1, type: 'point' },
-        { id: 2, type: 'point', correctness: { value: 'correct' } },
-      ];
-      const { getByTestId } = renderComponent({ marks });
-
-      expect(getByTestId('disabled-indicator')).toBeInTheDocument();
-    });
-
-    it('renders without Provider when correctness is set', () => {
-      const marks = [{ id: 1, correctness: { value: 'correct' } }];
-      const { container } = renderComponent({ marks });
-
-      expect(container.querySelector('[data-testid="graph-with-controls"]')).toBeInTheDocument();
-    });
-
-    it('does not disable when no correctness is set', () => {
-      const marks = [
-        { id: 1, type: 'point' },
-        { id: 2, type: 'line' },
-      ];
-      const { queryByTestId } = renderComponent({ marks });
-
-      expect(queryByTestId('disabled-indicator')).not.toBeInTheDocument();
-    });
-
-    it('handles correctness with different values', () => {
-      const marks = [{ id: 1, correctness: { value: 'incorrect' } }];
-      const { getByTestId } = renderComponent({ marks });
-
-      expect(getByTestId('disabled-indicator')).toBeInTheDocument();
-    });
-
-    it('handles empty correctness object', () => {
-      const marks = [{ id: 1, correctness: {} }];
-      const { getByTestId } = renderComponent({ marks });
-
-      expect(getByTestId('disabled-indicator')).toBeInTheDocument();
-    });
-  });
-
-  describe('props forwarding', () => {
-    it('forwards additional props to GraphWithControls', () => {
-      const { container } = renderComponent({
-        className: 'custom-class',
-        size: { width: 500, height: 500 },
-      });
-
-      expect(container.querySelector('[data-testid="graph-with-controls"]')).toBeInTheDocument();
-    });
-
-    it('does not forward onChangeMarks and marks to GraphWithControls', () => {
-      const { getByTestId } = renderComponent({
-        marks: [{ id: 1 }],
-        onChangeMarks: jest.fn(),
-        otherProp: 'test',
-      });
-
-      expect(getByTestId('graph-with-controls')).toBeInTheDocument();
-    });
-  });
-
-  describe('edge cases', () => {
-    it('handles empty marks array', () => {
-      const { container } = renderComponent({ marks: [] });
-      expect(container).toBeInTheDocument();
-    });
-
-    it('handles marks with complex structure', () => {
-      const marks = [
-        {
-          id: 1,
-          type: 'line',
-          from: { x: 0, y: 0 },
-          to: { x: 10, y: 10 },
-          label: 'Line A',
-          correctness: { value: 'correct', label: 'Correct!' },
-        },
-      ];
-      const { getByTestId } = renderComponent({ marks });
-      expect(getByTestId('graph-with-controls')).toBeInTheDocument();
-    });
-
-    it('handles switching between correctness states', () => {
-      const { rerender } = render(<Root marks={[{ id: 1 }]} onChangeMarks={jest.fn()} />);
-
-      rerender(<Root marks={[{ id: 1, correctness: { value: 'correct' } }]} onChangeMarks={jest.fn()} />);
-
-      rerender(<Root marks={[{ id: 1 }]} onChangeMarks={jest.fn()} />);
-
-      expect(document.querySelector('[data-testid="graph-with-controls"]')).toBeInTheDocument();
-    });
-  });
-
-  describe('store synchronization', () => {
-    it('keeps store and props in sync', async () => {
-      const onChangeMarks = jest.fn();
-      const component = new Root({ marks: [], onChangeMarks });
-
-      const newMarks = [{ id: 1 }];
-      component.store.dispatch(changeMarks(newMarks));
-
-      await waitFor(() => {
-        const state = component.store.getState();
-        expect(state.marks.present).toEqual(newMarks);
-        expect(onChangeMarks).toHaveBeenCalledWith(newMarks);
-      });
-    });
-  });
-});
-
-describe('GraphContainer (connected component)', () => {
-  it('is a connected component', () => {
-    expect(GraphContainer).toBeDefined();
-    expect(GraphContainer.displayName).toContain('Connect');
-  });
-
-  it('maps state to props', () => {
-    expect(GraphContainer).toBeDefined();
-  });
-
-  it('maps dispatch to props', () => {
-    expect(GraphContainer).toBeDefined();
-  });
-});

package/src/container/__tests__/marks.test.js

@@ -1,172 +0,0 @@
-import marks from '../marks';
-
-describe('marks reducer', () => {
-  describe('initial state', () => {
-    it('returns empty array as initial state', () => {
-      const state = marks(undefined, { type: 'INIT' });
-      expect(state).toEqual([]);
-    });
-
-    it('handles no state parameter', () => {
-      const state = marks(undefined, { type: 'UNKNOWN_ACTION' });
-      expect(Array.isArray(state)).toBe(true);
-    });
-  });
-
-  describe('CHANGE_MARKS action', () => {
-    it('updates state with new marks', () => {
-      const initialState = [];
-      const newMarks = [{ id: 1, type: 'point' }];
-      const action = { type: 'CHANGE_MARKS', marks: newMarks };
-
-      const state = marks(initialState, action);
-      expect(state).toEqual(newMarks);
-    });
-
-    it('replaces existing marks', () => {
-      const initialState = [{ id: 1, type: 'point' }];
-      const newMarks = [{ id: 2, type: 'line' }];
-      const action = { type: 'CHANGE_MARKS', marks: newMarks };
-
-      const state = marks(initialState, action);
-      expect(state).toEqual(newMarks);
-      expect(state.length).toBe(1);
-      expect(state[0].id).toBe(2);
-    });
-
-    it('handles empty marks array', () => {
-      const initialState = [{ id: 1, type: 'point' }];
-      const action = { type: 'CHANGE_MARKS', marks: [] };
-
-      const state = marks(initialState, action);
-      expect(state).toEqual([]);
-    });
-
-    it('handles multiple marks', () => {
-      const initialState = [];
-      const newMarks = [
-        { id: 1, type: 'point', x: 1, y: 2 },
-        { id: 2, type: 'line', from: { x: 0, y: 0 }, to: { x: 5, y: 5 } },
-        { id: 3, type: 'circle', center: { x: 3, y: 3 }, radius: 2 },
-      ];
-      const action = { type: 'CHANGE_MARKS', marks: newMarks };
-
-      const state = marks(initialState, action);
-      expect(state).toEqual(newMarks);
-      expect(state.length).toBe(3);
-    });
-
-    it('throws error when marks is not an array', () => {
-      const initialState = [];
-      const action = { type: 'CHANGE_MARKS', marks: 'not an array' };
-
-      expect(() => marks(initialState, action)).toThrow('marks must be an array');
-    });
-
-    it('throws error when marks is null', () => {
-      const initialState = [];
-      const action = { type: 'CHANGE_MARKS', marks: null };
-
-      expect(() => marks(initialState, action)).toThrow('marks must be an array');
-    });
-
-    it('throws error when marks is undefined', () => {
-      const initialState = [];
-      const action = { type: 'CHANGE_MARKS', marks: undefined };
-
-      expect(() => marks(initialState, action)).toThrow('marks must be an array');
-    });
-
-    it('throws error when marks is an object', () => {
-      const initialState = [];
-      const action = { type: 'CHANGE_MARKS', marks: { id: 1 } };
-
-      expect(() => marks(initialState, action)).toThrow('marks must be an array');
-    });
-
-    it('throws error when marks is a number', () => {
-      const initialState = [];
-      const action = { type: 'CHANGE_MARKS', marks: 123 };
-
-      expect(() => marks(initialState, action)).toThrow('marks must be an array');
-    });
-
-    it('preserves mark properties', () => {
-      const initialState = [];
-      const newMarks = [
-        {
-          id: 1,
-          type: 'point',
-          x: 10,
-          y: 20,
-          label: 'A',
-          correctness: { value: 'correct' },
-          editable: true,
-          interactive: true,
-        },
-      ];
-      const action = { type: 'CHANGE_MARKS', marks: newMarks };
-
-      const state = marks(initialState, action);
-      expect(state[0]).toEqual(newMarks[0]);
-      expect(state[0].correctness).toBeDefined();
-      expect(state[0].editable).toBe(true);
-    });
-  });
-
-  describe('unknown actions', () => {
-    it('returns current state for unknown action', () => {
-      const initialState = [{ id: 1, type: 'point' }];
-      const action = { type: 'UNKNOWN_ACTION' };
-
-      const state = marks(initialState, action);
-      expect(state).toBe(initialState);
-    });
-
-    it('returns current state for ADD_MARK action', () => {
-      const initialState = [{ id: 1, type: 'point' }];
-      const action = { type: 'ADD_MARK' };
-
-      const state = marks(initialState, action);
-      expect(state).toBe(initialState);
-    });
-
-    it('does not modify state for unknown actions', () => {
-      const initialState = [{ id: 1, type: 'point' }];
-      const action = { type: 'SOME_OTHER_ACTION', data: 'test' };
-
-      const state = marks(initialState, action);
-      expect(state).toEqual(initialState);
-    });
-  });
-
-  describe('immutability', () => {
-    it('does not mutate original state', () => {
-      const initialState = [{ id: 1, type: 'point' }];
-      const originalState = [...initialState];
-      const newMarks = [{ id: 2, type: 'line' }];
-      const action = { type: 'CHANGE_MARKS', marks: newMarks };
-
-      marks(initialState, action);
-      expect(initialState).toEqual(originalState);
-    });
-
-    it('returns new array reference for CHANGE_MARKS', () => {
-      const initialState = [{ id: 1, type: 'point' }];
-      const newMarks = [{ id: 1, type: 'point' }];
-      const action = { type: 'CHANGE_MARKS', marks: newMarks };
-
-      const state = marks(initialState, action);
-      expect(state).not.toBe(initialState);
-      expect(state).toBe(newMarks);
-    });
-
-    it('returns same reference for unknown actions', () => {
-      const initialState = [{ id: 1, type: 'point' }];
-      const action = { type: 'UNKNOWN_ACTION' };
-
-      const state = marks(initialState, action);
-      expect(state).toBe(initialState);
-    });
-  });
-});