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

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

@@ -2,7 +2,7 @@ import { render } from '@pie-lib/test-utils';
 import React from 'react';
 import { graphProps, xy } from '../../../__tests__/utils';
 
-import { RawBaseComponent, buildLines, swap } from '../component';
+import { buildLines, RawBaseComponent, swap } from '../component';
 
 const xyLabel = (x, y, index, label) => ({
   ...xy(x, y, index),
@@ -67,7 +67,396 @@ describe('RawBaseComponent', () => {
     });
 
     it('renders with labels', () => {
-      const { container} = renderWithLabels();
+      const { container } = renderWithLabels();
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders with multiple points', () => {
+      const { container } = renderComponent({
+        points: [xy(0, 0, 0), xy(1, 1, 1), xy(2, 0, 2)],
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders with closed polygon', () => {
+      const { container } = renderComponent({
+        points: [xy(0, 0, 0), xy(1, 1, 1), xy(2, 0, 2)],
+        closed: true,
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders with single point', () => {
+      const { container } = renderComponent({
+        points: [xy(0, 0, 0)],
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders with two points', () => {
+      const { container } = renderComponent({
+        points: [xy(0, 0, 0), xy(1, 1, 1)],
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders with many points', () => {
+      const manyPoints = Array.from({ length: 10 }, (_, i) => xy(i, i, i));
+      const { container } = renderComponent({
+        points: manyPoints,
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders with negative coordinates', () => {
+      const { container } = renderComponent({
+        points: [xy(-5, -5, 0), xy(-1, -1, 1), xy(-3, -2, 2)],
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders with decimal coordinates', () => {
+      const { container } = renderComponent({
+        points: [xy(0.5, 0.5, 0), xy(1.5, 1.5, 1), xy(2.5, 0.5, 2)],
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders with zero coordinates', () => {
+      const { container } = renderComponent({
+        points: [xy(0, 0, 0), xy(0, 0, 1), xy(0, 0, 2)],
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+  });
+
+  describe('states', () => {
+    it('renders in disabled state', () => {
+      const { container } = renderComponent({
+        points: [xy(0, 0, 0), xy(1, 1, 1), xy(2, 0, 2)],
+        disabled: true,
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders in enabled state', () => {
+      const { container } = renderComponent({
+        points: [xy(0, 0, 0), xy(1, 1, 1), xy(2, 0, 2)],
+        disabled: false,
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders with correctness correct', () => {
+      const { container } = renderComponent({
+        points: [xy(0, 0, 0), xy(1, 1, 1), xy(2, 0, 2)],
+        correctness: 'correct',
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders with correctness incorrect', () => {
+      const { container } = renderComponent({
+        points: [xy(0, 0, 0), xy(1, 1, 1), xy(2, 0, 2)],
+        correctness: 'incorrect',
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders with correctness partial', () => {
+      const { container } = renderComponent({
+        points: [xy(0, 0, 0), xy(1, 1, 1), xy(2, 0, 2)],
+        correctness: 'partial',
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders with building state', () => {
+      const { container } = renderComponent({
+        points: [xy(0, 0, 0), xy(1, 1, 1)],
+        building: true,
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+  });
+
+  describe('labels', () => {
+    it('renders with all points labeled', () => {
+      const { container } = renderWithLabels();
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders with some points labeled', () => {
+      const partialLabels = [xyLabel(0, 0, 0, 'A'), xy(2, 2, 1), xyLabel(0, 2, 2, 'C')];
+      const { container } = renderComponent({
+        labelNode,
+        points: partialLabels,
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders with empty labels', () => {
+      const emptyLabels = [xyLabel(0, 0, 0, ''), xyLabel(2, 2, 1, ''), xyLabel(0, 2, 2, '')];
+      const { container } = renderComponent({
+        labelNode,
+        points: emptyLabels,
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders with long labels', () => {
+      const longLabels = [
+        xyLabel(0, 0, 0, 'Very Long Label A'),
+        xyLabel(2, 2, 1, 'Very Long Label B'),
+        xyLabel(0, 2, 2, 'Very Long Label C'),
+      ];
+      const { container } = renderComponent({
+        labelNode,
+        points: longLabels,
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders without labelNode', () => {
+      const { container } = renderComponent({
+        points: [xyLabel(0, 0, 0, 'A'), xyLabel(2, 2, 1, 'B')],
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders with labelModeEnabled', () => {
+      const { container } = renderWithLabels({ labelModeEnabled: true });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders with labelModeEnabled disabled', () => {
+      const { container } = renderWithLabels({ labelModeEnabled: false });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+  });
+
+  describe('props', () => {
+    it('passes onChange callback', () => {
+      const customOnChange = jest.fn();
+      const { container } = renderComponent({
+        onChange: customOnChange,
+        points: [xy(0, 0, 0), xy(1, 1, 1)],
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('passes onChangeProps callback', () => {
+      const customOnChangeProps = jest.fn();
+      const { container } = renderComponent({
+        onChangeProps: customOnChangeProps,
+        points: [xy(0, 0, 0), xy(1, 1, 1)],
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('passes onClick callback', () => {
+      const onClick = jest.fn();
+      const { container } = renderComponent({
+        onClick,
+        points: [xy(0, 0, 0), xy(1, 1, 1)],
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('passes onClosePolygon callback', () => {
+      const onClosePolygon = jest.fn();
+      const { container } = renderComponent({
+        onClosePolygon,
+        points: [xy(0, 0, 0), xy(1, 1, 1), xy(2, 0, 2)],
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('passes onDragStart callback', () => {
+      const onDragStart = jest.fn();
+      const { container } = renderComponent({
+        onDragStart,
+        points: [xy(0, 0, 0), xy(1, 1, 1)],
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('passes onDragStop callback', () => {
+      const onDragStop = jest.fn();
+      const { container } = renderComponent({
+        onDragStop,
+        points: [xy(0, 0, 0), xy(1, 1, 1)],
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('passes coordinatesOnHover', () => {
+      const { container } = renderComponent({
+        coordinatesOnHover: true,
+        points: [xy(0, 0, 0), xy(1, 1, 1)],
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('passes graphProps', () => {
+      const customGraphProps = graphProps(0, 10, 0, 10);
+      const { container } = renderComponent({
+        graphProps: customGraphProps,
+        points: [xy(5, 5, 0), xy(7, 7, 1)],
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+  });
+
+  describe('polygon shapes', () => {
+    it('renders triangle', () => {
+      const { container } = renderComponent({
+        points: [xy(0, 0, 0), xy(2, 0, 1), xy(1, 2, 2)],
+        closed: true,
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders square', () => {
+      const { container } = renderComponent({
+        points: [xy(0, 0, 0), xy(2, 0, 1), xy(2, 2, 2), xy(0, 2, 3)],
+        closed: true,
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders pentagon', () => {
+      const { container } = renderComponent({
+        points: [xy(1, 0, 0), xy(2, 1, 1), xy(1.5, 2.5, 2), xy(0.5, 2.5, 3), xy(0, 1, 4)],
+        closed: true,
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders hexagon', () => {
+      const { container } = renderComponent({
+        points: [xy(1, 0, 0), xy(2, 0.5, 1), xy(2, 1.5, 2), xy(1, 2, 3), xy(0, 1.5, 4), xy(0, 0.5, 5)],
+        closed: true,
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders irregular polygon', () => {
+      const { container } = renderComponent({
+        points: [xy(0, 0, 0), xy(3, 1, 1), xy(2, 4, 2), xy(-1, 3, 3)],
+        closed: true,
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders concave polygon', () => {
+      const { container } = renderComponent({
+        points: [xy(0, 0, 0), xy(2, 0, 1), xy(2, 2, 2), xy(1, 1, 3), xy(0, 2, 4)],
+        closed: true,
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+  });
+
+  describe('edge cases', () => {
+    it('handles empty points array', () => {
+      const { container } = renderComponent({ points: [] });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('handles points with same coordinates', () => {
+      const { container } = renderComponent({
+        points: [xy(1, 1, 0), xy(1, 1, 1), xy(1, 1, 2)],
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('handles collinear points', () => {
+      const { container } = renderComponent({
+        points: [xy(0, 0, 0), xy(1, 1, 1), xy(2, 2, 2)],
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('handles very close points', () => {
+      const { container } = renderComponent({
+        points: [xy(1, 1, 0), xy(1.001, 1.001, 1), xy(1.002, 1.002, 2)],
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('handles large coordinate values', () => {
+      const { container } = renderComponent({
+        points: [xy(1000, 1000, 0), xy(2000, 1000, 1), xy(1500, 2000, 2)],
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('handles mixed positive and negative coordinates', () => {
+      const { container } = renderComponent({
+        points: [xy(-5, 5, 0), xy(5, 5, 1), xy(5, -5, 2), xy(-5, -5, 3)],
+        closed: true,
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('handles points without index', () => {
+      const { container } = renderComponent({
+        points: [
+          { x: 0, y: 0 },
+          { x: 1, y: 1 },
+          { x: 2, y: 0 },
+        ],
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+  });
+
+  describe('integration', () => {
+    it('renders complete closed polygon with all features', () => {
+      const { container } = renderComponent({
+        points: points,
+        closed: true,
+        labelNode,
+        labelModeEnabled: true,
+        coordinatesOnHover: true,
+        correctness: 'correct',
+        disabled: false,
+        onChange: jest.fn(),
+        onChangeProps: jest.fn(),
+        onClosePolygon: jest.fn(),
+        onClick: jest.fn(),
+        onDragStart: jest.fn(),
+        onDragStop: jest.fn(),
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders building polygon', () => {
+      const { container } = renderComponent({
+        points: [xy(0, 0, 0), xy(1, 1, 1)],
+        building: true,
+        closed: false,
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders disabled polygon with labels', () => {
+      const { container } = renderComponent({
+        points: points,
+        labelNode,
+        disabled: true,
+        closed: true,
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders polygon with incorrect correctness', () => {
+      const { container } = renderComponent({
+        points: points,
+        closed: true,
+        correctness: 'incorrect',
+      });
       expect(container.firstChild).toBeInTheDocument();
     });
   });

package/src/tools/polygon/__tests__/index.test.js

@@ -1,46 +1,163 @@
 import { addPointToArray, tool } from '../index';
+import Polygon from '../component';
 
 const xy = (x, y) => ({ x, y });
 
+/**
+ * Test suite for polygon tool
+ *
+ * Note: equalPoints() uses roundNumber() which rounds to 4 decimal places.
+ * - Values like 1.0001 and 1.0002 are considered DIFFERENT (round to 1.0001 and 1.0002)
+ * - Values like 1.00001 and 1.00002 are considered EQUAL (both round to 1.0000)
+ */
+
 describe('polygon', () => {
   describe('addPointToArray', () => {
     const assertAddPoint = (point, arr, expected) => {
-      it(`returns ${expected} when adding ${point} to ${arr}`, () => {
+      it(`returns expected result when adding point to array`, () => {
         const result = addPointToArray(point, arr);
         expect(result).toEqual(expected);
       });
     };
+
     assertAddPoint(xy(0, 0), [], { closed: false, points: [xy(0, 0)] });
     assertAddPoint(xy(0, 0), [xy(0, 0)], { closed: false, points: [xy(0, 0)] });
     assertAddPoint(xy(1, 1), [xy(0, 0)], {
       closed: false,
       points: [xy(0, 0), xy(1, 1)],
     });
-    assertAddPoint(xy(1, 1), [xy(0, 0)], {
-      closed: false,
-      points: [xy(0, 0), xy(1, 1)],
+
+    it('handles undefined array', () => {
+      const result = addPointToArray(xy(1, 2), undefined);
+      expect(result).toEqual({ points: [xy(1, 2)], closed: false });
+    });
+
+    it('handles null array', () => {
+      const result = addPointToArray(xy(1, 2), null);
+      expect(result).toEqual({ points: [xy(1, 2)], closed: false });
+    });
+
+    it('closes polygon when clicking first point', () => {
+      const firstPoint = xy(1, 2);
+      const points = [firstPoint, xy(3, 4), xy(5, 6)];
+      const result = addPointToArray(firstPoint, points);
+
+      expect(result).toEqual({ points, closed: true });
+    });
+
+    it('does not add duplicate point in middle', () => {
+      const points = [xy(1, 2), xy(3, 4), xy(5, 6)];
+      const result = addPointToArray(points[1], points);
+
+      expect(result).toEqual({ points, closed: false });
+    });
+
+    it('adds new point to array with 2+ points', () => {
+      const points = [xy(0, 0), xy(1, 1)];
+      const newPoint = xy(2, 2);
+      const result = addPointToArray(newPoint, points);
+
+      expect(result).toEqual({
+        points: [...points, newPoint],
+        closed: false,
+      });
+    });
+
+    it('handles points within rounding tolerance', () => {
+      // roundNumber rounds to 4 decimal places
+      // 1.0001 and 1.0002 round to different values after toFixed(4)
+      const firstPoint = xy(1.0001, 2.0001);
+      const closePoint = xy(1.0002, 2.0002);
+      const result = addPointToArray(closePoint, [firstPoint]);
+
+      // Since they round to different values, both points are added
+      expect(result).toEqual({ points: [firstPoint, closePoint], closed: false });
+    });
+
+    it('handles points that round to exactly the same value', () => {
+      // Points that round to exactly the same value after toFixed(4)
+      const firstPoint = xy(1.0001, 2.0001);
+      const samePoint = xy(1.0001, 2.0001);
+      const result = addPointToArray(samePoint, [firstPoint]);
+
+      // Since they round to the same value, point is not added
+      expect(result).toEqual({ points: [firstPoint], closed: false });
     });
   });
 });
 
 describe('tool', () => {
   let t;
+
   beforeEach(() => {
     t = tool();
   });
 
-  it('creates polygon type', () => {
-    expect(t.type).toEqual('polygon');
+  describe('tool structure', () => {
+    it('creates polygon type', () => {
+      expect(t.type).toEqual('polygon');
+    });
+
+    it('has Component property', () => {
+      expect(t.Component).toBe(Polygon);
+    });
+
+    it('has complete method', () => {
+      expect(typeof t.complete).toBe('function');
+    });
+
+    it('has addPoint method', () => {
+      expect(typeof t.addPoint).toBe('function');
+    });
   });
 
   describe('complete', () => {
     it('closes polygon', () => {
       expect(t.complete()).toEqual({ building: false, closed: true });
     });
+
+    it('marks polygon as not building', () => {
+      const mark = {
+        type: 'polygon',
+        points: [xy(1, 2), xy(3, 4)],
+        closed: false,
+        building: true,
+      };
+      const result = t.complete(null, mark);
+
+      expect(result.building).toBe(false);
+    });
+
+    it('marks polygon as closed', () => {
+      const mark = {
+        type: 'polygon',
+        points: [xy(1, 2), xy(3, 4)],
+        closed: false,
+        building: true,
+      };
+      const result = t.complete(null, mark);
+
+      expect(result.closed).toBe(true);
+    });
+
+    it('preserves other mark properties', () => {
+      const mark = {
+        type: 'polygon',
+        points: [xy(1, 2)],
+        closed: false,
+        building: true,
+        label: 'Test',
+        color: 'red',
+      };
+      const result = t.complete(null, mark);
+
+      expect(result.label).toBe('Test');
+      expect(result.color).toBe('red');
+    });
   });
 
   describe('addPoint', () => {
-    it('creates new point', () => {
+    it('creates new polygon with first point', () => {
       const mark = t.addPoint({ x: 0, y: 0 });
       expect(mark).toEqual({
         type: 'polygon',
@@ -50,7 +167,7 @@ describe('tool', () => {
       });
     });
 
-    it('adds the point', () => {
+    it('adds second point to existing mark', () => {
       const mark = t.addPoint({ x: 0, y: 0 }, { points: [{ x: 1, y: 1 }] });
       expect(mark).toEqual({
         building: true,
@@ -61,5 +178,117 @@ describe('tool', () => {
         ],
       });
     });
+
+    it('creates mark with building flag true', () => {
+      const mark = t.addPoint(xy(1, 2));
+      expect(mark.building).toBe(true);
+    });
+
+    it('creates mark with closed flag false', () => {
+      const mark = t.addPoint(xy(1, 2));
+      expect(mark.closed).toBe(false);
+    });
+
+    it('adds multiple points sequentially', () => {
+      let mark = t.addPoint(xy(0, 0));
+      mark = t.addPoint(xy(1, 1), mark);
+      mark = t.addPoint(xy(2, 2), mark);
+
+      expect(mark.points).toHaveLength(3);
+      expect(mark.points).toEqual([xy(0, 0), xy(1, 1), xy(2, 2)]);
+    });
+
+    it('closes polygon when clicking first point', () => {
+      const firstPoint = xy(1, 2);
+      let mark = t.addPoint(firstPoint);
+      mark = t.addPoint(xy(3, 4), mark);
+      mark = t.addPoint(xy(5, 6), mark);
+      mark = t.addPoint(firstPoint, mark);
+
+      expect(mark.closed).toBe(true);
+      expect(mark.building).toBe(false);
+    });
+
+    it('does not add duplicate points', () => {
+      const point = xy(1, 2);
+      let mark = t.addPoint(point);
+      mark = t.addPoint(xy(3, 4), mark);
+      // Adding the first point again would close it
+      // Let's add it one more time after closing to test duplicate handling
+      mark = t.addPoint(point, mark);
+
+      // When we add the first point to a polygon with 2+ points, it closes
+      expect(mark.points).toHaveLength(2);
+      expect(mark.closed).toBe(true);
+      expect(mark.building).toBe(false);
+    });
+
+    it('does not add duplicate non-first points', () => {
+      const firstPoint = xy(1, 2);
+      const secondPoint = xy(3, 4);
+      let mark = t.addPoint(firstPoint);
+      mark = t.addPoint(secondPoint, mark);
+      mark = t.addPoint(xy(5, 6), mark);
+      // Try to add the second point again (not the first point)
+      mark = t.addPoint(secondPoint, mark);
+
+      // Should not add the duplicate point
+      expect(mark.points).toHaveLength(3);
+      expect(mark.points).toEqual([firstPoint, secondPoint, xy(5, 6)]);
+      expect(mark.closed).toBe(false);
+    });
+
+    it('preserves mark properties when adding points', () => {
+      const mark = {
+        type: 'polygon',
+        points: [xy(1, 2)],
+        closed: false,
+        building: true,
+        label: 'My Shape',
+      };
+
+      const result = t.addPoint(xy(3, 4), mark);
+      expect(result.label).toBe('My Shape');
+    });
+  });
+
+  describe('integration scenarios', () => {
+    it('creates complete triangle', () => {
+      const p1 = xy(0, 0);
+      const p2 = xy(1, 0);
+      const p3 = xy(0.5, 1);
+
+      let mark = t.addPoint(p1);
+      mark = t.addPoint(p2, mark);
+      mark = t.addPoint(p3, mark);
+      mark = t.addPoint(p1, mark);
+
+      expect(mark.points).toEqual([p1, p2, p3]);
+      expect(mark.closed).toBe(true);
+      expect(mark.building).toBe(false);
+    });
+
+    it('creates complete square', () => {
+      const points = [xy(0, 0), xy(1, 0), xy(1, 1), xy(0, 1)];
+
+      let mark = t.addPoint(points[0]);
+      points.slice(1).forEach((p) => {
+        mark = t.addPoint(p, mark);
+      });
+      mark = t.addPoint(points[0], mark);
+
+      expect(mark.points).toEqual(points);
+      expect(mark.closed).toBe(true);
+    });
+
+    it('can force complete without closing', () => {
+      let mark = t.addPoint(xy(0, 0));
+      mark = t.addPoint(xy(1, 1), mark);
+      mark = t.complete(null, mark);
+
+      expect(mark.closed).toBe(true);
+      expect(mark.building).toBe(false);
+      expect(mark.points).toHaveLength(2);
+    });
   });
 });