@pie-lib/graphing-solution-set 4.0.12 → 4.1.0-beta

package/lib/tools/shared/point/__tests__/arrow.test.js

@@ -0,0 +1,619 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _testUtils = require("@pie-lib/test-utils");
+var _react = _interopRequireDefault(require("react"));
+var _arrow = _interopRequireDefault(require("../arrow"));
+var _utils = require("../../../../__tests__/utils");
+var _utils2 = require("../../../../utils");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+jest.mock('../../../../utils', function () {
+  return _objectSpread(_objectSpread({}, jest.requireActual('../../../../utils')), {}, {
+    thinnerShapesNeeded: jest.fn(function () {
+      return false;
+    })
+  });
+});
+describe('Arrow', function () {
+  var onChange = jest.fn();
+  var renderComponent = function renderComponent(extras) {
+    var defaults = {
+      classes: {},
+      className: 'arrow-class',
+      onChange: onChange,
+      graphProps: (0, _utils.graphProps)(),
+      x: 5,
+      y: 10,
+      angle: 45
+    };
+    var props = _objectSpread(_objectSpread({}, defaults), extras);
+    return (0, _testUtils.render)(/*#__PURE__*/_react["default"].createElement(_arrow["default"], props));
+  };
+  beforeEach(function () {
+    onChange = jest.fn();
+    _utils2.thinnerShapesNeeded.mockReturnValue(false);
+  });
+  describe('rendering', function () {
+    it('renders without crashing', function () {
+      var _renderComponent = renderComponent(),
+        container = _renderComponent.container;
+      expect(container.firstChild).toBeInTheDocument();
+    });
+    it('renders a g element with correct class names', function () {
+      var _renderComponent2 = renderComponent({
+          classes: {
+            point: 'point-class'
+          },
+          className: 'custom-class'
+        }),
+        container = _renderComponent2.container;
+      var gElement = container.querySelector('g');
+      expect(gElement).toBeInTheDocument();
+      expect(gElement).toHaveClass('point-class');
+      expect(gElement).toHaveClass('custom-class');
+    });
+    it('renders ArrowHead component', function () {
+      var _renderComponent3 = renderComponent(),
+        container = _renderComponent3.container;
+      var polygon = container.querySelector('polygon');
+      expect(polygon).toBeInTheDocument();
+    });
+    it('applies disabled class when disabled is true', function () {
+      var _renderComponent4 = renderComponent({
+          classes: {
+            point: 'point-class',
+            disabled: 'disabled-class'
+          },
+          disabled: true
+        }),
+        container = _renderComponent4.container;
+      var gElement = container.querySelector('g');
+      expect(gElement).toHaveClass('disabled-class');
+    });
+    it('does not apply disabled class when disabled is false', function () {
+      var _renderComponent5 = renderComponent({
+          classes: {
+            point: 'point-class',
+            disabled: 'disabled-class'
+          },
+          disabled: false
+        }),
+        container = _renderComponent5.container;
+      var gElement = container.querySelector('g');
+      expect(gElement).not.toHaveClass('disabled-class');
+    });
+    it('applies correctness class when provided', function () {
+      var _renderComponent6 = renderComponent({
+          classes: {
+            point: 'point-class',
+            correct: 'correct-class'
+          },
+          correctness: 'correct'
+        }),
+        container = _renderComponent6.container;
+      var gElement = container.querySelector('g');
+      expect(gElement).toHaveClass('correct-class');
+    });
+    it('applies incorrect correctness class', function () {
+      var _renderComponent7 = renderComponent({
+          classes: {
+            point: 'point-class',
+            incorrect: 'incorrect-class'
+          },
+          correctness: 'incorrect'
+        }),
+        container = _renderComponent7.container;
+      var gElement = container.querySelector('g');
+      expect(gElement).toHaveClass('incorrect-class');
+    });
+  });
+  describe('size calculation', function () {
+    it('uses size 14 when thinnerShapesNeeded returns false', function () {
+      _utils2.thinnerShapesNeeded.mockReturnValue(false);
+      var _renderComponent8 = renderComponent({
+          x: 0,
+          y: 0
+        }),
+        container = _renderComponent8.container;
+      var polygon = container.querySelector('polygon');
+
+      // Expected points: "0,0 -14,-7 -14,7"
+      expect(polygon).toHaveAttribute('points');
+      var points = polygon.getAttribute('points');
+      expect(points).toContain('-14');
+    });
+    it('uses size 12 when thinnerShapesNeeded returns true', function () {
+      _utils2.thinnerShapesNeeded.mockReturnValue(true);
+      var _renderComponent9 = renderComponent({
+          x: 0,
+          y: 0
+        }),
+        container = _renderComponent9.container;
+      var polygon = container.querySelector('polygon');
+
+      // Expected points: "0,0 -12,-6 -12,6"
+      expect(polygon).toHaveAttribute('points');
+      var points = polygon.getAttribute('points');
+      expect(points).toContain('-12');
+    });
+    it('calls thinnerShapesNeeded with graphProps', function () {
+      var gp = (0, _utils.graphProps)();
+      renderComponent({
+        graphProps: gp
+      });
+      expect(_utils2.thinnerShapesNeeded).toHaveBeenCalledWith(gp);
+    });
+  });
+  describe('coordinate scaling', function () {
+    it('scales x and y coordinates using graphProps.scale', function () {
+      var mockScale = {
+        x: jest.fn(function (n) {
+          return n * 10;
+        }),
+        y: jest.fn(function (n) {
+          return n * 20;
+        })
+      };
+      var gp = _objectSpread(_objectSpread({}, (0, _utils.graphProps)()), {}, {
+        scale: mockScale
+      });
+      renderComponent({
+        x: 5,
+        y: 10,
+        graphProps: gp
+      });
+      expect(mockScale.x).toHaveBeenCalledWith(5);
+      expect(mockScale.y).toHaveBeenCalledWith(10);
+    });
+    it('renders arrow with scaled coordinates', function () {
+      var mockScale = {
+        x: jest.fn(function (n) {
+          return n * 2;
+        }),
+        y: jest.fn(function (n) {
+          return n * 3;
+        })
+      };
+      var gp = _objectSpread(_objectSpread({}, (0, _utils.graphProps)()), {}, {
+        scale: mockScale
+      });
+      var _renderComponent0 = renderComponent({
+          x: 5,
+          y: 10,
+          graphProps: gp,
+          angle: 0
+        }),
+        container = _renderComponent0.container;
+      var polygon = container.querySelector('polygon');
+
+      // scaledX = 5 * 2 = 10, scaledY = 10 * 3 = 30
+      // Expected points: "10,30 -4,23 -4,37" (with size 14)
+      var points = polygon.getAttribute('points');
+      expect(points).toContain('10');
+      expect(points).toContain('30');
+    });
+  });
+  describe('angle rotation', function () {
+    it('applies rotation transform with negative angle', function () {
+      var _renderComponent1 = renderComponent({
+          x: 5,
+          y: 10,
+          angle: 45
+        }),
+        container = _renderComponent1.container;
+      var polygon = container.querySelector('polygon');
+      var transform = polygon.getAttribute('transform');
+
+      // Angle should be negated: rotate(-45, 5, 10)
+      expect(transform).toContain('rotate(-45');
+      expect(transform).toContain('5');
+      expect(transform).toContain('10');
+    });
+    it('handles zero angle', function () {
+      var _renderComponent10 = renderComponent({
+          x: 3,
+          y: 7,
+          angle: 0
+        }),
+        container = _renderComponent10.container;
+      var polygon = container.querySelector('polygon');
+      var transform = polygon.getAttribute('transform');
+
+      // will convert -0 to 0
+      expect(transform).toMatch(/rotate\((-)?0/);
+      expect(transform).toContain('3');
+      expect(transform).toContain('7');
+    });
+    it('handles negative angle', function () {
+      var _renderComponent11 = renderComponent({
+          x: 2,
+          y: 4,
+          angle: -30
+        }),
+        container = _renderComponent11.container;
+      var polygon = container.querySelector('polygon');
+      var transform = polygon.getAttribute('transform');
+
+      // -(-30) = 30
+      expect(transform).toContain('rotate(30');
+      expect(transform).toContain('2');
+      expect(transform).toContain('4');
+    });
+    it('handles 360 degree angle', function () {
+      var _renderComponent12 = renderComponent({
+          x: 1,
+          y: 1,
+          angle: 360
+        }),
+        container = _renderComponent12.container;
+      var polygon = container.querySelector('polygon');
+      var transform = polygon.getAttribute('transform');
+      expect(transform).toContain('rotate(-360');
+    });
+  });
+  describe('arrow points calculation', function () {
+    it('calculates correct points for arrow head', function () {
+      _utils2.thinnerShapesNeeded.mockReturnValue(false);
+      var _renderComponent13 = renderComponent({
+          x: 0,
+          y: 0,
+          angle: 0
+        }),
+        container = _renderComponent13.container;
+      var polygon = container.querySelector('polygon');
+
+      // size = 14
+      // points = "0,0 -14,-7 -14, 7" (note the space after comma in the template literal)
+      var points = polygon.getAttribute('points');
+      expect(points).toContain('0,0');
+      expect(points).toContain('-14,-7');
+      expect(points).toMatch(/-14,\s*7/);
+    });
+    it('calculates points with scaled coordinates', function () {
+      _utils2.thinnerShapesNeeded.mockReturnValue(false);
+      var mockScale = {
+        x: jest.fn(function (n) {
+          return n;
+        }),
+        y: jest.fn(function (n) {
+          return n;
+        })
+      };
+      var gp = _objectSpread(_objectSpread({}, (0, _utils.graphProps)()), {}, {
+        scale: mockScale
+      });
+      var _renderComponent14 = renderComponent({
+          x: 10,
+          y: 20,
+          graphProps: gp
+        }),
+        container = _renderComponent14.container;
+      var polygon = container.querySelector('polygon');
+
+      // scaledX = 10, scaledY = 20, size = 14
+      // points = "10,20 -4,13 -4, 27" (note the space after comma in the template literal)
+      var points = polygon.getAttribute('points');
+      expect(points).toContain('10,20');
+      expect(points).toContain('-4,13');
+      expect(points).toMatch(/-4,\s*27/);
+    });
+  });
+  describe('props handling', function () {
+    it('passes through additional props to g element', function () {
+      var _renderComponent15 = renderComponent({
+          'data-test': 'arrow-test',
+          role: 'graphics-symbol'
+        }),
+        container = _renderComponent15.container;
+      var gElement = container.querySelector('g');
+      expect(gElement).toHaveAttribute('data-test', 'arrow-test');
+      expect(gElement).toHaveAttribute('role', 'graphics-symbol');
+    });
+    it('excludes filtered props from g element', function () {
+      var _renderComponent16 = renderComponent({
+          x: 5,
+          y: 10,
+          angle: 45,
+          disabled: false,
+          correctness: 'correct',
+          graphProps: (0, _utils.graphProps)()
+        }),
+        container = _renderComponent16.container;
+      var gElement = container.querySelector('g');
+
+      // These props should not be passed to the g element
+      expect(gElement).not.toHaveAttribute('x');
+      expect(gElement).not.toHaveAttribute('y');
+      expect(gElement).not.toHaveAttribute('angle');
+      expect(gElement).not.toHaveAttribute('disabled');
+      expect(gElement).not.toHaveAttribute('correctness');
+      expect(gElement).not.toHaveAttribute('graphProps');
+    });
+  });
+  describe('edge cases', function () {
+    it('handles zero coordinates', function () {
+      var _renderComponent17 = renderComponent({
+          x: 0,
+          y: 0,
+          angle: 0
+        }),
+        container = _renderComponent17.container;
+      var polygon = container.querySelector('polygon');
+      expect(polygon).toBeInTheDocument();
+      expect(polygon.getAttribute('points')).toBeTruthy();
+      expect(polygon.getAttribute('transform')).toBeTruthy();
+    });
+    it('handles negative coordinates', function () {
+      var _renderComponent18 = renderComponent({
+          x: -5,
+          y: -10,
+          angle: 0
+        }),
+        container = _renderComponent18.container;
+      var polygon = container.querySelector('polygon');
+      expect(polygon).toBeInTheDocument();
+      expect(polygon.getAttribute('points')).toBeTruthy();
+      expect(polygon.getAttribute('transform')).toBeTruthy();
+    });
+    it('handles large coordinates', function () {
+      var _renderComponent19 = renderComponent({
+          x: 1000,
+          y: 2000,
+          angle: 0
+        }),
+        container = _renderComponent19.container;
+      var polygon = container.querySelector('polygon');
+      expect(polygon).toBeInTheDocument();
+    });
+    it('handles fractional coordinates', function () {
+      var _renderComponent20 = renderComponent({
+          x: 3.5,
+          y: 7.25,
+          angle: 22.5
+        }),
+        container = _renderComponent20.container;
+      var polygon = container.querySelector('polygon');
+      expect(polygon).toBeInTheDocument();
+      expect(polygon.getAttribute('transform')).toContain('rotate(-22.5');
+    });
+    it('renders with empty classes prop', function () {
+      var _render = (0, _testUtils.render)(/*#__PURE__*/_react["default"].createElement(_arrow["default"], {
+          x: 5,
+          y: 10,
+          angle: 45,
+          graphProps: (0, _utils.graphProps)(),
+          classes: {}
+        })),
+        container = _render.container;
+      var gElement = container.querySelector('g');
+      expect(gElement).toBeInTheDocument();
+    });
+    it('renders without className prop', function () {
+      var _render2 = (0, _testUtils.render)(/*#__PURE__*/_react["default"].createElement(_arrow["default"], {
+          x: 5,
+          y: 10,
+          angle: 45,
+          graphProps: (0, _utils.graphProps)(),
+          classes: {}
+        })),
+        container = _render2.container;
+      var gElement = container.querySelector('g');
+      expect(gElement).toBeInTheDocument();
+    });
+  });
+  describe('graphProps integration', function () {
+    it('works with different domain and range values', function () {
+      var gp = (0, _utils.graphProps)(-10, 10, -20, 20);
+      var _renderComponent21 = renderComponent({
+          graphProps: gp
+        }),
+        container = _renderComponent21.container;
+      expect(container.querySelector('polygon')).toBeInTheDocument();
+      expect(_utils2.thinnerShapesNeeded).toHaveBeenCalledWith(gp);
+    });
+    it('works with custom size in graphProps', function () {
+      var gp = _objectSpread(_objectSpread({}, (0, _utils.graphProps)()), {}, {
+        size: {
+          width: 800,
+          height: 600
+        }
+      });
+      var _renderComponent22 = renderComponent({
+          graphProps: gp
+        }),
+        container = _renderComponent22.container;
+      expect(container.querySelector('polygon')).toBeInTheDocument();
+    });
+    it('handles graphProps with small step values', function () {
+      var gp = _objectSpread(_objectSpread({}, (0, _utils.graphProps)()), {}, {
+        domain: {
+          min: 0,
+          max: 10,
+          step: 0.1
+        },
+        range: {
+          min: 0,
+          max: 10,
+          step: 0.1
+        }
+      });
+      _utils2.thinnerShapesNeeded.mockReturnValue(true);
+      var _renderComponent23 = renderComponent({
+          graphProps: gp
+        }),
+        container = _renderComponent23.container;
+      var polygon = container.querySelector('polygon');
+
+      // Should use size 12 for thinner shapes
+      expect(polygon).toBeInTheDocument();
+      expect(_utils2.thinnerShapesNeeded).toHaveBeenCalledWith(gp);
+    });
+  });
+  describe('multiple correctness states', function () {
+    it('handles partial correctness', function () {
+      var _renderComponent24 = renderComponent({
+          classes: {
+            point: 'point-class',
+            partial: 'partial-class'
+          },
+          correctness: 'partial'
+        }),
+        container = _renderComponent24.container;
+      var gElement = container.querySelector('g');
+      expect(gElement).toHaveClass('partial-class');
+    });
+    it('handles undefined correctness', function () {
+      var _renderComponent25 = renderComponent({
+          classes: {
+            point: 'point-class'
+          },
+          correctness: undefined
+        }),
+        container = _renderComponent25.container;
+      var gElement = container.querySelector('g');
+      expect(gElement).toHaveClass('point-class');
+    });
+    it('handles null correctness', function () {
+      var _renderComponent26 = renderComponent({
+          classes: {
+            point: 'point-class'
+          },
+          correctness: null
+        }),
+        container = _renderComponent26.container;
+      var gElement = container.querySelector('g');
+      expect(gElement).toHaveClass('point-class');
+    });
+  });
+  describe('combined states', function () {
+    it('handles disabled and correct states together', function () {
+      var _renderComponent27 = renderComponent({
+          classes: {
+            point: 'point-class',
+            disabled: 'disabled-class',
+            correct: 'correct-class'
+          },
+          disabled: true,
+          correctness: 'correct'
+        }),
+        container = _renderComponent27.container;
+      var gElement = container.querySelector('g');
+      expect(gElement).toHaveClass('point-class');
+      expect(gElement).toHaveClass('disabled-class');
+      expect(gElement).toHaveClass('correct-class');
+    });
+    it('handles disabled and incorrect states together', function () {
+      var _renderComponent28 = renderComponent({
+          classes: {
+            point: 'point-class',
+            disabled: 'disabled-class',
+            incorrect: 'incorrect-class'
+          },
+          disabled: true,
+          correctness: 'incorrect'
+        }),
+        container = _renderComponent28.container;
+      var gElement = container.querySelector('g');
+      expect(gElement).toHaveClass('point-class');
+      expect(gElement).toHaveClass('disabled-class');
+      expect(gElement).toHaveClass('incorrect-class');
+    });
+  });
+  describe('re-rendering', function () {
+    it('updates when x coordinate changes', function () {
+      var _renderComponent29 = renderComponent({
+          x: 5,
+          y: 10,
+          angle: 0
+        }),
+        container = _renderComponent29.container,
+        rerender = _renderComponent29.rerender;
+      var polygon = container.querySelector('polygon');
+      var initialPoints = polygon.getAttribute('points');
+      rerender(/*#__PURE__*/_react["default"].createElement(_arrow["default"], {
+        x: 15,
+        y: 10,
+        angle: 0,
+        graphProps: (0, _utils.graphProps)(),
+        classes: {},
+        className: "arrow-class"
+      }));
+      polygon = container.querySelector('polygon');
+      var newPoints = polygon.getAttribute('points');
+      expect(newPoints).not.toBe(initialPoints);
+    });
+    it('updates when y coordinate changes', function () {
+      var _renderComponent30 = renderComponent({
+          x: 5,
+          y: 10,
+          angle: 0
+        }),
+        container = _renderComponent30.container,
+        rerender = _renderComponent30.rerender;
+      var polygon = container.querySelector('polygon');
+      var initialPoints = polygon.getAttribute('points');
+      rerender(/*#__PURE__*/_react["default"].createElement(_arrow["default"], {
+        x: 5,
+        y: 20,
+        angle: 0,
+        graphProps: (0, _utils.graphProps)(),
+        classes: {},
+        className: "arrow-class"
+      }));
+      polygon = container.querySelector('polygon');
+      var newPoints = polygon.getAttribute('points');
+      expect(newPoints).not.toBe(initialPoints);
+    });
+    it('updates when angle changes', function () {
+      var _renderComponent31 = renderComponent({
+          x: 5,
+          y: 10,
+          angle: 0
+        }),
+        container = _renderComponent31.container,
+        rerender = _renderComponent31.rerender;
+      var polygon = container.querySelector('polygon');
+      var initialTransform = polygon.getAttribute('transform');
+      rerender(/*#__PURE__*/_react["default"].createElement(_arrow["default"], {
+        x: 5,
+        y: 10,
+        angle: 90,
+        graphProps: (0, _utils.graphProps)(),
+        classes: {},
+        className: "arrow-class"
+      }));
+      polygon = container.querySelector('polygon');
+      var newTransform = polygon.getAttribute('transform');
+      expect(newTransform).not.toBe(initialTransform);
+      expect(newTransform).toContain('rotate(-90');
+    });
+    it('updates when thinnerShapesNeeded result changes', function () {
+      _utils2.thinnerShapesNeeded.mockReturnValue(false);
+      var _renderComponent32 = renderComponent({
+          x: 0,
+          y: 0,
+          angle: 0
+        }),
+        container = _renderComponent32.container,
+        rerender = _renderComponent32.rerender;
+      var polygon = container.querySelector('polygon');
+      var initialPoints = polygon.getAttribute('points');
+      _utils2.thinnerShapesNeeded.mockReturnValue(true);
+      rerender(/*#__PURE__*/_react["default"].createElement(_arrow["default"], {
+        x: 0,
+        y: 0,
+        angle: 0,
+        graphProps: (0, _utils.graphProps)(),
+        classes: {},
+        className: "arrow-class"
+      }));
+      polygon = container.querySelector('polygon');
+      var newPoints = polygon.getAttribute('points');
+      // Points should change due to size change (14 vs 12)
+      expect(newPoints).not.toBe(initialPoints);
+    });
+  });
+});
+//# sourceMappingURL=arrow.test.js.map