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

package/src/tools/circle/__tests__/component.test.jsx

@@ -45,6 +45,444 @@ describe('Component', () => {
       const { container } = renderWithLabels();
       expect(container.firstChild).toBeInTheDocument();
     });
+
+    it('renders a g element', () => {
+      const { container } = renderComponent();
+      const g = container.querySelector('g');
+      expect(g).toBeInTheDocument();
+    });
+
+    it('renders BgCircle component', () => {
+      const { container } = renderComponent();
+      // BgCircle is rendered as a styled component
+      expect(container.querySelector('g')).toBeInTheDocument();
+    });
+
+    it('renders two BasePoint components', () => {
+      const { container } = renderComponent();
+      // Two points: from and to
+      const points = container.querySelectorAll('g');
+      expect(points.length).toBeGreaterThanOrEqual(2);
+    });
+
+    it('renders with building prop', () => {
+      const { container } = renderComponent({ building: true });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders with disabled prop', () => {
+      const { container } = renderComponent({ disabled: true });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders with correctness prop', () => {
+      const { container } = renderComponent({ correctness: 'correct' });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders with coordinatesOnHover enabled', () => {
+      const { container } = renderComponent({ coordinatesOnHover: true });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders with labelModeEnabled', () => {
+      const { container } = renderComponent({ labelModeEnabled: true });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders with middle point', () => {
+      const middle = { x: 0.5, y: 0.5, label: 'M' };
+      const { container } = renderComponent({
+        middle,
+        labelNode,
+        labelModeEnabled: true,
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('handles undefined to point (uses from)', () => {
+      const { container } = renderComponent({ to: undefined });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('handles null to point (uses from)', () => {
+      const { container } = renderComponent({ to: null });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+  });
+
+  describe('props', () => {
+    it('passes onChange callback', () => {
+      const customOnChange = jest.fn();
+      const { container } = renderComponent({ onChange: customOnChange });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('passes changeMarkProps callback', () => {
+      const customChangeMarkProps = jest.fn();
+      const { container } = renderComponent({ changeMarkProps: customChangeMarkProps });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('passes onClick callback', () => {
+      const onClick = jest.fn();
+      const { container } = renderComponent({ onClick });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('passes onDragStart callback', () => {
+      const onDragStart = jest.fn();
+      const { container } = renderComponent({ onDragStart });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('passes onDragStop callback', () => {
+      const onDragStop = jest.fn();
+      const { container } = renderComponent({ onDragStop });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('uses default onClick when not provided', () => {
+      const { container } = renderComponent({ onClick: undefined });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('passes graphProps', () => {
+      const customGraphProps = graphProps();
+      customGraphProps.size = { width: 800, height: 600 };
+      const { container } = renderComponent({ graphProps: customGraphProps });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('passes className', () => {
+      const { container } = renderComponent({ className: 'custom-circle' });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+  });
+
+  describe('labels', () => {
+    it('renders from label when provided', () => {
+      const { container } = renderWithLabels();
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders to label when provided', () => {
+      const { container } = renderWithLabels();
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders middle label when provided', () => {
+      const middle = { x: 0.5, y: 0.5, label: 'M' };
+      const { container } = renderComponent({
+        labelNode,
+        middle,
+        from: fromWithLabel,
+        to: toWithLabel,
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('does not render labels when labelNode is not provided', () => {
+      const { container } = renderComponent({
+        from: fromWithLabel,
+        to: toWithLabel,
+        labelNode: null,
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('handles empty label', () => {
+      const from = { x: 0, y: 0, label: '' };
+      const to = { x: 1, y: 1, label: '' };
+      const { container } = renderComponent({
+        labelNode,
+        from,
+        to,
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders with label mode enabled', () => {
+      const { container } = renderComponent({
+        labelNode,
+        labelModeEnabled: true,
+        from: fromWithLabel,
+        to: toWithLabel,
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders with label mode disabled', () => {
+      const { container } = renderComponent({
+        labelNode,
+        labelModeEnabled: false,
+        from: fromWithLabel,
+        to: toWithLabel,
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders with limitLabeling enabled', () => {
+      const { container } = renderComponent({
+        labelNode,
+        limitLabeling: true,
+        from: fromWithLabel,
+        to: toWithLabel,
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('handles from label undefined', () => {
+      const from = { x: 0, y: 0 };
+      const to = { x: 1, y: 1, label: 'B' };
+      const { container } = renderComponent({
+        labelNode,
+        from,
+        to,
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('handles to label undefined', () => {
+      const from = { x: 0, y: 0, label: 'A' };
+      const to = { x: 1, y: 1 };
+      const { container } = renderComponent({
+        labelNode,
+        from,
+        to,
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+  });
+
+  describe('coordinates', () => {
+    it('renders with positive coordinates', () => {
+      const { container } = renderComponent({
+        from: xy(5, 10),
+        to: xy(15, 20),
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders with negative coordinates', () => {
+      const { container } = renderComponent({
+        from: xy(-5, -10),
+        to: xy(-15, -20),
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders with zero coordinates', () => {
+      const { container } = renderComponent({
+        from: xy(0, 0),
+        to: xy(0, 0),
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders with decimal coordinates', () => {
+      const { container } = renderComponent({
+        from: { x: 1.5, y: 2.7 },
+        to: { x: 3.2, y: 4.9 },
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders with large coordinates', () => {
+      const { container } = renderComponent({
+        from: xy(1000, 1000),
+        to: xy(2000, 2000),
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders with mixed coordinate signs', () => {
+      const { container } = renderComponent({
+        from: xy(-5, 10),
+        to: xy(15, -20),
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders with very close points', () => {
+      const { container } = renderComponent({
+        from: { x: 5, y: 5 },
+        to: { x: 5.01, y: 5.01 },
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders with very far points', () => {
+      const { container } = renderComponent({
+        from: xy(0, 0),
+        to: xy(10000, 10000),
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+  });
+
+  describe('states', () => {
+    it('renders in building state', () => {
+      const { container } = renderComponent({ building: true });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders in completed state', () => {
+      const { container } = renderComponent({ building: false });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders in disabled state', () => {
+      const { container } = renderComponent({ disabled: true });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders in enabled state', () => {
+      const { container } = renderComponent({ disabled: false });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders with building and disabled', () => {
+      const { container } = renderComponent({ building: true, disabled: true });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders with correctness correct', () => {
+      const { container } = renderComponent({ correctness: 'correct' });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders with correctness incorrect', () => {
+      const { container } = renderComponent({ correctness: 'incorrect' });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders with correctness partial', () => {
+      const { container } = renderComponent({ correctness: 'partial' });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders without correctness', () => {
+      const { container } = renderComponent({ correctness: undefined });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+  });
+
+  describe('edge cases', () => {
+    it('handles null labelNode', () => {
+      const { container } = renderComponent({
+        labelNode: null,
+        from: fromWithLabel,
+        to: toWithLabel,
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('handles undefined labelNode', () => {
+      const { container } = renderComponent({
+        labelNode: undefined,
+        from: fromWithLabel,
+        to: toWithLabel,
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('handles missing from coordinates', () => {
+      const { container } = renderComponent({
+        from: {},
+        to: xy(1, 1),
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('handles all props undefined except required', () => {
+      const { container } = renderComponent({
+        building: undefined,
+        disabled: undefined,
+        correctness: undefined,
+        coordinatesOnHover: undefined,
+        labelModeEnabled: undefined,
+        limitLabeling: undefined,
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders with custom classes', () => {
+      const { container } = renderComponent({
+        classes: { root: 'custom-root' },
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders with empty classes', () => {
+      const { container } = renderComponent({ classes: {} });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('handles middle point without label', () => {
+      const middle = { x: 0.5, y: 0.5 };
+      const { container } = renderComponent({
+        labelNode,
+        middle,
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders with all label types simultaneously', () => {
+      const middle = { x: 0.5, y: 0.5, label: 'M' };
+      const { container } = renderComponent({
+        labelNode,
+        from: fromWithLabel,
+        to: toWithLabel,
+        middle,
+        labelModeEnabled: true,
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+  });
+
+  describe('integration', () => {
+    it('renders complete circle with all features', () => {
+      const middle = { x: 0.5, y: 0.5, label: 'Middle' };
+      const { container } = renderComponent({
+        from: fromWithLabel,
+        to: toWithLabel,
+        middle,
+        labelNode,
+        labelModeEnabled: true,
+        coordinatesOnHover: true,
+        correctness: 'correct',
+        building: false,
+        disabled: false,
+        onClick: jest.fn(),
+        onChange: jest.fn(),
+        changeMarkProps: jest.fn(),
+        onDragStart: jest.fn(),
+        onDragStop: jest.fn(),
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders building circle without labels', () => {
+      const { container } = renderComponent({
+        from: xy(0, 0),
+        to: xy(1, 1),
+        building: true,
+        disabled: false,
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders disabled circle with labels', () => {
+      const { container } = renderComponent({
+        from: fromWithLabel,
+        to: toWithLabel,
+        labelNode,
+        disabled: true,
+        building: false,
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
   });
 
   // Note: Instance method tests (dragFrom, dragTo, dragCircle, labelChange, clickPoint)