@pie-lib/graphing 4.0.5-next.0 → 4.0.5-next.102

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

@@ -0,0 +1,319 @@
+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

@@ -0,0 +1,172 @@
+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);
+    });
+  });
+});